[ADF-1769] Added JSDoc for components (#2823)

* [ADF-1769] Added JSDoc for components

* [ADF-1769] Fixed tslint error with trailing whitespace

lib/content-services/document-list/components/document-list.component.ts

@@ -70,94 +70,140 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    /* Define a set of CSS styles styles to apply depending on the permission
+     * of the user on that node. See the [Permission Style model](permissions-style.model.md)
+     * page for further details and examples.
+     */
     @Input()
     permissionsStyle: PermissionStyleModel[] = [];
 
+    /* The default route for all the location-based columns (if declared). */
     @Input()
     locationFormat: string = '/';
 
+    /* Toggles navigation to folder content or file preview */
     @Input()
     navigate: boolean = true;
 
+    /* User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
     @Input()
     navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
 
+    /* Show document thumbnails rather than icons */
     @Input()
     thumbnails: boolean = false;
 
+    /* Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode,
+     * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
+     */
     @Input()
     selectionMode: string = 'single'; // null|single|multiple
 
+    /* Toggles multiselect mode */
     @Input()
     multiselect: boolean = false;
 
+    /* Toggles content actions for each row */
     @Input()
     contentActions: boolean = false;
 
+    /* Position of the content actions dropdown menu. Can be set to "left" or "right". */
     @Input()
     contentActionsPosition: string = 'right'; // left|right
 
+    /* Toggles context menus for each row */
     @Input()
     contextMenuActions: boolean = false;
 
+    /* Custom image for empty folder */
     @Input()
     emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';
 
+    /* Toggle file drop support for rows (see **UploadDirective** for further details */
     @Input()
     allowDropFiles: boolean = false;
 
+    /* Defines default sorting. The format is an array of 2 strings `[key, direction]`
+     * i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to
+     * override the default sorting detected by the component based on columns.
+     */
     @Input()
     sorting: string[];
 
+    /* The inline style to apply to every row. See
+     * [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html)
+     * docs for more details and usage examples.
+     */
     @Input()
     rowStyle: string;
 
+    /* The CSS class to apply to every row */
     @Input()
     rowStyleClass: string;
 
+    /* Toggles the loading state and animated spinners for the component. Used in
+     * combination with `navigate=false` to perform custom navigation and loading
+     * state indication.
+     */
     @Input()
     loading: boolean = false;
 
+    /* Custom row filter */
     @Input()
     rowFilter: any | null = null;
 
+    /* Custom image resolver */
     @Input()
     imageResolver: any | null = null;
 
-    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    /* The ID of the folder node to display or a reserved string alias for special sources */
     @Input()
     currentFolderId: string = null;
 
+    /* Currently displayed folder node */
     @Input()
     folderNode: MinimalNodeEntryEntity = null;
 
+    /* Document list will show all the nodes contained in the NodePaging entity */
     @Input()
     node: NodePaging = null;
 
+    /* Default value is stored into user preference settings */
     @Input()
     maxItems: number;
 
+    /* element to skip over for pagination purpose */
     @Input()
     skipCount: number = 0;
 
+    /* Enable documentlist to work into infinite scrolling mode */
     @Input()
     enableInfiniteScrolling: boolean = false;
 
+    /* Emitted when the user clicks a list node */
     @Output()
     nodeClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /* Emitted when the user double-clicks a list node */
     @Output()
     nodeDblClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /* Emitted when the current display folder changes */
     @Output()
     folderChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
 
+    /* Emitted when the user acts upon files with either single or double click
+     * (depends on `navigation-mode`). Useful for integration with the
+     * Viewer component.
+     */
     @Output()
     preview: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /* Emitted when the Document List has loaded all items and is ready for use */
     @Output()
     ready: EventEmitter<NodePaging> = new EventEmitter();
 
+    /* Emitted when the API fails to get the Document List data */
     @Output()
     error: EventEmitter<any> = new EventEmitter();
 

lib/core/datatable/components/datatable/datatable.component.ts

@@ -49,57 +49,82 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
 
+    /* Data source for the table */
     @Input()
     data: DataTableAdapter;
 
+    /* The rows that the datatable will show */
     @Input()
     rows: any[] = [];
 
+    /* Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
+     * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
+     */
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
+    /* Toggles multiple row selection, which renders checkboxes at the beginning of each row */
     @Input()
     multiselect: boolean = false;
 
+    /* Toggles data actions column */
     @Input()
     actions: boolean = false;
 
+    /* Position of the actions dropdown menu. Can be "left" or "right". */
     @Input()
     actionsPosition: string = 'right'; // left|right
 
+    /* Fallback image for row where thumbnail is missing */
     @Input()
     fallbackThumbnail: string;
 
+    /* Toggles custom context menu for the component */
     @Input()
     contextMenu: boolean = false;
 
+    /* Toggle file drop support for rows (see Upload Directive for further details) */
     @Input()
     allowDropFiles: boolean = false;
 
+    /* The inline style to apply to every row. See
+     * [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html)
+     * docs for more details and usage examples.
+     */
     @Input()
     rowStyle: string;
 
+    /* The CSS class to apply to every row */
     @Input()
     rowStyleClass: string = '';
 
+    /* Toggles the header */
     @Input()
     showHeader: boolean = true;
 
+    /* Emitted when user clicks the row */
     @Output()
     rowClick = new EventEmitter<DataRowEvent>();
 
+    /* Emitted when user double-clicks the row */
     @Output()
     rowDblClick = new EventEmitter<DataRowEvent>();
 
+    /* Emitted before context menu is displayed for a row */
     @Output()
     showRowContextMenu = new EventEmitter<DataCellEvent>();
 
+    /* Emitted before actions menu is displayed for a row */
     @Output()
     showRowActionsMenu = new EventEmitter<DataCellEvent>();
 
+    /* Emitted when row action is executed by user */
     @Output()
     executeRowAction = new EventEmitter<DataRowActionEvent>();
 
+    /* Flag that indicates if the datatable is in loading state and needs to show the
+     * loading template (see the docs to learn how to configure a loading template).
+     */
     @Input()
     loading: boolean = false;
 

lib/core/login/components/login.component.ts

@@ -55,45 +55,61 @@ export class LoginComponent implements OnInit {
 
     isPasswordShow: boolean = false;
 
+    /* Should the `Remember me` checkbox be shown? */
     @Input()
     showRememberMe: boolean = true;
 
+    /* Should the extra actions (`Need Help`, `Register`, etc) be shown? */
     @Input()
     showLoginActions: boolean = true;
 
+    /* Sets the URL of the NEED HELP link in the footer */
     @Input()
     needHelpLink: string = '';
 
+    /* Sets the URL of the REGISTER link in the footer */
     @Input()
     registerLink: string = '';
 
+    /* Path to a custom logo image */
     @Input()
     logoImageUrl: string = './assets/images/alfresco-logo.svg';
 
+    /* Path to a custom background image */
     @Input()
     backgroundImageUrl: string = './assets/images/background.svg';
 
+    /* The copyright text below the login box */
     @Input()
     copyrightText: string = '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.';
 
+    /* Possible valid values are ECM, BPM or ALL. By default, this component
+     * will log in only to ECM. If you want to log in in both systems then use ALL.
+     */
     @Input()
     providers: string;
 
+    /* Custom validation rules for the login form */
     @Input()
     fieldsValidation: any;
 
+    /* Prevents the CSRF Token from being submitted. Only valid for Alfresco Process Services. */
     @Input()
     disableCsrf: boolean;
 
+    /* Route to redirect to on successful login. */
     @Input()
     successRoute: string = null;
 
+    /* Emitted when the login is successful */
     @Output()
     success = new EventEmitter<LoginSuccessEvent>();
 
+    /* Emitted when the login fails */
     @Output()
     error = new EventEmitter<LoginErrorEvent>();
 
+    /* Emitted when the login form is submitted */
     @Output()
     executeSubmit = new EventEmitter<LoginSubmitEvent>();
 

lib/process-services/task-list/components/task-list.component.ts

@@ -36,48 +36,74 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    /* The id of the app. */
     @Input()
     appId: number;
 
+    /* The Instance Id of the process. */
     @Input()
     processInstanceId: string;
 
+    /* The Definition Key of the process. */
     @Input()
     processDefinitionKey: string;
 
+    /* Current state of the process. Possible values are: `completed`, `active`. */
     @Input()
     state: string;
 
+    /* The assignment of the process. Possible values are: "assignee" (the current user
+     * is the assignee), candidate (the current user is a task candidate", "group_x" (the task
+     * is assigned to a group where the current user is a member,
+     * no value(the current user is involved).
+     */
     @Input()
     assignment: string;
 
+    /* Define the sort order of the processes. Possible values are : `created-desc`,
+     * `created-asc`, `due-desc`, `due-asc`
+     */
     @Input()
     sort: string;
 
     @Input()
     name: string;
 
+    /* Define which task id should be selected after reloading. If the task id doesn't
+     * exist or nothing is passed then the first task will be selected.
+     */
     @Input()
     landingTaskId: string;
 
+    /* Data source object that represents the number and the type of the columns that
+     * you want to show.
+     */
     @Input()
     data: DataTableAdapter;
 
+    /* Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
+     * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for
+     * multiple rows.
+     */
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
     @Input()
     presetColumn: string;
 
+    /* Toggles multiple row selection, renders checkboxes at the beginning of each row */
     @Input()
     multiselect: boolean = false;
 
+    /* Emitted when a task in the list is clicked */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
 
+    /* Emitted when rows are selected/unselected */
     @Output()
     rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
 
+    /* Emitted when the task list is loaded */
     @Output()
     success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -88,9 +114,11 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
     selectedInstances: any[];
     layoutPresets = {};
 
+    /* The page number of the tasks to fetch. */
     @Input()
     page: number = 0;
 
+    /* The number of tasks to fetch. */
     @Input()
     size: number = DEFAULT_SIZE;