inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Release Note for 4.2 - Initial draft. (#6390)

Browse Source 
* Release Note for 4.2 - Initial draft.

* update dep

* documentation

* fix

* remove script

* lint

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
This commit is contained in:
Francesco Corti
2020-12-07 22:03:41 +01:00
committed by GitHub
parent 27167b3420
commit 5a4cc4edda
214 changed files with 5178 additions and 4950 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/core/components/card-view.component.md
View File

@@ -106,31 +106,31 @@ Defining properties from Typescript:
### Properties
| Name | Type | Default value | Description |
| ----------------------------- | ---------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------ |
| copyToClipboardAction | `boolean` | true | Toggles whether or not to enable copy to clipboard action. |
| displayClearAction | `boolean` | true | Toggles whether or not to display clear action. |
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
| displayNoneOption | `boolean` | true | Toggles whether or not to display none option. |
| editable | `boolean` | | Toggles whether or not the items can be edited. |
| multiValueSeparator | `string` | DEFAULT_SEPARATOR | String separator between multi-value property items. |
| properties | [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)`[]` | | (**required**) Items to show in the card view. |
| useChipsForMultiValueProperty | `boolean` | true | Toggles whether or not to enable chips for multivalued properties. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| copyToClipboardAction | `boolean` | true | Toggles whether or not to enable copy to clipboard action. |
| displayClearAction | `boolean` | true | Toggles whether or not to display clear action. |
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
| displayNoneOption | `boolean` | true | Toggles whether or not to display none option. |
| editable | `boolean` | | Toggles whether or not the items can be edited. |
| multiValueSeparator | `string` | DEFAULT_SEPARATOR | String separator between multi-value property items. |
| properties | [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)`[]` | | (**required**) Items to show in the card view. |
| useChipsForMultiValueProperty | `boolean` | true | Toggles whether or not to enable chips for multivalued properties. |
## Details
You define the property list, the [`CardViewComponent`](../../core/components/card-view.component.md) does the rest. Each property represents a card view item (a row) in the [card view component](card-view.component.md). The following item types are available by default:
- [**CardViewTextItemModel**](#card-text-item) - _for text items_
- [**CardViewMapItemModel**](#card-map-item) - _for map items_
- [**CardViewDateItemModel**](#card-date-item) - _for date items_
- [**CardViewDatetimeItemModel**](#card-datetime-item) - _for datetime items_
- [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
- [**CardViewIntItemModel**](#card-int-item) - _for integer items_
- [**CardViewFloatItemModel**](#card-float-item) - _for float items_
- [**CardViewKeyValuePairsItemModel**](#card-key-value-pairs-item) - _for key-value-pairs items_
- [**CardViewSelectItemModel**](#card-select-item) - _for select items_
- [**CardViewArrayItemModel**](#card-array-item) - _for array items_
* [**CardViewTextItemModel**](#card-text-item) - *for text items*
* [**CardViewMapItemModel**](#card-map-item) - *for map items*
* [**CardViewDateItemModel**](#card-date-item) - *for date items*
* [**CardViewDatetimeItemModel**](#card-datetime-item) - *for datetime items*
* [**CardViewBoolItemModel**](#card-bool-item) - *for bool items (checkbox)*
* [**CardViewIntItemModel**](#card-int-item) - *for integer items*
* [**CardViewFloatItemModel**](#card-float-item) - *for float items*
* [**CardViewKeyValuePairsItemModel**](#card-key-value-pairs-item) - *for key-value-pairs items*
* [**CardViewSelectItemModel**](#card-select-item) - *for select items*
* [**CardViewArrayItemModel**](#card-array-item) - *for array items*
Each of these types implements the [Card View Item interface](../interfaces/card-view-item.interface.md):
@@ -156,8 +156,8 @@ this.
You can optionally set up the card view so that its properties can be edited. You can control
the editing of properties at two levels:
- **Global level** - _via the editable parameter of the card-view.component_
- **[`Property`](../../../lib/content-services/src/lib/content-metadata/interfaces/property.interface.ts) level** - _in each property via the editable attribute_
* **Global level** - *via the editable parameter of the card-view.component*
* **[`Property`](../../../lib/content-services/src/lib/content-metadata/interfaces/property.interface.ts) level** - *in each property via the editable attribute*
If you set the global editable parameter to false, no properties can be edited regardless of their
individual `editable` settings.
@@ -353,7 +353,7 @@ const selectItemProperty = new CardViewSelectItemModel(options);
| key\* | string | | Identifying key (important when editing the item) |
| editable | boolean | false | Toggles whether the item is editable |
| value | string | | The original data value for the item |
| options$\* | [`Observable`](http://reactivex.io/documentation/observable.html)&lt;[`CardViewSelectItemOption`](../../../lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts)\[]> | | The original data value for the item |
| options$\* | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewSelectItemOption`](../../../lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts)\[]> | | The original data value for the item |
#### Card Array Item
@@ -368,9 +368,9 @@ const arrayItemProperty = new CardViewArrayItemModel(items);
| label\* | string | | Item label |
| key\* | string | | Identifying key (important when editing the item) |
| editable | boolean | false | Toggles whether the item is editable |
| value | [`Observable`](http://reactivex.io/documentation/observable.html)&lt;[`CardViewArrayItem`](../../../lib/core/card-view/models/card-view-arrayitem.model.ts)\[]> | | The original data value for the item |
| value | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewArrayItem`](../../../lib/core/card-view/models/card-view-arrayitem.model.ts)\[]> | | The original data value for the item |
## See also
- [Card View Update service](../services/card-view-update.service.md)
- [Card View Item interface](../interfaces/card-view-item.interface.md)
* [Card View Update service](../services/card-view-update.service.md)
* [Card View Item interface](../interfaces/card-view-item.interface.md)

10
docs/core/components/comment-list.component.md
View File

@@ -63,12 +63,12 @@ In the component template use the [comment list component](comment-list.componen
### Properties
| Name | Type | Default value | Description |
| -------- | --------------------------------------------------------------- | ------------- | -------------------------------------------- |
| comments | [`CommentModel`](../../../lib/core/models/comment.model.ts)`[]` | | The comments data used to populate the list. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| comments | [`CommentModel`](../../../lib/core/models/comment.model.ts)`[]` | | The comments data used to populate the list. |
### Events
| Name | Type | Description |
| -------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| clickRow | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`CommentModel`](../../../lib/core/models/comment.model.ts)`>` | Emitted when the user clicks on one of the comment rows. |

14
docs/core/components/comments.component.md
View File

@@ -32,14 +32,14 @@ Displays comments from users involved in a specified task or content and allows
### Properties
| Name | Type | Default value | Description |
| -------- | --------- | ------------- | --------------------------- |
| nodeId | `string` | | The numeric ID of the node. |
| readOnly | `boolean` | false | Are the comments read only? |
| taskId | `string` | | The numeric ID of the task. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| nodeId | `string` | | The numeric ID of the node. |
| readOnly | `boolean` | false | Are the comments read only? |
| taskId | `string` | | The numeric ID of the task. |
### Events
| Name | Type | Description |
| ----- | ----------------------------------------------------------------- | --------------------------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while displaying/adding a comment. |

56
docs/core/components/data-column.component.md
View File

@@ -11,17 +11,17 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Details](#details)
- [Conditional visibility](#conditional-visibility)
- [Automatic column header translation](#automatic-column-header-translation)
- [Custom tooltips](#custom-tooltips)
- [Column Template](#column-template)
- [Styling Techniques](#styling-techniques)
- [Using the copyContent option](#using-the-copycontent-option)
- [See also](#see-also)
* [Basic Usage](#basic-usage)
* [Class members](#class-members)
* [Properties](#properties)
* [Details](#details)
* [Conditional visibility](#conditional-visibility)
* [Automatic column header translation](#automatic-column-header-translation)
* [Custom tooltips](#custom-tooltips)
* [Column Template](#column-template)
* [Styling Techniques](#styling-techniques)
* [Using the copyContent option](#using-the-copycontent-option)
* [See also](#see-also)
## Basic Usage
@@ -41,20 +41,20 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
### Properties
| Name | Type | Default value | Description |
| ------------- | ---------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of cell contents. |
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
| editable | `boolean` | false | Toggles the editing support of the column data. |
| focus | `boolean` | true | Enable or disable cell focus |
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
| formatTooltip | `Function` | | Custom tooltip formatter function. |
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| sortingKey | `string` | | When using server side sorting the column used by the api call where the sorting will be performed |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of cell contents. |
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
| editable | `boolean` | false | Toggles the editing support of the column data. |
| focus | `boolean` | true | Enable or disable cell focus |
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
| formatTooltip | `Function` | | Custom tooltip formatter function. |
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| sortingKey | `string` | | When using server side sorting the column used by the api call where the sorting will be performed |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
## Details
@@ -334,6 +334,6 @@ HTML `<data-column>` element example:
## See also
- [Document list component](../../content-services/components/document-list.component.md)
- [Datatable component](datatable.component.md)
- [Task list component](../../process-services/components/task-list.component.md)
* [Document list component](../../content-services/components/document-list.component.md)
* [Datatable component](datatable.component.md)
* [Task list component](../../process-services/components/task-list.component.md)

100
docs/core/components/datatable.component.md
View File

@@ -15,21 +15,21 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
## Contents
- [Basic usage](#basic-usage)
- [Setting the rows and column schema](#setting-the-rows-and-column-schema)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Supplying data for the table](#supplying-data-for-the-table)
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Card view](#card-view)
- [Using events](#using-events)
- [Customizing the component's styles](#customizing-the-components-styles)
- [Resolver Function](#resolver-function)
- [See also](#see-also)
* [Basic usage](#basic-usage)
* [Setting the rows and column schema](#setting-the-rows-and-column-schema)
* [Transclusions](#transclusions)
* [Class members](#class-members)
* [Properties](#properties)
* [Events](#events)
* [Details](#details)
* [Supplying data for the table](#supplying-data-for-the-table)
* [Customizing columns](#customizing-columns)
* [DataTable DOM Events](#datatable-dom-events)
* [Card view](#card-view)
* [Using events](#using-events)
* [Customizing the component's styles](#customizing-the-components-styles)
* [Resolver Function](#resolver-function)
* [See also](#see-also)
## Basic usage
@@ -331,7 +331,7 @@ When adding your custom templates you can style them as you like. However, for a
Notice above those two classes. Apply `adf-datatable-content-cell` for the container of the value that you are going to place in that column and `adf-datatable-cell-value` for the value itself.
If you follow these structure you will be able to apply classes like `.adf-ellipsis-cell` and much more.
If you follow these structure you will be able to apply classes like `.adf-ellipsis-cell` and much more.
Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
together in the same datatable.
@@ -342,38 +342,38 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
### Properties
| Name | Type | Default value | Description |
| ------------------- | --------------------------------------------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use facet [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) search for filtering. |
| columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | DisplayMode.List | Selects the display mode of the table. Can be "list" or "gallery". |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. |
| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
| 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. |
| rows | `any[]` | \[] | The rows that the datatable will show. |
| 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. |
| showHeader | `string` | ShowHeaderMode.Data | Toggles the header. |
| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use facet [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) search for filtering. |
| columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | DisplayMode.List | Selects the display mode of the table. Can be "list" or "gallery". |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. |
| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
| 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. |
| rows | `any[]` | \[] | The rows that the datatable will show. |
| 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. |
| showHeader | `string` | ShowHeaderMode.Data | Toggles the header. |
| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : \[`created`, `desc`], \[`created`, `asc`], \[`due`, `desc`], \[`due`, `asc`] |
| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
### Events
| Name | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
| Name | Type | Description |
| --- | --- | --- |
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
| rowDblClick | `EventEmitter<DataRowEvent>` | Emitted when the user double-clicks a row. |
| showRowActionsMenu | `EventEmitter<DataCellEvent>` | Emitted before the actions menu is displayed for a row. |
| showRowContextMenu | `EventEmitter<DataCellEvent>` | Emitted before the context menu is displayed for a row. |
## Details
@@ -820,11 +820,11 @@ here is the sample resolver which merge the users property and status and it wil
</adf-datatable>
```
![](../../docassets/images/custom-data-table-resolver.png)
![](../../docassets/images/custom-data-table-resolver.png)
## See also
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [Data Table Adapter interface](../interfaces/datatable-adapter.interface.md)
- [Document list component](../../content-services/components/document-list.component.md)
* [Data column component](data-column.component.md)
* [Pagination component](pagination.component.md)
* [Data Table Adapter interface](../interfaces/datatable-adapter.interface.md)
* [Document list component](../../content-services/components/document-list.component.md)

12
docs/core/components/empty-content.component.md
View File

@@ -29,11 +29,11 @@ Provides a generic "Empty Content" placeholder for components.
### Properties
| Name | Type | Default value | Description |
| -------- | -------- | ------------- | ---------------------------------------- |
| icon | `string` | "cake" | Material Icon to use. |
| subtitle | `string` | "" | String or Resource Key for the subtitle. |
| title | `string` | "" | String or Resource Key for the title. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| icon | `string` | "cake" | Material Icon to use. |
| subtitle | `string` | "" | String or Resource Key for the subtitle. |
| title | `string` | "" | String or Resource Key for the title. |
## Details
@@ -72,4 +72,4 @@ You can also use multiple lines instead of the subtitle section:
## See also
- [Error content component](error-content.component.md)
* [Error content component](error-content.component.md)

12
docs/core/components/error-content.component.md
View File

@@ -11,7 +11,7 @@ Displays info about a specific error.
## Basic Usage
Once you have caught the error in your server you will need to redirect to `/error/errorCode` to display information about that error.
Once you have caught the error in your server you will need to redirect to `/error/errorCode` to display information about that error.
```ts
this.router.navigate(['/error', errorCode]);
@@ -21,9 +21,9 @@ this.router.navigate(['/error', errorCode]);
### Properties
| Name | Type | Default value | Description |
| --------- | -------- | ------------- | -------------------------------------- |
| errorCode | `string` | | Error code associated with this error. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| errorCode | `string` | | Error code associated with this error. |
## Details
@@ -49,7 +49,7 @@ You can customize your error messages by adding them to the translate files insi
## How to customise the action button.
The errorContentComponent allows you to customise the actions section using the selector `adf-error-content-actions`.
The errorContentComponent allows you to customise the actions section using the selector `adf-error-content-actions`.
For example you can have a custom action button with the following code
@@ -63,4 +63,4 @@ For example you can have a custom action button with the following code
## See also
- [Empty Content component](empty-content.component.md)
* [Empty Content component](empty-content.component.md)

8
docs/core/components/form-field.component.md
View File

@@ -25,9 +25,9 @@ based on the field type or the metadata information.
### Properties
| Name | Type | Default value | Description |
| ----- | --------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| field | [`FormFieldModel`](../../core/models/form-field.model.md) | null | Contains all the necessary data needed to determine what UI [`Widget`](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the `FormFieldModel` definitions. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| field | [`FormFieldModel`](../../core/models/form-field.model.md) | null | Contains all the necessary data needed to determine what UI [`Widget`](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the `FormFieldModel` definitions. |
## Details
@@ -38,7 +38,7 @@ uses `<adf-form-field>` components to render the form fields.
Forms defined in APS have the following default mappings for the form fields:
| _APS [`Form`](../../../lib/process-services/src/lib/task-list/models/form.model.ts) Designer_ [`Widget`](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) | Field Type | Component Type |
| *APS [`Form`](../../../lib/process-services/src/lib/task-list/models/form.model.ts) Designer* [`Widget`](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) | Field Type | Component Type |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Text | text | [`TextWidgetComponent`](../../../lib/core/form/components/widgets/text/text.widget.ts) |
| Multi-line text | multi-line-text | [`MultilineTextWidgetComponentComponent`](../../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |

6
docs/core/components/form-list.component.md
View File

@@ -21,6 +21,6 @@ Shows forms as a list.
### Properties
| Name | Type | Default value | Description |
| ----- | ------- | ------------- | ---------------------------------------------------------------- |
| forms | `any[]` | \[] | The array that contains the information to show inside the list. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| forms | `any[]` | \[] | The array that contains the information to show inside the list. |

26
docs/core/components/header.component.md
View File

@@ -36,25 +36,25 @@ body of the element:
### Properties
| Name | Type | Default value | Description |
| ----------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| color | `string` | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
| redirectUrl | `string \| any[]` | "/" | The router link for the application logo, when clicked. |
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| color | `string` | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
| redirectUrl | `string \| any[]` | "/" | The router link for the application logo, when clicked. |
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
### Events
| Name | Type | Description |
| ------- | --------------------------------------------------------------------- | ------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the sidenav button is clicked. |
## Details
This component displays a customizable header that can be reused. Use the input properties to
configure the left side (title, button) and the primary color of the header. The right part of the
header can contain other components which are transcluded in the header component.
header can contain other components which are transcluded in the header component.

16
docs/core/components/host-settings.component.md
View File

@@ -32,14 +32,14 @@ Validates the URLs for ACS and APS and saves them in the user's local storage
### Properties
| Name | Type | Default value | Description |
| --------- | ---------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| providers | `string[]` | | Tells the component which provider options are available. Possible valid values are "ECM" (Content), "BPM" (Process) , "ALL" (Content and Process), 'OAUTH2' SSO. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| providers | `string[]` | | Tells the component which provider options are available. Possible valid values are "ECM" (Content), "BPM" (Process) , "ALL" (Content and Process), 'OAUTH2' SSO. |
### Events
| Name | Type | Description |
| ------- | --------------------------------------------------------------------- | -------------------------------------------------- |
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the user cancels the changes. |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the URL is invalid. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the changes are successfully applied. |
| Name | Type | Description |
| --- | --- | --- |
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the user cancels the changes. |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the URL is invalid. |
| success | `EventEmitter<boolean>` | Emitted when the changes are successfully applied. |

10
docs/core/components/icon.component.md
View File

@@ -26,10 +26,10 @@ Provides a universal way of rendering registered and named icons.
### Properties
| Name | Type | Default value | Description |
| ----- | --------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Theme color palette for the component. |
| value | `string` | | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Theme color palette for the component. |
| value | `string` | | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
## Details
@@ -80,4 +80,4 @@ using the `adf:` namespace.
## See also
- [Thumbnail service](../services/thumbnail.service.md)
* [Thumbnail service](../services/thumbnail.service.md)

18
docs/core/components/infinite-pagination.component.md
View File

@@ -36,16 +36,16 @@ Adds "infinite" pagination to the component it is used with.
### Properties
| Name | Type | Default value | Description |
| --------- | ------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------- |
| isLoading | `boolean` | false | Is a new page loading? |
| pageSize | `number` | | Number of items that are added with each "load more" event. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| isLoading | `boolean` | false | Is a new page loading? |
| pageSize | `number` | | Number of items that are added with each "load more" event. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
### Events
| Name | Type | Description |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| loadMore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`RequestPaginationModel`](../../../lib/core/models/request-pagination.model.ts)`>` | Emitted when the "Load More" button is clicked. |
## Details
@@ -65,5 +65,5 @@ See the [Pagination component](pagination.component.md) for more information abo
## See also
- [Document list component](../../content-services/components/document-list.component.md)
- [Pagination component](pagination.component.md)
* [Document list component](../../content-services/components/document-list.component.md)
* [Pagination component](pagination.component.md)

16
docs/core/components/info-drawer-layout.component.md
View File

@@ -18,9 +18,9 @@ Displays a sidebar-style information panel.
There are three regions where you can add your own content using `<div>` elements
with the following names:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
* info-drawer-title
* info-drawer-buttons
* info-drawer-content
```html
<adf-info-drawer-layout [showHeader]="true">
@@ -42,9 +42,9 @@ with the following names:
### Properties
| Name | Type | Default value | Description |
| ---------- | --------- | ------------- | ----------------------------- |
| showHeader | `boolean` | true | The visibility of the header. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| showHeader | `boolean` | true | The visibility of the header. |
## Details
@@ -54,5 +54,5 @@ See the [Info drawer tab component](info-drawer-tab.component.md) for an alterna
## See also
- [Info drawer component](info-drawer.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)
* [Info drawer component](info-drawer.component.md)
* [Info drawer tab component](info-drawer-tab.component.md)

12
docs/core/components/info-drawer-tab.component.md
View File

@@ -53,10 +53,10 @@ You can also combine `icon` and `label` properties.
### Properties
| Name | Type | Default value | Description |
| ----- | -------- | ------------- | ------------------------------------------------- |
| icon | `string` | null | Icon to render for the tab. |
| label | `string` | "" | The title of the tab (string or translation key). |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| icon | `string` | null | Icon to render for the tab. |
| label | `string` | "" | The title of the tab (string or translation key). |
## Details
@@ -64,5 +64,5 @@ See the [Info drawer component](info-drawer.component.md) page for details of ho
## See also
- [Info drawer component](info-drawer.component.md)
- [Info drawer layout component](info-drawer-layout.component.md)
* [Info drawer component](info-drawer.component.md)
* [Info drawer layout component](info-drawer-layout.component.md)

24
docs/core/components/info-drawer.component.md
View File

@@ -18,9 +18,9 @@ Displays a sidebar-style information panel with tabs.
There are three regions where you can add your own content using `<div>` elements
with the following names (as with the [Info drawer layout component](info-drawer-layout.component.md)):
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
* info-drawer-title
* info-drawer-buttons
* info-drawer-content
The tabs are added using one or more `<adf-info-drawer-tab>` elements, which can
have any content you like:
@@ -47,16 +47,16 @@ have any content you like:
### Properties
| Name | Type | Default value | Description |
| ------------- | ---------------- | ------------- | --------------------------------------------------------- |
| selectedIndex | `number` | 0 | The selected index tab. |
| showHeader | `boolean` | true | The visibility of the header. |
| title | `string \| null` | null | The title of the info drawer (string or translation key). |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| selectedIndex | `number` | 0 | The selected index tab. |
| showHeader | `boolean` | true | The visibility of the header. |
| title | `string \| null` | null | The title of the info drawer (string or translation key). |
### Events
| Name | Type | Description |
| ---------- | -------------------------------------------------------------------- | ---------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| currentTab | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<number>` | Emitted when the currently active tab changes. |
## Details
@@ -65,5 +65,5 @@ This is a variant of the [Info Drawer Layout component](info-drawer-layout.compo
## See also
- [Info drawer layout component](info-drawer-layout.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)
* [Info drawer layout component](info-drawer-layout.component.md)
* [Info drawer tab component](info-drawer-tab.component.md)

22
docs/core/components/json-cell.component.md
View File

@@ -39,21 +39,21 @@ You can specify the cell inside the `app.config.json` file:
### Properties
| Name | Type | Default value | Description |
| ----------- | --------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | | Data that defines the column. |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of the cell's content. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data table adapter instance. |
| editable | `boolean` | false | Editable JSON. |
| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects |
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row. |
| tooltip | `string` | | Text for the cell's tooltip. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | | Data that defines the column. |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of the cell's content. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data table adapter instance. |
| editable | `boolean` | false | Editable JSON. |
| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects |
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row. |
| tooltip | `string` | | Text for the cell's tooltip. |
## Details
This component provides a custom display to show JSON data in a
This component provides a custom display to show JSON data in a
[Datatable component](datatable.component.md) cell
## See also
- [Datatable component](datatable.component.md)
* [Datatable component](datatable.component.md)

6
docs/core/components/login-dialog-panel.component.md
View File

@@ -13,8 +13,8 @@ Shows and manages a login dialog.
### Events
| Name | Type | Description |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSuccessEvent`](../../../lib/core/login/models/login-success.event.ts)`>` | Emitted when the login succeeds. |
## Details
@@ -24,4 +24,4 @@ but it also creates and manages the dialog for you.
## See also
- [Login Dialog component](login-dialog.component.md)
* [Login Dialog component](login-dialog.component.md)

74
docs/core/components/login.component.md
View File

@@ -13,20 +13,20 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Handling events](#handling-events)
- [Custom logo and background](#custom-logo-and-background)
- [Customizing validation rules](#customizing-validation-rules)
- [Call an external identity provider to fetch the auth token](#call-an-external-identity-provider-to-fetch-the-auth-token)
- [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
- [Single Sign-On (SSO)](#single-sign-on-sso)
- [Kerberos](#kerberos)
- [See Also](#see-also)
* [Basic usage](#basic-usage)
* [Transclusions](#transclusions)
* [Class members](#class-members)
* [Properties](#properties)
* [Events](#events)
* [Details](#details)
* [Handling events](#handling-events)
* [Custom logo and background](#custom-logo-and-background)
* [Customizing validation rules](#customizing-validation-rules)
* [Call an external identity provider to fetch the auth token](#call-an-external-identity-provider-to-fetch-the-auth-token)
* [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
* [Single Sign-On (SSO)](#single-sign-on-sso)
* [Kerberos](#kerberos)
* [See Also](#see-also)
## Basic usage
@@ -75,25 +75,25 @@ with custom input fields handled by your application or parent component:
### Properties
| Name | Type | Default value | Description |
| ------------------ | --------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundImageUrl | `string` | | Path to a custom background image. |
| copyrightText | `string` | | The copyright text below the login box. |
| fieldsValidation | `any` | | Custom validation rules for the login form. |
| logoImageUrl | `string` | | Path to a custom logo image. |
| needHelpLink | `string` | "" | Sets the URL of the NEED HELP link in the footer. |
| registerLink | `string` | "" | Sets the URL of the REGISTER link in the footer. |
| showLoginActions | `boolean` | true | Should the extra actions (`Need Help`, `Register`, etc) be shown? |
| showRememberMe | `boolean` | true | Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly. |
| successRoute | `string` | null | Route to redirect to on successful login. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| backgroundImageUrl | `string` | | Path to a custom background image. |
| copyrightText | `string` | | The copyright text below the login box. |
| fieldsValidation | `any` | | Custom validation rules for the login form. |
| logoImageUrl | `string` | | Path to a custom logo image. |
| needHelpLink | `string` | "" | Sets the URL of the NEED HELP link in the footer. |
| registerLink | `string` | "" | Sets the URL of the REGISTER link in the footer. |
| showLoginActions | `boolean` | true | Should the extra actions (`Need Help`, `Register`, etc) be shown? |
| showRememberMe | `boolean` | true | Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly. |
| successRoute | `string` | null | Route to redirect to on successful login. |
### Events
| Name | Type | Description |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginErrorEvent`](../../../lib/core/login/models/login-error.event.ts)`>` | Emitted when the login fails. |
| executeSubmit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSubmitEvent`](../../../lib/core/login/models/login-submit.event.ts)`>` | Emitted when the login form is submitted. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSuccessEvent`](../../../lib/core/login/models/login-success.event.ts)`>` | Emitted when the login is successful. |
| Name | Type | Description |
| --- | --- | --- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginErrorEvent`](../../../lib/core/login/models/login-error.event.ts)`>` | Emitted when the login fails. |
| executeSubmit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSubmitEvent`](../../../lib/core/login/models/login-submit.event.ts)`>` | Emitted when the login form is submitted. |
| success | `EventEmitter<LoginSuccessEvent>` | Emitted when the login is successful. |
## Details
@@ -264,8 +264,8 @@ export class MyCustomLogin {
}
```
Note that if you do not call `event.preventDefault()` then the default behaviour
will execute _after_ your custom code has completed.
Note that if you do not call `event.preventDefault()` then the default behaviour
will execute *after* your custom code has completed.
### Single Sign-On (SSO)
@@ -301,8 +301,8 @@ automatically to the authorization server when the user is not logged-in
You can also enable automatic redirection to the OAuth provider using the following properties:
- `silentLogin`
- `redirectSilentIframeUri`
* `silentLogin`
* `redirectSilentIframeUri`
```json
{
@@ -323,7 +323,7 @@ You can also enable automatic redirection to the OAuth provider using the follow
Note that if you deploy the application to a virtual folder
(for example `http://<ADDRESS>/my-app`) then `redirectSilentIframeUri`
must contain the full URI value:
must contain the full URI value:
```json
{
@@ -352,8 +352,8 @@ The configuration for Kerberos authentication will allow users to access Alfresc
**You don't need to use the [login component](../../core/components/login.component.md) in order to enable Kerberos SSO in ADF**.
See [Kerberos Configuration](../../../docs/user-guide/kerberos.md) for instructions on configuring Kerberos for an ADF app.
See [Kerberos Configuration](../../../docs/user-guide/kerberos.md) for instructions on configuring Kerberos for an ADF app.
## See Also
- [Logout directive](../directives/logout.directive.md)
* [Logout directive](../directives/logout.directive.md)

10
docs/core/components/notification-history.component.md
View File

@@ -7,7 +7,7 @@ Last reviewed: 2019-06-05
# [Notification History component](../../../lib/core/notifications/components/notification-history.component.ts "Defined in notification-history.component.ts")
This component is in the current status just an experimental component.
This component is in the current status just an experimental component.
The main purpose of the [Notification history component](../../core/components/notification-history.component.md) is list all the notification received in the current session. They will disappear from the list after the refresh.
![Notification history component](../../docassets/notification-history-component.png)
@@ -22,7 +22,7 @@ The main purpose of the [Notification history component](../../core/components/n
### Properties
| Name | Type | Default value | Description |
| ------------- | -------- | ------------- | ----------------------------------------------------------------------------- |
| menuPositionX | `string` | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
| menuPositionY | `string` | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| menuPositionX | `string` | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
| menuPositionY | `string` | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |

44
docs/core/components/pagination.component.md
View File

@@ -13,14 +13,14 @@ Adds pagination to the component it is used with.
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom pagination](#custom-pagination)
- [See also](#see-also)
* [Basic Usage](#basic-usage)
* [Class members](#class-members)
* [Properties](#properties)
* [Events](#events)
* [Details](#details)
* [Integrating with the Document List component](#integrating-with-the-document-list-component)
* [Custom pagination](#custom-pagination)
* [See also](#see-also)
## Basic Usage
@@ -40,21 +40,21 @@ Adds pagination to the component it is used with.
### Properties
| Name | Type | Default value | Description |
| ------------------ | ------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------- |
| supportedPageSizes | `number[]` | | An array of page sizes. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
| pagination | [`PaginationModel`](../../../lib/core/models/pagination.model.ts) | | Pagination object. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| supportedPageSizes | `number[]` | | An array of page sizes. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
| pagination | [`PaginationModel`](../../../lib/core/models/pagination.model.ts) | | Pagination object. |
### Events
| Name | Type | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when pagination changes in any way. |
| changePageNumber | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the page number changes. |
| changePageSize | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the page size changes. |
| nextPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the next page is requested. |
| prevPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the previous page is requested. |
| Name | Type | Description |
| --- | --- | --- |
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when pagination changes in any way. |
| changePageNumber | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the page number changes. |
| changePageSize | `EventEmitter<PaginationModel>` | Emitted when the page size changes. |
| nextPage | `EventEmitter<PaginationModel>` | Emitted when the next page is requested. |
| prevPage | `EventEmitter<PaginationModel>` | Emitted when the previous page is requested. |
## Details
@@ -67,7 +67,7 @@ can pass to a subsequent API call.
Each event corresponds to a particular action from the user. For the `change` event, a
PaginationQueryParams object is returned. This contains the query
parameters supported by the REST API, `skipCount` and `maxItems`.
parameters supported by the REST API, `skipCount` and `maxItems`.
For all events other than `change`, a new [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) object is returned as in the following example. The
new object contains updated properties that you can use to fetch the next page of information.
@@ -102,4 +102,4 @@ and pass the updated parameters.
## See also
- [Infinite Pagination component](infinite-pagination.component.md)
* [Infinite Pagination component](infinite-pagination.component.md)

36
docs/core/components/search-text-input.component.md
View File

@@ -26,24 +26,24 @@ Displays a input text that supports autocompletion
### Properties
| Name | Type | Default value | Description |
| ------------------ | ------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------ |
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
| debounceTime | `number` | 0 | Debounce time in milliseconds. |
| defaultState | `SearchTextStateEnum` | | Default state expanded or Collapsed. |
| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` | | Listener for results-list events (focus, blur and focusout). |
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
| searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
| searchTerm | `string` | "" | Search term preselected |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
| debounceTime | `number` | 0 | Debounce time in milliseconds. |
| defaultState | `SearchTextStateEnum` | | Default state expanded or Collapsed. |
| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` | | Listener for results-list events (focus, blur and focusout). |
| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
| searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
| searchTerm | `string` | "" | Search term preselected |
### Events
| Name | Type | Description |
| ------------ | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| reset | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the result list is reset |
| searchChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then it is truncated to an empty string. |
| selectResult | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the result list is selected |
| submit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the search is submitted by pressing the ENTER key. The search term is provided as the value of the event. |
| Name | Type | Description |
| --- | --- | --- |
| reset | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the result list is reset |
| searchChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then it is truncated to an empty string. |
| selectResult | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the result list is selected |
| submit | `EventEmitter<any>` | Emitted when the search is submitted by pressing the ENTER key. The search term is provided as the value of the event. |

18
docs/core/components/sidebar-action-menu.component.md
View File

@@ -19,9 +19,9 @@ Displays a sidebar-action menu information panel.
There are three regions where you can add your own content in `<div>` elements with
the following names:
- adf-sidebar-menu-title-icon
- adf-sidebar-menu-options
- adf-sidebar-menu-expand-icon
* adf-sidebar-menu-title-icon
* adf-sidebar-menu-options
* adf-sidebar-menu-expand-icon
```html
<adf-sidebar-action-menu>
@@ -42,12 +42,12 @@ the following names:
### Properties
| Name | Type | Default value | Description |
| -------- | --------- | ------------- | ------------------------------------------------ |
| expanded | `boolean` | | Toggle the sidebar action menu on expand. |
| title | `string` | | The title of the sidebar action. |
| width | `number` | 272 | Width in pixels for sidebar action menu options. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| expanded | `boolean` | | Toggle the sidebar action menu on expand. |
| title | `string` | | The title of the sidebar action. |
| width | `number` | 272 | Width in pixels for sidebar action menu options. |
## Details
As the name suggests, this is basically just a layout with CSS styling.
As the name suggests, this is basically just a layout with CSS styling.

52
docs/core/components/sidenav-layout.component.md
View File

@@ -13,22 +13,22 @@ Displays the standard three-region ADF application layout.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Template context](#template-context)
- [menuOpenState$](#menuopenstate)
- [Preserving the menu state](#preserving-the-menu-state)
* [Basic Usage](#basic-usage)
* [Transclusions](#transclusions)
* [Class members](#class-members)
* [Properties](#properties)
* [Events](#events)
* [Details](#details)
* [Template context](#template-context)
* [menuOpenState$](#menuopenstate)
* [Preserving the menu state](#preserving-the-menu-state)
## Basic Usage
### [Transclusions](../../user-guide/transclusion.md)
The content for the header, navigation area, and main content are transcluded using three special
sub-components (note the use of `<ng-template>` in the sub-components' body sections):
sub-components (note the use of `<ng-template>` in the sub-components' body sections):
```html
<adf-sidenav-layout
@@ -67,19 +67,19 @@ sub-components (note the use of `<ng-template>` in the sub-components' body sect
### Properties
| Name | Type | Default value | Description |
| --------------- | --------- | ------------- | -------------------------------------------------------------------------------------- |
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region. |
| position | `string` | "start" | The side that the drawer is attached to. Possible values are 'start' and 'end'. |
| 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. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region. |
| position | `string` | "start" | The side that the drawer is attached to. Possible values are 'start' and 'end'. |
| 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 |
| -------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Name | Type | Description |
| --- | --- | --- |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes. |
## Details
@@ -114,10 +114,10 @@ Mobile layout (screen width less than the `stepOver` value):
Each template is given a context containing the following methods:
- `toggleMenu(): void`
* `toggleMenu(): void`
Triggers menu toggling.
- `isMenuMinimized(): boolean`
* `isMenuMinimized(): boolean`
The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.
### menuOpenState$
@@ -126,12 +126,12 @@ Beside the template context's **isMenuMinimized** variable, another way to liste
| Name | Type | Default | Description |
| -------------- | ----------------------------------------------------------------------------- | ------- | ----------------------------------------------- |
| menuOpenState$ | [`Observable`](http://reactivex.io/documentation/observable.html)&lt;boolean> | true | Another way to listen to menu open/closed state |
| menuOpenState$ | [`Observable`](http://reactivex.io/documentation/observable.html)\<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 changed to the opened state
- false, if the menu changed to the closed state
* true, if the menu changed to the opened state
* false, if the menu changed to the closed state
### Preserving the menu state
@@ -147,7 +147,7 @@ set a property in the `app.config.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.
You can also set the default state in the `app.config.json` file:
You can also set the default state in the `app.config.json` file:
```json
"sideNav" : {

18
docs/core/components/sorting-picker.component.md
View File

@@ -26,18 +26,18 @@ Selects from a set of predefined sorting definitions and directions.
### Properties
| Name | Type | Default value | Description |
| --------- | ----------------- | ------------- | ----------------------------- |
| ascending | `boolean` | true | Current sorting direction |
| options | `Array<Function>` | \[] | Available sorting options |
| selected | `string` | | Currently selected option key |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| ascending | `boolean` | true | Current sorting direction |
| options | `Array<Function>` | \[] | Available sorting options |
| selected | `string` | | Currently selected option key |
### Events
| Name | Type | Description |
| ------------- | --------------------------------------------------------------------- | ------------------------------------------ |
| sortingChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Raised each time direction gets changed. |
| valueChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Raised each time sorting key gets changed. |
| Name | Type | Description |
| --- | --- | --- |
| sortingChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Raised each time direction gets changed. |
| valueChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Raised each time sorting key gets changed. |
## Details

76
docs/core/components/start-form.component.md
View File

@@ -24,46 +24,46 @@ Displays the Start [`Form`](../../../lib/process-services/src/lib/task-list/mode
### Properties
| Name | Type | Default value | Description |
| ------------------------- | -------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) | | Custom form values map to be used with the rendered form. |
| disableCompleteButton | `boolean` | false | If true then the `Complete` outcome button is shown but it will be disabled. |
| disableSaveButton | `boolean` | false | If true then the `Save` outcome button is shown but will be disabled. |
| disableStartProcessButton | `boolean` | false | If true then the `Start Process` outcome button is shown but it will be disabled. |
| enableFixedSpacedForm | `boolean` | true | The form will set a prefixed space for invisible fields. |
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | | Contains a list of form field validator instances. |
| form | [`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts) | | Underlying [form model](../../../lib/core/form/components/widgets/core/form.model.ts) instance. |
| formId | `number` | | The id of the form definition to load and display with custom values. |
| formName | `string` | | Name of the form definition to load and display with custom values. |
| nameNode | `string` | | Name to assign to the new node where the metadata are stored. |
| nodeId | `string` | | Content Services node ID for the form metadata. |
| path | `string` | | Path of the folder where the metadata will be stored. |
| processDefinitionId | `string` | | [Definition](../../../lib/cli/node_modules/@alfresco/js-api/src/api/content-rest-api/model/definition.ts) ID of the process to start, this parameter can not be use in combination with processId |
| processId | `string` | | Process ID of the process to start, this parameter can not be use in combination with processDefinitionId |
| readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
| readOnlyForm | `boolean` | false | Is the form read-only (ie, can't be edited)? |
| saveMetadata | `boolean` | false | Toggle saving of form metadata. |
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
| showOutcomeButtons | `boolean` | true | Should form outcome buttons be shown? |
| showRefreshButton | `boolean` | true | Should the refresh button be shown? |
| showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
| showTitle | `boolean` | true | Toggle rendering of the form title. |
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
| taskId | `string` | | Task id to fetch corresponding form and values. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| data | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) | | Custom form values map to be used with the rendered form. |
| disableCompleteButton | `boolean` | false | If true then the `Complete` outcome button is shown but it will be disabled. |
| disableSaveButton | `boolean` | false | If true then the `Save` outcome button is shown but will be disabled. |
| disableStartProcessButton | `boolean` | false | If true then the `Start Process` outcome button is shown but it will be disabled. |
| enableFixedSpacedForm | `boolean` | true | The form will set a prefixed space for invisible fields. |
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | | Contains a list of form field validator instances. |
| form | [`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts) | | Underlying [form model](../../../lib/core/form/components/widgets/core/form.model.ts) instance. |
| formId | `number` | | The id of the form definition to load and display with custom values. |
| formName | `string` | | Name of the form definition to load and display with custom values. |
| nameNode | `string` | | Name to assign to the new node where the metadata are stored. |
| nodeId | `string` | | Content Services node ID for the form metadata. |
| path | `string` | | Path of the folder where the metadata will be stored. |
| processDefinitionId | `string` | | [`Definition`](../../../lib/cli/node_modules/@alfresco/js-api/src/api/content-rest-api/model/definition.ts) ID of the process to start, this parameter can not be use in combination with processId |
| processId | `string` | | Process ID of the process to start, this parameter can not be use in combination with processDefinitionId |
| readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
| readOnlyForm | `boolean` | false | Is the form read-only (ie, can't be edited)? |
| saveMetadata | `boolean` | false | Toggle saving of form metadata. |
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
| showOutcomeButtons | `boolean` | true | Should form outcome buttons be shown? |
| showRefreshButton | `boolean` | true | Should the refresh button be shown? |
| showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
| showTitle | `boolean` | true | Toggle rendering of the form title. |
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
| taskId | `string` | | Task id to fetch corresponding form and values. |
### Events
| Name | Type | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs. |
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when a field of the form is clicked. |
| formDataRefreshed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when form values are refreshed due to a data property change. |
| formError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormFieldModel`](../../core/models/form-field.model.md)`[]>` | Emitted when the supplied form values have a validation error. |
| formLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is loaded or reloaded. |
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
| outcomeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks one of the outcome buttons that completes the form. |
| Name | Type | Description |
| --- | --- | --- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs. |
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when a field of the form is clicked. |
| formDataRefreshed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when form values are refreshed due to a data property change. |
| formError | `EventEmitter<FormFieldModel[]>` | Emitted when the supplied form values have a validation error. |
| formLoaded | `EventEmitter<FormModel>` | Emitted when the form is loaded or reloaded. |
| formSaved | `EventEmitter<FormModel>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
| outcomeClick | `EventEmitter<any>` | Emitted when the user clicks one of the outcome buttons that completes the form. |
## Details
@@ -78,4 +78,4 @@ the user clicked. You can pass this value to the `startProcess` method (defined
## See also
- [Process service](../../process-services/services/process.service.md)
* [Process service](../../process-services/services/process.service.md)

16
docs/core/components/text-mask.component.md
View File

@@ -19,9 +19,9 @@ Implements text field input masks.
### Properties
| Name | Type | Default value | Description |
| --------- | ---------- | ------------- | ------------------------------------------- |
| inputMask | `Function` | | Object defining mask and "reversed" status. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| inputMask | `Function` | | Object defining mask and "reversed" status. |
## Details
@@ -45,11 +45,11 @@ text mask in ADF would be:
The following characters have special meaning within a mask; all other characters
are included in the text as they are:
- **"0"**: Denotes a digit
- **"9"**: Denotes a digit that can optionally be left out
- **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
- **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
- **"#"**: Denotes a string of zero or more digits
* **"0"**: Denotes a digit
* **"9"**: Denotes a digit that can optionally be left out
* **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
* **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
* **"#"**: Denotes a string of zero or more digits
The mask is passed to the directive in the `mask` field of the parameter object. The
`reversed` field indicates that digits in the mask are "filled up" in

28
docs/core/components/toolbar.component.md
View File

@@ -13,14 +13,14 @@ Simple container for headers, titles, actions and breadcrumbs.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Details](#details)
- [Dropdown menu](#dropdown-menu)
- [Custom color](#custom-color)
- [See also](#see-also)
* [Basic Usage](#basic-usage)
* [Transclusions](#transclusions)
* [Class members](#class-members)
* [Properties](#properties)
* [Details](#details)
* [Dropdown menu](#dropdown-menu)
* [Custom color](#custom-color)
* [See also](#see-also)
## Basic Usage
@@ -72,10 +72,10 @@ pushed to the right by a spacer:
### Properties
| Name | Type | Default value | Description |
| ----- | --------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
| title | `string` | "" | Toolbar title. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
| title | `string` | "" | Toolbar title. |
## Details
@@ -133,5 +133,5 @@ For example:
## See also
- [Toolbar Divider component](toolbar-divider.component.md)
- [Toolbar Title component](toolbar-title.component.md)
* [Toolbar Divider component](toolbar-divider.component.md)
* [Toolbar Title component](toolbar-title.component.md)

16
docs/core/components/user-info.component.md
View File

@@ -19,14 +19,14 @@ Shows user information.
### Properties
| Name | Type | Default value | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------- |
| bpmBackgroundImage | `string` | | Custom path for the background banner image for APS users. |
| ecmBackgroundImage | `string` | | Custom path for the background banner image for ACS users. |
| menuPositionX | [`MenuPositionX`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
| menuPositionY | [`MenuPositionY`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
| namePosition | `string` | "right" | When the username is shown, this defines its position relative to the user info button. Can be `right` or `left`. |
| showName | `boolean` | true | Shows/hides the username next to the user info button. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| bpmBackgroundImage | `string` | | Custom path for the background banner image for APS users. |
| ecmBackgroundImage | `string` | | Custom path for the background banner image for ACS users. |
| menuPositionX | [`MenuPositionX`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
| menuPositionY | [`MenuPositionY`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
| namePosition | `string` | "right" | When the username is shown, this defines its position relative to the user info button. Can be `right` or `left`. |
| showName | `boolean` | true | Shows/hides the username next to the user info button. |
## Details

200
docs/core/components/viewer.component.md
View File

@@ -13,22 +13,22 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Keyboard shortcuts](#keyboard-shortcuts)
- [Details](#details)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom file parameters](#custom-file-parameters)
- [Supported file formats](#supported-file-formats)
- [Content Renditions](#content-renditions)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Extending the Viewer](#extending-the-viewer)
- [Custom layout](#custom-layout)
- [Printing](#printing)
- [See also](#see-also)
* [Basic usage](#basic-usage)
* [Transclusions](#transclusions)
* [Class members](#class-members)
* [Properties](#properties)
* [Events](#events)
* [Keyboard shortcuts](#keyboard-shortcuts)
* [Details](#details)
* [Integrating with the Document List component](#integrating-with-the-document-list-component)
* [Custom file parameters](#custom-file-parameters)
* [Supported file formats](#supported-file-formats)
* [Content Renditions](#content-renditions)
* [Configuring PDF.js library](#configuring-pdfjs-library)
* [Extending the Viewer](#extending-the-viewer)
* [Custom layout](#custom-layout)
* [Printing](#printing)
* [See also](#see-also)
## Basic usage
@@ -74,48 +74,48 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
### Properties
| Name | Type | Default value | Description |
| -------------------- | --------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| allowDownload | `boolean` | true | Toggles downloading. |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowPrint | `boolean` | false | Toggles printing. |
| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
| canNavigateBefore | `boolean` | true | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled. |
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
| displayName | `string` | | Specifies the name of the file when it is not available from the URL. |
| fileName | `string` | | Content filename. |
| maxRetries | `number` | 30 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| nodeId | `string` | null | [Node](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| urlFileViewer | `string` | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
| versionId | `string` | null | Version Id of the file to load. |
| Name | Type | Default value | Description |
| --- | --- | --- | --- |
| allowDownload | `boolean` | true | Toggles downloading. |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowPrint | `boolean` | false | Toggles printing. |
| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
| canNavigateBefore | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled. |
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
| displayName | `string` | | Specifies the name of the file when it is not available from the URL. |
| fileName | `string` | | Content filename. |
| maxRetries | `number` | 30 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| nodeId | `string` | null | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| urlFileViewer | `string` | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
| versionId | `string` | null | Version Id of the file to load. |
### Events
| Name | Type | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| extensionChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the filename extension changes. |
| goBack | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/events/base.event.ts)`<any>>` | Emitted when user clicks the 'Back' button. |
| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the shared link used is not valid. |
| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<MouseEvent \| KeyboardEvent>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<MouseEvent \| KeyboardEvent>` | Emitted when user clicks 'Navigate Next' (">") button. |
| print | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/events/base.event.ts)`<any>>` | Emitted when user clicks the 'Print' button. |
| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the viewer is shown or hidden. |
| Name | Type | Description |
| --- | --- | --- |
| extensionChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the filename extension changes. |
| goBack | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/events/base.event.ts)`<any>>` | Emitted when user clicks the 'Back' button. |
| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the shared link used is not valid. |
| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<MouseEvent \| KeyboardEvent>` | Emitted when user clicks 'Navigate Before' ("<") button. |
| navigateNext | `EventEmitter<MouseEvent \| KeyboardEvent>` | Emitted when user clicks 'Navigate Next' (">") button. |
| print | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Print' button. |
| showViewerChange | `EventEmitter<boolean>` | Emitted when the viewer is shown or hidden. |
## Keyboard shortcuts
@@ -130,7 +130,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
### Integrating with the Document List component
Below is the most simple integration of the Viewer and
Below is the most simple integration of the Viewer and
[Document List](../../content-services/components/document-list.component.md) components within your custom component:
```html
@@ -182,45 +182,45 @@ You can provide custom file parameters, for example a value for the `mimeType` o
The [Viewer component](viewer.component.md) consists of separate Views that handle particular file types or type families based on either a file extension or a mime type:
- PDF View
- application/pdf
- \*.pdf
- Image View
- image/png
- image/jpeg
- image/gif
- image/bmp
- image/svg+xml
- \*.png
- \*.jpg
- \*.jpeg
- \*.gif
- \*.bpm
- \*.svg
- Text View
- text/plain
- text/csv
- text/xml
- text/html
- application/x-javascript
- \*.txt
- \*.xml
- \*.js
- \*.html
- \*.json
- \*.ts
- Media View
- video/mp4
- video/webm
- video/ogg
- audio/mpeg
- audio/ogg
- audio/wav
- \*.wav
- \*.mp4
- \*.mp3
- \*.webm
- \*.ogg
* PDF View
* application/pdf
* \*.pdf
* Image View
* image/png
* image/jpeg
* image/gif
* image/bmp
* image/svg+xml
* \*.png
* \*.jpg
* \*.jpeg
* \*.gif
* \*.bpm
* \*.svg
* Text View
* text/plain
* text/csv
* text/xml
* text/html
* application/x-javascript
* \*.txt
* \*.xml
* \*.js
* \*.html
* \*.json
* \*.ts
* Media View
* video/mp4
* video/webm
* video/ogg
* audio/mpeg
* audio/ogg
* audio/wav
* \*.wav
* \*.mp4
* \*.mp3
* \*.webm
* \*.ogg
### Content Renditions
@@ -474,14 +474,14 @@ You can set a default zoom scaling value for pdf viewer by adding the following
Note: For the pdf viewer the value has to be within the range of 25 - 1000.
"adf-viewer": {
"pdf-viewer-scaling": 150
}
"pdf-viewer-scaling": 150
}
In the same way you can set a default zoom scaling value for the image viewer by adding the following code in `app.config.json`.
"adf-viewer": {
"image-viewer-scaling": 150
}
"image-viewer-scaling": 150
}
By default the viewer's zoom scaling is set to 100%.
@@ -502,4 +502,4 @@ content.
## See also
- [Document List component](../../content-services/components/document-list.component.md)
* [Document List component](../../content-services/components/document-list.component.md)