diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss index 4f304e32bb..db7cce98da 100644 --- a/aio/src/styles/2-modules/_api-pages.scss +++ b/aio/src/styles/2-modules/_api-pages.scss @@ -33,6 +33,7 @@ .method-table, .option-table, .list-table { td > code { background-color: inherit; + white-space: pre; } .with-github-links { @@ -74,19 +75,6 @@ margin: 6px 0 0 10px; } - .properties-table { - font-size: 14px; - - thead th { - &:nth-child(1) { - width: 20%; - } - &:nth-child(2) { - width: 20%; - } - } - } - .parameters-table { margin-top: 0; font-size: 14px; @@ -126,6 +114,10 @@ } } } + + .property-name { + font-weight: bold; + } } .deprecated-api-item { diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js index 23893c7adf..797692aed7 100644 --- a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js +++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.js @@ -25,62 +25,59 @@ module.exports = function matchUpDirectiveDecorators() { doc.exportAs = stripQuotes(doc.directiveOptions.exportAs); doc.exportAsArray = doc.exportAs ? doc.exportAs.split(',') : []; - doc.inputs = getBindingInfo(doc.directiveOptions.inputs, doc.members, 'Input'); - doc.outputs = getBindingInfo(doc.directiveOptions.outputs, doc.members, 'Output'); + attachBindingInfo(doc.directiveOptions.inputs, doc.members, 'Input'); + attachBindingInfo(doc.directiveOptions.outputs, doc.members, 'Output'); } }); } }; }; -function getBindingInfo(directiveBindings, members, bindingType) { +function attachBindingInfo(directiveBindings, members, bindingType) { const bindings = {}; - // Parse the bindings from the directive decorator - if (directiveBindings) { - directiveBindings.forEach(function(binding) { - const bindingInfo = parseBinding(binding); - bindings[bindingInfo.propertyName] = bindingInfo; - }); - } - if (members) { + // Parse the bindings from the directive decorator + if (directiveBindings) { + directiveBindings.forEach(function(binding) { + const bindingInfo = parseBinding(bindingType, binding); + bindings[bindingInfo.propertyName] = bindingInfo; + }); + } + members.forEach(function(member) { if (member.decorators) { // Search for members with binding decorators member.decorators.forEach(function(decorator) { if (decorator.name === bindingType) { - bindings[member.name] = createBindingInfo(member.name, decorator.arguments[0] || member.name); + bindings[member.name] = createBindingInfo(bindingType, member.name, decorator.arguments[0] || member.name); } }); } - - // Now ensure that any bindings have the associated member attached - // Note that this binding could have come from the directive decorator + // Attach binding info to the member + // Note: this may have come from the `@Directive` decorator or from a property decorator such as `@Input`. if (bindings[member.name]) { - bindings[member.name].memberDoc = member; + member.boundTo = bindings[member.name]; } }); } - - // Convert the map back to an array - return Object.keys(bindings).map(function(key) { return bindings[key]; }); } function stripQuotes(value) { return (typeof(value) === 'string') ? value.trim().replace(/^(['"])(.*)\1$/, '$2') : value; } -function parseBinding(option) { +function parseBinding(bindingType, option) { // Directive decorator bindings are of the form: "propName : bindingName" (bindingName is optional) const optionPair = option.split(':'); const propertyName = optionPair[0].trim(); const bindingName = (optionPair[1] || '').trim() || propertyName; - return createBindingInfo(propertyName, bindingName); + return createBindingInfo(bindingType, propertyName, bindingName); } -function createBindingInfo(propertyName, bindingName) { +function createBindingInfo(bindingType, propertyName, bindingName) { return { + type: bindingType, propertyName: stripQuotes(propertyName), bindingName: stripQuotes(bindingName) }; diff --git a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js index 6a266203d5..b4d84f6a53 100644 --- a/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js +++ b/aio/tools/transforms/angular-api-package/processors/matchUpDirectiveDecorators.spec.js @@ -59,7 +59,7 @@ describe('matchUpDirectiveDecorators processor', () => { }); it('should extract inputs and outputs from the directive decorator', () => { - const docs = [{ + const doc = { docType: 'directive', directiveOptions: { inputs: ['in1:in2', 'in3', ' in4:in5 ', ' in6 '], @@ -70,28 +70,30 @@ describe('matchUpDirectiveDecorators processor', () => { { name: 'in3' }, { name: 'in4' }, { name: 'in6' }, + { name: 'prop1' }, { name: 'out1' }, { name: 'out2' }, - { name: 'out4' } + { name: 'out4' }, + { name: 'prop2' }, ] - }]; - processorFactory().$process(docs); - expect(docs[0].inputs).toEqual([ - { propertyName: 'in1', bindingName: 'in2', memberDoc: docs[0].members[0] }, - { propertyName: 'in3', bindingName: 'in3', memberDoc: docs[0].members[1] }, - { propertyName: 'in4', bindingName: 'in5', memberDoc: docs[0].members[2] }, - { propertyName: 'in6', bindingName: 'in6', memberDoc: docs[0].members[3] } - ]); + }; - expect(docs[0].outputs).toEqual([ - { propertyName: 'out1', bindingName: 'out1', memberDoc: docs[0].members[4] }, - { propertyName: 'out2', bindingName: 'out3', memberDoc: docs[0].members[5] }, - { propertyName: 'out4', bindingName: 'out4', memberDoc: docs[0].members[6] } + processorFactory().$process([doc]); + expect(doc.members).toEqual([ + { name: 'in1', boundTo: { type: 'Input', propertyName: 'in1', bindingName: 'in2' } }, + { name: 'in3', boundTo: { type: 'Input', propertyName: 'in3', bindingName: 'in3' } }, + { name: 'in4', boundTo: { type: 'Input', propertyName: 'in4', bindingName: 'in5' } }, + { name: 'in6', boundTo: { type: 'Input', propertyName: 'in6', bindingName: 'in6' }}, + { name: 'prop1' }, + { name: 'out1', boundTo: { type: 'Output', propertyName: 'out1', bindingName: 'out1' } }, + { name: 'out2', boundTo: { type: 'Output', propertyName: 'out2', bindingName: 'out3' } }, + { name: 'out4', boundTo: { type: 'Output', propertyName: 'out4', bindingName: 'out4' }}, + { name: 'prop2' }, ]); }); it('should extract inputs and outputs from decorated properties', () => { - const docs = [{ + const doc = { docType: 'directive', directiveOptions: {}, members: [ @@ -100,21 +102,18 @@ describe('matchUpDirectiveDecorators processor', () => { { name: 'c1', decorators: [{ name: 'Input', arguments: [] }] }, { name: 'd1', decorators: [{ name: 'Output', arguments: [] }] }, ] - }]; - processorFactory().$process(docs); - expect(docs[0].inputs).toEqual([ - { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] }, - { propertyName: 'c1', bindingName: 'c1', memberDoc: docs[0].members[2] } - ]); - - expect(docs[0].outputs).toEqual([ - { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[1] }, - { propertyName: 'd1', bindingName: 'd1', memberDoc: docs[0].members[3] } + }; + processorFactory().$process([doc]); + expect(doc.members).toEqual([ + { name: 'a1', decorators: [{ name: 'Input', arguments: ['a2'] }], boundTo: { type: 'Input', propertyName: 'a1', bindingName: 'a2' } }, + { name: 'b1', decorators: [{ name: 'Output', arguments: ['b2'] }], boundTo: { type: 'Output', propertyName: 'b1', bindingName: 'b2' } }, + { name: 'c1', decorators: [{ name: 'Input', arguments: [] }], boundTo: { type: 'Input', propertyName: 'c1', bindingName: 'c1' } }, + { name: 'd1', decorators: [{ name: 'Output', arguments: [] }], boundTo: { type: 'Output', propertyName: 'd1', bindingName: 'd1' } }, ]); }); it('should merge directive inputs/outputs with decorator property inputs/outputs', () => { - const docs = [{ + const doc = { docType: 'directive', directiveOptions: { inputs: ['a1:a2'], @@ -126,16 +125,13 @@ describe('matchUpDirectiveDecorators processor', () => { { name: 'b1' }, { name: 'b3', decorators: [{ name: 'Output', arguments: ['b4'] }] }, ] - }]; - processorFactory().$process(docs); - expect(docs[0].inputs).toEqual([ - { propertyName: 'a1', bindingName: 'a2', memberDoc: docs[0].members[0] }, - { propertyName: 'a3', bindingName: 'a4', memberDoc: docs[0].members[1] } - ]); - - expect(docs[0].outputs).toEqual([ - { propertyName: 'b1', bindingName: 'b2', memberDoc: docs[0].members[2] }, - { propertyName: 'b3', bindingName: 'b4', memberDoc: docs[0].members[3] } + }; + processorFactory().$process([doc]); + expect(doc.members).toEqual([ + { name: 'a1', boundTo: { type: 'Input', propertyName: 'a1', bindingName: 'a2' } }, + { name: 'a3', boundTo: { type: 'Input', propertyName: 'a3', bindingName: 'a4' }, decorators: [{ name: 'Input', arguments: ['a4'] }] }, + { name: 'b1', boundTo: { type: 'Output', propertyName: 'b1', bindingName: 'b2' } }, + { name: 'b3', boundTo: { type: 'Output', propertyName: 'b3', bindingName: 'b4' }, decorators: [{ name: 'Output', arguments: ['b4'] }] }, ]); }); }); diff --git a/aio/tools/transforms/templates/api/directive.template.html b/aio/tools/transforms/templates/api/directive.template.html index a33d47e5dd..e84966307a 100644 --- a/aio/tools/transforms/templates/api/directive.template.html +++ b/aio/tools/transforms/templates/api/directive.template.html @@ -1,4 +1,4 @@ -{% import "lib/directiveHelpers.html" as directiveHelper -%} +{% import "lib/memberHelpers.html" as memberHelpers -%} {% extends 'class.template.html' -%} {% block overview %}{% endblock %} @@ -7,9 +7,7 @@ {% include "includes/ngmodule.html" %} {% include "includes/selectors.html" %} - {$ directiveHelper.renderBindings(doc.inputs, 'inputs', 'input', 'Inputs') $} - - {$ directiveHelper.renderBindings(doc.outputs, 'outputs', 'output', 'Outputs') $} + {$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $} {% include "includes/export-as.html" %} @@ -21,8 +19,9 @@ {% endif %} -

Class

- {% include "includes/class-members.html" %} -{% endblock %} + {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $} + {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $} + {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $} + {% endblock %} {% block endNotes %}{% endblock %} \ No newline at end of file diff --git a/aio/tools/transforms/templates/api/lib/directiveHelpers.html b/aio/tools/transforms/templates/api/lib/directiveHelpers.html deleted file mode 100644 index 5e0ddf91e6..0000000000 --- a/aio/tools/transforms/templates/api/lib/directiveHelpers.html +++ /dev/null @@ -1,40 +0,0 @@ -{% macro renderBindings(bindings, cssContainerClass, cssItemClass, title) -%} -{% set hasDescription = bindings | hasValues('memberDoc.description') %} -{% set hasTypes = bindings | hasValues('memberDoc.type') %} -{% if bindings.length %} -
-

{$ title $}

- - - - - {% if hasTypes %}{% endif %} - {% if hasDescription %}{% endif %} - - - - {% for binding in bindings %} - - - {% if hasTypes %} - - {% endif %} - {% if hasDescription %} - - {% endif %} - - {% endfor %} - -
BindingTypeDescription
- {$ binding.bindingName $} - {%- if binding.bindingName != binding.propertyName %} ({$ binding.propertyName $}){% endif-%} - - - {$ binding.memberDoc.shortDescription | marked $} - {$ binding.memberDoc.description | marked $} -
-
-{% endif %} -{%- endmacro %} - - diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html index 08134a6499..9628a53161 100644 --- a/aio/tools/transforms/templates/api/lib/memberHelpers.html +++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html @@ -170,7 +170,6 @@ {%- macro renderProperties(properties, containerClass, propertyClass, headingText, headings) -%} {% set nonInternalProperties = properties | filterByPropertyValue('internal', undefined) %} -{% set hasTypes = properties | hasValues('type') %} {% if nonInternalProperties.length -%}

{$ headingText $}

@@ -178,15 +177,17 @@ {$ headings[0] or 'Property' $} - {% if hasTypes %}{$ headings[1] or 'Type' $}{% endif %} {$ headings[2] or 'Description' $} {% for property in nonInternalProperties %} - {$ property.name $} - {% if hasTypes %}{% endif %} + + {%- if property.boundTo %}@{$ property.boundTo.type $}({$ property.boundTo.bindingName $}) +{% endif -%}{$ property.name $}{% if property.type %}: {$ property.type | escape $}{% endif -%} + + {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}Read-only.{% endif %} {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %}