docs: separated api properties into input/output (#769)

* compiler can now detect input tags by itself

* separated input/output/properties

* cleaned up

* couple documentation fixes

* fixed case where @input function would not appear

docs/fd-typedoc-theme/helpers/main.helpers.js

@@ -0,0 +1,85 @@
+module.exports = {
+    ifEquals: function(value1, value2, options) {
+        return value1 === value2 ? options.fn(this) : options.inverse(this);
+    },
+    ifNotEquals: function(value1, value2, options) {
+        return value1 !== value2 ? options.fn(this) : options.inverse(this);
+    },
+    ifDecoratorsContain: function(element, compareValue, options) {
+        if (!element || !element.decorators) {
+            return options.inverse(this);
+        }
+        const found = element.decorators.find(item => item.name.toLocaleUpperCase() === compareValue.toLocaleUpperCase());
+        return found ? options.fn(this) : options.inverse(this);
+    },
+    ifNoDecorators: function(element, options) {
+        if (!element || !element.decorators) {
+            return options.fn(this);
+        }
+
+        for (item of element.decorators) {
+            if (item.name.toLocaleUpperCase() === 'OUTPUT' || item.name.toLocaleUpperCase() === 'INPUT') {
+                return options.inverse(this);
+            }
+        }
+        return options.fn(this);
+    },
+    ifChildrenContainDecorator: function(array, compareValue, options) {
+        if (!array || array.length === 0) {
+            return options.inverse(this);
+        }
+
+        for (item of array) {
+            if (item.decorators) {
+                for (dec of item.decorators) {
+                    if (dec && dec.name.toLocaleUpperCase() === compareValue.toLocaleUpperCase()) {
+                        return options.fn(this);
+                    }
+                }
+            }
+        }
+        return options.inverse(this);
+    },
+    ifChildrenContainNonDecorators: function(array, options) {
+        if (!array || array.length === 0) {
+            return options.inverse(this);
+        }
+
+        for (item of array) {
+            if (item.decorators) {
+                for (dec of item.decorators) {
+                    if (dec && (dec.name.toLocaleUpperCase() !== 'INPUT' && dec.name.toLocaleUpperCase() !== 'OUTPUT')) {
+                        return options.fn(this);
+                    }
+                }
+            } else {
+                return options.fn(this);
+            }
+        }
+        return options.inverse(this);
+    },
+    parseSelector: function(str) {
+        let selectorStr = str.match(/(selector: '(.*?)')/g) + '';
+        selectorStr = selectorStr.replace('selector: ', '').replace(/['\[\]]/g, '');
+        return selectorStr;
+    },
+    getAllWithDecorator: function(groups, decorator, options) {
+        if (!groups || !decorator) {
+            return;
+        }
+
+        let total = [];
+        groups.forEach(group => {
+            if (group.children)
+            group.children.forEach(child => {
+                if (child.decorators)
+                child.decorators.forEach(dec => {
+                    if (dec && dec.name.toLocaleUpperCase() === decorator.toLocaleUpperCase()) {
+                        total.push(child);
+                    }
+                });
+            })
+        });
+        return options.fn(total);
+    }
+};

docs/fd-typedoc-theme/partials/comment.hbs

@@ -1,4 +1,14 @@
 {{#with comment}}
+    {{#with ../decorators}}
+        {{#each this}}
+            {{#ifEquals this.name 'Component'}}
+                <p class="lead"><strong>Selector:&nbsp;</strong>&lt;{{parseSelector this.arguments.obj}}&gt;</p>
+            {{/ifEquals}}
+            {{#ifEquals this.name 'Directive'}}
+                <p class="lead"><strong>Selector:&nbsp;</strong>{{parseSelector this.arguments.obj}}</p>
+            {{/ifEquals}}
+        {{/each}}
+    {{/with}}
     {{#if hasVisibleComponent}}
         <div class="tsd-comment tsd-typography">
             {{#if shortText}}

docs/fd-typedoc-theme/partials/member.hbs

@@ -0,0 +1,24 @@
+<section class="tsd-panel tsd-member {{cssClasses}}">
+    <a name="{{anchor}}" class="tsd-anchor"></a>
+    {{#if name}}
+        <h3>{{#each flags}}<span class="tsd-flag ts-flag{{this}}">{{this}}</span> {{/each}}{{{wbr name}}}</h3>
+    {{/if}}
+
+    <!-- {log decorators} -->
+
+    {{#if signatures}}
+        {{> member.signatures}}
+    {{else}}{{#if hasGetterOrSetter}}
+        {{> member.getterSetter}}
+    {{else}}
+        {{> member.declaration}}
+    {{/if}}{{/if}}
+
+    {{#each groups}}
+        {{#each children}}
+            {{#unless hasOwnDocument}}
+                {{> member}}
+            {{/unless}}
+        {{/each}}
+    {{/each}}
+</section>

docs/fd-typedoc-theme/partials/members.group.hbs

@@ -0,0 +1,12 @@
+{{#ifChildrenContainNonDecorators children}}
+    <section class="tsd-panel-group tsd-member-group {{cssClasses}}">
+        <h2>{{title}}</h2>
+        {{#each children}}
+            {{#ifNoDecorators this}}
+                {{#unless hasOwnDocument}}
+                    {{> member}}
+                {{/unless}}
+            {{/ifNoDecorators}}
+        {{/each}}
+    </section>
+{{/ifChildrenContainNonDecorators}}

docs/fd-typedoc-theme/partials/members.hbs

@@ -0,0 +1,31 @@
+{{#getAllWithDecorator groups 'Input'}}
+    {{#if this}}
+        <section class="tsd-panel-group tsd-member-group {{cssClasses}}">
+            <h2>Inputs</h2>
+            {{#each this}}
+                {{#unless hasOwnDocument}}
+                    {{> member}}
+                {{/unless}}
+            {{/each}}
+        </section>
+    {{/if}}
+{{/getAllWithDecorator}}
+
+{{#getAllWithDecorator groups 'Output'}}
+    {{#if this}}
+        <section class="tsd-panel-group tsd-member-group {{cssClasses}}">
+            <h2>Outputs</h2>
+            {{#each this}}
+                {{#unless hasOwnDocument}}
+                    {{> member}}
+                {{/unless}}
+            {{/each}}
+        </section>
+    {{/if}}
+{{/getAllWithDecorator}}
+
+{{#each groups}}
+    {{#unless allChildrenHaveOwnDocument}}
+        {{> members.group}}
+    {{/unless}}
+{{/each}}

docs/styles.scss

@@ -180,6 +180,12 @@ a:focus {
 }
 
 .fd-playground--markdown {
+
+    #fundamental-ngx {
+        margin-top: calc(2rem + 10px);
+        font-size: 2.2rem;
+    }
+
     ol,
     ul {
         padding-left: 2rem;

library/src/lib/alert/alert.component.ts

@@ -50,43 +50,43 @@ export class AlertComponent extends AbstractFdNgxClass implements OnInit, AfterV
     @ViewChild('container', {read: ViewContainerRef})
     containerRef: ViewContainerRef;
 
-    /** @Input Whether the alert is dismissible. */
+    /** Whether the alert is dismissible. */
     @Input()
     dismissible: boolean = true;
 
-    /** @Input The type of the alert. Can be one of *warning*, *success*, *information*, *error* or null. */
+    /** The type of the alert. Can be one of *warning*, *success*, *information*, *error* or null. */
     @Input()
     type: string;
 
-    /** @Input Id for the alert component. If omitted, a unique one is generated. */
+    /** Id for the alert component. If omitted, a unique one is generated. */
     @Input()
     id: string;
 
-    /** @Input Duration of time *in milliseconds* that the alert will be visible. Set to -1 for indefinite. */
+    /** Duration of time *in milliseconds* that the alert will be visible. Set to -1 for indefinite. */
     @Input()
     duration: number = 10000;
 
-    /** @Input Whether the alert should stay open if the mouse is hovering over it. */
+    /** Whether the alert should stay open if the mouse is hovering over it. */
     @Input()
     mousePersist: boolean = false;
 
-    /** @Input Id of the element that labels the alert. */
+    /** Id of the element that labels the alert. */
     @Input()
     ariaLabelledBy: string = null;
 
-    /** @Input Aria label for the alert component element. */
+    /** Aria label for the alert component element. */
     @Input()
     ariaLabel: string = null;
 
-    /** @Input Width of the alert. */
+    /** Width of the alert. */
     @Input()
     width: string;
 
-    /** @Input Alternative way of passing in a message to the alert. */
+    /** Alternative way of passing in a message to the alert. */
     @Input()
     message: string;
 
-    /** @Output Event fired when the alert is dismissed. */
+    /** Event fired when the alert is dismissed. */
     @Output()
     onDismiss: EventEmitter<undefined> = new EventEmitter<undefined>();
 

library/src/lib/badge-label/badge.component.ts

@@ -10,10 +10,10 @@ import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
     templateUrl: './badge-label.component.html'
 })
 export class BadgeComponent extends AbstractFdNgxClass {
-    /** @Input Color coded status for the badge. Options are 'success', 'warning', and 'error'. Leave empty for default badge. */
+    /** Color coded status for the badge. Options are 'success', 'warning', and 'error'. Leave empty for default badge. */
     @Input() status;
 
-    /** @Input Modifier for the badge. Options are 'pill' and 'filled'. Leave empty for normal. */
+    /** Modifier for the badge. Options are 'pill' and 'filled'. Leave empty for normal. */
     @Input() modifier;
 
     /** @hidden */

library/src/lib/badge-label/label.component.ts

@@ -10,16 +10,16 @@ import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
     templateUrl: './badge-label.component.html'
 })
 export class LabelComponent extends AbstractFdNgxClass {
-    /** @Input Color coded status for the label. Options are 'success', 'warning', and 'error'. Leave empty for default label. */
+    /** Color coded status for the label. Options are 'success', 'warning', and 'error'. Leave empty for default label. */
     @Input() status: string = '';
 
-    /** @Input When set to 'true', the type of the label is 'Status Indicator Label'. Leave empty for default type. */
+    /** When set to 'true', the type of the label is 'Status Indicator Label'. Leave empty for default type. */
     @Input() isStatusLabel: boolean = false;
 
-    /** @Input Built-in status icon. Options include 'available', 'away', 'busy', and 'offline'. */
+    /** Built-in status icon. Options include 'available', 'away', 'busy', and 'offline'. */
     @Input() statusIcon: string = '';
 
-    /** @Input The icon used with the status indicator. See the icon page for the list of icons. */
+    /** The icon used with the status indicator. See the icon page for the list of icons. */
     @Input() icon: string = '';
 
     /** @hidden */

library/src/lib/button/button.directive.ts

@@ -15,23 +15,23 @@ import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
 })
 export class ButtonDirective extends AbstractFdNgxClass {
 
-    /** @Input Whether to apply compact mode to the button. */
+    /** Whether to apply compact mode to the button. */
     @Input() compact: boolean;
 
-    /** @Input The icon to include in the button. See the icon page for the list of icons. */
+    /** The icon to include in the button. See the icon page for the list of icons. */
     @Input() glyph: string;
 
-    /** @Input The type of the button. Types include 'standard', 'positive', 'medium', and 'negative'.
+    /** The type of the button. Types include 'standard', 'positive', 'medium', and 'negative'.
      * Leave empty for default (Action button).'*/
     @Input() fdType: string;
 
     /** @hidden */
     @Input() semantic: string; // TODO: deprecated, leaving for backwards compatibility
 
-    /** @Input The state of the button. Options include 'normal', 'selected', and 'disabled'. Leave empty for normal. */
+    /** The state of the button. Options include 'normal', 'selected', and 'disabled'. Leave empty for normal. */
     @Input() state: string;
 
-    /** @Input Button options.  Options include 'emphasized' and 'light'. Leave empty for default.' */
+    /** Button options.  Options include 'emphasized' and 'light'. Leave empty for default.' */
     @Input() options: string | string[];
 
     /** @hidden */

library/src/lib/file-input/directives/file-dragndrop.directive.ts

@@ -8,37 +8,37 @@ import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/c
 })
 export class FileDragndropDirective {
 
-    /** @Input Whether multiple files can be dropped at once. */
+    /** Whether multiple files can be dropped at once. */
     @Input()
     multiple: boolean = true;
 
-    /** @Input Accepted file extensions. Format: `'.png,.jpg'`. */
+    /** Accepted file extensions. Format: `'.png,.jpg'`. */
     @Input()
     accept: string;
 
-    /** @Input Whether selecting of new files is disabled. */
+    /** Whether selecting of new files is disabled. */
     @Input()
     disabled: boolean = false;
 
-    /** @hidden */
+    /** Whether drag and drop is enabled. Disables this directive. */
     @Input()
     dragndrop: boolean = true;
 
-    /** @Output Event emitted when files are selected. Passes back an array of files. */
+    /** Event emitted when files are selected. Passes back an array of files. */
     @Output()
-    onFileChange: EventEmitter<File[]> = new EventEmitter<File[]>();
+    readonly onFileChange: EventEmitter<File[]> = new EventEmitter<File[]>();
 
-    /** @Output Event emitted when invalid files are selected. Passes back an array of files. */
+    /** Event emitted when invalid files are selected. Passes back an array of files. */
     @Output()
-    onInvalidFiles: EventEmitter<File[]> = new EventEmitter<File[]>();
+    readonly onInvalidFiles: EventEmitter<File[]> = new EventEmitter<File[]>();
 
-    /** @Output Event emitted when the dragged file enters the dropzone. */
+    /** Event emitted when the dragged file enters the dropzone. */
     @Output()
-    onDragEnter: EventEmitter<null> = new EventEmitter<null>();
+    readonly onDragEnter: EventEmitter<void> = new EventEmitter<void>();
 
-    /** @Output Event emitted when the dragged file exits the dropzone. */
+    /** Event emitted when the dragged file exits the dropzone. */
     @Output()
-    onDragLeave: EventEmitter<null> = new EventEmitter<null>();
+    readonly onDragLeave: EventEmitter<void> = new EventEmitter<void>();
 
     private elementStateCounter: number = 0;
 

library/src/lib/file-input/directives/file-select.directive.ts

@@ -9,13 +9,13 @@ import { HostListener, HostBinding } from '@angular/core';
 })
 export class FileSelectDirective {
 
-    /** @Input Whether the input should accept multiple file selections. */
+    /** Whether the input should accept multiple file selections. */
     @Input()
     private multiple: boolean = true;
 
-    /** @Output Event emitted when files are selected. */
+    /** Event emitted when files are selected. */
     @Output()
-    onFileSelect: EventEmitter<File[]> = new EventEmitter<File[]>();
+    readonly onFileSelect: EventEmitter<File[]> = new EventEmitter<File[]>();
 
     /** @hidden */
     @HostBinding('attr.multiple')