diff --git a/docIndex.md b/docIndex.md
new file mode 100644
index 0000000000..2fab46e64f
--- /dev/null
+++ b/docIndex.md
@@ -0,0 +1,610 @@
+# Component Docs Index
+
+Below is an index of the documentation for each component library. The [User Guide](#user-guide)
+section discusses particular techniques in depth. The other sections are references for the ADF
+components. Items listed as **Documented** have descriptive documentation. For the **Undocumented** items,
+the links lead to the appropriate code source file.
+
+## Contents
+
+- [User Guide](#user-guide)
+- [ng2-activiti-analytics](#ng2-activiti-analytics)
+- [ng2-activiti-diagrams](#ng2-activiti-diagrams)
+- [ng2-activiti-form](#ng2-activiti-form)
+- [ng2-activiti-processlist](#ng2-activiti-processlist)
+- [ng2-activiti-tasklist](#ng2-activiti-tasklist)
+- [ng2-alfresco-core](#ng2-alfresco-core)
+- [ng2-alfresco-datatable](#ng2-alfresco-datatable)
+- [ng2-alfresco-documentlist](#ng2-alfresco-documentlist)
+- [ng2-alfresco-login](#ng2-alfresco-login)
+- [ng2-alfresco-search](#ng2-alfresco-search)
+- [ng2-alfresco-social](#ng2-alfresco-social)
+- [ng2-alfresco-tag](#ng2-alfresco-tag)
+- [ng2-alfresco-upload](#ng2-alfresco-upload)
+- [ng2-alfresco-userinfo](#ng2-alfresco-userinfo)
+- [ng2-alfresco-viewer](#ng2-alfresco-viewer)
+- [ng2-alfresco-webscript](#ng2-alfresco-webscript)
+
+## User guide
+
+
+- [Form Extensibility and Customisation](docs/extensibility.md)
+- [Form Stencils with Angular 2](docs/stencils.md)
+- [Theming](docs/theming.md)
+- [Walkthrough: adding indicators to highlight information about a node](docs/metadata-indicators.md)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-activiti-analytics
+
+Contains the Analytics component and other related items. See the library's
+[README file](ng2-components/ng2-activiti-analytics/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Analytics component](ng2-components/ng2-activiti-analytics/README.md)
+- [Analytics report list component](ng2-components/ng2-activiti-analytics/README.md)
+- [Analytics generator component](ng2-components/ng2-activiti-analytics/README.md)
+
+**Undocumented**
+
+- [Analytics report heat map component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts)
+- [Analytics report parameters component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts)
+- [Checkbox widget](ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts)
+- [Date range widget](ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts)
+- [Dropdown widget](ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts)
+- [Duration widget](ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts)
+- [Number widget](ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts)
+- [Widget component](ng2-components/ng2-activiti-analytics/src/components/widgets/widget.component.ts)
+- [Analytics service](ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-activiti-diagrams
+
+Contains the Diagram component and other related items. See the library's
+[README file](ng2-components/ng2-activiti-diagrams/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Diagram component](ng2-components/ng2-activiti-diagrams/README.md)
+
+**Undocumented**
+
+- [Diagram alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts)
+- [Diagram box publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts)
+- [Diagram business rule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts)
+- [Diagram camel task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts)
+- [Diagram container service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts)
+- [Diagram google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts)
+- [Diagram manual task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts)
+- [Diagram mule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts)
+- [Diagram receive task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts)
+- [Diagram rest call task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts)
+- [Diagram script task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts)
+- [Diagram send task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts)
+- [Diagram service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts)
+- [Diagram task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts)
+- [Diagram user task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts)
+- [Diagram boundary event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts)
+- [Diagram throw event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts)
+- [Diagram sequence flow component](ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts)
+- [Diagram end event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts)
+- [Diagram event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts)
+- [Diagram start event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts)
+- [Diagram event gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts)
+- [Diagram exclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts)
+- [Diagram gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts)
+- [Diagram inclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts)
+- [Diagram parallel gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts)
+- [Diagram container icon event component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts)
+- [Diagram icon alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts)
+- [Diagram icon box publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts)
+- [Diagram icon business rule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts)
+- [Diagram icon camel task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts)
+- [Diagram icon error component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts)
+- [Diagram icon google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts)
+- [Diagram icon manual task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts)
+- [Diagram icon message component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts)
+- [Diagram icon mule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts)
+- [Diagram icon receive task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts)
+- [Diagram icon rest call task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts)
+- [Diagram icon script task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts)
+- [Diagram icon send task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts)
+- [Diagram icon service task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts)
+- [Diagram icon signal component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts)
+- [Diagram icon timer component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts)
+- [Diagram icon user task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts)
+- [Diagram intermediate catching event component](ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts)
+- [Raphael icon alfresco publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-alfresco-publish.component.ts)
+- [Raphael icon box publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-box-publish.component.ts)
+- [Raphael icon business rule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-business-rule.component.ts)
+- [Raphael icon camel component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-camel.component.ts)
+- [Raphael icon error component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-error.component.ts)
+- [Raphael icon google drive publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-google-drive-publish.component.ts)
+- [Raphael icon manual component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-manual.component.ts)
+- [Raphael icon message component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-message.component.ts)
+- [Raphael icon mule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-mule.component.ts)
+- [Raphael icon receive component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-receive.component.ts)
+- [Raphael icon rest call component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-rest-call.component.ts)
+- [Raphael icon script component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-script.component.ts)
+- [Raphael icon send component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-send.component.ts)
+- [Raphael icon service component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-service.component.ts)
+- [Raphael icon signal component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-signal.component.ts)
+- [Raphael icon timer component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-timer.component.ts)
+- [Raphael icon user component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-user.component.ts)
+- [Raphael circle component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts)
+- [Raphael cross component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-cross.component.ts)
+- [Raphael flow arrow component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-flow-arrow.component.ts)
+- [Raphael multiline text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts)
+- [Raphael pentagon component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-pentagon.component.ts)
+- [Raphael plus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-plus.component.ts)
+- [Raphael rect component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts)
+- [Raphael rhombus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rhombus.component.ts)
+- [Raphael text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts)
+- [Raphael service](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael.service.ts)
+- [Diagram event subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts)
+- [Diagram subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts)
+- [Diagram lane component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts)
+- [Diagram lanes component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts)
+- [Diagram pool component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts)
+- [Diagram pools component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts)
+- [Diagram tooltip component](ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts)
+- [Chart model](ng2-components/ng2-activiti-diagrams/src/models/chart.model.ts)
+- [Diagram model](ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts)
+- [Report model](ng2-components/ng2-activiti-diagrams/src/models/report.model.ts)
+- [Diagram color service](ng2-components/ng2-activiti-diagrams/src/services/diagram-color.service.ts)
+- [Diagrams service](ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-activiti-form
+
+Contains the Form component and other related items. See the library's
+[README file](ng2-components/ng2-activiti-form/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Form component](ng2-components/ng2-activiti-form/README.md)
+- [Form list component](ng2-components/ng2-activiti-form/README.md)
+- [Form service](ng2-components/ng2-activiti-form/README.md)
+- [Content widget](ng2-components/ng2-activiti-form/README.md)
+
+**Undocumented**
+
+- [Form field component](ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts)
+- [Start form component](ng2-components/ng2-activiti-form/src/components/start-form.component.ts)
+- [Amount widget](ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts)
+- [Attach widget](ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts)
+- [Checkbox widget](ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts)
+- [Container widget](ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.model.ts)
+- [Container widget](ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts)
+- [Container column model](ng2-components/ng2-activiti-form/src/components/widgets/core/container-column.model.ts)
+- [Container model](ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts)
+- [Content link model](ng2-components/ng2-activiti-form/src/components/widgets/core/content-link.model.ts)
+- [Form field model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts)
+- [Form outcome event model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts)
+- [Form outcome model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome.model.ts)
+- [Form widget model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-widget.model.ts)
+- [Form model](ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts)
+- [Group user model](ng2-components/ng2-activiti-form/src/components/widgets/core/group-user.model.ts)
+- [Group model](ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts)
+- [Tab model](ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts)
+- [Date widget](ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts)
+- [Display text widget](ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts)
+- [Document widget](ng2-components/ng2-activiti-form/src/components/widgets/document/document.widget.ts)
+- [Dropdown widget](ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts)
+- [Dynamic table widget](ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.model.ts)
+- [Dynamic table widget](ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts)
+- [Error component](ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts)
+- [Functional group widget](ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts)
+- [Hyperlink widget](ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts)
+- [Multiline text widget](ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts)
+- [Number widget](ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts)
+- [People widget](ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts)
+- [Radio buttons widget](ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts)
+- [Tabs widget](ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts)
+- [Text mask component](ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts)
+- [Text widget](ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts)
+- [Typeahead widget](ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts)
+- [Unknown widget](ng2-components/ng2-activiti-form/src/components/widgets/unknown/unknown.widget.ts)
+- [Upload widget](ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts)
+- [Widget component](ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts)
+- [Form definition model](ng2-components/ng2-activiti-form/src/models/form-definition.model.ts)
+- [Node metadata model](ng2-components/ng2-activiti-form/src/models/node-metadata.model.ts)
+- [Task process variable model](ng2-components/ng2-activiti-form/src/models/task-process-variable.model.ts)
+- [Widget visibility model](ng2-components/ng2-activiti-form/src/models/widget-visibility.model.ts)
+- [Activiti alfresco service](ng2-components/ng2-activiti-form/src/services/activiti-alfresco.service.ts)
+- [Ecm model service](ng2-components/ng2-activiti-form/src/services/ecm-model.service.ts)
+- [Form rendering service](ng2-components/ng2-activiti-form/src/services/form-rendering.service.ts)
+- [Node service](ng2-components/ng2-activiti-form/src/services/node.service.ts)
+- [Widget visibility service](ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-activiti-processlist
+
+Contains the Processlist component and other related items. See the library's
+[README file](ng2-components/ng2-activiti-processlist/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Processlist component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process filters component](ng2-components/ng2-activiti-processlist/README.md)
+- [Start process component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process instance details component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process instance tasks component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process comments component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process attachment list component](ng2-components/ng2-activiti-processlist/README.md)
+- [Create process attachment component](ng2-components/ng2-activiti-processlist/README.md)
+- [Process audit directive](ng2-components/ng2-activiti-processlist/README.md)
+
+**Undocumented**
+
+- [Process instance header component](ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts)
+- [Filter process model](ng2-components/ng2-activiti-processlist/src/models/filter-process.model.ts)
+- [Process definition model](ng2-components/ng2-activiti-processlist/src/models/process-definition.model.ts)
+- [Process instance filter model](ng2-components/ng2-activiti-processlist/src/models/process-instance-filter.model.ts)
+- [Process instance variable model](ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts)
+- [Process instance model](ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts)
+- [Process upload service](ng2-components/ng2-activiti-processlist/src/services/process-upload.service.ts)
+- [Process service](ng2-components/ng2-activiti-processlist/src/services/process.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-activiti-tasklist
+
+Contains the Tasklist omponent and other related items. See the library's
+[README file](ng2-components/ng2-activiti-tasklist/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Tasklist component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task details component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Apps list component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task filters component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Checklist component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task attachment list component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Create task attachment component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task header component](ng2-components/ng2-activiti-tasklist/README.md)
+- [People component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Comments component](ng2-components/ng2-activiti-tasklist/README.md)
+- [People search component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task audit directive](ng2-components/ng2-activiti-tasklist/README.md)
+
+**Undocumented**
+
+- [Comment list component](ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.ts)
+- [No task detail template directive](ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.directive.ts)
+- [People list component](ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts)
+- [Start task component](ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts)
+- [Comment model](ng2-components/ng2-activiti-tasklist/src/models/comment.model.ts)
+- [Filter model](ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts)
+- [Form model](ng2-components/ng2-activiti-tasklist/src/models/form.model.ts)
+- [Icon model](ng2-components/ng2-activiti-tasklist/src/models/icon.model.ts)
+- [Start task model](ng2-components/ng2-activiti-tasklist/src/models/start-task.model.ts)
+- [Task details model](ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts)
+- [Task list model](ng2-components/ng2-activiti-tasklist/src/models/task-list.model.ts)
+- [User event model](ng2-components/ng2-activiti-tasklist/src/models/user-event.model.ts)
+- [User model](ng2-components/ng2-activiti-tasklist/src/models/user.model.ts)
+- [People service](ng2-components/ng2-activiti-tasklist/src/services/people.service.ts)
+- [Process upload service](ng2-components/ng2-activiti-tasklist/src/services/process-upload.service.ts)
+- [Tasklist service](ng2-components/ng2-activiti-tasklist/src/services/tasklist.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-core
+
+Contains a variety of components, directives and other classes used throughout ADF. See the library's
+[README file](ng2-components/ng2-alfresco-core/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Toolbar component](ng2-components/ng2-alfresco-core/README.md)
+- [Accordion component](ng2-components/ng2-alfresco-core/README.md)
+- [Card view component](ng2-components/ng2-alfresco-core/README.md)
+- [Node permission directive](ng2-components/ng2-alfresco-core/README.md)
+- [Upload directive](ng2-components/ng2-alfresco-core/README.md)
+- [Context menu directive](ng2-components/ng2-alfresco-core/README.md)
+- [Alfresco api service](ng2-components/ng2-alfresco-core/README.md)
+- [App config service](ng2-components/ng2-alfresco-core/README.md)
+- [User preferences service](ng2-components/ng2-alfresco-core/README.md)
+- [Authentication service](ng2-components/ng2-alfresco-core/README.md)
+- [Notification service](ng2-components/ng2-alfresco-core/README.md)
+- [Translation service](ng2-components/ng2-alfresco-core/README.md)
+- [Renditions service](ng2-components/ng2-alfresco-core/README.md)
+
+**Undocumented**
+
+- [Accordion group component](ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts)
+- [Context menu holder component](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts)
+- [Context menu service](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu.service.ts)
+- [Data column list component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts)
+- [Data column component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts)
+- [Info drawer layout component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts)
+- [Info drawer component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts)
+- [Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts)
+- [Mdl textfield directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts)
+- [Mdl upgrade element directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-upgrade-element.directive.ts)
+- [Pagination component](ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.ts)
+- [Toolbar divider component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts)
+- [Toolbar title component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-title.component.ts)
+- [Card view content proxy directive](ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
+- [Card view dateitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts)
+- [Card view item dispatcher component](ng2-components/ng2-alfresco-core/src/components/view/card-view-item-dispatcher.component.ts)
+- [Card view mapitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.ts)
+- [Card view textitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.ts)
+- [Highlight directive](ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts)
+- [Card view baseitem model](ng2-components/ng2-alfresco-core/src/models/card-view-baseitem.model.ts)
+- [Card view dateitem model](ng2-components/ng2-alfresco-core/src/models/card-view-dateitem.model.ts)
+- [Card view mapitem model](ng2-components/ng2-alfresco-core/src/models/card-view-mapitem.model.ts)
+- [Card view textitem model](ng2-components/ng2-alfresco-core/src/models/card-view-textitem.model.ts)
+- [Component model](ng2-components/ng2-alfresco-core/src/models/component.model.ts)
+- [File model](ng2-components/ng2-alfresco-core/src/models/file.model.ts)
+- [Product version model](ng2-components/ng2-alfresco-core/src/models/product-version.model.ts)
+- [Site model](ng2-components/ng2-alfresco-core/src/models/site.model.ts)
+- [Alfresco content service](ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts)
+- [Alfresco settings service](ng2-components/ng2-alfresco-core/src/services/alfresco-settings.service.ts)
+- [Auth guard bpm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.ts)
+- [Auth guard ecm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-ecm.service.ts)
+- [Auth guard service](ng2-components/ng2-alfresco-core/src/services/auth-guard.service.ts)
+- [Card view update service](ng2-components/ng2-alfresco-core/src/services/card-view-update.service.ts)
+- [Content service](ng2-components/ng2-alfresco-core/src/services/content.service.ts)
+- [Cookie service](ng2-components/ng2-alfresco-core/src/services/cookie.service.ts)
+- [Deleted nodes api service](ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
+- [Discovery api service](ng2-components/ng2-alfresco-core/src/services/discovery-api.service.ts)
+- [Favorites api service](ng2-components/ng2-alfresco-core/src/services/favorites-api.service.ts)
+- [Highlight transform service](ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
+- [Log service](ng2-components/ng2-alfresco-core/src/services/log.service.ts)
+- [Nodes api service](ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
+- [People api service](ng2-components/ng2-alfresco-core/src/services/people-api.service.ts)
+- [Search api service](ng2-components/ng2-alfresco-core/src/services/search-api.service.ts)
+- [Search service](ng2-components/ng2-alfresco-core/src/services/search.service.ts)
+- [Shared links api service](ng2-components/ng2-alfresco-core/src/services/shared-links-api.service.ts)
+- [Sites api service](ng2-components/ng2-alfresco-core/src/services/sites-api.service.ts)
+- [Storage service](ng2-components/ng2-alfresco-core/src/services/storage.service.ts)
+- [Thumbnail service](ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts)
+- [Translate loader service](ng2-components/ng2-alfresco-core/src/services/translate-loader.service.ts)
+- [Upload service](ng2-components/ng2-alfresco-core/src/services/upload.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-datatable
+
+Contains the Datatable component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-datatable/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Datatable component](ng2-components/ng2-alfresco-datatable/README.md)
+- [Pagination component](ng2-components/ng2-alfresco-datatable/README.md)
+
+**Undocumented**
+
+- [Datatable cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts)
+- [Date cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/date-cell.component.ts)
+- [Empty list component](ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts)
+- [Filesize cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/filesize-cell.component.ts)
+- [Location cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/location-cell.component.ts)
+- [Loading template directive](ng2-components/ng2-alfresco-datatable/src/directives/loading-template.directive.ts)
+- [No content template directive](ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.directive.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-documentlist
+
+Contains the Document List component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-documentlist/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Breadcrumb component](docs/breadcrumb.component.md)
+- [Document list component](docs/document-list.component.md)
+- [Sites dropdown component](docs/sites-dropdown.component.md)
+
+**Undocumented**
+
+- [Dropdown breadcrumb component](ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.ts)
+- [Content action list component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.ts)
+- [Content action component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts)
+- [Content column list component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.ts)
+- [Content column component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.ts)
+- [Content node selector component](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
+- [Empty folder content directive](ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.ts)
+- [Content action model](ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts)
+- [Document library model](ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts)
+- [Permissions style model](ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts)
+- [Permissions model](ng2-components/ng2-alfresco-documentlist/src/models/permissions.model.ts)
+- [Document actions service](ng2-components/ng2-alfresco-documentlist/src/services/document-actions.service.ts)
+- [Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
+- [Folder actions service](ng2-components/ng2-alfresco-documentlist/src/services/folder-actions.service.ts)
+- [Node actions service](ng2-components/ng2-alfresco-documentlist/src/services/node-actions.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+### ng2-alfresco-login
+
+Contains the Login component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-login/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Login component](ng2-components/ng2-alfresco-login/README.md)
+
+**Undocumented**
+
+- [Login footer directive](ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.ts)
+- [Login header directive](ng2-components/ng2-alfresco-login/src/directives/login-header.directive.ts)
+- [Form submit event model](ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-search
+
+Contains the Search component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-search/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Search control component](ng2-components/ng2-alfresco-search/README.md)
+- [Search component](ng2-components/ng2-alfresco-search/README.md)
+
+**Undocumented**
+
+- [Search autocomplete component](ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-social
+
+Contains components for adding likes and ratings to items. See the library's
+[README file](ng2-components/ng2-alfresco-social/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Like component](ng2-components/ng2-alfresco-social/README.md)
+- [Rating component](ng2-components/ng2-alfresco-social/README.md)
+
+**Undocumented**
+
+- [Rating service](ng2-components/ng2-alfresco-social/src/services/rating.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-tag
+
+Contains components for adding tags to documents. See the library's
+[README file](ng2-components/ng2-alfresco-tag/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Tag actions component](ng2-components/ng2-alfresco-tag/README.md)
+- [Tag list component](ng2-components/ng2-alfresco-tag/README.md)
+- [Tag node list component](ng2-components/ng2-alfresco-tag/README.md)
+
+**Undocumented**
+
+- [Tag service](ng2-components/ng2-alfresco-tag/src/services/tag.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-upload
+
+Contains components for uploading files to Content Services. See the library's
+[README file](ng2-components/ng2-alfresco-upload/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Upload button component](ng2-components/ng2-alfresco-upload/README.md)
+- [Upload drag area component](ng2-components/ng2-alfresco-upload/README.md)
+- [File uploading dialog component](ng2-components/ng2-alfresco-upload/README.md)
+- [Upload service](ng2-components/ng2-alfresco-upload/README.md)
+
+**Undocumented**
+
+- [File uploading list row component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.ts)
+- [File uploading list component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts)
+- [File draggable directive](ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts)
+- [Permissions model](ng2-components/ng2-alfresco-upload/src/models/permissions.model.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-userinfo
+
+Contains the User Info component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-userinfo/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [User info component](ng2-components/ng2-alfresco-userinfo/README.md)
+
+**Undocumented**
+
+- [Bpm user model](ng2-components/ng2-alfresco-userinfo/src/models/bpm-user.model.ts)
+- [Ecm company model](ng2-components/ng2-alfresco-userinfo/src/models/ecm-company.model.ts)
+- [Ecm user model](ng2-components/ng2-alfresco-userinfo/src/models/ecm-user.model.ts)
+- [Bpm user service](ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts)
+- [Ecm user service](ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-viewer
+
+Contains the Viewer component and other related items. See the library's
+[README file](ng2-components/ng2-alfresco-viewer/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Viewer component](ng2-components/ng2-alfresco-viewer/README.md)
+
+**Undocumented**
+
+- [ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts)
+- [MediaPlayer component](ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts)
+- [NotSupportedFormat component](ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts)
+- [PdfViewer component](ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
+- [TxtViewer component](ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
+- [Pdf view component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts)
+- [Viewer dialog component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/viewer-dialog.component.ts)
+- [Extension viewer directive](ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts)
+- [Viewer service](ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts)
+
+
+[(Back to Contents)](#contents)
+
+## ng2-alfresco-webscript
+
+Contains the Webscript component. See the library's
+[README file](ng2-components/ng2-alfresco-webscript/README.md)
+for more information about installing and using the source code.
+
+
+**Documented**
+
+- [Webscript component](ng2-components/ng2-alfresco-webscript/README.md)
+
\ No newline at end of file
diff --git a/docassets/images/activiti-stencil-01.png b/docassets/images/activiti-stencil-01.png
new file mode 100644
index 0000000000..6f01cec9d5
Binary files /dev/null and b/docassets/images/activiti-stencil-01.png differ
diff --git a/docassets/images/activiti-stencil-02.png b/docassets/images/activiti-stencil-02.png
new file mode 100644
index 0000000000..340fb7dece
Binary files /dev/null and b/docassets/images/activiti-stencil-02.png differ
diff --git a/docassets/images/activiti-stencil-03.png b/docassets/images/activiti-stencil-03.png
new file mode 100644
index 0000000000..d2763a2178
Binary files /dev/null and b/docassets/images/activiti-stencil-03.png differ
diff --git a/docassets/images/adf-stencil-01.png b/docassets/images/adf-stencil-01.png
new file mode 100644
index 0000000000..4f3473cc98
Binary files /dev/null and b/docassets/images/adf-stencil-01.png differ
diff --git a/docassets/images/adf-stencil-02.png b/docassets/images/adf-stencil-02.png
new file mode 100644
index 0000000000..334b4ca6c6
Binary files /dev/null and b/docassets/images/adf-stencil-02.png differ
diff --git a/docassets/images/breadcrumb.png b/docassets/images/breadcrumb.png
new file mode 100644
index 0000000000..36c745dc5f
Binary files /dev/null and b/docassets/images/breadcrumb.png differ
diff --git a/docassets/images/content-action-disable-delete-button.png b/docassets/images/content-action-disable-delete-button.png
new file mode 100644
index 0000000000..43d9dff579
Binary files /dev/null and b/docassets/images/content-action-disable-delete-button.png differ
diff --git a/docassets/images/content-action-notification-message.png b/docassets/images/content-action-notification-message.png
new file mode 100644
index 0000000000..e761f10665
Binary files /dev/null and b/docassets/images/content-action-notification-message.png differ
diff --git a/docassets/images/custom-columns.png b/docassets/images/custom-columns.png
new file mode 100644
index 0000000000..1ba048d759
Binary files /dev/null and b/docassets/images/custom-columns.png differ
diff --git a/docassets/images/document-action-copymove.png b/docassets/images/document-action-copymove.png
new file mode 100644
index 0000000000..8325b86928
Binary files /dev/null and b/docassets/images/document-action-copymove.png differ
diff --git a/docassets/images/document-action-copymovedialog.png b/docassets/images/document-action-copymovedialog.png
new file mode 100644
index 0000000000..7f9e0c1ffa
Binary files /dev/null and b/docassets/images/document-action-copymovedialog.png differ
diff --git a/docassets/images/document-action-download.png b/docassets/images/document-action-download.png
new file mode 100644
index 0000000000..05d60793b2
Binary files /dev/null and b/docassets/images/document-action-download.png differ
diff --git a/docassets/images/document-actions.png b/docassets/images/document-actions.png
new file mode 100644
index 0000000000..f0fcee4a2f
Binary files /dev/null and b/docassets/images/document-actions.png differ
diff --git a/docassets/images/document-list-custom-icon.png b/docassets/images/document-list-custom-icon.png
new file mode 100644
index 0000000000..487aa1fe4b
Binary files /dev/null and b/docassets/images/document-list-custom-icon.png differ
diff --git a/docassets/images/document-list-dropdown-list.png b/docassets/images/document-list-dropdown-list.png
new file mode 100644
index 0000000000..d8d8b94040
Binary files /dev/null and b/docassets/images/document-list-dropdown-list.png differ
diff --git a/docassets/images/document-list-tag-template.png b/docassets/images/document-list-tag-template.png
new file mode 100644
index 0000000000..769147a677
Binary files /dev/null and b/docassets/images/document-list-tag-template.png differ
diff --git a/docassets/images/documentLibrary.png b/docassets/images/documentLibrary.png
new file mode 100644
index 0000000000..ee5be8b847
Binary files /dev/null and b/docassets/images/documentLibrary.png differ
diff --git a/docassets/images/empty-folder-template-custom.png b/docassets/images/empty-folder-template-custom.png
new file mode 100644
index 0000000000..f8f18dbb80
Binary files /dev/null and b/docassets/images/empty-folder-template-custom.png differ
diff --git a/docassets/images/empty-folder-template-default.png b/docassets/images/empty-folder-template-default.png
new file mode 100644
index 0000000000..558b81f300
Binary files /dev/null and b/docassets/images/empty-folder-template-default.png differ
diff --git a/docassets/images/folder-actions.png b/docassets/images/folder-actions.png
new file mode 100644
index 0000000000..2c698df6ef
Binary files /dev/null and b/docassets/images/folder-actions.png differ
diff --git a/docassets/images/folder-context-menu.png b/docassets/images/folder-context-menu.png
new file mode 100644
index 0000000000..1907ecd75d
Binary files /dev/null and b/docassets/images/folder-context-menu.png differ
diff --git a/docassets/images/metadata-01.png b/docassets/images/metadata-01.png
new file mode 100644
index 0000000000..fc4d8a0203
Binary files /dev/null and b/docassets/images/metadata-01.png differ
diff --git a/docassets/images/metadata-02.png b/docassets/images/metadata-02.png
new file mode 100644
index 0000000000..90d652ad91
Binary files /dev/null and b/docassets/images/metadata-02.png differ
diff --git a/docassets/images/metadata-03.png b/docassets/images/metadata-03.png
new file mode 100644
index 0000000000..724599a763
Binary files /dev/null and b/docassets/images/metadata-03.png differ
diff --git a/docassets/images/responsive-desktop.png b/docassets/images/responsive-desktop.png
new file mode 100644
index 0000000000..da7f0dac32
Binary files /dev/null and b/docassets/images/responsive-desktop.png differ
diff --git a/docassets/images/responsive-mobile.png b/docassets/images/responsive-mobile.png
new file mode 100644
index 0000000000..933ce1f60b
Binary files /dev/null and b/docassets/images/responsive-mobile.png differ
diff --git a/docassets/images/text-custom-widget.png b/docassets/images/text-custom-widget.png
new file mode 100644
index 0000000000..ebec57f023
Binary files /dev/null and b/docassets/images/text-custom-widget.png differ
diff --git a/docassets/images/text-default-widget.png b/docassets/images/text-default-widget.png
new file mode 100644
index 0000000000..e75766e065
Binary files /dev/null and b/docassets/images/text-default-widget.png differ
diff --git a/docassets/images/viewchild.png b/docassets/images/viewchild.png
new file mode 100644
index 0000000000..c9c258dd52
Binary files /dev/null and b/docassets/images/viewchild.png differ
diff --git a/docs/breadcrumb.component.md b/docs/breadcrumb.component.md
new file mode 100644
index 0000000000..a527f8f147
--- /dev/null
+++ b/docs/breadcrumb.component.md
@@ -0,0 +1,41 @@
+# Breadcrumb Component
+
+Indicates the current position within a navigation hierarchy.
+
+
+
+
+
+
+
+- [Basic Usage](#basic-usage)
+ * [Properties](#properties)
+ * [Events](#events)
+
+
+
+
+
+## Basic Usage
+
+```html
+
+
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
+| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
+| root | string | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use i18n resource key for the property value. |
+| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
+
+### Events
+
+| Name | Returned Type | Description |
+| --- | --- | --- |
+| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |
diff --git a/docs/data-column.component.md b/docs/data-column.component.md
new file mode 100644
index 0000000000..48a11eda1c
--- /dev/null
+++ b/docs/data-column.component.md
@@ -0,0 +1,141 @@
+# DataColumn Component
+
+Defines column properties for DataTable, Tasklist, Document List and other components.
+
+
+
+
+
+- [Basic Usage](#basic-usage)
+ * [Properties](#properties)
+- [Details](#details)
+ * [Automatic column header translation](#automatic-column-header-translation)
+ * [Custom tooltips](#custom-tooltips)
+ * [Column Templates](#column-templates)
+
+
+
+
+
+## Basic Usage
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
+| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
+| format | string | | Value format (if supported by components), for example format of the date |
+| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
+| title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. |
+| template | `TemplateRef` | | Custom column template |
+| sr-title | string | | Screen reader title, used for accessibility purposes |
+| class | string | | Additional CSS class to be applied to column (header and cells) |
+| formatTooltip | Function | | Custom tooltip formatter function. |
+
+## Details
+
+### Automatic column header translation
+
+You can use i18n resource keys with DataColumn `title` property.
+The component will automatically check the corresponding i18n resources and fetch corresponding value.
+
+```html
+
+
+```
+
+This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
+
+### Custom tooltips
+
+You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
+
+```html
+
+
+```
+
+And the code in this case will be similar to the following:
+
+```ts
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+
+@Component({...})
+export class MyComponent {
+ ...
+
+ getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+ if (row) {
+ return row.getValue('name');
+ }
+ return null;
+ }
+}
+```
+
+To disable the tooltip your function can return `null` or an empty string.
+
+### Column Templates
+
+It is possible to assign a custom column template like the following:
+
+```html
+
+
+
+
+ V. {{value}}
+
+
+
+
+```
+
+Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
+
+```html
+
+```
+
+Alternatively you can get access to the entire data context using the following syntax:
+
+```html
+
+```
+
+That means you are going to create local variable `entry` that is bound to the data context via Angular's special `$implicit` keyword.
+
+```html
+
+ V. {{entry.data.getValue(entry.row, entry.col)}}
+
+```
+
+In the second case `entry` variable is holding a reference to the following data context:
+
+```ts
+{
+ data: DataTableAdapter,
+ row: DataRow,
+ col: DataColumn
+}
+```
diff --git a/docs/document-list.component.md b/docs/document-list.component.md
new file mode 100644
index 0000000000..17238596ce
--- /dev/null
+++ b/docs/document-list.component.md
@@ -0,0 +1,1308 @@
+# Document List component
+
+Displays the documents from a repository.
+
+
+
+
+
+- [Basic Usage](#basic-usage)
+ * [Properties](#properties)
+ * [Events](#events)
+- [Details](#details)
+ * [DOM Events](#dom-events)
+ * [Data Sources](#data-sources)
+ + [Node ID](#node-id)
+ + [Repository aliases](#repository-aliases)
+ + [DocumentList aliases](#documentlist-aliases)
+ * [Setting default folder](#setting-default-folder)
+ * [Custom icons for selected rows](#custom-icons-for-selected-rows)
+ * [Calling DocumentList api directly](#calling-documentlist-api-directly)
+ * [Custom columns](#custom-columns)
+ * [Underlying node object](#underlying-node-object)
+ * [Date Column](#date-column)
+ * [Location Column](#location-column)
+ * [Column Template](#column-template)
+ * [Actions](#actions)
+ * [Menu actions](#menu-actions)
+ * [Default action handlers](#default-action-handlers)
+ + [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
+ + [Delete - Show notification message with no permission](#delete---show-notification-message-with-no-permission)
+ + [Delete - Disable button checking the permission](#delete---disable-button-checking-the-permission)
+ + [Download](#download)
+ + [Copy and move](#copy-and-move)
+ + [Error, Permission and success callback](#error-permission-and-success-callback)
+ * [Folder actions](#folder-actions)
+ * [Context Menu](#context-menu)
+ * [Navigation mode](#navigation-mode)
+- [Advanced usage and customization](#advanced-usage-and-customization)
+ * [Custom row filter](#custom-row-filter)
+ * [Custom image resolver](#custom-image-resolver)
+ * [Hiding columns on small screens](#hiding-columns-on-small-screens)
+ * [Custom row permissions style](#custom-row-permissions-style)
+ + [Examples](#examples)
+ * [Custom 'empty folder' template](#custom-empty-folder-template)
+ * [Customizing default actions](#customizing-default-actions)
+- [See also](#see-also)
+
+
+
+
+
+## Basic Usage
+
+```html
+
+
+```
+
+### Properties
+
+The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selectionMode | string | 'single' | 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. |
+| selection | Array | [] | Contains selected nodes |
+| rowStyle | 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 |
+| rowStyleClass | string | | The CSS class to apply to every row |
+| currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) |
+| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node |
+| permissionsStyle | [PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts) | null | with this array you can define different styles depending on the permission of the user on that node. The PermissionStyleModel allows you to select also if you want to apply the style only on the file or folder nodes. PermissionStyleModel.permission accepts the following values [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) [see more](#custom-row-permissions-style). |
+| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity |
+| navigate | boolean | true | Toggles navigation to folder content or file preview |
+| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
+| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
+| thumbnails | boolean | false | Show document thumbnails rather than icons |
+| multiselect | boolean | false | Toggles multiselect mode |
+| contentActions | boolean | false | Toggles content actions for each row |
+| contentActionsPosition | string (left\|right) | right | Position of the content actions dropdown menu. |
+| contextMenuActions | boolean | false | Toggles context menus for each row |
+| enablePagination | boolean | true | Shows pagination |
+| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
+| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
+| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
+| sorting | string[] | | 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 default sorting detected by the component based on columns. |
+| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| nodeClick | emitted when user clicks a list node |
+| nodeDblClick | emitted when user double-clicks list node |
+| folderChange | emitted once current display folder has changed |
+| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
+| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
+| ready | emitted when the documentList is ready and loads all the elements|
+
+## Details
+
+### DOM Events
+
+Below are the DOM events the DocumentList component emits.
+All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
+
+| Name | Description |
+| --- | --- |
+| node-click | Raised when user clicks the node |
+| node-dblclick | Raised when user double-clicks the node |
+| node-select | Raised when user selects a node |
+| node-unselect | Raised when user unselects a node |
+
+Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/docs/Web/API/CustomEvent) instance, having at least the following properties as part of the `Event.detail` property value:
+
+```ts
+{
+ sender: DocumentListComponent,
+ node: MinimalNodeEntity
+}
+```
+
+Please refer to the DataTable documentation to find details about additional DOM events the DocumentList component bubbles up from the DataTable.
+
+Below is a basic example of handling DOM events in the parent elements.
+
+```html
+
+
+
+
+ ...
+
+
+
+
+```
+
+### Data Sources
+
+For the Document List data sources you can use one of the following options:
+
+#### Node ID
+
+The unique identifier of the Node. Gets automatically updated when you perform navigation to other folders.
+
+#### Repository aliases
+
+You can use one of the well-known reserved aliases:
+
+- `-root-`
+- `-shared-`
+- `-my-`
+
+#### DocumentList aliases
+
+The DocumentList component also provides support for the following reserved aliases you can use:
+
+- `-trashcan-`,
+- `-sharedlinks-`
+- `-sites-`
+- `-favorites-`
+- `-recent-`
+
+Note that due to specific origin of the data the sources above do not support navigation.
+You may want handling single and double clicks yourself to perform navigation to other sources.
+
+DocumentList component supports default presets for all the custom sources mentioned earlier.
+If you don't provide any custom column definition utilizing "data-columns" component,
+then a default preset will be automatically used at runtime.
+
+Some of the presets use the Location columns that allow you to navigate to the parent folder of the node,
+for instance navigating from the "Favorite" node to the folder containing it.
+There's a possibility to set the default location format using "locationFormat" property, to avoid re-defining entire columns layout.
+
+The default column layout for non-reserved views is:
+
+- Icon
+- Name
+- Size
+- Modified (date)
+- Modified by
+
+__Trashcan__
+
+```html
+
+
+```
+
+Default layout:
+
+- Icon
+- Name
+- Location
+- Size
+- Deleted
+- Deleted by
+
+__Shared Links__
+
+```html
+
+
+```
+
+Default layout:
+
+- Icon
+- Name
+- Location
+- Size
+- Modified
+- Modified by
+- Shared by
+
+__Sites__
+
+```html
+
+
+```
+
+Default layout:
+
+- Icon
+- Title
+- Status
+
+__Favorites__
+
+```html
+
+
+```
+
+Default layout:
+
+- Icon
+- Name
+- Location
+- Size
+- Modified
+- Modified by
+
+__Recent Files__
+
+```html
+
+
+```
+
+Default layout:
+
+- Icon
+- Name
+- Location
+
+### Setting default folder
+
+You can set current folder path by assigning a value for `currentFolderId` property.
+It can be either one of the well-known locations as **-root-**, **-shared-** or **-my-** or a node ID (guid).
+
+There may be scenarios when it is needed to set default path based on relative string value rather than node ID.
+For example when folder name or path is static but its underlying ID is not (i.e. created manually by admin).
+In this case you can use `alfresco-js-api` to get node details based on its relative path.
+
+Let's try setting default folder to `/Sites/swsdp/documentLibrary` without knowing it's ID beforehand.
+For the sake of simplicity example below shows only main points you may need to pay attention to:
+
+```ts
+import { ChangeDetectorRef } from '@angular/core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+
+export class FilesComponent implements OnInit {
+
+ currentFolderId: string = '-my-';
+
+ constructor(private apiService: AlfrescoApiService,
+ private changeDetector: ChangeDetectorRef) {
+ // ...
+ }
+
+ ngOnInit() {
+ let nodes: any = this.apiService.getInstance().nodes;
+ nodes.getNodeInfo('-root-', {
+ includeSource: true,
+ include: ['path', 'properties'],
+ relativePath: '/Sites/swsdp/documentLibrary'
+ })
+ .then(node => {
+ console.log(node);
+ this.currentFolderId = node.id;
+ this.changeDetector.detectChanges();
+ });
+ }
+}
+```
+
+We've added `console.log(node)` for the `getNodeInfo` callback just for study and debug purposes.
+It helps examining other valuable information you can have access to if needed:
+
+
+
+**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
+
+### Custom icons for selected rows
+
+You can use the "class" property of the "DataColumn" component to apply your custom css.
+
+As an example, this feature can be used to change the look and feel of the icon for the selected rows.
+
+Let's start by assigning an "image-table-cell" class to the thumbnail column:
+
+```html
+
+
+
+
+
+
+ ...
+
+
+```
+
+Now your application can define custom styles to change the content of the column based on some other conditions, like selection state:
+
+```css
+adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
+ position: relative;
+}
+
+adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
+ content: "\E876"; /* "done" */
+ font-family: "Material Icons";
+ font-size: 24px;
+ line-height: 32px;
+ text-align: center;
+ color: white;
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 50%;
+ left: 50%;
+ margin-top: -16px;
+ margin-left: -14px;
+ border-radius: 100%;
+ background: #00bcd4;
+}
+```
+
+Once your application starts you should see the following icon for each selected row:
+
+
+
+### Calling DocumentList api directly
+
+Typically you will be binding DocumentList properties to your application/component class properties:
+
+```html
+
+
+```
+
+with the underlying class being implemented similar to the following one:
+
+```ts
+@Component(...)
+export class MyAppComponent {
+
+ myStartFolder: string = '-my-';
+
+}
+```
+
+However there may be scenarios that require you direct access to DocumentList apis.
+You can get reference to the DocumentList instance by means of Angular **Component Interaction** API.
+See more details in [Parent calls a ViewChild](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child)
+section of the official docs.
+
+Here's an example of getting reference:
+
+```html
+
+
+```
+
+Note the `#documentList` ID we've just added to be able referencing this component later on.
+
+```ts
+import { ViewChild, AfterViewInit } from '@angular/core';
+import { DocumentListComponent } from 'ng2-alfresco-documentlist';
+
+@Component({...})
+export class MyAppComponent implements AfterViewInit {
+
+ myStartFolder: string = '-my-';
+
+ @ViewChild(DocumentListComponent)
+ documentList: DocumentListComponent;
+
+ ngAfterViewInit() {
+ console.log(this.documentList);
+ }
+}
+```
+
+Example above should produce the following browser console output:
+
+
+
+Now you are able to access DocumentList properties or to call methods directly.
+
+```ts
+// print currently displayed folder node object to console
+console.log(documentList.folderNode);
+```
+
+**Important note**:
+It is important accessing child components at least at the `AfterViewInit` state.
+Any UI click (buttons, links, etc.) event handlers are absolutely fine. This cannot be `ngOnInit` event though.
+You can get more details in [Component lifecycle hooks](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html) article.
+
+### Custom columns
+
+It is possible to reorder, extend or completely redefine data columns displayed by the component.
+By default special `$thumbnail` and `displayName` columns are rendered.
+
+A custom set of columns can look like the following:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+You can also use HTML-based schema declaration used by DataTable, TaskList and other components:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+You can also add tooltips, automatic column title translation and other features. See the [DataColumn component page](data-column.component.md) for more information about specifying and customizing columns.
+
+### Underlying node object
+
+DocumentList component assigns an instance of `MinimalNode` type (`alfresco-js-api`) as a data context of each row.
+
+```js
+export interface MinimalNode {
+ id: string;
+ parentId: string;
+ name: string;
+ nodeType: string;
+ isFolder: boolean;
+ isFile: boolean;
+ modifiedAt: Date;
+ modifiedByUser: UserInfo;
+ createdAt: Date;
+ createdByUser: UserInfo;
+ content: ContentInfo;
+ path: PathInfoEntity;
+ properties: NodeProperties;
+}
+```
+
+_See more details in [alfresco-js-api](https://github.com/Alfresco/alfresco-js-api/blob/master/index.d.ts) repository._
+
+Binding to nested properties is also supported. You can define a column key as a property path similar to the following:
+
+```text
+createdByUser.displayName
+```
+
+Here's a short example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### Date Column
+
+For `date` column type the [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
+For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
+
+ADF also supports additional `timeAgo` value for the `format` property.
+That triggers the date values to be rendered using popular ["Time from now"](https://momentjs.com/docs/#/displaying/fromnow/) format.
+
+### Location Column
+
+This column is used to display a clickable location link pointing to the parent path of the node.
+
+You are going to use it with custom navigation or when displaying content from the sources like:
+
+- Sites
+- Shared Links
+- Recent Files
+- Favorites
+- Trashcan
+
+or any other location that needs nagivating to the node parent folder easily.
+
+Note that the parent node is evaluated automatically,
+the generated link will be pointing to URL based on the `format` property value with the node `id` value appended:
+
+```text
+//:id
+```
+
+For example:
+
+```html
+
+
+```
+
+All links rendered in the column above will have an address mapped to `/files`:
+
+```text
+/files/node-1-id
+/files/node-2-id
+...
+```
+
+### Column Template
+
+It is possible to provide custom column/cell template that may contain other Angular components or HTML elements:
+
+Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
+
+| Name | Type | Description |
+| --- | --- | --- |
+| data | [DataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Data adapter instance. |
+| row | [DataRow](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Current data row instance. |
+| col | [DataColumn](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Current data column instance. |
+
+You can use all three properties to gain full access to underlying data from within your custom templates.
+In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
+
+```html
+
+
+
+```
+
+The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
+
+Getting a cell value from the underlying DataTableAdapter:
+
+```ts
+context.data.getValue(entry.row, entry.col);
+```
+
+You can retrieve all property values for underlying node, including nested properties (via property paths):
+
+```ts
+context.row.getValue('name')
+context.row.getValue('createdByUser.displayName')
+```
+
+You may want using **row** api to get raw value access.
+
+```html
+
+
+ Hi! {{context.row.getValue('createdByUser.displayName')}}
+ Hi! {{context.row.getValue('name')}}
+
+
+```
+
+Use **data** api to get values with post-processing, like datetime/icon conversion._
+
+In the Example below we will prepend `Hi!` to each file and folder name in the list:
+
+```html
+
+
+ Hi! {{entry.data.getValue(entry.row, entry.col)}}
+
+
+```
+
+In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
+
+```html
+
+
+
+
+
+```
+
+
+
+### Actions
+
+Properties:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `target` | string | | "document" or "folder" |
+| `title` | string | | The title of the action as shown in the menu |
+| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
+| `permission` | string | | The name of the permission |
+
+Events:
+
+| Name | Handler | Description |
+| --- | --- | --- |
+| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
+| `permissionEvent` | All | Emitted when a permission error happens |
+| `success` | copy, move, delete | Emitted on successful action with the success string message |
+| `error` | copy, move | Emitted on unsuccessful action with the error event |
+
+DocumentList supports declarative actions for Documents and Folders.
+Each action can be bound to either default out-of-the-box handler, to a custom behaviour or to both.
+You can define both folder and document actions at the same time.
+
+### Menu actions
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```ts
+export class MyView {
+ // ...
+
+ myCustomAction1(event) {
+ let entry = event.value.entry;
+ alert(`Custom document action for ${entry.name}`);
+ }
+
+ myCustomActionAfterDelete(event) {
+ let entry = event.value.entry;
+ alert(`Custom callback after delete system action for ${entry.name}`);
+ }
+}
+```
+
+All document actions are rendered as a dropdown menu as on the picture below:
+
+
+
+### Default action handlers
+
+The following action handlers are provided out-of-box:
+
+- **Download** (document)
+- **Copy** (document, folder)
+- **Move** (document, folder)
+- **Delete** (document, folder)
+
+All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"`
+will trigger the same `download` action.
+
+#### Delete - System handler combined with custom handler
+
+If you specify both **handler="delete"** and your custom **(execute)="myCustomActionAfterDelete($event)"**, your callback will be invoked after a successful delete happened. A successful delete operation happens if there is neither permission error, nor other network related error for the delete operation request. For handling permission errors see the section below.
+
+#### Delete - Show notification message with no permission
+
+You can show a notification error when the user doesn't have the right permission to perform the action.
+The ContentActionComponent provides the event permissionEvent that is raised when the permission specified in the permission property is missing
+You can subscribe to this event from your component and use the NotificationService to show a message.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+```ts
+export class MyComponent {
+
+ onPermissionsFailed(event: any) {
+ this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
+ }
+
+}
+```
+
+
+
+#### Delete - Disable button checking the permission
+
+You can easily disable a button when the user doesn't own the permission to perform the action related to the button.
+The ContentActionComponent provides the property permission that must contain the permission to check and a property disableWithNoPermission that can be true if
+ you want to see the button disabled.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+
+
+#### Download
+
+Initiates download of the corresponding document file.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+
+
+#### Copy and move
+
+Shows the destination chooser dialog for copy and move actions. By default the destination chooser lists all the folders of the subject item's parent (except the selected item which is about to be copied/moved if it was a folder itself also).
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Error, Permission and success callback
+
+Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
+
+- The error handler callback gets the error object which was raised
+- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
+- The permissionEvent callback is the same as described above with the delete action
+
+
+
+### Folder actions
+
+Folder actions have the same declaration as document actions except ```target="folder"``` attribute value. You can define system, custom or combined handlers as well just as with the document actions.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```ts
+export class MyView {
+ // ...
+
+ myFolderAction1(event) {
+ let entry = event.value.entry;
+ alert(`Custom folder action for ${entry.name}`);
+ }
+
+ myCustomActionAfterDelete(event) {
+ let entry = event.value.entry;
+ alert(`Custom callback after delete system action for ${entry.name}`);
+ }
+}
+```
+
+
+
+### Context Menu
+
+DocumentList also provides integration for 'Context Menu Service' from the
+[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
+
+You can automatically turn all menu actions (for the files and folders)
+into context menu items like shown below:
+
+
+
+Enabling context menu is very simple:
+
+```ts
+@Component({
+ selector: 'my-view',
+ template: `
+ ...
+
+ `
+})
+export class MyView {
+}
+```
+
+This enables context menu items for documents and folders.
+
+### Navigation mode
+
+By default DocumentList component uses 'double-click' mode for navigation.
+That means user will see the contents of the folder by double-clicking its name
+or icon (similar to Google Drive behaviour). However it is possible switching to
+other modes, like single-click navigation for example.
+
+The following navigation modes are supported:
+
+- **click**
+- **dblclick**
+
+The following example switches navigation to single clicks:
+
+```html
+
+
+```
+
+## Advanced usage and customization
+
+### Custom row filter
+
+You can create a custom row filter implementation that returns `true` if row should be displayed or `false` to hide it.
+Typical row filter implementation is a function that receives `ShareDataRow` as parameter:
+
+```ts
+myFilter(row: ShareDataRow): boolean {
+ return true;
+}
+```
+
+_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
+
+**View1.component.html**
+
+```html
+
+
+```
+
+**View1.component.ts**
+
+```ts
+import { RowFilter, ShareDataRow } from 'ng2-alfresco-documentlist';
+
+export class View1 {
+
+ folderFilter: RowFilter;
+
+ constructor() {
+
+ // This filter will make document list show only folders
+
+ this.folderFilter = (row: ShareDataRow) => {
+ let node = row.node.entry;
+
+ if (node && node.isFolder) {
+ return true;
+ }
+
+ return false;
+ };
+ }
+}
+```
+
+### Custom image resolver
+
+You can create a custom image resolver implementation and take full control over how folder/file icons and thumbnails
+are resolved and what document list should display.
+
+**Image resolvers are executed only for columns of the `image` type.**
+
+Typical image resolver implementation is a function that receives `DataRow` and `DataColumn` as parameters:
+
+```ts
+myImageResolver(row: DataRow, col: DataColumn): string {
+ return '/path/to/image';
+}
+```
+
+Your function can return `null` or `false` values to fallback to default image resolving behavior.
+
+_Note that for the sake of simplicity the example code below was reduced to the main points of interest only._
+
+**View1.component.html**
+
+```html
+
+
+
+
+
+
+
+
+```
+
+**View1.component.ts**
+
+```ts
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+import { ImageResolver } from 'ng2-alfresco-documentlist';
+
+export class View1 {
+
+ folderImageResolver: ImageResolver;
+
+ constructor() {
+
+ // Customize folder icons, leave file icons untouched
+
+ this.folderImageResolver = (row: DataRow, col: DataColumn) => {
+ let isFolder = row.getValue('isFolder');
+ if (isFolder) {
+
+ // (optional) You may want dynamically getting the column value
+ let name = row.getValue(col.key);
+
+ // Format image url
+ return `http:///${name}`;
+ }
+
+ // For the rest of the cases just fallback to default behaviour.
+ return null;
+ };
+
+ }
+
+}
+```
+
+### Hiding columns on small screens
+
+You can hide columns on small screens by means of custom CSS rules:
+
+```css
+@media all and (max-width: 768px) {
+
+ alfresco-document-list >>> th.desktop-only .cell-value {
+ display: none;
+ }
+
+ alfresco-document-list >>> td.desktop-only .cell-value {
+ display: none;
+ }
+}
+```
+
+Now you can declare columns and assign `desktop-only` class where needed:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Desktop View**
+
+
+
+**Mobile View**
+
+
+
+### Custom row permissions style
+
+You can customize the style of the row based on the permissions.
+The property to use is permissionsStyle[]:[PermissionStyleModel[]](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts).
+The permissionsStyle array can define different styles depending on the permission of the user on that node.
+
+[PermissionStyleModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts)
+
+| Property | Description |
+| --- | --- |
+| isFile/isFolder | allow you to select if you want apply the style to file/folder nodes |
+| permission | is an enum value [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) |
+| css| the name of the class to add |
+
+#### Examples
+
+If you want to change the style on rows where the user can create content:
+
+```ts
+let permissionsStyle: PermissionStyleModel[] = [];
+
+this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+```
+
+```html
+
+
+```
+
+```css
+adf-document-list >>> adf-datatable tr.document-list__create {
+ background: green !important;
+}
+```
+
+If you want to change the style on the folders where the user doesn't have the permission to update:
+
+```ts
+
+let permissionsStyle: PermissionStyleModel[] = [];
+
+this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
+
+```
+
+```html
+
+
+```
+
+```css
+adf-document-list >>> adf-datatable tr.document-list__disable {
+ background: red !important;
+}
+```
+
+### Custom 'empty folder' template
+
+By default DocumentList provides the following content for the empty folder:
+
+
+
+This can be changed by means of the custom html template:
+
+```html
+
+
+
+
Sorry, no content here
+
+
+
+```
+
+That will give the following output:
+
+
+
+### Customizing default actions
+
+It is possible extending or replacing the list of available system actions for documents and folders.
+Actions for the documents and folders can be accessed via the following services:
+
+- `DocumentActionsService`, document action menu and quick document actions
+- `FolderActionsService`, folder action menu and quick folder actions
+
+Example below demonstrates how a new action handler can be registered with the
+`DocumentActionsService`.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+You register custom handler called `my-handler` that will be executing `myDocumentActionHandler`
+function each time upon being invoked.
+
+```ts
+import { DocumentActionsService } from 'ng2-alfresco-documentlist';
+
+export class MyView {
+
+ constructor(documentActions: DocumentActionsService) {
+ documentActions.setHandler(
+ 'my-handler',
+ this.myDocumentActionHandler.bind(this)
+ );
+ }
+
+ myDocumentActionHandler(obj: any) {
+ window.alert('my custom action handler');
+ }
+}
+```
+
+The same approach allows changing the way out-of-box action handlers behave.
+Registering custom action with the name `download` replaces default one:
+
+```ts
+export class MyView {
+
+ constructor(documentActions: DocumentActionsService) {
+ documentActions.setHandler(
+ 'download',
+ this.customDownloadBehavior.bind(this)
+ );
+ }
+
+ customDownloadBehavior(obj: any) {
+ window.alert('my custom download behavior');
+ }
+}
+```
+
+Typically you may want populating all your custom actions at the application root level or
+by means of custom application service.
+
+## See also
+
+- [Walkthrough: adding indicators to clearly highlight information about a node](metadata-indicators.md)
diff --git a/docs/extensibility.md b/docs/extensibility.md
new file mode 100644
index 0000000000..9af7e129b4
--- /dev/null
+++ b/docs/extensibility.md
@@ -0,0 +1,255 @@
+# Form Extensibility and Customisation
+
+_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
+
+- How components and widgets are rendered on a Form
+- Replacing default form widgets with custom components
+- Replacing custom stencils with custom components
+
+## How components and widgets are rendered on a Form
+
+All form field editors (aka widgets) on a Form are rendered by means of `FormFieldComponent`
+that takes an instance of a `FormFieldModel`:
+
+```html
+
+```
+
+This component depends on `FormRenderingService` service to map `FormFieldModel` to UI component
+based on field type or metadata information.
+
+### Component type resolvers
+
+`FormRenderingService` maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
+
+```ts
+export interface ComponentTypeResolver {
+ (field: FormFieldModel): Type<{}>;
+}
+```
+
+Typically a `ComponentTypeResolver` is a function that takes `FormFieldModel` and returns corresponding component type.
+It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
+
+#### Static component mapping
+
+You can (re)map fields like in the following:
+
+```ts
+let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
+formRenderingService.setComponentTypeResolver('text', customResolver, true);
+```
+
+or simply:
+
+```ts
+formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
+```
+
+#### Dynamic component mapping
+
+Alternatively your resolver may return different component types based on `FormFieldModel` state and condition:
+
+```ts
+let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
+ if (field) {
+ let params = field.params;
+ }
+ return UnknownWidgetComponent;
+};
+formRenderingService.setComponentTypeResolver('text', customResolver, true);
+```
+
+### Default component mappings
+
+Stencil Name | Field Type | Component Type |
+| --- | --- | --- |
+| Text | text | TextWidgetComponent |
+| Number | integer | NumberWidgetComponent |
+| Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
+| Checkbox | boolean | CheckboxWidgetComponent |
+| Dropdown | dropdown | DropdownWidgetComponent |
+| Date | date | DateWidgetComponent |
+| Amount | amount | AmountWidgetComponent |
+| Radio buttons | radio-buttons | RadioButtonsWidgetComponent |
+| Hyperlink | hyperlink | HyperlinkWidgetComponent |
+| Display value | readonly | DisplayValueWidgetComponent |
+| Display text | readonly-text | DisplayTextWidgetComponentComponent |
+| Typeahead | typeahead | TypeaheadWidgetComponent |
+| People | people | PeopleWidgetComponent |
+| Group of people | functional-group | FunctionalGroupWidgetComponent |
+| Dynamic table | dynamic-table | DynamicTableWidgetComponent |
+| N/A | container | ContainerWidgetComponent (layout component) |
+| Header | group | ContainerWidgetComponent |
+| Attach | upload | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
+| N/A | N/A | UnknownWidgetComponent |
+
+## Replacing default form widgets with custom components
+
+This is a short walkthrough on replacing a standard `Text` widget with a custom component for all Alfresco Activiti forms
+rendered within `` component.
+
+First let's create a simple Alfresco Activiti form with `Text` widgets:
+
+
+
+Every custom widget must inherit `WidgetComponent` class in order to function properly:
+
+```ts
+import { Component } from '@angular/core';
+import { WidgetComponent } from 'ng2-activiti-form';
+
+@Component({
+ selector: 'custom-editor',
+ template: `
+
Look, I'm a custom editor!
+ `
+})
+export class CustomEditorComponent extends WidgetComponent {}
+```
+
+Now you will need to add it to the application module or any custom module that is imported into the application one:
+
+```ts
+import { NgModule } from '@angular/core';
+import { CustomEditorComponent } from './custom-editor.component';
+
+@NgModule({
+ declarations: [ CustomEditorComponent ],
+ exports: [ CustomEditorComponent ],
+ entryComponents: [ CustomEditorComponent ]
+})
+export class CustomEditorsModule {}
+```
+
+Every custom widget should be added into all three module collections: `declarations`, `exports` and `entryComponents`.
+
+If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
+don't forget to import it into your main application one:
+
+```ts
+@NgModule({
+ imports: [
+ // ...
+ CustomEditorsModule
+ // ...
+ ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+Now you can import `FormRenderingService` in any of your Views and override default mapping similar to the following:
+
+```ts
+import { Component } from '@angular/core';
+import { CustomEditorComponent } from './custom-editor.component';
+
+@Component({...})
+export class MyView {
+
+ constructor(formRenderingService: FormRenderingService) {
+ formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
+ }
+
+}
+```
+
+At runtime it should look similar to the following:
+
+
+
+## Replacing custom stencils with custom components
+
+This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular 2 components.
+
+### Creating custom stencil
+
+First let's create a basic stencil and call it `Custom Stencil 01`:
+
+
+
+_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
+
+Next put some simple html layout for `Form runtime template` and `Form editor template` fields:
+
+```html
+
Custom activiti stencil
+```
+
+Now you are ready to design a test form based on your custom stencil:
+
+
+
+Once wired with a new task it should look like the following within Alfresco Activiti web application:
+
+
+
+### Creating custom widget
+
+If you load previously created task into ADF `` component you will see something like the following:
+
+
+
+Let's create an Angular 2 component to render missing content:
+
+```ts
+import { Component } from '@angular/core';
+import { WidgetComponent } from 'ng2-activiti-form';
+
+@Component({
+ selector: 'custom-stencil-01',
+ template: `
ADF version of custom Activiti stencil
`
+})
+export class CustomStencil01 extends WidgetComponent {}
+```
+
+Put it inside custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { CustomStencil01 } from './custom-stencil-01.component';
+
+@NgModule({
+ declarations: [ CustomStencil01 ],
+ exports: [ CustomStencil01 ],
+ entryComponents: [ CustomStencil01 ]
+})
+export class CustomEditorsModule {}
+```
+
+And import into your Application Module
+
+```ts
+@NgModule({
+ imports: [
+ // ...
+ CustomEditorsModule
+ // ...
+ ],
+ providers: [],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+Now you can import `FormRenderingService` in any of your Views and provide new mapping:
+
+```ts
+import { Component } from '@angular/core';
+import { CustomStencil01 } from './custom-stencil-01.component';
+
+@Component({...})
+export class MyView {
+
+ constructor(formRenderingService: FormRenderingService) {
+ formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+ }
+
+}
+```
+
+At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
+
+
\ No newline at end of file
diff --git a/docs/metadata-indicators.md b/docs/metadata-indicators.md
new file mode 100644
index 0000000000..4d3665fa7e
--- /dev/null
+++ b/docs/metadata-indicators.md
@@ -0,0 +1,132 @@
+# Walkthrough: adding indicators to clearly highlight information about a node
+
+Every node object in the document list holds metadata information.
+All metadata is stored inside `properties` property.
+
+Here's an example of basic image-related metadata fetched from the server:
+
+
+
+## Custom column template
+
+```html
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+
+We are going to declare a column and bind its value to the entire `properties` object of the underlying node. The column will be using our custom `` component to display icons based on metadata state.
+
+## MetadataIconsComponent component
+
+Let's create a simple `MetadataIconsComponent` component with a selector set to `adf-metadata-icons` as shown below:
+
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'adf-metadata-icons',
+ template: `
+
+
+
+ `
+})
+export class MetadataIconsComponent {
+
+ @Input()
+ metadata: any;
+
+}
+```
+
+The component will expose a `metadata` property we can use from the outside and eventually bind data to similar to the following:
+
+```html
+
+```
+
+As you have seen earlier the DataColumn binds to `properties` property of the node, and maps the runtime value as the `value` local variable within the template.
+Next we propagate the `value` reference to the `` component as `metadata` property.
+
+```html
+
+
+
+
+
+```
+
+So once rendered our component will automatically have access to entire set of node metadata. Let's build some visualization of the `cm:versionLabel` property.
+
+For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
+
+```html
+
+```
+
+Note: For a list of the icons that can be used with `` component please refer to this resource: [material.io/icons](https://material.io/icons/)
+
+## Testing component
+
+You will need to enable `versioning` feature for the Document List to be able to upload multiple versions of the file instead of renaming duplicates.
+
+Drag and drop any image file to upload it and ensure it has `1.0` displayed in the column:
+
+
+
+Now drop the same file again to upload a new version of the file.
+You should now see icons instead of version label.
+
+
+
+You can see on the screenshot above that only files with version `2.0` got extra icons.
+
+## Conclusion
+
+The full source code of the component can be found below:
+
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'adf-metadata-icons',
+ template: `
+
+ `
+})
+export class MetadataIconsComponent {
+
+ @Input()
+ metadata: any;
+
+}
+```
+
+You can use this idea to build more complex indication experience based on the actual metadata state.
\ No newline at end of file
diff --git a/docs/sites-dropdown.component.md b/docs/sites-dropdown.component.md
new file mode 100644
index 0000000000..d809ee3704
--- /dev/null
+++ b/docs/sites-dropdown.component.md
@@ -0,0 +1,30 @@
+# Sites Dropdown component
+
+Displays a dropdown menu to show and interact with the sites of the current user.
+
+
+
+
+
+
+
+- [Basic Usage](#basic-usage)
+ * [Events](#events)
+
+
+
+
+
+## Basic Usage
+
+```html
+
+
+```
+
+### Events
+
+| Name | Returned Type | Description |
+| --- | --- | --- |
+| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/site.model.ts) | emitted when user selects a site. When default option is selected an empty model is emitted |
diff --git a/docs/stencils.md b/docs/stencils.md
new file mode 100644
index 0000000000..d11d411404
--- /dev/null
+++ b/docs/stencils.md
@@ -0,0 +1,144 @@
+# Form Stencils with Angular 2
+
+Form component provides basic support for custom stencils created with Activiti stencil editor.
+
+## Installing
+
+Configuring support for stencils requires the following configuration for your `index.html` file:
+
+```html
+
+
+
+
+```
+
+Where `` should be replaced with a valid url pointing to your Activiti installation, for example:
+
+```html
+
+```
+- `/app/rest/script-files/controllers`
+ provides all stencil controllers stored within Activiti
+
+- `runtime.ng1.js`
+ provides a compatibility layer for controllers created with Angular 1
+ (this is to avoid runtime errors when loading Angular 1 code into `` component)
+
+- `runtime.adf.js`
+ provides API for stencil management and registration,
+ i.e. mapping html templates with corresponding controller classes
+
+## Creating new stencil
+
+Create a new stencil and add a new item called `ng2 component 01`.
+
+The internal identifier in this case should be `ng2_component_01`.
+This value will be used as field type when form gets rendered.
+
+## Form runtime template
+
+This should be a valid Angular 2 component template that you want to render in `` component:
+
+```html
+
+
Angular2 Component
+
Created by: {{name}}
+
+```
+
+## Form editor template
+
+This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
+
+```html
+
+
+ Angular2 Component 01
+
+
+```
+
+## Custom component controller
+
+This field should contain JavaScript code for Angular 2 component class.
+
+_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
+you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
+to see how TS code gets transpiled into JS._
+
+### JavaScript code
+
+```js
+var SampleClass1 = (function () {
+ function SampleClass1() {
+ this.name = 'Denys';
+ console.log('ng2_component_01 ctor');
+ }
+ SampleClass1.prototype.ngOnInit = function () {
+ console.log('OnInit called');
+ };
+ return SampleClass1;
+}());
+```
+
+### TypeScript code
+
+The TypeScript version of the code above is:
+
+```ts
+import { OnInit } from '@angular/core';
+
+class SampleClass1 implements OnInit {
+
+ constructor() {
+ console.log('ctor called');
+ }
+
+ ngOnInit() {
+ console.log('OnInit called');
+ }
+
+}
+```
+
+### Mapping template with component class
+
+In order to map **form runtime template** with the corresponding component class
+you will need to register both parts with `adf.registerComponent(identifier, class)` api:
+
+```js
+if (adf) {
+ adf.registerComponent('ng2_component_01', SampleClass1);
+}
+```
+
+### Final result
+
+```js
+var SampleClass1 = (function () {
+ function SampleClass1() {
+ this.name = 'Denys';
+ console.log('ng2_component_01 ctor');
+ }
+ SampleClass1.prototype.ngOnInit = function () {
+ console.log('OnInit called');
+ };
+ return SampleClass1;
+}());
+
+if (adf) {
+ adf.registerComponent('ng2_component_01', SampleClass1);
+}
+```
+
+## Runtime result
+
+When rendered on the form this stencil item should look like the following:
+
+```html
+Angular2 Component
+Created by: Denys
+```
+
+ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.
\ No newline at end of file
diff --git a/docs/summary.json b/docs/summary.json
new file mode 100644
index 0000000000..f608ea69d9
--- /dev/null
+++ b/docs/summary.json
@@ -0,0 +1,6 @@
+[
+ { "title": "Form Extensibility and Customisation", "file": "extensibility.md" },
+ { "title": "Form Stencils with Angular 2", "file": "stencils.md" },
+ { "title": "Theming", "file": "theming.md" },
+ { "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
+]
\ No newline at end of file
diff --git a/docs/theming.md b/docs/theming.md
index 0fb4c577d4..5c9e6e4dd3 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -1,9 +1,10 @@
# Theming your Alfresco ADF app
-### Using a pre-built theme
-Alfresco ADF comes prepackaged with several pre-built theme css files. These theme files also
+## Using a pre-built theme
+
+Angular Material comes prepackaged with several pre-built theme css files. These theme files also
include all of the styles for core (styles common to all components), so you only have to include a
-single css file for Alfresco ADF in your app.
+single css file for Angular Material in your app.
You can include a theme file directly into your application from
`ng2-alfresco-core/prebuilt-themes`
@@ -29,7 +30,7 @@ Or you can add it directly in your index.html
```
-### Defining a custom theme
+## Defining a custom theme
When you want more customization than a pre-built theme offers, you can create your own theme file. You need to include the packages only what you really use in your application.
@@ -76,10 +77,11 @@ $theme: mat-light-theme($primary, $accent, $warn);
Notes: if you are using the Generator or the demo shell you need only to change the`/app/theme.scss` with your set of colors
-#### Multiple themes
+### Multiple themes
+
You can create multiple themes for your application:
-##### Example of defining multiple themes:
+#### Example of defining multiple themes
```scss
@import '~@angular/material/theming';
diff --git a/ng2-components/README.md b/ng2-components/README.md
index 66d9275e40..16c7d4b25d 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -1,5 +1,10 @@
# Alfresco Angular Components
+**NOTE:** We are in the process of transferring docs from the component library
+README files to a new system. This file lists all the docs currently in the
+READMEs but the complete index for the docs can now be found in the
+[Component Docs Index](../docIndex.md).
+
diff --git a/ng2-components/config/buildFullDocIndex.js b/ng2-components/config/buildFullDocIndex.js
new file mode 100644
index 0000000000..70be479fe9
--- /dev/null
+++ b/ng2-components/config/buildFullDocIndex.js
@@ -0,0 +1,134 @@
+var fs = require('fs');
+var path = require('path');
+
+var angFilenameRegex = /([a-zA-Z0-9\-]+)\.((component)|(directive)|(model)|(service)|(widget))\.ts/;
+
+var indexFileName = '../docIndex.md';
+var summaryFileName = path.resolve('..', 'docs', 'summary.json');
+
+
+function searchFolderRecursive(folderPath) {
+ var items = fs.readdirSync(path.resolve(folderPath));
+
+ for (var i = 0; i < items.length; i++) {
+ var itemPath = path.resolve(folderPath, items[i]);
+ var info = fs.statSync(itemPath);
+
+ if (info.isFile() && (items[i].match(angFilenameRegex))) {
+ var nameNoSuffix = path.basename(items[i], '.ts');//items[i].substring(0, items[i].length - 4);
+
+ if(nameNoSuffix in docDict) {
+ itemsWithDocs.push(itemPath);
+ } else {
+ itemsWithoutDocs.push(itemPath);
+ }
+ } else if (info.isDirectory()) {
+ searchFolderRecursive(itemPath);
+ }
+ }
+}
+
+function getDocFolderItems(docFolderPath) {
+ var result = {};
+ var items = fs.readdirSync(path.resolve(docFolderPath));
+
+ for (var i = 0; i < items.length; i++) {
+ if (items[i].endsWith('.md')) {
+ var nameNoSuffix = path.basename(items[i], '.md');
+ result[nameNoSuffix] = 1;
+ }
+ }
+
+ return result;
+}
+
+function tidyName(name) {
+ var result = name.replace(/-/g, " ");
+ result = result.substr(0, 1).toUpperCase() + result.substr(1);
+ return result;
+}
+
+function makeSummaryIndex() {
+ var summaryJson = fs.readFileSync(summaryFileName, 'utf8');
+ var summary = JSON.parse(summaryJson);
+
+ var result = '';
+
+ for (var i = 0; i < summary.length; i++) {
+ var item = summary[i];
+ result += '- [' + item.title + '](docs/' + item.file + ')\n';
+ }
+
+ return result;
+}
+
+
+var docDict = getDocFolderItems(path.resolve('..', 'docs'));
+
+var rootItems = fs.readdirSync(path.resolve('.'));
+
+var libs = {}
+
+for (var i = 0; i < rootItems.length; i++) {
+ var itemPath = path.resolve(rootItems[i]);
+ var info = fs.statSync(itemPath);
+
+ if (info.isDirectory() && rootItems[i].match(/ng2-/)) {
+ libs[rootItems[i]] =[ [], [] ];
+ var itemsWithDocs = libs[rootItems[i]][0];
+ var itemsWithoutDocs = libs[rootItems[i]][1];
+ searchFolderRecursive(path.resolve(itemPath, 'src'));
+ }
+}
+
+
+
+var indexFileText = fs.readFileSync(indexFileName, 'utf8');
+
+var libNames = Object.keys(libs);
+
+for (var i = 0; i < libNames.length; i++) {
+ var listItems = [];
+ var libName = libNames[i];
+ var libData = libs[libName];
+
+ if (libData[0].length > 0) {
+ listItems.push('**Documented**\n');
+
+ for (var j = 0; j < libData[0].length; j++) {
+ var libFilePath = libData[0][j];
+ var libFileName = path.basename(libFilePath, '.ts');
+ var nameSections = libFileName.split('.');
+ var visibleName = tidyName(nameSections[0]) + ' ' + nameSections[1];
+ var mdListItem = '- [' + visibleName + '](docs/' + libFileName + '.md)';
+ listItems.push(mdListItem);
+ }
+ }
+
+ if (libData[1].length > 0) {
+ listItems.push('\n**Undocumented**\n');
+
+ for (var j = 0; j < libData[1].length; j++) {
+ var libFilePath = libData[1][j].replace(/\\/g, '/');
+ var libFileName = path.basename(libFilePath, '.ts');
+ var nameSections = libFileName.split('.');
+ var visibleName = tidyName(nameSections[0]) + ' ' + nameSections[1];
+ var relPath = libFilePath.substr(libFilePath.indexOf('/ng2-') + 1);
+ var mdListItem = '- [' + visibleName + '](' + relPath + ')';
+ listItems.push(mdListItem);
+ }
+ }
+
+ var libText = listItems.join('\n');
+ var libStartMarker = '';
+ var libEndMarker = '';
+ var contentRegex = new RegExp('(?:' + libStartMarker + ')([\\s\\S]*)(?:' + libEndMarker + ')');
+ indexFileText = indexFileText.replace(contentRegex, libStartMarker + '\n' + libText + '\n' + libEndMarker);
+}
+
+var guideStartMarker = '';
+var guideEndMarker = '';
+var contentRegex = new RegExp('(?:' + guideStartMarker + ')([\\s\\S]*)(?:' + guideEndMarker + ')');
+indexFileText = indexFileText.replace(contentRegex, guideStartMarker + '\n' + makeSummaryIndex() + '\n' + guideEndMarker);
+
+fs.writeFileSync(indexFileName, indexFileText, 'utf-8');
diff --git a/ng2-components/package.json b/ng2-components/package.json
index da465151cb..4a708a1d4d 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -17,6 +17,7 @@
"toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
"markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
"doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
+ "docindex": "node config/buildFullDocIndex.js",
"tslint": "",
"prepublish": "",
"tsc": "",