mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2135] Updated tables of contents (#2822)
This commit is contained in:
committed by
Eugenio Romano
parent
72cfd7894d
commit
69e40ea1c0
@@ -1,28 +1,26 @@
|
|||||||
# Activiti Form component
|
# Form component
|
||||||
|
|
||||||
The component shows a Form from Activiti (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
|
Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
## Contents
|
||||||
|
|
||||||
<!-- toc -->
|
- [Basic Usage](#basic-usage)
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
- [Properties](#properties)
|
||||||
* [Properties](#properties)
|
- [Advanced properties](#advanced-properties)
|
||||||
* [Advanced properties](#advanced-properties)
|
- [Events](#events)
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
* [Custom empty form template](#custom-empty-form-template)
|
|
||||||
* [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
|
|
||||||
* [Field Validators](#field-validators)
|
|
||||||
- [Other documentation](#other-documentation)
|
|
||||||
* [Common scenarios](#common-scenarios)
|
|
||||||
+ [Changing field value based on another field](#changing-field-value-based-on-another-field)
|
|
||||||
+ [Listen all form Events](#listen-all-form-events)
|
|
||||||
- [See also](#see-also)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
- [Details](#details)
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
- [Custom empty form template](#custom-empty-form-template)
|
||||||
|
- [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
|
||||||
|
- [Field Validators](#field-validators)
|
||||||
|
|
||||||
|
- [Other documentation](#other-documentation)
|
||||||
|
|
||||||
|
- [Common scenarios](#common-scenarios)
|
||||||
|
|
||||||
|
- [See also](#see-also)
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
@@ -104,11 +102,11 @@ and store the form field as metadata. The param nameNode is optional.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| taskId | string | | Task id to fetch corresponding form and values. |
|
| taskId | string | | Task id to fetch corresponding form and values. |
|
||||||
| formId | string | | The id of the form definition to load and display with custom values. |
|
| formId | string | | 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. |
|
| formName | string | | Name of the form definition to load and display with custom values. |
|
||||||
| data | FormValues | | Custom form values map to be used with the rendered form. |
|
| data | FormValues | | Custom form values map to be used with the rendered form. |
|
||||||
| showTitle | boolean | true | Toggle rendering of the form title. |
|
| showTitle | boolean | true | Toggle rendering of the form title. |
|
||||||
| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
|
| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
|
||||||
| disableCompleteButton | boolean | false | The `Complete` outcome button is shown but it will be disabled. |
|
| disableCompleteButton | boolean | false | The `Complete` outcome button is shown but it will be disabled. |
|
||||||
@@ -118,28 +116,28 @@ and store the form field as metadata. The param nameNode is optional.
|
|||||||
| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
|
| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
|
||||||
| showValidationIcon | boolean | true | Toggle rendering of the validation icon next form title. |
|
| showValidationIcon | boolean | true | Toggle rendering of the validation icon next form title. |
|
||||||
| saveMetadata | boolean | false | Store the value of the form as metadata. |
|
| saveMetadata | boolean | false | Store the value of the form as metadata. |
|
||||||
| path | string | | Path of the folder where to store the metadata. |
|
| path | string | | Path of the folder where to store the metadata. |
|
||||||
| nameNode | string | true | Name to assign to the new node where the metadata are stored. |
|
| nameNode | string | true | Name to assign to the new node where the metadata are stored. |
|
||||||
| fieldValidators | FormFieldValidator[] | See [Field Validators](#field-validators) section below | Contains a list of form field validator instances. |
|
| fieldValidators | FormFieldValidator\[] | See [Field Validators](#field-validators) section below | Contains a list of form field validator instances. |
|
||||||
|
|
||||||
### Advanced properties
|
### Advanced properties
|
||||||
|
|
||||||
The following properties are for complex customisation purposes:
|
The following properties are for complex customisation purposes:
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| form | FormModel | | Underlying form model instance. |
|
| form | FormModel | | Underlying form model instance. |
|
||||||
| showDebugButton | boolean | false | Toggle debug options. |
|
| showDebugButton | boolean | false | Toggle debug options. |
|
||||||
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Return Type | Description |
|
| Name | Return Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ----------- | ----------- |
|
||||||
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
|
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
|
||||||
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
|
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||||
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
|
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
|
||||||
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
|
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
|
||||||
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||||
| error | any | Invoked at any error |
|
| error | any | Invoked at any error |
|
||||||
|
|
||||||
@@ -176,7 +174,6 @@ You can add a template that will be show if no form definition has been found
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</adf-form>
|
</adf-form>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Controlling outcome execution behaviour
|
### Controlling outcome execution behaviour
|
||||||
@@ -225,8 +222,8 @@ export class MyView {
|
|||||||
|
|
||||||
There are two additional functions that can be of a great value when controlling outcomes:
|
There are two additional functions that can be of a great value when controlling outcomes:
|
||||||
|
|
||||||
- `saveTaskForm()` - saves current form
|
- `saveTaskForm()` - saves current form
|
||||||
- `completeTaskForm(outcome?: string)` - save and complete form with a given outcome name
|
- `completeTaskForm(outcome?: string)` - save and complete form with a given outcome name
|
||||||
|
|
||||||
**Please note that if `event.preventDefault()` is not called then default outcome behaviour
|
**Please note that if `event.preventDefault()` is not called then default outcome behaviour
|
||||||
will also be executed after your custom code.**
|
will also be executed after your custom code.**
|
||||||
@@ -279,12 +276,14 @@ formService.formEvents.subscribe((event: Event) => {
|
|||||||
```
|
```
|
||||||
|
|
||||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
|
||||||
<!-- seealso start -->
|
<!-- seealso start -->
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
- [Stencils](stencils.md)
|
- [Stencils](stencils.md)
|
||||||
- [FormFieldValidator](FormFieldValidator.md)
|
- [FormFieldValidator](FormFieldValidator.md)
|
||||||
- [Extensibility](extensibility.md)
|
- [Extensibility](extensibility.md)
|
||||||
- [Form rendering service](form-rendering.service.md)
|
- [Form rendering service](form-rendering.service.md)
|
||||||
- [Form field model](form-field.model.md)
|
- [Form field model](form-field.model.md)
|
||||||
<!-- seealso end -->
|
<!-- seealso end -->
|
||||||
|
@@ -4,25 +4,22 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
## Contents
|
||||||
|
|
||||||
<!-- toc -->
|
- [Basic usage](#basic-usage)
|
||||||
|
|
||||||
- [Basic usage](#basic-usage)
|
- [Properties](#properties)
|
||||||
* [Properties](#properties)
|
- [Events](#events)
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
* [Handling events](#handling-events)
|
|
||||||
* [Change footer content](#change-footer-content)
|
|
||||||
* [Change header content](#change-header-content)
|
|
||||||
* [Extra content](#extra-content)
|
|
||||||
* [Custom logo and background](#custom-logo-and-background)
|
|
||||||
* [Customize Validation rules](#customize-validation-rules)
|
|
||||||
* [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
- [Details](#details)
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
- [Handling events](#handling-events)
|
||||||
|
- [Change footer content](#change-footer-content)
|
||||||
|
- [Change header content](#change-header-content)
|
||||||
|
- [Extra content](#extra-content)
|
||||||
|
- [Custom logo and background](#custom-logo-and-background)
|
||||||
|
- [Customize Validation rules](#customize-validation-rules)
|
||||||
|
- [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
|
||||||
|
|
||||||
## Basic usage
|
## Basic usage
|
||||||
|
|
||||||
@@ -36,23 +33,23 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default Value | Description |
|
| Name | Type | Default Value | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------------- | ----------- |
|
||||||
| providers | string | | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
|
| providers | string | | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
|
||||||
| successRoute | string | | Route to redirect to upon successful login. |
|
| successRoute | string | | Route to redirect to upon successful login. |
|
||||||
| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services call |
|
| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services call |
|
||||||
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
|
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
|
||||||
| registerLink | string | | It will change the url of the REGISTER link in the footer |
|
| registerLink | string | | It will change the url of the REGISTER link in the footer |
|
||||||
| logoImageUrl | string | \<ADF logo image> | To change the logo image with a customised image |
|
| logoImageUrl | string | \\<ADF logo image> | To change the logo image with a customised image |
|
||||||
| copyrightText | string | \<ADF copyright string> | The copyright text below the login box |
|
| copyrightText | string | \\<ADF copyright string> | The copyright text below the login box |
|
||||||
| backgroundImageUrl | string | \<ADF background image> | To change the background image with a customised image |
|
| backgroundImageUrl | string | \\<ADF background image> | To change the background image with a customised image |
|
||||||
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
|
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
|
||||||
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
|
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
|
||||||
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
|
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| success | Raised when the login is done |
|
| success | Raised when the login is done |
|
||||||
| error | Raised when the login fails |
|
| error | Raised when the login fails |
|
||||||
| executeSubmit | Raised when the form is submitted |
|
| executeSubmit | Raised when the form is submitted |
|
||||||
|
@@ -2,16 +2,6 @@
|
|||||||
|
|
||||||
Logs the user out when the decorated element is clicked.
|
Logs the user out when the decorated element is clicked.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -19,8 +9,10 @@ Logs the user out when the decorated element is clicked.
|
|||||||
```
|
```
|
||||||
|
|
||||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
|
||||||
<!-- seealso start -->
|
<!-- seealso start -->
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
- [Login component](login.component.md)
|
- [Login component](login.component.md)
|
||||||
<!-- seealso end -->
|
<!-- seealso end -->
|
||||||
|
@@ -2,30 +2,14 @@
|
|||||||
|
|
||||||
Selectively disables an HTML element or Angular component
|
Selectively disables an HTML element or Angular component
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
- [Details](#details)
|
|
||||||
* [HTML element example](#html-element-example)
|
|
||||||
* [Angular component example](#angular-component-example)
|
|
||||||
* [Implementing the NodePermissionSubject interface](#implementing-the-nodepermissionsubject-interface)
|
|
||||||
* [Defining your components as an EXTENDIBLE_COMPONENT parent component](#defining-your-components-as-an-extendible_component-parent-component)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions)|
|
| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions) |
|
||||||
| adf-nodes | MinimalNodeEntity[] | [] | Nodes to check permission for |
|
| adf-nodes | MinimalNodeEntity\[] | \[] | Nodes to check permission for |
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
@@ -34,8 +18,8 @@ by taking a collection of the `MinimalNodeEntity` instances and checking the par
|
|||||||
|
|
||||||
The decorated element will be disabled if:
|
The decorated element will be disabled if:
|
||||||
|
|
||||||
- there are no nodes in the collection
|
- there are no nodes in the collection
|
||||||
- at least one of the nodes has no expected permission
|
- at least one of the nodes has no expected permission
|
||||||
|
|
||||||
### HTML element example
|
### HTML element example
|
||||||
|
|
||||||
@@ -94,8 +78,8 @@ The directive will look up the component in the dependency injection tree, up to
|
|||||||
|
|
||||||
> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
|
> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
|
||||||
|
|
||||||
- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
|
- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
|
||||||
- because of the emphasized second sentence you have to provide your component as a viewProvider.
|
- because of the emphasized second sentence you have to provide your component as a viewProvider.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
|
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
|
||||||
|
@@ -2,22 +2,6 @@
|
|||||||
|
|
||||||
Accesses and manipulates ACS document nodes using their node IDs.
|
Accesses and manipulates ACS document nodes using their node IDs.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Methods](#methods)
|
|
||||||
- [Details](#details)
|
|
||||||
* [Getting node information](#getting-node-information)
|
|
||||||
* [Getting folder node contents](#getting-folder-node-contents)
|
|
||||||
* [Creating and updating nodes](#creating-and-updating-nodes)
|
|
||||||
* [Deleting and restoring nodes](#deleting-and-restoring-nodes)
|
|
||||||
- [See also](#see-also)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Methods
|
## Methods
|
||||||
|
|
||||||
`getNode(nodeId: string, options: any = {}): Observable<MinimalNodeEntryEntity>`<br/>
|
`getNode(nodeId: string, options: any = {}): Observable<MinimalNodeEntryEntity>`<br/>
|
||||||
@@ -169,11 +153,13 @@ pages in the Alfresco JS API for further details and options. Note that you can
|
|||||||
[Deleted Nodes Api service](deleted-nodes-api.service.md) get a list of all items currently in the trashcan.
|
[Deleted Nodes Api service](deleted-nodes-api.service.md) get a list of all items currently in the trashcan.
|
||||||
|
|
||||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
|
||||||
<!-- seealso start -->
|
<!-- seealso start -->
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
- [Document library model](document-library.model.md)
|
- [Document library model](document-library.model.md)
|
||||||
- [Deleted nodes api service](deleted-nodes-api.service.md)
|
- [Deleted nodes api service](deleted-nodes-api.service.md)
|
||||||
- [Document list component](document-list.component.md)
|
- [Document list component](document-list.component.md)
|
||||||
- [Node service](node.service.md)
|
- [Node service](node.service.md)
|
||||||
<!-- seealso end -->
|
<!-- seealso end -->
|
||||||
|
@@ -2,16 +2,6 @@
|
|||||||
|
|
||||||
Shows a notification message with optional feedback.
|
Shows a notification message with optional feedback.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The Notification Service is implemented on top of the Angular Material Design snackbar.
|
The Notification Service is implemented on top of the Angular Material Design snackbar.
|
||||||
|
@@ -4,19 +4,6 @@ Adds pagination to the component it is used with.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -43,20 +30,20 @@ Adds pagination to the component it is used with.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| pagination | Pagination | | Pagination object |
|
| pagination | Pagination | | Pagination object |
|
||||||
| supportedPageSizes | Array<number> | [ 25, 50, 100 ] | An array of page sizes |
|
| supportedPageSizes | Array<number> | [ 25, 50, 100 ] | An array of page sizes |
|
||||||
| target | PaginatedComponent | | Component that provides custom pagination support |
|
| target | PaginatedComponent | | Component that provides custom pagination support |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| change | EventEmitter<PaginationQueryParams> | Triggered for any action in pagination |
|
| change | EventEmitter<PaginationQueryParams> | Triggered for any action in pagination |
|
||||||
| nextPage | EventEmitter<Pagination> | Triggered on next page action |
|
| nextPage | EventEmitter<Pagination> | Triggered on next page action |
|
||||||
| prevPage | EventEmitter<Pagination> | Triggered on previous page action |
|
| prevPage | EventEmitter<Pagination> | Triggered on previous page action |
|
||||||
| changePageSize | EventEmitter<Pagination> | Triggered on page size change action |
|
| changePageSize | EventEmitter<Pagination> | Triggered on page size change action |
|
||||||
| changePageNumber | EventEmitter<Pagination> | Triggered on page change action |
|
| changePageNumber | EventEmitter<Pagination> | Triggered on page change action |
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
@@ -83,4 +70,4 @@ export interface PaginatedComponent {
|
|||||||
```
|
```
|
||||||
|
|
||||||
Your component needs to provide a `pagination` subject to allow Pagination component to reflect to changes.
|
Your component needs to provide a `pagination` subject to allow Pagination component to reflect to changes.
|
||||||
Every time user interacts with the Pagination, it will call the `updatePagination` method and pass the parameters.
|
Every time user interacts with the Pagination, it will call the `updatePagination` method and pass the parameters.
|
||||||
|
@@ -2,19 +2,6 @@
|
|||||||
|
|
||||||
Searches users/people.
|
Searches users/people.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -24,27 +11,26 @@ Searches users/people.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| results | Observable<User[]> | The params to show people list |
|
| results | Observable<User\[]> | The params to show people list |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| searchPeople | Raised when the search people with new keyword |
|
| searchPeople | Raised when the search people with new keyword |
|
||||||
| success | Raised when select the user and click action button |
|
| success | Raised when select the user and click action button |
|
||||||
| closeSearch | Raised when click the clse button |
|
| closeSearch | Raised when click the clse button |
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-people-search
|
<adf-people-search
|
||||||
(searchPeople)="searchUser($event)"
|
(searchPeople)="searchUser($event)"
|
||||||
(success)="involveUser($event)"
|
(success)="involveUser($event)"
|
||||||
(closeSearch)="onCloseSearch()"
|
(closeSearch)="onCloseSearch()"
|
||||||
[results]="peopleSearch$">
|
[results]="peopleSearch$">
|
||||||
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
|
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
|
||||||
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
||||||
</adf-people-search>
|
</adf-people-search>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
@@ -1,24 +1,21 @@
|
|||||||
# Task People Component
|
# People Component
|
||||||
|
|
||||||
Displays involved users to a specified task
|
Displays users involved with a specified task
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
## Contents
|
||||||
|
|
||||||
<!-- toc -->
|
- [Basic Usage](#basic-usage)
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
- [Properties](#properties)
|
||||||
* [Properties](#properties)
|
- [Events](#events)
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
* [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
|
|
||||||
* [Involve People single click and close search](#involve-people-single-click-and-close-search)
|
|
||||||
* [Involve People single click without close search](#involve-people-single-click-without-close-search)
|
|
||||||
* [Involve People double click and close search](#involve-people-double-click-and-close-search)
|
|
||||||
* [Involve People double double without close search](#involve-people-double-double-without-close-search)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
- [Details](#details)
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
- [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
|
||||||
|
- [Involve People single click and close search](#involve-people-single-click-and-close-search)
|
||||||
|
- [Involve People single click without close search](#involve-people-single-click-without-close-search)
|
||||||
|
- [Involve People double click and close search](#involve-people-double-click-and-close-search)
|
||||||
|
- [Involve People double double without close search](#involve-people-double-double-without-close-search)
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
@@ -35,8 +32,8 @@ Displays involved users to a specified task
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| people | User[] | The array of User object to display |
|
| people | User\[] | The array of User object to display |
|
||||||
| taskId | string | The numeric ID of the task |
|
| taskId | string | The numeric ID of the task |
|
||||||
| readOnly | boolean | The boolean flag |
|
| readOnly | boolean | The boolean flag |
|
||||||
|
|
||||||
@@ -49,8 +46,9 @@ No Events
|
|||||||
### How to customize the people component behavior
|
### How to customize the people component behavior
|
||||||
|
|
||||||
The people component provide two methods to customize the behavior:
|
The people component provide two methods to customize the behavior:
|
||||||
- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
|
|
||||||
- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
|
- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
|
||||||
|
- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
|
||||||
|
|
||||||
In this way will be easy customize the people component to involve the user with the single or double click event:
|
In this way will be easy customize the people component to involve the user with the single or double click event:
|
||||||
|
|
||||||
|
@@ -2,17 +2,6 @@
|
|||||||
|
|
||||||
Displays comments associated with a particular process instance and allows the user to add new comments
|
Displays comments associated with a particular process instance and allows the user to add new comments
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -24,5 +13,5 @@ Displays comments associated with a particular process instance and allows the u
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| processInstanceId | string | (**required**): The numeric ID of the process instance to display comments for |
|
| processInstanceId | string | (**required**): The numeric ID of the process instance to display comments for |
|
||||||
|
@@ -2,18 +2,6 @@
|
|||||||
|
|
||||||
Displays detailed information on a specified process instance
|
Displays detailed information on a specified process instance
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -25,13 +13,13 @@ Displays detailed information on a specified process instance
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| processInstanceId | string | (required): The numeric ID of the process instance to display |
|
| processInstanceId | string | (required): The numeric ID of the process instance to display |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| processCancelledEmitter | Raised when the current process is cancelled by the user from within the component |
|
| processCancelledEmitter | Raised when the current process is cancelled by the user from within the component |
|
||||||
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
|
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
|
||||||
| showProcessDiagram | Raised when the show diagram button is clicked |
|
| showProcessDiagram | Raised when the show diagram button is clicked |
|
||||||
|
@@ -4,18 +4,6 @@ Sub-component of the process details component, which renders some general infor
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
+ [Events](#events)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -26,10 +14,10 @@ Sub-component of the process details component, which renders some general infor
|
|||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type| Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
|
| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
|
||||||
|
|
||||||
#### Events
|
#### Events
|
||||||
|
|
||||||
This component does not define any events.
|
This component does not define any events.
|
||||||
|
@@ -2,18 +2,6 @@
|
|||||||
|
|
||||||
Lists both the active and completed tasks associated with a particular process instance
|
Lists both the active and completed tasks associated with a particular process instance
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -26,12 +14,12 @@ Lists both the active and completed tasks associated with a particular process i
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| --- | --- | --- |
|
| ---- | ---- | ----------- |
|
||||||
| processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
|
| processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
|
||||||
| showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
| showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
|
| taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
|
||||||
|
@@ -1,19 +1,6 @@
|
|||||||
# Activiti Process Instance List
|
# Process Instance List
|
||||||
|
|
||||||
This component renders a list containing all the process instances matched by the parameters specified.
|
Renders a list containing all the process instances matched by the parameters specified.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
@@ -58,28 +45,26 @@ define custom schema in the app.config.json as shown below json format.
|
|||||||
[presetColumn]="'customSchema'">
|
[presetColumn]="'customSchema'">
|
||||||
</adf-process-instance-list>
|
</adf-process-instance-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description | | |
|
||||||
| --- | --- |
|
| ---- | ----------- | --- | --- |
|
||||||
| appId | The id of the app. |
|
| appId | The id of the app. | | |
|
||||||
| processDefinitionKey | The processDefinitionKey of the process. |
|
| processDefinitionKey | The processDefinitionKey of the process. | | |
|
||||||
| presetColumn | string || The presetColumn of the custom schema to fetch. |
|
| presetColumn | string | | The presetColumn of the custom schema to fetch. |
|
||||||
| state | Define state of the processes. Possible values are `running`, `completed` and `all` |
|
| state | Define state of the processes. Possible values are `running`, `completed` and `all` | | |
|
||||||
| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
|
| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` | | |
|
||||||
| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) |
|
| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) | | |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| rowClick | Emitted when a row in the process list is clicked |
|
| rowClick | Emitted when a row in the process list is clicked |
|
||||||
| success | Emitted when the list of process instances has been loaded successfully from the server |
|
| success | Emitted when the list of process instances has been loaded successfully from the server |
|
||||||
| error | Emitted when an error is encountered loading the list of process instances from the server |
|
| error | Emitted when an error is encountered loading the list of process instances from the server |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
Example value for the schemaColumn property (see [Properties](#properties) section above):
|
Example value for the schemaColumn property (see [Properties](#properties) section above):
|
||||||
|
@@ -4,20 +4,6 @@ Displays a input text which shows find-as-you-type suggestions.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
* [Events](#events)
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic usage
|
## Basic usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -31,20 +17,20 @@ Displays a input text which shows find-as-you-type suggestions.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| searchTerm | string | | Search term to pre-populate the field with |
|
| searchTerm | string | | Search term to pre-populate the field with |
|
||||||
| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
|
| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
|
||||||
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
|
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
|
||||||
| highlight | boolean | false | Use the true value if you want to see the searched word highlighted. |
|
| highlight | boolean | false | Use the true value if you want to see the searched word highlighted. |
|
||||||
| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
|
| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
|
||||||
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
|
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
|
||||||
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
|
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
|
||||||
| customQueryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
|
| customQueryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| ---- | ----------- |
|
||||||
| searchChange | 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 the term is truncated to an empty string. |
|
| searchChange | 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 the term is truncated to an empty string. |
|
||||||
| submit | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
|
| submit | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
|
||||||
| optionClicked | Emitted when a file item from the list of find-as-you-type results is selected |
|
| optionClicked | Emitted when a file item from the list of find-as-you-type results is selected |
|
||||||
|
@@ -4,22 +4,6 @@ Simple container for headers, titles, actions and breadcrumbs.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
* [Properties](#properties)
|
|
||||||
- [Details](#details)
|
|
||||||
* [Custom title](#custom-title)
|
|
||||||
* [Divider](#divider)
|
|
||||||
* [Dropdown menu](#dropdown-menu)
|
|
||||||
* [Custom color](#custom-color)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -36,9 +20,9 @@ Simple container for headers, titles, actions and breadcrumbs.
|
|||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| --- | --- | --- | --- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| title | string | | Toolbar title |
|
| title | string | | Toolbar title |
|
||||||
| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
|
| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
@@ -120,4 +104,4 @@ For example:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
@@ -2,22 +2,6 @@
|
|||||||
|
|
||||||
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
|
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
|
||||||
|
|
||||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
|
|
||||||
- [Basic usage](#basic-usage)
|
|
||||||
- [Details](#details)
|
|
||||||
* [Modes](#modes)
|
|
||||||
+ [Click mode](#click-mode)
|
|
||||||
+ [Drop mode](#drop-mode)
|
|
||||||
* [Events](#events)
|
|
||||||
* [Styling](#styling)
|
|
||||||
|
|
||||||
<!-- tocstop -->
|
|
||||||
|
|
||||||
<!-- markdown-toc end -->
|
|
||||||
|
|
||||||
## Basic usage
|
## Basic usage
|
||||||
|
|
||||||
The directive itself does not do any file management process,
|
The directive itself does not do any file management process,
|
||||||
@@ -55,8 +39,8 @@ Used by attaching to an element or component.
|
|||||||
|
|
||||||
Directive supports several modes:
|
Directive supports several modes:
|
||||||
|
|
||||||
- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
|
- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
|
||||||
- **click** mode, where decorated element invokes File Dialog to select files or folders.
|
- **click** mode, where decorated element invokes File Dialog to select files or folders.
|
||||||
|
|
||||||
It is also possible combining modes together.
|
It is also possible combining modes together.
|
||||||
|
|
||||||
@@ -70,9 +54,9 @@ It is also possible combining modes together.
|
|||||||
|
|
||||||
For the click mode you can provide additional attributes for the File Dialog:
|
For the click mode you can provide additional attributes for the File Dialog:
|
||||||
|
|
||||||
- **directory**, enables directory selection
|
- **directory**, enables directory selection
|
||||||
- **multiple**, enables multiple file/folder selection
|
- **multiple**, enables multiple file/folder selection
|
||||||
- **accept**, filters the content accepted
|
- **accept**, filters the content accepted
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div style="width: 50px; height: 50px; background-color: brown"
|
<div style="width: 50px; height: 50px; background-color: brown"
|
||||||
@@ -174,4 +158,4 @@ for example you may want drawing a dashed border around the table row on drag:
|
|||||||
.adf-upload__dragging > td:last-child {
|
.adf-upload__dragging > td:last-child {
|
||||||
border-right: 1px dashed rgb(68,138,255);
|
border-right: 1px dashed rgb(68,138,255);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
Reference in New Issue
Block a user