[ADF-3354] removed the adf-accordion component to use material accordion (#3980)

* [ADF-3354] removed the adf-accordion component to use material accordion

* [ADF-3354] fixed default opened state for the accordion

* [ADF-3354] fixed locator for new accordion menu
This commit is contained in:
Vito
2018-11-21 12:34:45 +00:00
committed by Eugenio Romano
parent 0a394869f5
commit 539850612e
22 changed files with 60 additions and 650 deletions

View File

@@ -14,8 +14,6 @@ for more information about installing and using the source code.
| [About component](about.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | This component allow you to have a general overview of the version of ADF installed and the status of the [Content service](../core/content.service.md) and [Process service](../process-services/process.service.md). | [Source](../../lib/core/about/about.component.ts) |
| [Buttons menu component](buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../../lib/core/buttons-menu/buttons-menu.component.ts) |
| [Card view component](card-view.component.md) | Displays a configurable property list renderer. | [Source](../../lib/core/card-view/components/card-view/card-view.component.ts) |
| [Accordion group component](accordion-group.component.md) | Adds a collapsible panel to an accordion menu. | [Source](../../lib/core/collapsable/accordion-group.component.ts) |
| [Accordion component](accordion.component.md) | Creates a collapsible accordion menu. | [Source](../../lib/core/collapsable/accordion.component.ts) |
| [Comment list component](comment-list.component.md) | Shows a list of comments. | [Source](../../lib/core/comments/comment-list.component.ts) |
| [Comments component](comments.component.md) | Displays comments from users involved in a specified task or content and allows an involved user to add a comment to a task or a content. | [Source](../../lib/core/comments/comments.component.ts) |
| [Data column component](data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../../lib/core/data-column/data-column.component.ts) |

View File

@@ -1,68 +0,0 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
---
# Accordion Group component
Adds a collapsible panel to an accordion menu.
![Accordion menu screenshot](../docassets/images/accordion-menu.png)
## Basic Usage
```html
<adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'" [headingIconTooltip]="'Group Tooltip'">
<my-list></my-list>
</adf-accordion-group>
</adf-accordion>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
titleHeading: string;
constructor() {
this.titleHeading = 'My Group';
}
}
```
### [Transclusions](../user-guide/transclusion.md)
Any content can be trancluded inside this component, since its purpose is to
define a section in a surrounding [Accordion component](accordion.component.md).
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| hasAccordionIcon | `boolean` | true | Should the (expanded) accordion icon be shown? |
| heading | `string` | | Title heading for the group. |
| headingIcon | `string` | | The material design icon. |
| headingIconTooltip | `string` | | Tooltip message to be shown for headingIcon |
| isOpen | `boolean` | | Is this group currently open? |
| isSelected | `boolean` | | Is this group currently selected? |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| headingClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the heading is clicked. |
## Details
Place one or more accordion groups within an [Accordion component](accordion.component.md) to define a menu.
## See also
- [Accordion component](accordion.component.md)

View File

@@ -1,76 +0,0 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
---
# Accordion Component
Creates a collapsible accordion menu.
![Accordion menu screenshot](../docassets/images/accordion-menu.png)
## Basic Usage
```html
<adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
<my-list></my-list>
</adf-accordion-group>
</adf-accordion>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
titleHeading: string;
constructor() {
this.titleHeading = 'My Group';
}
}
```
### [Transclusions](../user-guide/transclusion.md)
Content for the accordion menu is transcluded within one or more
[Accordion group components](accordion-group.component.md)
## Details
An accordion menu contains several panels of content, only one of which is visible at any time. The
hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
while the visible panel fills the remaining space in the menu.
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to transclude the content
for the panels and set their properties (title, selection status, etc).
### Example
You can use an accordion menu to wrap a [process filter](../process-services/process-filters.component.md), as shown in
the following example:
```html
<adf-accordion>
<adf-accordion-group
[heading]="'Processes'"
[isSelected]="true"
[headingIcon]="'assessment'">
<adf-process-instance-filters
[appId]="appId"
(filterClick)="onProcessFilterClick($event)"
(success)="onSuccessProcessFilterList($event)">
</adf-process-instance-filters>
</adf-accordion-group>
</adf-accordion>
```
![how-create-accordion-menu](../docassets/images/how-to-create-accordion-menu.png)
## See also
- [Accordion group component](accordion-group.component.md)