diff --git a/docs/content-services/breadcrumb.component.md b/docs/content-services/breadcrumb.component.md index 84ce3129ec..e833fa35d0 100644 --- a/docs/content-services/breadcrumb.component.md +++ b/docs/content-services/breadcrumb.component.md @@ -1,7 +1,7 @@ --- Added: v2.0.0 Status: Active -Last reviewed: 2018-03-12 +Last reviewed: 2018-06-08 --- # Breadcrumb Component @@ -36,10 +36,15 @@ Indicates the current position within a navigation hierarchy. | Name | Type | Description | | -- | -- | -- | -| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the user clicks on a breadcrumb. | +| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PathElementEntity`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the user clicks on a breadcrumb. | ## Details +The `maxItems` property sets the maximum number of "crumbs" in the breadcrumb trail. If +the actual path contains more nodes than this then the earliest items in the path will be +removed and kept in a menu as with the +[Dropdown breadcrumb component](../content-services/dropdown-breadcrumb.component.md). + ### Using the transform function The function supplied in the `transform` property lets you modify the Node object that the component diff --git a/docs/content-services/content-action.component.md b/docs/content-services/content-action.component.md index 87bbee1ea7..b5a59ad899 100644 --- a/docs/content-services/content-action.component.md +++ b/docs/content-services/content-action.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Content Action component @@ -107,7 +108,7 @@ export class MyView { ## Details The document actions are rendered on a dropdown menu for each items of content. You can use the -`target` property to choose whether the action applies to folders , documents or both. (By default the actions arre applied to both) +`target` property to choose whether the action applies to folders, documents or both. (By default the actions are applied to both) A number of built-in actions are defined to handle common use cases: @@ -127,7 +128,7 @@ function in the same action. The `execute` function is passed a [`NodeMinimalEnt parameter (see the [Document Library model](document-library.model.md) page for more information) which contains full details of the item that the action is operating on. For example, with `handler="delete"` you could use `execute` to show a message with the name, -type and other details of the item just deleted: +type, and other details of the item just deleted: ```html @@ -184,7 +185,7 @@ This action simply execute one of the built-in actions described above: #### Custom handler -If you specify a custom handler it will be executed at any click of the action: +If you specify a custom handler it will be executed whenever the action is selected: ```html @@ -211,11 +212,11 @@ export class MyComponent { #### System handler combined with custom handler -If you specify both system handler and your own custom handler with -`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after a system handler completes -successfully. A system operation is considered successful if there are no permission or -network-related errors for the system request. You can avoid permission errors simply by disabling -an item for users who don't have permission to use it (set `disableWithNoPermission="true"`). +If you specify both a system handler and your own custom handler with +`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after the system handler +completes successfully. A system operation is considered successful if there are no permission +or network-related errors for the system request. You can avoid permission errors simply +by disablingan item for users who don't have permission to use it (set `disableWithNoPermission="true"`). ```html @@ -323,13 +324,14 @@ allow the item being copied/moved to be the destination if it is itself a folder ### Conditional visibility -The `` component allows you to control visibility with the help of the `visible` property and supports three major scenarios: +The Content-action component allows you to control visibility with the help of the `visible` +property which can receive its value in three main ways: -- direct value of `boolean` type -- binding to a property of the `boolean` type -- binding to a property of the `Function` type that evaluates condition and returns `boolean` value +- direct `boolean` value +- binding to a `boolean` property +- binding to a `Function` property that evaluates the condition and returns a `boolean` value -#### Using direct value of boolean type +#### Using direct boolean value ```html ` component allows you to control visibility with the help ``` -#### Using a property of the boolean type +#### Binding to a boolean property ```html ` component allows you to control visibility with the help ``` -The markup above relies on the `showCustomDownloadAction` property declared at your component class level: +The markup above relies on the `showCustomDownloadAction` property declared in your +component class: ```ts export class MyComponent { @@ -362,7 +365,7 @@ export class MyComponent { } ``` -#### Using a property of the Function type +#### Binding to a Function property ```html ``` -The code above relies on the `canDownloadNode` property of a `Function` type declared at your component class level: +The code above relies on the `canDownloadNode` property (of `Function` type) declared in +your component class: ```ts export class MyComponent { @@ -387,10 +391,11 @@ export class MyComponent { } ``` -Code above checks the node name, and evaluates to `true` only if corresponding node is called "For Sale.docx". +The code above checks the node name and evaluates to `true` only if the corresponding +node is called "For Sale.docx". -Please note that if you want to preserve `this` context within the evaluator function, -its property should be declared as a lambda one: +Note that if you want to preserve `this` context within the evaluator function then +the property should be declared as a lambda function: ```ts funcName = (parameters): boolean => { @@ -495,13 +500,8 @@ Defining error, permission and success callbacks are pretty much the same as doi ![Copy/move document action](../docassets/images/document-action-copymove.png) - - - - ## See also - [Document list component](document-list.component.md) - [Document actions service](document-actions.service.md) - [Folder actions service](folder-actions.service.md) - diff --git a/docs/content-services/dropdown-breadcrumb.component.md b/docs/content-services/dropdown-breadcrumb.component.md index 23cff16a91..59ec019bf8 100644 --- a/docs/content-services/dropdown-breadcrumb.component.md +++ b/docs/content-services/dropdown-breadcrumb.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Dropdown Breadcrumb Component @@ -35,7 +36,13 @@ Indicates the current position within a navigation hierarchy using a dropdown me | Name | Type | Description | | -- | -- | -- | -| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the user clicks on a breadcrumb. | +| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PathElementEntity`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the user clicks on a breadcrumb. | + +## Details + +Although this component inherits the `maxItems` property from the [Breadcrumb component,](../content-services/breadcrumb.component.md) the +"crumbs" are _always_ shown on a menu. By contrast, the Breadcrumb component only falls back +to a menu when its maximum number of nodes is exceeded. ## See also diff --git a/docs/content-services/inherited-button.directive.md b/docs/content-services/inherited-button.directive.md index 8c267180e6..da966887d0 100644 --- a/docs/content-services/inherited-button.directive.md +++ b/docs/content-services/inherited-button.directive.md @@ -1,6 +1,7 @@ --- Added: v2.3.0 Status: Active +Last reviewed: 2018-06-08 --- # Inherit Permission directive @@ -22,15 +23,16 @@ Update the current node by adding/removing the inherited permissions. | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | -| nodeId | `string` | | nodeId where to add/remove inherited permissions | +| nodeId | `string` | | ID of the node to add/remove inherited permissions | ### Events | Name | Type | Description | | ---- | ---- | ----------- | -| updated | [`EventEmitter`](../content-services/document-library.model.md) | Emitted when the node is updated. | +| updated | [`EventEmitter`](../content-services/document-library.model.md) | Emitted when the node is updated | ## Details -This directive switches on/off the inheritance on the permission based on what is set on the node entity. -So if the node has inherited permissions, this will remove them viceversa if the node does not have the inherited permission this will add them. +This directive switches inheritance of permissions on or off depending on what is set in +the node entity. So if the node has inherited permissions, this will remove them and +vice versa. If the node does not have inherited permissions then this will add them. diff --git a/docs/core/boilerplate.component.md b/docs/core/boilerplate.component.md deleted file mode 100644 index ec7bec8bb5..0000000000 --- a/docs/core/boilerplate.component.md +++ /dev/null @@ -1,66 +0,0 @@ -# Boilerplate component - -Shows how to write a Markdown file for a component. - -![Screenshot goes here if necessary](../docassets/images/adf-toolbar-01.png) - - - - - - - - - - - -## Basic Usage - - - -```html - - -``` - -### Properties - -| Name | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| prop1 | string | 'hello' | The property description in the table should be no more than a few sentences. Add extra description in the Details section if you need to. | -| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default value blank if appropriate. | - -### Events - -| Name | Description | -| ---- | ----------- | -| someEvent | Keep description short for the table. Usually starts with "Emitted when..." | -| anotherEvent | Emitted when the user double-clicks a list node | - -## Details - -**Note: This is not a real component!** - -Copy the contents of this file when you create a new component doc and edit or remove bits of it -as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded -(so "task-details.component" becomes "Task Details component") but there is no need to stick to this -if it looks wrong to you. - -### Subsection - -You don't need to make subsections in the Details part but add them if they help with the -explanation. Add them as level 3 headings in the Details part only - to keep the consistency -of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown. - - - - - - diff --git a/docs/core/boilerplate.service.md b/docs/core/boilerplate.service.md deleted file mode 100644 index 4461e14c6a..0000000000 --- a/docs/core/boilerplate.service.md +++ /dev/null @@ -1,43 +0,0 @@ -# Boilerplate service - -Shows how to write a Markdown file for a service. - -## Methods - -`someMethod(value: string = '')`
-Shows how to document a method. - -`anotherMethod(value: string = '')`
-Shows how to document a method. - -## Properties - -| Name | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| prop1 | string | 'hello' | Many services don't need a properties table. Delete this section if you don't need it. | -| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default blank if appropriate. | - -## Details - -**Note: This is not a real component!** - -Copy the contents of this file when you create a new service doc and edit or remove bits of it -as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded -(so "page-title.service" becomes "Page Title service") but there is no need to stick to this -if it looks wrong to you. - -The main difference between service and component docs is that services usually have methods. Replace -the method signature and description with your own text but keep the <br> at the end of the -signature line. - -### Subsection - -You don't need to make subsections in the Details part but add them if they help with the -explanation. Add them as level 3 headings in the Details part only - to keep the consistency -of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown. - - - - - - diff --git a/docs/core/buttons-menu.component.md b/docs/core/buttons-menu.component.md index 214e52d273..33a38e9a34 100644 --- a/docs/core/buttons-menu.component.md +++ b/docs/core/buttons-menu.component.md @@ -1,16 +1,18 @@ --- Added: v2.4.0 Status: Active -Last reviewed: 2018-04-24 +Last reviewed: 2018-06-08 --- # Buttons Menu Component -Displays buttons on a responsive menu. This way the html doesn't need to +Displays buttons on a responsive menu. + +![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png) ## Basic Usage -In order to use this component, you will have to place the buttons that you want to have in your menu inside this component's html tags. +Place the buttons for the menu inside this component's HTML tags. They must use the following structure: ```html @@ -24,7 +26,8 @@ They must use the following structure: ``` -Notice that they need an icon and a label for the button inside a span tag. They also make use of the Angular material directive `mat-menu-item`. +Notice that the buttons have an icon and a label for the button inside a `` tag. +They also make use of the Angular material directive `mat-menu-item`. ```html ``` - -## Class members - -### Properties - -| Name | Type | Description | -| -- | -- | -- | -| isMenuEmpty | boolean | If the menu has no buttons it won't be displayed. | ## Details -This component is fully responsive and it will display two different layouts regarding the screen size. +This component is fully responsive and it will display one of two different layouts +depending on the screen size: + +**Desktop View** -#### Desktop View ![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png) -#### Mobile View + +**Mobile View** + ![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png) +The component has a property called `isMenuEmpty` that you can access from code. If this is +set to true then the component will not show an empty menu with no buttons defined. + diff --git a/docs/core/empty-content.component.md b/docs/core/empty-content.component.md index 8a8a3f87c7..c9b85a8cb8 100644 --- a/docs/core/empty-content.component.md +++ b/docs/core/empty-content.component.md @@ -1,22 +1,44 @@ --- Added: v2.4.0 Status: Active -Last reviewed: +Last reviewed: 2018-06-08 --- # Empty Content Component -Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty. +Provides a generic "Empty Content" placeholder for components. -## Properties +![Favorites screen](../docassets/images/empty-content-favorites.png) -| Name | Type | Description | -| ---- | ---- | ----------- | -| icon | string | Material Icon to use | -| title | string | String or Resource Key for the title | -| subtitle | string | String or Resource Key for the subtitle | +## Basic usage -## Examples +```html + + + + + + + + +``` + +## Class members + +### Properties + +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +| icon | `string` | "cake" | Material Icon to use | +| subtitle | `string` | "" | String or Resource Key for the title | +| title | `string` | "" | String or Resource Key for the subtitle | + +## Details + +### Usage examples ```html @@ -52,3 +74,7 @@ You can also use multiple lines instead of the subtitle section: ``` ![Trashcan screen](../docassets/images/empty-content-trashcan.png) + +## See also + +- [Error content component](error-content.component.md) diff --git a/docs/core/info-drawer-layout.component.md b/docs/core/info-drawer-layout.component.md index 86c4612b92..56960717c3 100644 --- a/docs/core/info-drawer-layout.component.md +++ b/docs/core/info-drawer-layout.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Info drawer layout component @@ -29,12 +30,16 @@ Displays a sidebar-style information panel. ## 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: +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 the [Info drawer layout component](../core/info-drawer-layout.component.md) for an alternative approach that uses tabs to +structure the content of the info drawer. + ## See also - [Info drawer component](info-drawer.component.md) diff --git a/docs/core/info-drawer-tab.md b/docs/core/info-drawer-tab.md index c642259584..35498dedb8 100644 --- a/docs/core/info-drawer-tab.md +++ b/docs/core/info-drawer-tab.md @@ -1,5 +1,13 @@ +--- +Added: v2.4.0 +Status: Active +Last reviewed: 2018-06-08 +--- + # Info Drawer Tab component +Renders tabs in a [Info drawer component](../core/info-drawer.component.md). + ![Info drawer screenshot](../docassets/images/label-tab.png) ## Basic usage @@ -46,6 +54,11 @@ Render tab with icon instead of labels: | label | `string` | '' | Tab label. | | icon | `string` | null | The material design icon. | +## Details + +See the [Info drawer component](../core/info-drawer.component.md) page for details of how to use this subcomponent. + ## See also -- [Info drawer layout component](info-drawer.component.md) +- [Info drawer component](info-drawer.component.md) +- [Info drawer layout component](info-drawer-layout.component.md) diff --git a/docs/core/info-drawer.component.md b/docs/core/info-drawer.component.md index 389f50847e..10035b5ccc 100644 --- a/docs/core/info-drawer.component.md +++ b/docs/core/info-drawer.component.md @@ -1,7 +1,7 @@ --- Added: v2.0.0 Status: Active -Last reviewed: 2018-04-10 +Last reviewed: 2018-06-08 --- # Info Drawer component @@ -47,11 +47,11 @@ Displays a sidebar-style information panel with tabs. ## 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. +This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the 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](../core/info-drawer-layout.component.md). ## See also - [Info drawer layout component](info-drawer-layout.component.md) -- [Info drawer layout component](info-drawer-tab.component.md) +- [Info drawer tab component](info-drawer-tab.component.md) diff --git a/docs/core/log.service.md b/docs/core/log.service.md index aad5c1c779..fc9a5be1e3 100644 --- a/docs/core/log.service.md +++ b/docs/core/log.service.md @@ -1,11 +1,12 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Log Service -Provide a log functionality for your ADF application. +Provides log functionality. ## Basic Usage @@ -31,9 +32,73 @@ export class AppComponent { } ``` +```ts +import { LogService } from '@alfresco/adf-core'; + +@Component({...}) +export class AppComponent { + + constructor(logService: LogService, myIntegrationService: MyIntegrationService)) { + logService.onMessage.subscribe((message) => { + myIntegrationService.send(message.text,message.type); + }); + } +} +``` + +## Class members + +### Methods + +- **assert**(test?: `boolean` = `null`, message?: `string` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message if a boolean test fails. + - _test:_ `boolean` - (Optional) Test value (typically a boolean expression) + - _message:_ `string` - (Optional) Message to show if test is false + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **debug**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at the "DEBUG" level. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **error**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at the "ERROR" level. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **getLogLevel**(level: `string` = `null`): [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts)
+ Converts a log level name string into its numeric equivalent. + - _level:_ `string` - Level name + - **Returns** [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts) - Numeric log level +- **group**(groupTitle?: `string` = `null`, optionalParams: `any[]` = `null`)
+ Starts an indented group of log messages. + - _groupTitle:_ `string` - (Optional) Title shown at the start of the group + - _optionalParams:_ `any[]` - Interpolation values for the title in "printf" format +- **groupEnd**()
+ Ends a indented group of log messages. +- **info**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at the "INFO" level. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **log**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at any level from "TRACE" upwards. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **messageBus**(text: `string` = `null`, logLevel: `string` = `null`)
+ Triggers notification callback for log messages. + - _text:_ `string` - Message text + - _logLevel:_ `string` - Log level for the message +- **trace**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at the "TRACE" level. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format +- **warn**(message?: `any` = `null`, optionalParams: `any[]` = `null`)
+ Logs a message at the "WARN" level. + - _message:_ `any` - (Optional) Message to log + - _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format + +## Details + ### Log levels -The [log service](../core/log.service.md) provide 6 level of logs: +There are 6 levels of logs that you can use: | Name | Level | | ---- | ----- | @@ -44,9 +109,10 @@ The [log service](../core/log.service.md) provide 6 level of logs: | ERROR | 1 | | SILENT | 0 | -You can configure the log level setting the **_logLevel_** properties in the **app.config.json**. By default the level is TRACE. +You can set the default log level using the **_logLevel_** property in `app.config.json`. +The factory setting for this property is `TRACE`. -If you want set for example the log to warning: +For example, you can set the default log level to `WARNING` as follows: **app.config.json** @@ -58,9 +124,10 @@ If you want set for example the log to warning: ### Log message bus -The logservice provide also an [`Observable`](http://reactivex.io/documentation/observable.html) **_onMessage_** where you can subscribe and recive all the logs: - -The messagge object recived form the bus is composed: +The [log service](../core/log.service.md) also provides an +[`Observable`](http://reactivex.io/documentation/observable.html) called `_onMessage_` +that you can subscribe to if you want to receive all the log messages. +The message object passed as a parameter to the `onMessage` handler has the following format: ```ts { @@ -69,21 +136,10 @@ The messagge object recived form the bus is composed: } ``` -## Usage +### Using the log to feed analytics -```ts -import { LogService } from '@alfresco/adf-core'; - -@Component({...}) -export class AppComponent { - - constructor(logService: LogService, myIntegrationService: MyIntegrationService)) { - - logService.onMessage.subscribe((message) => { - myIntegrationService.send(message.text,message.type); - }); - - } - -} -``` +You can pass the log output to an analytics system to collect error and assertion data +from apps as they run. This can help you spot which problems users are running into most +often and the situations in which they occur. See the tutorial about +[integrating the log service with analytics](https://community.alfresco.com/community/application-development-framework/blog/2018/05/01/how-to-integrate-adf-log-service-with-mixpanel-analytics-service) +on the Alfresco Community site for further information. diff --git a/docs/core/notification.service.md b/docs/core/notification.service.md index 0f943bc5d4..68bf2ab6f4 100644 --- a/docs/core/notification.service.md +++ b/docs/core/notification.service.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Notification Service diff --git a/docs/core/shared-links-api.service.md b/docs/core/shared-links-api.service.md index 5dd15a0e5f..b99ef4b7ae 100644 --- a/docs/core/shared-links-api.service.md +++ b/docs/core/shared-links-api.service.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Shared Links Api service diff --git a/docs/core/sidenav-layout.component.md b/docs/core/sidenav-layout.component.md index e2875f06ad..248ff8ca6c 100644 --- a/docs/core/sidenav-layout.component.md +++ b/docs/core/sidenav-layout.component.md @@ -1,7 +1,7 @@ --- Added: v2.3.0 Status: Active -Last reviewed: 2018-04-11 +Last reviewed: 2018-06-08 --- # Sidenav Layout component @@ -21,8 +21,6 @@ Displays the standard three-region ADF application layout. - [Details](#details) - - [Public attributes](#public-attributes) - - [Events](#events-1) - [Template context](#template-context) - [menuOpenState$](#menuopenstate) - [Preserving the menu state](#preserving-the-menu-state) @@ -70,15 +68,15 @@ Displays the standard three-region ADF application layout. | -- | -- | -- | -- | | expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? | | hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region | -| sidenavMax | `number` | | ( | -| sidenavMin | `number` | | ( | -| stepOver | `number` | | ( | +| sidenavMax | `number` | | Maximum size of the navigation region | +| sidenavMin | `number` | | Minimum size of the navigation region | +| stepOver | `number` | | Screen size at which display switches from small screen to large screen configuration | ### Events | Name | Type | Description | | -- | -- | -- | -| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | | +| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes | ## Details @@ -106,18 +104,6 @@ Desktop layout (screen width greater than the `stepOver` value): Mobile layout (screen width less than the `stepOver` value): ![Sidenav on mobile](../docassets/images/sidenav-layout-mobile.png) -### Public attributes - -| Name | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| menuOpenState$ | Observable<boolean> | true | Another way to listen to menu open/closed state | - -### Events - -| Name | Type | Description | -| ---- | ---- | ----------- | -| expanded | `EventEmitter` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes | - ### Template context Each template is given a context containing the following methods: @@ -130,26 +116,38 @@ Each template is given a context containing the following methods: ### menuOpenState$ -Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable. +Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is with the `menuOpenState$` observable, which is driven by a `BehaviorSubject` in the background. The value emitted by this observable is the opposite of the `isMenuMinimized` template variable. + +| Name | Type | Default | Description | +| ---- | ---- | ------- | ----------- | +| menuOpenState$ | Observable<boolean> | true | Another way to listen to menu open/closed state | Every time the menu state is changed, the following values are emitted: -- true, if the menu got into opened state -- false, if the menu git into closed state +- true, if the menu changed to the opened state +- false, if the menu changed to the closed state ### Preserving the menu state -It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file. +You can preserve the state of the menu between sessions. To do this, you first need to +set a property in the `app.config.json` file: - "sideNav" : { - "preserveState" : true - } +```json +"sideNav" : { + "preserveState" : true +} +``` -If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app. -Beside this, it is also possible to set the default value in the appConfig.json file: +When this property is set, the collapsed/expanded state will be stored in the local storage +and restored when the page is reloaded or when the user next uses the app. - "sideNav" : { - "expandedSidenav" : true - } +You can also set the default state in the `app.config.json` file: -By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage. +```json +"sideNav" : { + "expandedSidenav" : true +} +``` + +Note that if `preserveState` is set then the current state of the sidenav (set by the user) +will override this default setting. diff --git a/docs/core/sorting-picker.component.md b/docs/core/sorting-picker.component.md index 04899f86d8..5602a515a9 100644 --- a/docs/core/sorting-picker.component.md +++ b/docs/core/sorting-picker.component.md @@ -1,11 +1,16 @@ --- Added: v2.4.0 Status: Active +Last reviewed: 2018-06-08 --- # Sorting Picker Component -Provides an ability to pick one of the predefined sorting definitions and define sorting direction: +Selects from a set of predefined sorting definitions and directions. + +![Sorting Picker](../docassets/images/sorting-picker.png) + +## Basic Usage ```html ``` -![Sorting Picker](../docassets/images/sorting-picker.png) +## Class members -## Options format +### Properties -You can bind a collection of any objects that expose the following properties: +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +| ascending | `boolean` | true | Current sorting direction | +| options | `Array` | \[] | Available sorting options | +| selected | `string` | | Currently selected option key | + +### Events + +| Name | Type | Description | +| -- | -- | -- | +| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Raised each time sorting key or direction gets changed. | + +## Details + +The picker shows the user a menu of sorting options (which could be data columns to sort on +alphabetical vs numerical search, etc) and the choice of ascending vs descending sort order. +Note that picker only implements the menu, so you are responsible for implementing the sorting +options yourself. + +The `options` property contains an array of any objects that expose the following properties: ```ts { @@ -29,15 +53,13 @@ You can bind a collection of any objects that expose the following properties: } ``` -## Properties +The `key` is an identifying value and the `label` is the text that the user will see in the +picker. The selected `key` is reported by the `change` event, which passes an object like the +following as its parameter: -| Name | Type | Default Value | Description | -| options | `Array<{key: string, label: string}>` | `[]` | Available sorting options. | -| selected | `string` | | Currently selected option key. | -| ascending | `boolean` | true | Current sorting direction. | - -## Events - -| Name | Type | Description | -| ---- | ---- | ----------- | -| change | `EventEmitter<{ key: string, ascending: boolean }>` | Raised each time sorting key or direction gets changed. | +```ts +{ + key: string, + ascending: boolean +} +``` diff --git a/docs/core/start-form.component.md b/docs/core/start-form.component.md index 951eb63846..252b08b687 100644 --- a/docs/core/start-form.component.md +++ b/docs/core/start-form.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Start Form component diff --git a/docs/core/toolbar-divider.component.md b/docs/core/toolbar-divider.component.md index 7746667b58..2230ec9383 100644 --- a/docs/core/toolbar-divider.component.md +++ b/docs/core/toolbar-divider.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Toolbar Divider Component diff --git a/docs/core/toolbar-title.component.md b/docs/core/toolbar-title.component.md index 57470f2850..a094f2a4dd 100644 --- a/docs/core/toolbar-title.component.md +++ b/docs/core/toolbar-title.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Toolbar Title Component diff --git a/docs/core/toolbar.component.md b/docs/core/toolbar.component.md index 196fb5ac63..b40ed6ba22 100644 --- a/docs/core/toolbar.component.md +++ b/docs/core/toolbar.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Toolbar Component @@ -53,7 +54,8 @@ Simple container for headers, titles, actions and breadcrumbs. ### Custom title -You can use any HTML layout or Angular component as a content of the Title section by using the special `` component instead of the "title" attribute: +You can use any HTML layout or Angular component as the content of the title section by +using the `` subcomponent instead of the "title" attribute: ```html @@ -64,8 +66,6 @@ You can use any HTML layout or Angular component as a content of the Title secti ``` -The toolbar should now look similar to the following: - ![](../docassets/images/adf-toolbar-02.png) ### Divider @@ -83,8 +83,9 @@ You can divide groups of elements with a visual separator ` ### Spacer -You can provide a separate element with `adf-toolbar--spacer` class name -to fill the empty space and move the content to the right of the toolbar if needed: +You can split the toolbar into separate sections at the left and right of the screen +with the `adf-toolbar--spacer` CSS class. In the following example, the toolbar title +element is rendered to the left but all the buttons are pushed to the right side: ```html @@ -100,12 +101,11 @@ to fill the empty space and move the content to the right of the toolbar if need ``` -In the example above, the toolbar title element is rendered to the left, -but all the buttons are pushed to the right side. - ### Dropdown menu -You can use the following example to create a dropdown menu: +The following example shows how to create a dropdown menu. The code is based +on the `` component from the `@angular/material` library +but you could also use your own custom menu components: ```html @@ -131,11 +131,10 @@ You can use the following example to create a dropdown menu: ``` -The code above is based on the `` component from the `@angular/material` library. You can use any custom menu component as well. - ![](../docassets/images/adf-toolbar-03.png) -Once you click the menu button you should see the following menu items as defined earlier: +With the menu set up like this, you would see the following menu items as defined earlier +when you click the menu button: ![](../docassets/images/adf-toolbar-04.png) @@ -143,7 +142,8 @@ Once you click the menu button you should see the following menu items as define Besides the default color you can use 'primary', 'accent', or 'warn' values: -Depending on the overall application theme the colors of the toolbar should change. +You might also want to change colors to follow your application's color +[theme](../user-guide/theming.md): For example: diff --git a/docs/core/translation.service.md b/docs/core/translation.service.md index 4377fbdb7e..7d0aa515f1 100644 --- a/docs/core/translation.service.md +++ b/docs/core/translation.service.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-07 --- # Translation service diff --git a/docs/process-services/apps-list.component.md b/docs/process-services/apps-list.component.md index bf452a7f17..2be1146e13 100644 --- a/docs/process-services/apps-list.component.md +++ b/docs/process-services/apps-list.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Apps List Component @@ -17,9 +18,7 @@ Shows all available apps. ``` -## Passing custom no-apps template - -If we intend to show a custom template if there are no apps present +You can also show a custom template if there are no apps present: ```html - -``` - -In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be shown. - -![how-filter-apps](../docassets/images/how-filter-apps.png) - -You can use inside the filter one of the following property +You can specify a restricted list of apps using the `filtersAppId` property. This array +contains a list of objects containing the property values you are interested in. You can +use any of the following properties as filters: ```json { @@ -77,3 +61,18 @@ You can use inside the filter one of the following property "tenantId": "number" } ``` + +For example, if you set `filtersAppId` as follows: + +```html + + +``` + +...then only the Tasks app, the app with `deploymentId` 15037 and the app with "my app name" will be shown. + +![how-filter-apps](../docassets/images/how-filter-apps.png) diff --git a/docs/process-services/process-instance-header.component.md b/docs/process-services/process-instance-header.component.md index ce93baae5b..bf6bf6ce8d 100644 --- a/docs/process-services/process-instance-header.component.md +++ b/docs/process-services/process-instance-header.component.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-08 --- # Process Instance Details Header component @@ -25,13 +26,15 @@ Sub-component of the process details component, which renders some general infor | -- | -- | -- | -- | | processInstance | [`ProcessInstance`](../../lib/process-services/process-list/models/process-instance.model.ts) | | (**required**) Full details of the process instance to display information about. | -## Customise the properties showed +## Details -By default all the properties are showed : +### Choosing which properties are displayed + +By default all the properties are displayed: **_status_**, **_ended_**, **_category_**, **_businessKey_**, **_assignee_**, **_created_**,**_id_**, **_description_**. -It is possible to customise the showed properties via "app.config.json". -This is how the configuration looks like: +You can customize which properties are displayed using a setting in `app.config.json`. +The configuration looks like the following sample: ```json "adf-process-instance-header": { @@ -41,4 +44,4 @@ This is how the configuration looks like: } ``` -In this way only the listed properties will be showed. +Only the items in the `properties` array will be displayed. \ No newline at end of file diff --git a/docs/process-services/task-filter.service.md b/docs/process-services/task-filter.service.md index 18d8914f69..da876451b2 100644 --- a/docs/process-services/task-filter.service.md +++ b/docs/process-services/task-filter.service.md @@ -1,6 +1,7 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-07 --- # Task Filter Service diff --git a/docs/process-services/task-filters.component.md b/docs/process-services/task-filters.component.md index 731e289c9f..d89e387c90 100644 --- a/docs/process-services/task-filters.component.md +++ b/docs/process-services/task-filters.component.md @@ -1,29 +1,13 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-06-07 --- # Task Filters component Shows all available filters. -## Contents - -- [Basic Usage](#basic-usage) - -- [Class members](#class-members) - - - [Properties](#properties) - - [Events](#events) - -- [Details](#details) - - - [How filter the activiti task filters](#how-filter-the-activiti-task-filters) - - [FilterParamsModel](#filterparamsmodel) - - [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter) - -- [See also](#see-also) - ## Basic Usage ```html @@ -51,7 +35,9 @@ Shows all available filters. ## Details -### How filter the activiti task filters +### Filtering APS task filters + +Use the `filterParam` property to restrict the range of filters that are shown: ```html ``` -You can use inside the filterParam one of the properties from [`FilterParamsModel`](../../lib/process-services/task-list/models/filter.model.ts) (see below). +You can use properties from [`FilterParamsModel`](../../lib/process-services/task-list/models/filter.model.ts) +as the value of `filterParam` as shown in the table below: -### FilterParamsModel - -```json -{ - "id": "number", - "name": "string", - "index": "number" -} -``` | Name | Type | Description | | ---- | ---- | ----------- | @@ -79,8 +57,9 @@ You can use inside the filterParam one of the properties from [`FilterParamsMode ### How to create an accordion menu with the task filter -The task filter often works well as an item in an accordion menu. See the [Accordion component](../core/accordion.component.md) -page for an example of how to do set this up. +The task filter often works well as an item in an accordion menu. See the +[Accordion component](../core/accordion.component.md) +page for an example of how to set this up. ## See also diff --git a/package.json b/package.json index 0b34443ed4..b8c2a859ab 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "file-loader": "0.11.1", "fork-ts-checker-webpack-plugin": "0.2.3", "fs-extra": "^4.0.2", + "graphql-request": "^1.6.0", "happypack": "4.0.0", "html-loader": "0.4.4", "html-webpack-plugin": "2.28.0", diff --git a/tools/doc/reviewChecker.js b/tools/doc/reviewChecker.js index cd702880cb..bf53c71ec2 100644 --- a/tools/doc/reviewChecker.js +++ b/tools/doc/reviewChecker.js @@ -1,5 +1,5 @@ "use strict"; -exports.__esModule = true; +Object.defineProperty(exports, "__esModule", { value: true }); var path = require("path"); var fs = require("fs"); var process = require("process"); @@ -14,14 +14,14 @@ var stoplist_1 = require("./stoplist"); var adf20StartDate = "2017-11-20"; var commitWeight = 0.1; var scoreTimeBase = 60; -var rootFolder = "."; -var stoplistFilePath = path.resolve("..", "tools", "doc", "commitStoplist.json"); +var libFolder = "lib"; +var stoplistFilePath = path.resolve("tools", "doc", "commitStoplist.json"); var angFilePattern = /(component)|(directive)|(model)|(pipe)|(service)|(widget)/; var srcData = {}; var stoplist = new stoplist_1.Stoplist(stoplistFilePath); -var docsFolderPath = path.resolve("..", "docs"); +var docsFolderPath = path.resolve("docs"); var libFolders = ["core", "content-services", "process-services", "insights"]; -libsearch(srcData, path.resolve(rootFolder)); +libsearch(srcData, path.resolve(libFolder)); /* let keys = Object.keys(srcData); diff --git a/tools/doc/reviewChecker.ts b/tools/doc/reviewChecker.ts index 8d3cf75dd6..6cce26daf6 100644 --- a/tools/doc/reviewChecker.ts +++ b/tools/doc/reviewChecker.ts @@ -19,19 +19,19 @@ const adf20StartDate = "2017-11-20"; const commitWeight = 0.1; const scoreTimeBase = 60; -const rootFolder = "."; -const stoplistFilePath = path.resolve("..", "tools", "doc", "commitStoplist.json"); +const libFolder = "lib"; +const stoplistFilePath = path.resolve("tools", "doc", "commitStoplist.json"); const angFilePattern = /(component)|(directive)|(model)|(pipe)|(service)|(widget)/; let srcData = {}; let stoplist = new Stoplist(stoplistFilePath); -let docsFolderPath = path.resolve("..", "docs"); +let docsFolderPath = path.resolve("docs"); let libFolders = ["core", "content-services", "process-services", "insights"]; -libsearch(srcData, path.resolve(rootFolder)); +libsearch(srcData, path.resolve(libFolder)); /* let keys = Object.keys(srcData); diff --git a/tools/doc/stoplist.js b/tools/doc/stoplist.js index 188a4e1e1d..7ccbb7c146 100644 --- a/tools/doc/stoplist.js +++ b/tools/doc/stoplist.js @@ -1,5 +1,5 @@ "use strict"; -exports.__esModule = true; +Object.defineProperty(exports, "__esModule", { value: true }); var fs = require("fs"); /* "Stoplist" of regular expressions to match against strings. */ var Stoplist = /** @class */ (function () {