diff --git a/docs/content-services/folder-create.directive.md b/docs/content-services/folder-create.directive.md index c278fe4ea8..3f90b211ba 100644 --- a/docs/content-services/folder-create.directive.md +++ b/docs/content-services/folder-create.directive.md @@ -1,10 +1,12 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Folder Create directive -Allows folders to be created. +Creates folders. ## Basic Usage @@ -21,19 +23,23 @@ Allows folders to be created. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| parentNodeId | `string` | `DEFAULT_FOLDER_PARENT_ID` | Parent folder where the new folder will be located after creation. | +| -- | -- | -- | -- | +| adf-create-folder | `string` | DEFAULT_FOLDER_PARENT_ID | Parent folder where the new folder will be located after creation. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| error | `EventEmitter` | Emitted when an error occurs. | +| -- | -- | -- | +| error | `EventEmitter` | Emitted when an error occurs (for example a folder with same name already exists) | ## Details -'FolderCreateDirective' directive needs the id of the parent folder where we want the new folder node to be created. If no value is provided, the '-my-' alias is used. -It opens the FolderDialogComponent to receive data for the new folder. If data is valid, on dialog close, it emits folderCreate event. +Pass this directive the id of the parent folder where you want the new folder node to be created. +If no value is provided, the '-my-' alias is used. +This will open a Folder Dialog component to receive data for the new folder. If the data is valid +then the dialog will emit a `folderCreate` event when it closes. diff --git a/docs/content-services/folder-edit.directive.md b/docs/content-services/folder-edit.directive.md index 2177c4013a..05c67adba9 100644 --- a/docs/content-services/folder-edit.directive.md +++ b/docs/content-services/folder-edit.directive.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Folder Edit directive Allows folders to be edited. @@ -21,19 +23,21 @@ Allows folders to be edited. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| folder | `MinimalNodeEntryEntity` | | Folder node to edit. | +| -- | -- | -- | -- | +| adf-edit-folder | `MinimalNodeEntryEntity` | | Folder node to edit. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| error | `EventEmitter` | Emitted when an error occurs. | +| -- | -- | -- | +| error | `EventEmitter` | Emitted when an error occurs (for example a folder with same name already exists) | ## Details -'FolderEditDirective' directive needs a selection folder entry of #documentList to open the folder dialog component to edit the name and description properties of that selected folder. -If data is valid, on dialog close, it emits folderEdit event. +Pass this directive a folder to edit its name and description using a Folder Dialog component. +If the data is valid then the dialog emits a `folderEdit` event when it closes. diff --git a/docs/content-services/node-download.directive.md b/docs/content-services/node-download.directive.md index 35d56e735a..79c81e2589 100644 --- a/docs/content-services/node-download.directive.md +++ b/docs/content-services/node-download.directive.md @@ -1,10 +1,12 @@ --- Added: v2.2.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Download directive -Allows folders and/or files to be downloaded. Multiple nodes are packed as a '.ZIP' archive. +Allows folders and/or files to be downloaded, with multiple nodes packed as a '.ZIP' archive. ## Basic Usage @@ -21,8 +23,10 @@ Allows folders and/or files to be downloaded. Multiple nodes are packed as a '.Z ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| nodes | `MinimalNodeEntity[]` | | Nodes to download. | +| -- | -- | -- | -- | +| adfNodeDownload | `MinimalNodeEntity[]` | | Nodes to download. | diff --git a/docs/content-services/node-lock.directive.md b/docs/content-services/node-lock.directive.md index 896473986f..0078a2aee9 100644 --- a/docs/content-services/node-lock.directive.md +++ b/docs/content-services/node-lock.directive.md @@ -1,11 +1,12 @@ --- Added: v2.2.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Lock directive -Call [`ContentNodeDialogService.openLockNodeDialog(nodeEntry)`](./content-node-dialog.service.md) method on click event, -and disable target button if provided node is not a file or user don't have permissions. +Locks a node. ## Basic Usage @@ -19,4 +20,11 @@ and disable target button if provided node is not a file or user don't have perm | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | -| node | `MinimalNodeEntryEntity` | | Node to lock. | +| adf-node-lock | `MinimalNodeEntryEntity` | | Node to lock. | + +## Details + +This calls the `openLockNodeDialog` method from the +[Content Node Dialog service](content-node-dialog.service.md) method when clicked, +and disables the target button if the provided node is not a file or the user doesn't +have permissions. \ No newline at end of file diff --git a/docs/content-services/node-share.directive.md b/docs/content-services/node-share.directive.md index b18f25bcc6..5e7e5fbff1 100644 --- a/docs/content-services/node-share.directive.md +++ b/docs/content-services/node-share.directive.md @@ -1,28 +1,15 @@ --- Added: v2.3.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Public file Share Directive -Create and manage public shared links for files +Creates and manages public shared links for files. ![adf-share](../docassets/images/share-directive.png) -This dialog will generate a link that will be formed as "baseShareUrl + sharedId". -For example if you set the input parameter [baseShareUrl]="http://localhos:8080/myrouteForShareFile/", -the directive will ask to the Content service to generate a sharedId for the file. This will end up with a url link like : - -http://localhos:8080/myrouteForShareFile/NEW_GENERATED_SHAREID - -After you will need to implement in your app a logic that throught the router get the NEW_GENERATED_SHAREID and pass it to the ***adf-viewer*** - -```html - - -``` - ## Basic Usage ```html @@ -47,3 +34,28 @@ After you will need to implement in your app a logic that throught the router ge | baseShareUrl | `string` | | baseShareUrl to add as prefix to the generated link | +## Details + +This dialog will generate a link with the form "baseShareUrl + sharedId". +For example, if you set the input parameter as follows: + +``` +[baseShareUrl]="http://localhost:8080/myrouteForShareFile/" +``` + +...then the directive will ask the [Content service](../core/content.service.md) to generate +a `sharedId` for the file. This will create a URL like the following: + +``` +http://localhost:8080/myrouteForShareFile/NEW_GENERATED_SHAREID +``` + +To use this,ou will need to implement some code that gets the `NEW_GENERATED_SHAREID` with the router +and passes it to a [Viewer component](../core/viewer.component.md): + +```html + + +``` \ No newline at end of file diff --git a/docs/content-services/search.component.md b/docs/content-services/search.component.md index f541f374eb..1e88be542b 100644 --- a/docs/content-services/search.component.md +++ b/docs/content-services/search.component.md @@ -21,17 +21,18 @@ Searches items for supplied search terms. ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| displayWith | `function | null` | null | Function that maps an option's value to its display value in the trigger. | +| -- | -- | -- | -- | +| displayWith | `function | null` | null | Function that maps an option's value to its display value in the trigger. | | maxResults | `number` | 20 | Maximum number of results to show in the search. | | queryBody | `QueryBody` | | **Deprecated:** in 2.1.0 | | searchTerm | `string` | "" | Search term to use when executing the search. Updating this value will run a new search and update the results. | | skipResults | `number` | 0 | Number of results to skip from the results pagination. | +| class | `` | | CSS class for display. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | +| -- | -- | -- | | error | `EventEmitter` | Emitted when an error occurs. | | resultLoaded | `EventEmitter` | Emitted when search results have fully loaded. | diff --git a/docs/core/context-menu.directive.md b/docs/core/context-menu.directive.md index 7e37e874ab..68d4fce92e 100644 --- a/docs/core/context-menu.directive.md +++ b/docs/core/context-menu.directive.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Context Menu directive Adds a context menu to a component. @@ -40,11 +42,14 @@ export class MyComponent implements OnInit { } ``` +## Class members + ### Properties -| Name | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| showIcons | boolean | false | Render defined icons | +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +| context-menu-enabled | `boolean` | false | | +| context-menu | `any[]` | | | ## Details diff --git a/docs/core/data-column.component.md b/docs/core/data-column.component.md index 75429263d0..c7d6f3690e 100644 --- a/docs/core/data-column.component.md +++ b/docs/core/data-column.component.md @@ -2,7 +2,8 @@ Added: v2.0.0 Status: Active --- -# DataColumn Component + +# Data Column Component Defines column properties for DataTable, Tasklist, Document List and other components. @@ -10,6 +11,8 @@ Defines column properties for DataTable, Tasklist, Document List and other compo - [Basic Usage](#basic-usage) +- [Class members](#class-members) + - [Properties](#properties) - [Details](#details) @@ -35,18 +38,20 @@ Defines column properties for DataTable, Tasklist, Document List and other compo ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. | -| type | `string` | `'text'` | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. | -| format | `string` | | Value format (if supported by the parent component), for example format of the date. | -| sortable | `boolean` | `true` | Toggles ability to sort by this column, for example by clicking the column header. | -| title | `string` | `''` | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. | -| formatTooltip | `Function` | | Custom tooltip formatter function. | -| srTitle | `string` | | Title to be used for screen readers. | -| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). | +| -- | -- | -- | -- | +| class | `string` | | Additional CSS class to be applied to column (header and cells). | +| 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. | +| sr-title | `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' and 'location'. | ## Details diff --git a/docs/core/file-draggable.directive.md b/docs/core/file-draggable.directive.md index 41cf463cf2..5f69412fb0 100644 --- a/docs/core/file-draggable.directive.md +++ b/docs/core/file-draggable.directive.md @@ -1,10 +1,12 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # File Draggable directive -Provide drag-and-drop features for an element such as a `div`. +Provides drag-and-drop features for an element such as a `div`. ## Basic Usage @@ -32,19 +34,21 @@ Some sample CSS to show the drag and drop area: } ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| enabled | `boolean` | `true` | Enables/disables drag-and-drop functionality. | +| -- | -- | -- | -- | +| file-draggable | `boolean` | true | Enables/disables drag-and-drop functionality. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| filesDropped | `EventEmitter` | Emitted when one or more files are dragged and dropped onto the draggable element. | -| filesEntityDropped | `EventEmitter` | Emitted when one or more files are dragged and dropped onto the draggable element. | -| folderEntityDropped | `EventEmitter` | Emitted when a directory is dragged and dropped onto the draggable element. | +| -- | -- | -- | +| filesDropped | `EventEmitter` | Emitted when one or more files are dragged and dropped onto the draggable element. | +| filesEntityDropped | `EventEmitter` | Emitted when one or more files are dragged and dropped onto the draggable element. | +| folderEntityDropped | `EventEmitter` | Emitted when a directory is dragged and dropped onto the draggable element. | ## Details diff --git a/docs/core/highlight.directive.md b/docs/core/highlight.directive.md index c45ef77cad..546e221f48 100644 --- a/docs/core/highlight.directive.md +++ b/docs/core/highlight.directive.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Highlight directive Adds highlighting to selected sections of an HTML element's content. @@ -18,13 +20,15 @@ Adds highlighting to selected sections of an HTML element's content. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| selector | `string` | `''` | Class selector for highlightable elements. | -| search | `string` | `''` | Text to highlight. | -| classToApply | `string` | `'adf-highlight'` | CSS class used to apply highlighting. | +| -- | -- | -- | -- | +| adf-highlight-class | `string` | "adf-highlight" | CSS class used to apply highlighting. | +| adf-highlight | `string` | "" | Text to highlight. | +| adf-highlight-selector | `string` | "" | Class selector for highlightable elements. | ## Details diff --git a/docs/core/infinite-pagination.component.md b/docs/core/infinite-pagination.component.md index ed34c700de..107fcbb2a6 100644 --- a/docs/core/infinite-pagination.component.md +++ b/docs/core/infinite-pagination.component.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-06 --- + # Infinite Pagination component Adds "infinite" pagination to the component it is used with. @@ -18,24 +20,27 @@ Adds "infinite" pagination to the component it is used with. ``` -## Integrating with Document List +### Integrating with Document List ```html + [target]="documentList" + [loading="documentList.infiniteLoading"> ``` +## Class members + ### Properties | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | -| pagination | `Pagination` | | Pagination object. | -| target | `PaginatedComponent` | | Component that provides custom pagination support. | -| pageSize | `number` | `InfinitePaginationComponent.DEFAULT_PAGE_SIZE` | Number of items that are added with each "load more" event. | -| loading | `boolean` | `false` | Is a new page loading? | +| loading | `boolean` | false | Is a new page loading? | +| pageSize | `number` | InfinitePaginationComponent.DEFAULT_PAGE_SIZE | Number of items that are added with each "load more" event. | +| pagination | `Pagination` | | Pagination object. | +| target | `PaginatedComponent` | | Component that provides custom pagination support. | ### Events diff --git a/docs/core/info-drawer.component.md b/docs/core/info-drawer.component.md index 359d96a46f..effb2c7e66 100644 --- a/docs/core/info-drawer.component.md +++ b/docs/core/info-drawer.component.md @@ -1,8 +1,10 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- -# InfoDrawer component + +# Info Drawer component Displays a sidebar-style information panel with tabs. @@ -28,17 +30,19 @@ Displays a sidebar-style information panel with tabs. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| title | `string` | `null` | The title of the info drawer. | -| selectedIndex | `number` | `0` | The selected index tab. | +| -- | -- | -- | -- | +| selectedIndex | `number` | 0 | The selected index tab. | +| title | `string | null` | null | The title of the info drawer. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | +| -- | -- | -- | | currentTab | `EventEmitter` | Emitted when the currently active tab changes. | ## Details diff --git a/docs/core/node-delete.directive.md b/docs/core/node-delete.directive.md index 5ad39a4355..ac7c50fad7 100644 --- a/docs/core/node-delete.directive.md +++ b/docs/core/node-delete.directive.md @@ -1,7 +1,7 @@ --- Added: v2.0.0 Status: Active -Last reviewed: 2018-03-21 +Last reviewed: 2018-04-10 --- # Node Delete directive @@ -23,18 +23,20 @@ Deletes multiple files and folders. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| selection | `MinimalNodeEntity[] | DeletedNodeEntity[]` | | Array of nodes to delete. | -| permanent | `boolean` | `false` | If true then the nodes are deleted immediately rather than being put in the trash. | +| -- | -- | -- | -- | +| permanent | `boolean` | false | If true then the nodes are deleted immediately rather than being put in the trash | +| adf-delete | `MinimalNodeEntity[] | DeletedNodeEntity[]` | | Array of nodes to delete. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| delete | `EventEmitter` | Emitted when the nodes have been deleted. | +| -- | -- | -- | +| delete | `EventEmitter` | Emitted when the nodes have been deleted. | ## Details diff --git a/docs/core/node-favorite.directive.md b/docs/core/node-favorite.directive.md index e4c991dc11..b9953ade5b 100644 --- a/docs/core/node-favorite.directive.md +++ b/docs/core/node-favorite.directive.md @@ -1,10 +1,12 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Favorite directive -Selectively toggles nodes as favorite +Selectively toggles nodes as favorites. ## Basic Usage @@ -34,22 +36,24 @@ export class MyComponent { } ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| selection | `MinimalNodeEntity[]` | `[]` | Array of nodes to toggle as favorites. | +| -- | -- | -- | -- | +| adf-node-favorite | `MinimalNodeEntity[]` | \[] | Array of nodes to toggle as favorites. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| toggle | `EventEmitter` | Emitted when the favorite setting is complete. | +| -- | -- | -- | +| toggle | `EventEmitter` | Emitted when the favorite setting is complete. | ## Details -The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference, -which provides a method to help further style the element. +You can bind the directive instance to a template variable through the **adfFavorite** reference, +which also lets you add extra styling to the element: @@ -67,11 +71,11 @@ which provides a method to help further style the element. -The directive performs as follows: +The directive behaves as follows: -- if there are no favorite nodes in the selection, then all are marked as favorites -- if there is at least one favorite node in the selection, then only those who are not - are being marked -- if all nodes in the selection are favorites, then they are removed from favorites +- If there are no favorite nodes in the selection, then all are marked as favorites +- If there are one or more favorite node in the selection, then only those that are not + favorites are marked +- If all nodes in the selection are favorites, then they all have their favorite status removed -See **Demo Shell** +See the **Demo Shell** for examples of usage. diff --git a/docs/core/node-permission.directive.md b/docs/core/node-permission.directive.md index deb10f2ccb..7b45b224f0 100644 --- a/docs/core/node-permission.directive.md +++ b/docs/core/node-permission.directive.md @@ -1,36 +1,15 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Permission directive Selectively disables an HTML element or Angular component ## Basic Usage -### Properties - -| Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| permission | `string` | `null` | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). | -| nodes | `MinimalNodeEntity[]` | `[]` | Nodes to check permission for. | - -## Details - -The `NodePermissionDirective` allows you to disable an HTML element or Angular component -by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission. - -The decorated element will be disabled if: - -- there are no nodes in the collection -- at least one of the nodes has no expected permission - -### HTML element example - -The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button. - -For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection. - ```html + + + + ... + +``` + +The button will be disabled by default and will change state when the user selects or deselects +one or more documents that they have permission to delete. ### Angular component example -You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element. +You can add the directive to any Angular component that implements the `NodePermissionSubject` +interface (the [Upload Drag Area component](../content-services/upload-drag-area.component.md), +for example). You can also use it in much the same way as you would with an HTML element: ```html ``` -When designing a component you want to work this directive with, you have two important things to care about. +To enable your own component to work with this directive, you need to implement the +`NodePermissionSubject` interface and also define it as an EXTENDIBLE_COMPONENT parent component, +as described in the following sections. ### Implementing the NodePermissionSubject interface -The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive. +The component must implement the `NodePermissionSubject` interface which means it must have a +boolean `disabled` property. This is the property that will be set by the directive: ```js import { NodePermissionSubject } from '@alfresco/adf-core'; @@ -76,14 +101,13 @@ export class UploadDragAreaComponent implements NodePermissionSubject { } ``` -### Defining your components as an EXTENDIBLE_COMPONENT parent component +### Defining your component as an EXTENDIBLE_COMPONENT parent component -The directive will look up the component in the dependency injection tree, up to the @Host() component. - -> "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 the emphasized second sentence you have to provide your component as a viewProvider. +The directive will look up the component in the dependency injection tree, +up to the `@Host()` component. The host component is typically the component that requests +the dependency. However, when this component is projected into a parent component, the +parent becomes the host. This means you must provide your component with forward referencing +as the `EXTENDIBLE_COMPONENT` and also provide your component as a `viewProvider`: ```js import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core'; @@ -97,4 +121,5 @@ import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core'; export class UploadDragAreaComponent implements NodePermissionSubject { ... } ``` -**Notice the usage of viewProviders (instead of providers)! This part is very important, especially if you want to use this directive on a transcluded component!** +**Note:** the usage of **viewProviders** (instead of **providers**) is very important, especially +if you want to use this directive on a transcluded component. diff --git a/docs/core/node-restore.directive.md b/docs/core/node-restore.directive.md index e6bc898739..f07fe08c1a 100644 --- a/docs/core/node-restore.directive.md +++ b/docs/core/node-restore.directive.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Node Restore directive Restores deleted nodes to their original location. @@ -24,25 +26,29 @@ Restores deleted nodes to their original location. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| selection | `DeletedNodeEntry[]` | | Array of deleted nodes to restore. | -| location | `string` | `''` | Path to restored node. | +| -- | -- | -- | -- | +| location | `string` | "" | Path to restored node. | +| adf-restore | `DeletedNodeEntry[]` | | Array of deleted nodes to restore. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| restore | `EventEmitter` | Emitted when restoration is complete. | +| -- | -- | -- | +| restore | `EventEmitter` | Emitted when restoration is complete. | ## Details -'NodeRestoreDirective' directive takes a selection of `DeletedNodeEntry[]` and restores them in their original location. -If the original location doesn't exist anymore, then they remain in the trash list. +The directive takes a selection of `DeletedNodeEntry` instances and restores them to +their original locations. If the original location doesn't exist anymore then they remain +in the trash list. -For single node restore, there is action to jump to the location where the node has been restored and for this `location` is used to specify the route path where the list of nodes are rendered +When you restore a single node, you can use the `location` property to show where the node has +been restored. The property specifies the route path where the list of nodes are rendered. ## See Also diff --git a/docs/core/text-mask.component.md b/docs/core/text-mask.component.md index 32dfb6f9b8..a26bcf816b 100644 --- a/docs/core/text-mask.component.md +++ b/docs/core/text-mask.component.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Text Mask directive Implements text field input masks. diff --git a/docs/core/upload.directive.md b/docs/core/upload.directive.md index 44df6684ad..d2719a6bc3 100644 --- a/docs/core/upload.directive.md +++ b/docs/core/upload.directive.md @@ -1,15 +1,47 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-04-10 --- + # Upload Directive -Allows your components or common HTML elements reacting on File drag and drop in order to upload content. +Uploads content in response to file drag and drop. ## Basic usage -The directive itself does not do any file management process, -but collects information on dropped files and raises corresponding events instead. +```html + +``` + +## Class members + +### Properties + +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +| accept | `string` | | (Click mode only) MIME type filter for files to accept. | +| adf-upload-data | `any` | | Data to upload. | +| directory | `boolean` | | (Click mode only) Toggles uploading of directories. | +| adf-upload | `boolean` | true | Enables/disables uploading. | +| mode | `string[]` | ['drop'] | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. | +| multiple | `boolean` | | Toggles multiple file uploads. | + +## Details + +Add the directive to a component or HTML element to enable it to upload files. +You can decorate any element including buttons: + +```html + +``` + +The directive itself does not do any file management, but it collects information about +dropped files and emits events in response. ```html
``` -It is possible controlling when upload behaviour is enabled/disabled by binding directive to a `boolean` value or expression: +You can enable or disable upload functionality by binding the directive to a boolean +value or expression: ```html
...
@@ -27,37 +60,14 @@ It is possible controlling when upload behaviour is enabled/disabled by binding
...
``` -You can decorate any element including buttons, for example: - -```html - -``` - -### Properties - -| Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| enabled | `boolean` | `true` | Enables/disables uploading. | -| data | `any` | | Data to upload. | -| mode | `string[]` | `['drop']` | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. | -| multiple | `boolean` | | Toggles multiple file uploads. | -| accept | `string` | | (Click mode only) MIME type filter for files to accept. | -| directory | `boolean` | | (Click mode only) Toggles uploading of directories. | - -## Details - -Used by attaching to an element or component. - ### Modes -Directive supports several modes: +The Upload directive supports two modes: -- **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. +- **drop** mode, where the decorated element acts like a drop zone for files (enabled by default) +- **click** mode, where the decorated element invokes a file dialog to select files or folders. -It is also possible combining modes together. +You can also use both modes together: ```html
...
@@ -67,7 +77,7 @@ It is also possible combining modes together. #### Click mode -For the click mode you can provide additional attributes for the File Dialog: +In click mode you can provide extra attributes for the file dialog: - **directory**, enables directory selection - **multiple**, enables multiple file/folder selection @@ -89,12 +99,14 @@ For the click mode you can provide additional attributes for the File Dialog: #### Drop mode -For the moment upload directive supports only Files (single or multiple). -Support for Folders and `accept` filters is subject to implement. +Currently, the upload directive supports only file drops (single or multiple). +Support for folders and `accept` filters will probably be implemented in a +future version. ### Events -Once a single or multiple files are dropped on the decorated element the `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) is raised. +The `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) +is emitted when single or multiple files are dropped on the decorated element. The DOM event is configured to have `bubbling` enabled, so any component up the component tree can handle, process or prevent it: ```html @@ -111,9 +123,12 @@ onUploadFiles(e: CustomEvent) { } ``` -Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element. +Note that the event will be emitted only if valid +[files](https://developer.mozilla.org/en-US/docs/Web/API/File) +are dropped onto the decorated element. -The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code: +The `upload-files` event is cancellable, so you can stop propagation of the drop event upwards +when it has been handled by your code: ```ts onUploadFiles(e: CustomEvent) { @@ -124,10 +139,10 @@ onUploadFiles(e: CustomEvent) { } ``` -It is also possible attaching arbitrary data to each event in order to access it from within external event handlers. -A typical scenario is data tables where you may want to handle also the data row and/or underlying data to be accessible upon files drop. +You can also attach arbitrary data to each event which you can then access from external event handlers. A typical scenario is with data tables where you may want to make use of the data row +or make underlying data accessible when files are dropped. -You may be using `adf-upload-data` to bind custom values or objects for every event raised: +You can use `adf-upload-data` to bind custom values or objects for every event raised: ```html
@@ -136,7 +151,8 @@ You may be using `adf-upload-data` to bind custom values or objects for every ev
``` -As part of the `details` property of the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) you can get access to the following: +You can access the following items of the `details` property from the +[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent): ```ts detail: { @@ -148,9 +164,10 @@ detail: { ### Styling -The decorated element gets `adf-upload__dragging` CSS class name in the class list every time files are dragged over it. -This allows changing look and feel of your components in case additional visual indication is required, -for example you may want drawing a dashed border around the table row on drag: +The decorated element is styled with the `adf-upload__dragging` CSS class whenever a file is dragged +over it. This lets you change the look and feel of your components when you need different visual +indication. For example, you could draw a dashed border around a table row when an item is dragged +onto it: ```html diff --git a/docs/process-services/process-audit.directive.md b/docs/process-services/process-audit.directive.md index e110864c3d..79878b7678 100644 --- a/docs/process-services/process-audit.directive.md +++ b/docs/process-services/process-audit.directive.md @@ -2,9 +2,10 @@ Added: v2.0.0 Status: Active --- + # Process Audit Directive -Fetches the Process Audit information in the pdf or json format. +Fetches the Process Audit information the PDF or JSON format. ![adf-process-audit-directive](../docassets/images/adf-process-audit-directive.png) @@ -21,18 +22,20 @@ Fetches the Process Audit information in the pdf or json format. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| processId | `string` | | ID of the process. | -| fileName | `string` | `'Audit'` | Name of the file to download (for PDF downloads). | -| format | `string` | `'pdf'` | Format for the audit information (can be "pdf" or "json"). | -| download | `boolean` | `true` | Enables downloading of the audit file on clicking. | +| -- | -- | -- | -- | +| download | `boolean` | true | Enables downloading of the audit file on clicking. | +| fileName | `string` | "Audit" | Name of the file to download (for PDF downloads). | +| format | `string` | "pdf" | Format for the audit information (can be "pdf" or "json"). | +| process-id | `string` | | ID of the process. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| clicked | `EventEmitter` | Emitted when the decorated element is clicked. | -| error | `EventEmitter` | Emitted when an error occurs. | +| -- | -- | -- | +| clicked | `EventEmitter` | Emitted when the decorated element is clicked. | +| error | `EventEmitter` | Emitted when an error occurs. | diff --git a/docs/process-services/task-audit.directive.md b/docs/process-services/task-audit.directive.md index ff322635f7..d7e2bcc7a7 100644 --- a/docs/process-services/task-audit.directive.md +++ b/docs/process-services/task-audit.directive.md @@ -2,9 +2,10 @@ Added: v2.0.0 Status: Active --- + # Task Audit Directive -Fetches the Task Audit information in the pdf or json format. +Fetches the Task Audit information in PDF or JSON format. ![adf-task-audit-directive](../docassets/images/adf-task-audit-directive.png) @@ -20,18 +21,20 @@ Fetches the Task Audit information in the pdf or json format. ``` +## Class members + ### Properties | Name | Type | Default value | Description | -| ---- | ---- | ------------- | ----------- | -| taskId | `string` | | (**required**) The id of the task. | -| fileName | `string` | `'Audit'` | Name of the downloaded file (for PDF downloads). | -| format | `string` | `'pdf'` | Format of the audit information. Can be "pdf" or "json". | -| download | `boolean` | `true` | Enables downloading of the audit when the decorated element is clicked. | +| -- | -- | -- | -- | +| download | `boolean` | true | Enables downloading of the audit when the decorated element is clicked. | +| fileName | `string` | "Audit" | Name of the downloaded file (for PDF downloads). | +| format | `string` | "pdf" | Format of the audit information. Can be "pdf" or "json". | +| task-id | `string` | | (**required**) The id of the task. | ### Events | Name | Type | Description | -| ---- | ---- | ----------- | -| clicked | `EventEmitter` | Emitted when the decorated element is clicked. | -| error | `EventEmitter` | Emitted when an error occurs. | +| -- | -- | -- | +| clicked | `EventEmitter` | Emitted when the decorated element is clicked. | +| error | `EventEmitter` | Emitted when an error occurs. | diff --git a/lib/config/DocProcessor/docProcessor.js b/lib/config/DocProcessor/docProcessor.js index 4fb795b541..0326216e97 100644 --- a/lib/config/DocProcessor/docProcessor.js +++ b/lib/config/DocProcessor/docProcessor.js @@ -60,7 +60,7 @@ function updatePhase(filenames, aggData) { }); if (modified) - fs.writeFileSync(filenames[i], remark().use(frontMatter, {type: 'yaml', fence: '---'}).data("settings", {paddedTable: false}).stringify(tree)); + fs.writeFileSync(filenames[i], remark().use(frontMatter, {type: 'yaml', fence: '---'}).data("settings", {paddedTable: false, gfm: false}).stringify(tree)); //console.log(JSON.stringify(tree)); } diff --git a/lib/config/DocProcessor/templates/component.combyne b/lib/config/DocProcessor/templates/component.combyne index 75d7b38a9c..19caca95c3 100644 --- a/lib/config/DocProcessor/templates/component.combyne +++ b/lib/config/DocProcessor/templates/component.combyne @@ -5,7 +5,7 @@ | -- | -- | -- | -- | {% each properties as prop %} {% if prop.isInput %} -| {{prop.name}} | `{{{prop.type}}}` | {{{prop.defaultValue}}} | {{{prop.docText}}} | +| {{{prop.name}}} | `{{{prop.type}}}` | {{{prop.defaultValue}}} | {{{prop.docText}}} | {% endif %} {% endeach %} {% endif %} diff --git a/lib/config/DocProcessor/templates/directive.combyne b/lib/config/DocProcessor/templates/directive.combyne index d33b70d05d..19caca95c3 100644 --- a/lib/config/DocProcessor/templates/directive.combyne +++ b/lib/config/DocProcessor/templates/directive.combyne @@ -1 +1,23 @@ -{% include 'component' %} \ No newline at end of file +{% if hasInputs %} +### Properties + +| Name | Type | Default value | Description | +| -- | -- | -- | -- | +{% each properties as prop %} +{% if prop.isInput %} +| {{{prop.name}}} | `{{{prop.type}}}` | {{{prop.defaultValue}}} | {{{prop.docText}}} | +{% endif %} +{% endeach %} +{% endif %} +{% if hasOutputs%} + +### Events + +| Name | Type | Description | +| -- | -- | -- | +{% each properties as prop %} +{% if prop.isOutput %} +| {{prop.name}} | `{{{prop.type}}}` | {{{prop.docText}}} | +{% endif %} +{% endeach %} +{% endif %} \ No newline at end of file diff --git a/lib/config/DocProcessor/tools/tsInfo.js b/lib/config/DocProcessor/tools/tsInfo.js index b52e641c87..c27585abb4 100644 --- a/lib/config/DocProcessor/tools/tsInfo.js +++ b/lib/config/DocProcessor/tools/tsInfo.js @@ -13,7 +13,8 @@ var excludePatterns = [ ]; var nameExceptions = { "datatable.component": "DataTableComponent", - "tasklist.service": "TaskListService" + "tasklist.service": "TaskListService", + "text-mask.component": "InputMaskDirective" }; var PropInfo = /** @class */ (function () { function PropInfo(rawProp) { @@ -30,12 +31,14 @@ var PropInfo = /** @class */ (function () { } if (rawProp.decorators) { rawProp.decorators.forEach(function (dec) { + //console.log(dec); if (dec.name === "Input") { _this.isInput = true; if (dec.arguments) { - var bindingName = dec["bindingPropertyName"]; + var bindingName = dec.arguments["bindingPropertyName"]; + //console.log(JSON.stringify(dec.arguments)); if (bindingName && (bindingName !== "")) - _this.name = bindingName; + _this.name = bindingName.replace(/['"]/g, ""); } if (!_this.docText && !_this.isDeprecated) console.log("Warning: Input \"" + rawProp.getFullName() + "\" has no doc text."); @@ -106,7 +109,8 @@ var ComponentInfo = /** @class */ (function () { function ComponentInfo(classRef) { var _this = this; var props = classRef.getChildrenByKind(typedoc_1.ReflectionKind.Property); - this.properties = props.map(function (item) { + var accessors = classRef.getChildrenByKind(typedoc_1.ReflectionKind.Accessor); + this.properties = props.concat(accessors).map(function (item) { return new PropInfo(item); }); var methods = classRef.getChildrenByKind(typedoc_1.ReflectionKind.Method); @@ -131,7 +135,9 @@ var ComponentInfo = /** @class */ (function () { function initPhase(aggData) { var app = new typedoc_1.Application({ exclude: excludePatterns, - ignoreCompilerErrors: true + ignoreCompilerErrors: true, + experimentalDecorators: true, + tsconfig: "tsconfig.json" }); var sources = app.expandInputFiles(libFolders); aggData.projData = app.convert(sources); @@ -158,7 +164,8 @@ function updatePhase(tree, pathname, aggData) { var templateSource = fs.readFileSync(templateName, "utf8"); var template = combyne(templateSource); var mdText = template.render(compData); - var newSection_1 = remark().parse(mdText.trim()).children; + mdText = mdText.replace(/^ +\|/mg, "|"); + var newSection_1 = remark().data("settings", { paddedTable: false, gfm: false }).parse(mdText.trim()).children; replaceSection(tree, "Class members", function (before, section, after) { newSection_1.unshift(before); newSection_1.push(after); @@ -185,13 +192,17 @@ function updatePhase(tree, pathname, aggData) { return true; } exports.updatePhase = updatePhase; -function renderInputs(comp) { +/* +function renderInputs(comp: ComponentInfo): string { var result = ""; - comp.properties.forEach(function (prop) { - result += "| " + prop.name + " | `" + prop.type + "` | " + prop.defaultValue + " | " + prop.docText + " |\n"; + + comp.properties.forEach(prop => { + result += `| ${prop.name} | \`${prop.type}\` | ${prop.defaultValue} | ${prop.docText} |\n`; }); + return result; } +*/ function initialCap(str) { return str[0].toUpperCase() + str.substr(1); } diff --git a/lib/config/DocProcessor/tools/tsInfo.ts b/lib/config/DocProcessor/tools/tsInfo.ts index 2a41f26902..41a9319526 100644 --- a/lib/config/DocProcessor/tools/tsInfo.ts +++ b/lib/config/DocProcessor/tools/tsInfo.ts @@ -3,6 +3,7 @@ import * as path from "path"; import * as replaceSection from "mdast-util-heading-range"; import * as remark from "remark"; +import * as stringify from "remark-stringify"; import * as frontMatter from "remark-frontmatter"; import * as combyne from "combyne"; @@ -31,7 +32,8 @@ let excludePatterns = [ let nameExceptions = { "datatable.component": "DataTableComponent", - "tasklist.service": "TaskListService" + "tasklist.service": "TaskListService", + "text-mask.component": "InputMaskDirective" } @@ -61,20 +63,18 @@ class PropInfo { if (rawProp.decorators) { rawProp.decorators.forEach(dec => { + //console.log(dec); if (dec.name === "Input") { this.isInput = true; - - /* + if (dec.arguments) { let bindingName = dec.arguments["bindingPropertyName"]; - console.log(JSON.stringify(dec.arguments)); + //console.log(JSON.stringify(dec.arguments)); if (bindingName && (bindingName !== "")) - this.name = bindingName; - + this.name = bindingName.replace(/['"]/g, ""); } - */ - + if (!this.docText && !this.isDeprecated) console.log(`Warning: Input "${rawProp.getFullName()}" has no doc text.`); } @@ -181,8 +181,9 @@ class ComponentInfo { constructor(classRef: DeclarationReflection) { let props = classRef.getChildrenByKind(ReflectionKind.Property); - - this.properties = props.map(item => { + let accessors = classRef.getChildrenByKind(ReflectionKind.Accessor); + + this.properties = [...props, ...accessors].map(item => { return new PropInfo(item); }); @@ -214,11 +215,14 @@ class ComponentInfo { export function initPhase(aggData) { let app = new Application({ exclude: excludePatterns, - ignoreCompilerErrors: true + ignoreCompilerErrors: true, + experimentalDecorators: true, + tsconfig: "tsconfig.json" }); let sources = app.expandInputFiles(libFolders); aggData.projData = app.convert(sources); + /* aggData.liq = liquid({ root: templateFolder @@ -247,7 +251,9 @@ export function updatePhase(tree, pathname, aggData) { let template = combyne(templateSource); let mdText = template.render(compData); - let newSection = remark().parse(mdText.trim()).children; + mdText = mdText.replace(/^ +\|/mg, "|"); + + let newSection = remark().data("settings", {paddedTable: false, gfm: false}).parse(mdText.trim()).children; replaceSection(tree, "Class members", (before, section, after) => { newSection.unshift(before); @@ -276,7 +282,7 @@ export function updatePhase(tree, pathname, aggData) { return true; } - +/* function renderInputs(comp: ComponentInfo): string { var result = ""; @@ -286,6 +292,7 @@ function renderInputs(comp: ComponentInfo): string { return result; } +*/ function initialCap(str: string) { return str[0].toUpperCase() + str.substr(1);