diff --git a/docIndex.md b/docIndex.md
index 0cb5ecf93b..c24e5013db 100644
--- a/docIndex.md
+++ b/docIndex.md
@@ -300,22 +300,17 @@ for more information about installing and using the source code.
### Components
+- [Accordion group component](docs/accordion-group.component.md)
- [Accordion component](docs/accordion.component.md)
- [Data column component](docs/data-column.component.md)
+- [Info drawer layout component](docs/info-drawer-layout.component.md)
+- [Info drawer component](docs/info-drawer.component.md)
- [Pagination component](docs/pagination.component.md)
- [Toolbar divider component](docs/toolbar-divider.component.md)
- [Toolbar title component](docs/toolbar-title.component.md)
- [Toolbar component](docs/toolbar.component.md)
- [Card view component](docs/card-view.component.md)
-- [*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)
-- [*Data column list component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.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)
-- [*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)
+- [*Infinite pagination component](ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts)
### Directives
@@ -333,6 +328,7 @@ for more information about installing and using the source code.
- [Alfresco api service](docs/alfresco-api.service.md)
- [App config service](docs/app-config.service.md)
- [Authentication service](docs/authentication.service.md)
+- [Card view update service](docs/card-view-update.service.md)
- [Notification service](docs/notification.service.md)
- [Renditions service](docs/renditions.service.md)
- [Translation service](docs/translation.service.md)
@@ -344,7 +340,6 @@ for more information about installing and using the source code.
- [*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)
@@ -414,6 +409,7 @@ for more information about installing and using the source code.
### Services
+- [*Content node selector service](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.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)
diff --git a/docs/accordion-group.component.md b/docs/accordion-group.component.md
new file mode 100644
index 0000000000..1bdb65dbe1
--- /dev/null
+++ b/docs/accordion-group.component.md
@@ -0,0 +1,64 @@
+# Accordion Group component
+
+Adds a collapsible panel to an [accordion menu](accordion.component.md).
+
+
+
+
+
+
+
+- [Basic Usage](#basic-usage)
+ * [Properties](#properties)
+- [Details](#details)
+- [See also](#see-also)
+
+
+
+
+
+## Basic Usage
+
+```html
+
+
+
+
+
+```
+
+```ts
+@Component({
+ selector: 'my-component'
+})
+export class MyComponent implements OnInit {
+
+ titleHeading: string;
+
+ constructor() {
+ this.titleHeading = 'My Group';
+ }
+
+}
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| heading | string | Title heading for the group. |
+| isSelected | boolean | Is this group currently selected? |
+| headingIcon | string | The material design icon. |
+| hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
+
+## Details
+
+Place one or more accordion groups within an [Accordion component](accordion.component.md) to define
+a menu.
+
+
+
+## See also
+
+- [Accordion component](accordion.component.md)
+
\ No newline at end of file
diff --git a/docs/accordion.component.md b/docs/accordion.component.md
index e02fb3cfcf..6d2493c86b 100644
--- a/docs/accordion.component.md
+++ b/docs/accordion.component.md
@@ -1,6 +1,8 @@
# Accordion Component
-Creates an accordion menu, optionally with a custom header and icon.
+Creates a collapsible accordion menu.
+
+
@@ -8,6 +10,9 @@ Creates an accordion menu, optionally with a custom header and icon.
- [Basic Usage](#basic-usage)
* [Properties](#properties)
+- [Details](#details)
+ * [Example](#example)
+- [See also](#see-also)
@@ -46,3 +51,41 @@ export class MyComponent implements OnInit {
| isSelected | boolean | Define if the accordion group is selected or not. |
| headingIcon | string | The material design icon. |
| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
+
+## Details
+
+An accordion menu contains several panels of content, only one of which is visible at any time. The
+hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
+while the visible panel fills the remaining space in the menu.
+
+Use one or more [Accordion Group](accordion-group.component.md) subcomponents to define the panels and set their
+properties (title, selection status, etc).
+
+### Example
+
+You can use an accordion menu to wrap a [process filter](process-filters.component.md), as shown in
+the following example:
+
+```html
+
+
+
+
+
+
+```
+
+
+
+
+
+## See also
+
+- [Accordion group component](accordion-group.component.md)
+
\ No newline at end of file
diff --git a/docs/card-view-update.service.md b/docs/card-view-update.service.md
new file mode 100644
index 0000000000..93acead791
--- /dev/null
+++ b/docs/card-view-update.service.md
@@ -0,0 +1,141 @@
+# Card View Update service
+
+Reports edits and clicks within fields of a [Card View component](card-view.component.md).
+
+
+
+
+
+- [Details](#details)
+ * [Responding to updates](#responding-to-updates)
+ * [Responding to clicks](#responding-to-clicks)
+- [See also](#see-also)
+
+
+
+
+
+## Details
+
+You can use the Card View Update service to respond to edits and clicks within items on
+a card view. This might involve updating application data to reflect the changes made to
+the view or could simply be a matter of highlighting a clicked item.
+
+The service is injected into a component using a constructor parameter, which also
+creates a corresponding property in the object:
+
+```ts
+properties: any;
+
+constructor(private cardViewUpdateService: CardViewUpdateService) {
+
+ this.properties = [
+ new CardViewTextItemModel({
+ label: 'Name',
+ value: 'Kirk',
+ key: 'name',
+ default: 'No name entered',
+ multiline: false,
+ editable: true,
+ clickable: true
+ }),
+ new CardViewTextItemModel({
+ label: 'Rank',
+ value: 'Captain',
+ key: 'rank',
+ default: 'No rank entered',
+ multiline: false,
+ editable: true,
+ clickable: true
+ }),
+ new CardViewTextItemModel({
+ label: 'Ship',
+ value: 'Enterprise',
+ key: 'ship',
+ default: 'No ship entered',
+ multiline: false,
+ editable: true,
+ clickable: true
+ })
+ ];
+}
+```
+
+The constructor here also sets the `CardViewTextItemModel` instances that define the layout of the
+card view (see the [Card View component](card-view.component.md) for further information
+about this). The model objects and the `key` property are used to identify which item has been clicked
+or updated when an event occurs.
+
+You must "subscribe" to the service in order to be informed about clicks and updates. You can do this by
+registering your own functions with the service's `itemUpdated$` and `itemClicked$` events
+(place this code in the `ngOnInit`
+[lifecycle hook](https://angular.io/guide/lifecycle-hooks#oninit) rather than the constructor):
+
+```ts
+ngOnInit() {
+ this.cardViewUpdateService.itemUpdated$.subscribe(this.respondToCardUpdate.bind(this));
+ this.cardViewUpdateService.itemClicked$.subscribe(this.respondToCardClick.bind(this));
+}
+```
+
+With the subscriptions in place, `respondToCardUpdate` and `respondToCardClick` will now be
+called after updates and clicks, respectively.
+
+### Responding to updates
+
+The update function is passed a parameter of type `UpdateNotification`:
+
+```ts
+export interface UpdateNotification {
+ target: any;
+ changed: any;
+}
+```
+
+Here, `target` contains the `CardViewTextItemModel` that was used to initialize
+the field in question (in practice, this might be a `CardViewDateItemModel` or `CardViewMapItemModel` if
+the card layout includes these objects). The `changed` property contains an object with a single property:
+
+```ts
+{ keyValue: 'Value after editing' }
+```
+
+Here, `keyValue` is actually the value of the `key` field specified when the item was initialized. So
+in our example, if the third item was edited from 'Enterprise' to 'Shuttle Craft', the object would be:
+
+```ts
+{ ship: 'Shuttle Craft' }
+```
+
+The complete code for `respondToCardUpdate` might look something like the following:
+
+```ts
+respondToCardUpdate(un: UpdateNotification) {
+ this.updateMessage = un.target.label + ' changed to ' + un.changed[un.target.key];
+}
+```
+
+Note that the function will only be called if the `editable` property of the model object is set to true
+for this item. Also, the `editable` value of all items will be overridden if `editable` is set to false
+on the [Card View component](card-view.component.md) itself.
+
+### Responding to clicks
+
+The click function is passed a `ClickNotification` object, which is similar to `UpdateNotification` described above,
+but without the `changed` property. Use the `target` property to identify the item that was clicked:
+
+```ts
+respondToCardClick(cn: ClickNotification) {
+ this.clickMessage = cn.target.label + ' was just clicked';
+}
+```
+
+Note that this function will only be called if the `clickable` property of the model object is set to true
+for this item.
+
+
+
+## See also
+
+- [Card view component](card-view.component.md)
+
\ No newline at end of file
diff --git a/docs/card-view.component.md b/docs/card-view.component.md
index 8b1e5b6aae..887eebd9a8 100644
--- a/docs/card-view.component.md
+++ b/docs/card-view.component.md
@@ -20,6 +20,7 @@ Displays a configurable property list renderer.
+ [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
+ [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
+ [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
+- [See also](#see-also)
@@ -54,6 +55,10 @@ The card view can optionally allow its properties to be edited. You can control
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
+See the [Card View Update service](card-view-update.service.md) page for details on how to use the service
+to respond to clicks and edits in a card view. You can use this, for example, to save the edits within your
+application or to highlight a clicked item.
+
### Defining properties
Properties is an array of models which one by one implements the CardViewItem interface.
@@ -236,3 +241,10 @@ For Angular to be able to load your custom component dynamically, you have to re
})
export class MyModule {}
```
+
+
+
+## See also
+
+- [Card view update service](card-view-update.service.md)
+
\ No newline at end of file
diff --git a/docs/docassets/images/accordion-menu.png b/docs/docassets/images/accordion-menu.png
new file mode 100644
index 0000000000..0672e32f9a
Binary files /dev/null and b/docs/docassets/images/accordion-menu.png differ
diff --git a/docs/docassets/images/activities-infodrawer.png b/docs/docassets/images/activities-infodrawer.png
new file mode 100644
index 0000000000..3b04068256
Binary files /dev/null and b/docs/docassets/images/activities-infodrawer.png differ
diff --git a/docs/docassets/images/infodrawerlayout.png b/docs/docassets/images/infodrawerlayout.png
new file mode 100644
index 0000000000..735462a94c
Binary files /dev/null and b/docs/docassets/images/infodrawerlayout.png differ
diff --git a/docs/info-drawer-layout.component.md b/docs/info-drawer-layout.component.md
new file mode 100644
index 0000000000..d05c070799
--- /dev/null
+++ b/docs/info-drawer-layout.component.md
@@ -0,0 +1,50 @@
+# Info drawer layout component
+
+Displays a sidebar-style information panel.
+
+
+
+
+
+
+
+- [Basic usage](#basic-usage)
+- [Details](#details)
+- [See also](#see-also)
+
+
+
+
+
+## Basic usage
+
+```html
+
+ File info
+
+
+ clear
+
+
+
+
+ Lorem ipsum dolor sit amet...
+
+
+
+```
+
+## Details
+
+As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
+
+- info-drawer-title
+- info-drawer-buttons
+- info-drawer-content
+
+
+
+## See also
+
+- [Info drawer component](info-drawer.component.md)
+
diff --git a/docs/info-drawer.component.md b/docs/info-drawer.component.md
new file mode 100644
index 0000000000..ce426bd6f3
--- /dev/null
+++ b/docs/info-drawer.component.md
@@ -0,0 +1,58 @@
+# InfoDrawerComponent
+
+Displays a sidebar-style information panel with tabs.
+
+
+
+
+
+
+
+- [Basic usage](#basic-usage)
+ * [Properties](#properties)
+- [Details](#details)
+- [See also](#see-also)
+
+
+
+
+
+## Basic usage
+
+```html
+
+
+ clear
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string | null | The title of the info drawer |
+| currentTab | any | null | The currently active tab |
+
+## Details
+
+This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the `adf-info-drawer-tab` subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
+
+You can also customize the three regions (title, buttons and content) as with the Info Drawer Layout component.
+
+
+
+## See also
+
+- [Info drawer layout component](info-drawer-layout.component.md)
+
diff --git a/docs/process-filters.component.md b/docs/process-filters.component.md
index 823845cfe9..f4d27c98ff 100644
--- a/docs/process-filters.component.md
+++ b/docs/process-filters.component.md
@@ -81,22 +81,5 @@ You can use inside the filterParam one of the properties defined by [FilterParam
### How to create an accordion menu with the processes filter
-You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
-The AccordionComponent is exposed by the alfresco-core.
-
-```html
-
-
-
-
-
-
-```
-
-
+The process filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
+page for an example of how to do set this up.
\ No newline at end of file
diff --git a/docs/seeAlsoGraph.json b/docs/seeAlsoGraph.json
new file mode 100644
index 0000000000..aa9e93e6cd
--- /dev/null
+++ b/docs/seeAlsoGraph.json
@@ -0,0 +1,86 @@
+{
+ "accordion.component": ["accordion-group.component"],
+ "accordion-group.component": [],
+ "alfresco-api.service": [],
+ "analytics-generator.component": [],
+ "analytics-report-list.component": [],
+ "analytics.component": [],
+ "app-config.service": [],
+ "apps-list.component": [],
+ "authentication.service": [],
+ "breadcrumb.component": ["document-list.component"],
+ "card-view.component": ["card-view-update.service"],
+ "card-view-update.service": [],
+ "checklist.component": [],
+ "comments.component": [],
+ "content.widget": [],
+ "context-menu.directive": [],
+ "create-process-attachment.component": [],
+ "create-task-attachment.component": [],
+ "data-column.component": ["document-list.component", "datatable.component"],
+ "datatable.component": [
+ "data-column.component",
+ "pagination.component"
+ ],
+ "diagram.component": [],
+ "document-list.component": [
+ "datatable.component",
+ "data-column.component",
+ "pagination.component",
+ "metadata-indicators"
+ ],
+ "extensibility": [],
+ "file-uploading-dialog.component": [],
+ "form-list.component": [],
+ "form.component": [],
+ "form.service": [],
+ "info-drawer.component": ["info-drawer-layout.component"],
+ "info-drawer-layout.component": [],
+ "like.component": ["rating.component"],
+ "login.component": [],
+ "metadata-indicators": [],
+ "node-permission.directive": [],
+ "notification.service": [],
+ "pagination.component": [],
+ "people-search.component": [],
+ "people.component": [],
+ "process-attachment-list.component": [],
+ "process-audit.directive": [],
+ "process-comments.component": [],
+ "process-filters.component": [],
+ "process-instance-details.component": [],
+ "process-instance-header.component": [],
+ "process-instance-tasks.component": [],
+ "processlist.component": [],
+ "rating.component": ["like.component"],
+ "renditions.service": [],
+ "search-control.component": ["search.component"],
+ "search.component": [],
+ "sites-dropdown.component": [],
+ "start-process.component": [],
+ "start-task.component": [],
+ "stencils": [],
+ "tag-actions.component": [],
+ "tag-list.component": [],
+ "tag-node-list.component": [],
+ "task-attachment-list.component": [],
+ "task-audit.directive": [],
+ "task-details.component": [],
+ "task-details.model": [],
+ "task-filters.component": [],
+ "task-header.component": [],
+ "tasklist.component": [],
+ "theming": [],
+ "toolbar-divider.component": [],
+ "toolbar-title.component": [],
+ "toolbar.component": ["toolbar-divider.component", "toolbar-title.component"],
+ "translation.service": [],
+ "upload-button.component": [],
+ "upload-drag-area.component": [],
+ "upload.directive": [],
+ "upload.service": [],
+ "user-info.component": [],
+ "user-preferences.service": [],
+ "viewer.component": [],
+ "webscript.component": []
+}
\ No newline at end of file
diff --git a/docs/task-filters.component.md b/docs/task-filters.component.md
index 54ae0a55b0..92a86a7f3a 100644
--- a/docs/task-filters.component.md
+++ b/docs/task-filters.component.md
@@ -74,21 +74,5 @@ You can use inside the filterParam one of the properties from [FilterParamsModel
### How to create an accordion menu with the task filter
-You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
-The AccordionComponent is exposed by the alfresco-core.
-
-```html
-
-
-
-
-
-
-```
-
-
+The task filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
+page for an example of how to do set this up.
diff --git a/docs/undocStoplist.json b/docs/undocStoplist.json
index 9f3281e6dc..a4c41aea10 100644
--- a/docs/undocStoplist.json
+++ b/docs/undocStoplist.json
@@ -1 +1,7 @@
-[ "model" ]
\ No newline at end of file
+[
+ "model",
+ "context-menu-holder",
+ "data-column-list",
+ "card-view-[a-z]+item",
+ "card-view-item-dispatcher"
+]
\ No newline at end of file
diff --git a/ng2-components/config/generateSeeAlso.js b/ng2-components/config/generateSeeAlso.js
new file mode 100644
index 0000000000..0fea2d74c7
--- /dev/null
+++ b/ng2-components/config/generateSeeAlso.js
@@ -0,0 +1,96 @@
+var fs = require('fs');
+var path = require('path');
+
+var docFolderPath = path.resolve("..", "docs");
+var graphFileName = path.resolve(docFolderPath, "seeAlsoGraph.json");
+
+
+// Get a list of all items that have a file in the docs folder.
+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;
+}
+
+
+// Convert an Angular-style name (eg, "card-view") into one with correct spaces and uppercase (eg, "Card view").
+function tidyName(name) {
+ var result = name.replace(/-/g, " ");
+ result = result.substr(0, 1).toUpperCase() + result.substr(1);
+ return result;
+}
+
+
+function buildSeeAlsoList(arcs) {
+ var listItems = [];
+
+ for (var i = 0; i < arcs.length; i++) {
+ var parts = arcs[i].split('.');
+ var itemName = tidyName(parts[0]);
+
+ if (parts[1]) {
+ itemName += ' ' + parts[1];
+ }
+
+ listItems.push('- [' + itemName + '](' + arcs[i] + '.md)');
+ }
+
+ return listItems.join('\n');
+}
+
+
+// If item is not in the arcs array then add it at
+// the end.
+function fixArcs(arcsArray, item) {
+ if (arcsArray.indexOf(item) == -1) {
+ arcsArray.push(item);
+ }
+}
+
+
+// Makes link symmetrical between items (ie, if A links to B but not the other way
+// around then it adds the missing link).
+function tidyGraph(graph) {
+ var nodeNames = Object.keys(graph);
+
+ for (var n = 0; n < nodeNames.length; n++) {
+ var currNodeName = nodeNames[n];
+
+ var currNodeArcs = graph[currNodeName];
+
+ for (var a = 0; a < currNodeArcs.length; a++) {
+ var linkedNode = graph[currNodeArcs[a]];
+ fixArcs(linkedNode, currNodeName);
+ }
+ }
+}
+
+
+var graphJson = fs.readFileSync(graphFileName, 'utf8');
+var graph = JSON.parse(graphJson);
+tidyGraph(graph);
+
+var nodeNames = Object.keys(graph);
+
+for (var i = 0; i < nodeNames.length; i++) {
+ var seeAlsoText = '## See also\n\n' + buildSeeAlsoList(graph[nodeNames[i]]);
+
+ var docFileName = path.resolve(docFolderPath, nodeNames[i] + '.md');
+ var docFileText = fs.readFileSync(docFileName, 'utf8');
+
+ var seeAlsoStartMarker = '';
+ var seeAlsoEndMarker = '';
+
+ var seeAlsoRegex = new RegExp('(?:' + seeAlsoStartMarker + ')([\\s\\S]*)(?:' + seeAlsoEndMarker + ')');
+ docFileText = docFileText.replace(seeAlsoRegex, seeAlsoStartMarker + '\n' + seeAlsoText + '\n' + seeAlsoEndMarker);
+
+ fs.writeFileSync(docFileName, docFileText, 'utf-8');
+}
\ No newline at end of file