mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[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:
parent
0a394869f5
commit
539850612e
@ -3,7 +3,7 @@
|
||||
<mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
|
||||
<div class="page-content" *ngIf="showTaskTab">
|
||||
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
|
||||
<div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="265px">
|
||||
<div class="adf-list-buttons">
|
||||
<adf-sidebar-action-menu [expanded]="true" [width]="205"
|
||||
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
|
||||
@ -16,19 +16,22 @@
|
||||
</div>
|
||||
</adf-sidebar-action-menu>
|
||||
</div>
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
|
||||
[headingIcon]="'assignment'">
|
||||
<adf-task-filters
|
||||
[filterParam]="filterSelected"
|
||||
<mat-accordion class="adf-accordion-panel" [displayMode]="flat">
|
||||
<mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-icon>assignment</mat-icon>
|
||||
<div class="adf-accordion-title-padding">Tasks</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<adf-task-filters [filterParam]="filterSelected"
|
||||
[appId]="appId"
|
||||
[showIcon]="showTaskFilterIcon"
|
||||
(filterClick)="onTaskFilterClick($event)"
|
||||
(success)="onSuccessTaskFilterList($event)"
|
||||
#activitiFilter>
|
||||
(success)="onSuccessTaskFilterList($event)" #activitiFilter>
|
||||
</adf-task-filters>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
<div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
|
||||
[ngClass.gt-md]="{'small-pagination': true}"
|
||||
@ -126,9 +129,14 @@
|
||||
</div>
|
||||
</adf-sidebar-action-menu>
|
||||
</div>
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
|
||||
[headingIcon]="'assessment'">
|
||||
<mat-accordion class="adf-accordion-panel" [displayMode]="flat">
|
||||
<mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<mat-icon>assessment</mat-icon>
|
||||
<div class="adf-accordion-title-padding">Processes</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<adf-process-instance-filters
|
||||
#activitiProcessFilter
|
||||
[appId]="appId"
|
||||
@ -138,8 +146,8 @@
|
||||
(filterSelected)="onProcessFilterChange($event)"
|
||||
(success)="onSuccessProcessFilterList($event)">
|
||||
</adf-process-instance-filters>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
<div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
|
||||
[ngClass.gt-md]="{'small-pagination': true}"
|
||||
|
@ -104,4 +104,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-accordion-panel {
|
||||
|
||||
.mat-expansion-panel {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
|
||||
flex-basis: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-description {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{
|
||||
color: mat-color($primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.adf-accordion-title-padding {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -63,8 +63,6 @@ for more information about installing and using the source code.
|
||||
| [About component](core/about.component.md)  | 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](core/buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../lib/core/buttons-menu/buttons-menu.component.ts) |
|
||||
| [Card view component](core/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](core/accordion-group.component.md) | Adds a collapsible panel to an accordion menu. | [Source](../lib/core/collapsable/accordion-group.component.ts) |
|
||||
| [Accordion component](core/accordion.component.md) | Creates a collapsible accordion menu. | [Source](../lib/core/collapsable/accordion.component.ts) |
|
||||
| [Comment list component](core/comment-list.component.md) | Shows a list of comments. | [Source](../lib/core/comments/comment-list.component.ts) |
|
||||
| [Comments component](core/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](core/data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../lib/core/data-column/data-column.component.ts) |
|
||||
|
@ -14,8 +14,6 @@ for more information about installing and using the source code.
|
||||
| [About component](about.component.md)  | 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) |
|
||||
|
@ -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.
|
||||
|
||||

|
||||
|
||||
## 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)
|
@ -1,76 +0,0 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-05-08
|
||||
---
|
||||
|
||||
# Accordion Component
|
||||
|
||||
Creates a collapsible accordion menu.
|
||||
|
||||

|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||

|
||||
|
||||
## See also
|
||||
|
||||
- [Accordion group component](accordion-group.component.md)
|
@ -27,7 +27,7 @@ var ProcessFiltersPage = function () {
|
||||
var createProcessButton = element(by.css(".adf-processes-menu button[data-automation-id='create-button'] > span"));
|
||||
var newProcessButton = element(by.css("div > button[data-automation-id='btn-start-process']"));
|
||||
var processesPage = element(by.css("div[class='adf-grid'] > div[class='adf-grid-item adf-processes-menu']"));
|
||||
var accordionMenu = element(by.css(".adf-processes-menu adf-accordion"));
|
||||
var accordionMenu = element(by.css(".adf-processes-menu mat-accordion"));
|
||||
var buttonWindow = element(by.css("div > button[data-automation-id='btn-start-process'] > div"));
|
||||
var noContentMessage = element.all(by.css("p[class='adf-empty-content__title']")).first();
|
||||
var rows = by.css("adf-process-instance-list div[class='adf-datatable-body'] div[class*='adf-datatable-row']");
|
||||
|
@ -1,26 +0,0 @@
|
||||
<mat-accordion class="adf-panel">
|
||||
<mat-expansion-panel #expansionPanel
|
||||
id="adf-expansion-panel-id"
|
||||
(click)="isExpandable()"
|
||||
[expanded]="toggleExpansion()"
|
||||
(opened)="onHeaderClick()"
|
||||
[hideToggle]="!hasAccordionIcon">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<div class="adf-panel-heading" data-automation-id="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
|
||||
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
|
||||
<mat-icon class="material-icons"
|
||||
[matTooltip]="headingIconTooltip"
|
||||
[matTooltipDisabled]="!headingIconTooltip">
|
||||
{{headingIcon}}
|
||||
</mat-icon>
|
||||
</div>
|
||||
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
|
||||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div id="adf-expansion-panel-content-id" #contentWrapper>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
@ -1,55 +0,0 @@
|
||||
@mixin adf-accordion-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-panel {
|
||||
|
||||
&-heading {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-heading-selected {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&-heading-icon {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-heading-text {
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.mat-expansion-panel {
|
||||
transition: none !important;
|
||||
box-shadow: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-body {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header-title {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
.mat-expansion-indicator {
|
||||
margin-right: 25px !important;
|
||||
}
|
||||
}
|
||||
}
|
@ -1,129 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AccordionGroupComponent } from './accordion-group.component';
|
||||
import { setupTestBed } from '../testing/setupTestBed';
|
||||
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||
|
||||
describe('AccordionGroupComponent', () => {
|
||||
|
||||
let fixture: ComponentFixture<AccordionGroupComponent>;
|
||||
let component: AccordionGroupComponent;
|
||||
let element: any;
|
||||
|
||||
setupTestBed({
|
||||
imports: [CoreTestingModule]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AccordionGroupComponent);
|
||||
|
||||
element = fixture.nativeElement;
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should define mat-accordion ', async(() => {
|
||||
component.isSelected = true;
|
||||
component.heading = 'Fake Header';
|
||||
component.headingIcon = 'fake-icon';
|
||||
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let accordion = element.querySelector('mat-accordion');
|
||||
let expansionPanel = element.querySelector('mat-expansion-panel');
|
||||
let accordionHeader = element.querySelector('mat-expansion-panel-header');
|
||||
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
|
||||
expect(accordion).toBeDefined();
|
||||
expect(expansionPanel).toBeDefined();
|
||||
expect(accordionHeader).toBeDefined();
|
||||
expect(content).toEqual('<a>Test</a>');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should be display accordion title and icon', async(() => {
|
||||
component.heading = 'Fake Header';
|
||||
component.headingIcon = 'fake-icon';
|
||||
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let headerText = element.querySelector('#heading-text');
|
||||
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
|
||||
expect(headerText.innerText).toEqual('Fake Header');
|
||||
expect(headerIcon.innerText).toEqual('fake-icon');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should be display only accordion title', async(() => {
|
||||
component.heading = 'Fake Header';
|
||||
component.headingIcon = '';
|
||||
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let headerText = element.querySelector('#heading-text');
|
||||
let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
|
||||
expect(headerText.innerText).toEqual('Fake Header');
|
||||
expect(headerIcon).toBeNull();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should be display accordion title and content', async(() => {
|
||||
component.isSelected = true;
|
||||
component.heading = 'Fake Header';
|
||||
component.headingIcon = 'fake-icon';
|
||||
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let headerText = element.querySelector('#heading-text');
|
||||
let headerIcon = element.querySelector('#heading-icon .material-icons');
|
||||
let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
|
||||
expect(headerText.innerText).toEqual('Fake Header');
|
||||
expect(headerIcon.innerText).toEqual('fake-icon');
|
||||
expect(content).toEqual('<a>Test</a>');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should emit an event when a heading clicked', async(() => {
|
||||
component.heading = 'Fake Header';
|
||||
fixture.detectChanges();
|
||||
let heading: string = component.heading;
|
||||
component.headingClick.subscribe((headName: string) => {
|
||||
expect(headName).toBeDefined();
|
||||
expect(headName).toEqual(heading);
|
||||
});
|
||||
let header = element.querySelector('.adf-panel-heading');
|
||||
header.click();
|
||||
}));
|
||||
|
||||
it('should display icon if is present', (done) => {
|
||||
component.headingIcon = 'assignment';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(component.hasHeadingIcon()).toBe(true);
|
||||
let headerText = element.querySelector('.adf-panel-heading-icon');
|
||||
expect(headerText).toBeDefined();
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
@ -1,105 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { AfterViewInit , Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatExpansionPanel } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-accordion-group',
|
||||
templateUrl: 'accordion-group.component.html',
|
||||
styleUrls: ['./accordion-group.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AccordionGroupComponent implements AfterViewInit {
|
||||
private _isOpen: boolean = false;
|
||||
private _isSelected: boolean = false;
|
||||
|
||||
@ViewChild('contentWrapper')
|
||||
contentWrapper: ElementRef;
|
||||
|
||||
@ViewChild('expansionPanel') expansionPanel: MatExpansionPanel;
|
||||
|
||||
/** Title heading for the group. */
|
||||
@Input()
|
||||
heading: string;
|
||||
|
||||
/** The material design icon. */
|
||||
@Input()
|
||||
headingIcon: string;
|
||||
|
||||
/** Tooltip message to be shown for headingIcon */
|
||||
@Input()
|
||||
headingIconTooltip: string;
|
||||
|
||||
/** Should the (expanded) accordion icon be shown? */
|
||||
@Input()
|
||||
hasAccordionIcon: boolean = true;
|
||||
|
||||
/** Emitted when the heading is clicked. */
|
||||
@Output()
|
||||
headingClick: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
/** Is this group currently open? */
|
||||
@Input()
|
||||
set isOpen(value: boolean) {
|
||||
this._isOpen = value;
|
||||
}
|
||||
|
||||
get isOpen() {
|
||||
return this._isOpen;
|
||||
}
|
||||
|
||||
/** Is this group currently selected? */
|
||||
@Input()
|
||||
set isSelected(value: boolean) {
|
||||
this._isSelected = value;
|
||||
}
|
||||
|
||||
get isSelected() {
|
||||
return this._isSelected;
|
||||
}
|
||||
|
||||
hasContent: boolean;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.hasContent = this.contentWrapper.nativeElement && this.contentWrapper.nativeElement.children.length > 0;
|
||||
}
|
||||
|
||||
hasHeadingIcon() {
|
||||
return !!this.headingIcon;
|
||||
}
|
||||
|
||||
onHeaderClick(): void {
|
||||
this.headingClick.emit(this.heading);
|
||||
}
|
||||
|
||||
isExpandable() {
|
||||
if (!this.hasContent || !this.isOpen) {
|
||||
this.expandPanel();
|
||||
}
|
||||
}
|
||||
|
||||
expandPanel() {
|
||||
this.expansionPanel.expanded = !this.expansionPanel.expanded;
|
||||
}
|
||||
|
||||
toggleExpansion(): boolean {
|
||||
return this.isOpen && this.isSelected;
|
||||
}
|
||||
}
|
@ -1,40 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AccordionComponent } from './accordion.component';
|
||||
import { setupTestBed } from '../testing/setupTestBed';
|
||||
import { CoreTestingModule } from '../testing/core.testing.module';
|
||||
|
||||
describe('AccordionComponent', () => {
|
||||
|
||||
let fixture: ComponentFixture<AccordionComponent>;
|
||||
let component: AccordionComponent;
|
||||
|
||||
setupTestBed({
|
||||
imports: [CoreTestingModule]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AccordionComponent);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should create the component', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -1,30 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-accordion',
|
||||
template: `
|
||||
<ng-content></ng-content>
|
||||
`,
|
||||
host: {
|
||||
'class': 'panel-group'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AccordionComponent {}
|
@ -1,41 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MaterialModule } from '../material.module';
|
||||
|
||||
import { AccordionGroupComponent } from './accordion-group.component';
|
||||
import { AccordionComponent } from './accordion.component';
|
||||
|
||||
// @deprecated 2.3.0 use the material accordion
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MaterialModule,
|
||||
CommonModule
|
||||
],
|
||||
declarations: [
|
||||
AccordionComponent,
|
||||
AccordionGroupComponent
|
||||
],
|
||||
exports: [
|
||||
AccordionComponent,
|
||||
AccordionGroupComponent
|
||||
]
|
||||
})
|
||||
export class CollapsableModule {}
|
@ -1,18 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './public-api';
|
@ -1,21 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './accordion-group.component';
|
||||
export * from './accordion.component';
|
||||
|
||||
export * from './collapsable.module';
|
@ -26,7 +26,6 @@ import { MaterialModule } from './material.module';
|
||||
import { AboutModule } from './about/about.module';
|
||||
import { AppConfigModule } from './app-config/app-config.module';
|
||||
import { CardViewModule } from './card-view/card-view.module';
|
||||
import { CollapsableModule } from './collapsable/collapsable.module';
|
||||
import { ContextMenuModule } from './context-menu/context-menu.module';
|
||||
import { DataColumnModule } from './data-column/data-column.module';
|
||||
import { DataTableModule } from './datatable/datatable.module';
|
||||
@ -79,7 +78,6 @@ export function createTranslateLoader(http: HttpClient) {
|
||||
ToolbarModule,
|
||||
ContextMenuModule,
|
||||
CardViewModule,
|
||||
CollapsableModule,
|
||||
FormModule,
|
||||
CommentsModule,
|
||||
LoginModule,
|
||||
@ -117,7 +115,6 @@ export function createTranslateLoader(http: HttpClient) {
|
||||
ToolbarModule,
|
||||
ContextMenuModule,
|
||||
CardViewModule,
|
||||
CollapsableModule,
|
||||
FormModule,
|
||||
CommentsModule,
|
||||
LoginModule,
|
||||
@ -153,7 +150,6 @@ export class CoreModuleLazy {
|
||||
ToolbarModule,
|
||||
ContextMenuModule,
|
||||
CardViewModule,
|
||||
CollapsableModule,
|
||||
FormModule,
|
||||
CommentsModule,
|
||||
LoginModule,
|
||||
@ -191,7 +187,6 @@ export class CoreModuleLazy {
|
||||
ToolbarModule,
|
||||
ContextMenuModule,
|
||||
CardViewModule,
|
||||
CollapsableModule,
|
||||
FormModule,
|
||||
CommentsModule,
|
||||
LoginModule,
|
||||
|
@ -27,7 +27,6 @@ export * from './info-drawer/index';
|
||||
export * from './data-column/index';
|
||||
export * from './datatable/index';
|
||||
export * from './context-menu/index';
|
||||
export * from './collapsable/index';
|
||||
export * from './card-view/index';
|
||||
export * from './app-config/index';
|
||||
export * from './form/index';
|
||||
|
@ -3,7 +3,6 @@
|
||||
@import './theming';
|
||||
|
||||
@import '../card-view/card-view.module';
|
||||
@import '../collapsable/accordion-group.component';
|
||||
@import '../datatable/components/datatable/datatable.component';
|
||||
@import '../form/components/widgets/container/container.widget';
|
||||
@import '../form/components/widgets/dynamic-table/dynamic-table.widget';
|
||||
@ -37,7 +36,6 @@
|
||||
@include adf-colors-theme($theme);
|
||||
@include adf-default-class-theme($theme);
|
||||
@include adf-card-view-module-theme($theme);
|
||||
@include adf-accordion-theme($theme);
|
||||
@include adf-datatable-theme($theme);
|
||||
@include adf-form-container-widget-theme($theme);
|
||||
@include adf-dynamic-table-theme($theme);
|
||||
|
@ -8,7 +8,6 @@
|
||||
font-size: 14px!important;
|
||||
font-weight: bold;
|
||||
opacity: .54;
|
||||
padding-left: 30px;
|
||||
|
||||
.mat-list-item-content {
|
||||
height: 34px;
|
||||
|
@ -8,7 +8,6 @@
|
||||
font-size: 14px!important;
|
||||
font-weight: bold;
|
||||
opacity: .54;
|
||||
padding-left: 30px;
|
||||
|
||||
.mat-list-item-content {
|
||||
height: 34px;
|
||||
|
@ -8,7 +8,6 @@
|
||||
font-size: 14px!important;
|
||||
font-weight: bold;
|
||||
opacity: .54;
|
||||
padding-left: 30px;
|
||||
|
||||
.mat-list-item-content {
|
||||
height: 34px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user