+
+
+
+
+
+```
+
+
+
### Start Process Button component
Displays a button which in turn displays a dialog when clicked, allowing the user
diff --git a/ng2-components/ng2-activiti-processlist/docs/assets/how-to-create-accordion-menu.png b/ng2-components/ng2-activiti-processlist/docs/assets/how-to-create-accordion-menu.png
new file mode 100644
index 0000000000..94721a4e2c
Binary files /dev/null and b/ng2-components/ng2-activiti-processlist/docs/assets/how-to-create-accordion-menu.png differ
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.css
index 073fb82bbd..720a79f66b 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.css
@@ -14,6 +14,10 @@
color: rgb(68,138,255);
}
+.activiti-filters__entry:hover {
+ opacity: 0.8;
+}
+
.activiti-filters__entry.active .activiti-filters__entry-icon {
color: rgb(68,138,255);
-}
\ No newline at end of file
+}
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index ecb2c1ec0e..205504f98a 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -211,11 +211,12 @@ Here's the list of available properties you can define for a Data Column definit
### Properties
| Name | Description |
-| --- | --- |
+| --- | --- | --- | --- |
|`appId`| { string } The id of the app. |
|`processDefinitionKey`| { string } The processDefinitionKey of the process. |
|`assignment`| { string } The assignment of the process.
Possible values are:
assignee : where the current user is the assignee
candidate: where the current user is a task candidate
group_x: where the task is assigned to a group where the current user is a member of.
no value: where the current user is involved
|
|`state`| { string } Define state of the processes. Possible values are: completed, active |
+|`hasIcon` | boolean | true | Show/Hide the icon on the left . |
|`landingTaskId`| { string } Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
|`sort`| { string } Define the sort of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc |
| `data` | { DataTableAdapter } (optional) JSON object that represent the number and the type of the columns that you want show |
@@ -354,6 +355,27 @@ The component shows all the available filters.
No options
+### How to create an accordion menu with the task filter
+
+You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
+The AccordionComponent is exposed by the alfresco-core.
+
+```html
+
+
+
+
+
+
+```
+
+
+
## Basic usage example Activiti Checklist
The component shows the checklist task functionality.
diff --git a/ng2-components/ng2-activiti-tasklist/docs/assets/how-to-create-accordion-menu.png b/ng2-components/ng2-activiti-tasklist/docs/assets/how-to-create-accordion-menu.png
new file mode 100644
index 0000000000..ae06d5cd21
Binary files /dev/null and b/ng2-components/ng2-activiti-tasklist/docs/assets/how-to-create-accordion-menu.png differ
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.css
index ef25795fc5..720a79f66b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.css
@@ -14,6 +14,10 @@
color: rgb(68,138,255);
}
+.activiti-filters__entry:hover {
+ opacity: 0.8;
+}
+
.activiti-filters__entry.active .activiti-filters__entry-icon {
color: rgb(68,138,255);
}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.html
index d48063665f..5a15ceb79c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.html
@@ -3,7 +3,7 @@
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
new file mode 100644
index 0000000000..125d87f737
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
@@ -0,0 +1,76 @@
+/*!
+ * @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, async } from '@angular/core/testing';
+import { AccordionComponent } from './accordion.component';
+import { AccordionGroupComponent } from './accordion-group.component';
+
+describe('AccordionGroupComponent', () => {
+
+ let fixture: ComponentFixture;
+ let component: AccordionGroupComponent;
+ let element: any;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ AccordionGroupComponent
+ ],
+ providers: [AccordionComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AccordionGroupComponent);
+
+ element = fixture.nativeElement;
+ component = fixture.componentInstance;
+
+ });
+
+ it('should be closed by default', () => {
+ component.heading = 'Fake Header';
+ component.headingIcon = 'fake-icon';
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+ expect(headerToggle.innerText).toEqual('expand_more');
+ let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+ expect(headerText.innerText).toEqual('Fake Header');
+ let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+ expect(headerIcon.innerText).toEqual('fake-icon');
+ });
+ });
+
+ it('should be open when click', () => {
+ component.isSelected = true;
+ component.heading = 'Fake Header';
+ component.headingIcon = 'fake-icon';
+ fixture.detectChanges();
+ element.querySelector('#accordion-button').click();
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+ expect(headerText.innerText).toEqual('Fake Header');
+ let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+ expect(headerIcon.innerText).toEqual('fake-icon');
+ let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+ expect(headerToggle.innerText).toEqual('expand_less');
+ });
+ });
+
+});
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
new file mode 100644
index 0000000000..40a510b235
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
@@ -0,0 +1,79 @@
+/*!
+ * @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, Input, OnDestroy } from '@angular/core';
+import { AccordionComponent } from './accordion.component';
+
+@Component({
+ selector: 'accordion-group',
+ moduleId: module.id,
+ templateUrl: 'accordion-group.component.html',
+ styleUrls: ['./accordion-group.component.css']
+
+})
+export class AccordionGroupComponent implements OnDestroy {
+ private _isOpen: boolean = false;
+ private _isSelected: boolean = false;
+
+ @Input()
+ heading: string;
+
+ @Input()
+ headingIcon: string;
+
+ @Input()
+ set isOpen(value: boolean) {
+ this._isOpen = value;
+ if (value) {
+ this.accordion.closeOthers(this);
+ }
+ }
+
+ get isOpen() {
+ return this._isOpen;
+ }
+
+ @Input()
+ set isSelected(value: boolean) {
+ this._isSelected = value;
+ }
+
+ get isSelected() {
+ return this._isSelected;
+ }
+
+ constructor(private accordion: AccordionComponent) {
+ this.accordion.addGroup(this);
+ }
+
+ ngOnDestroy() {
+ this.accordion.removeGroup(this);
+ }
+
+ hasHeadingIcon() {
+ return this.headingIcon ? true : false;
+ }
+
+ toggleOpen(event: MouseEvent): void {
+ event.preventDefault();
+ this.isOpen = !this.isOpen;
+ }
+
+ getAccordionIcon(): string {
+ return this.isOpen ? 'expand_less' : 'expand_more';
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.spec.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.spec.ts
new file mode 100644
index 0000000000..cf7b4625fe
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.spec.ts
@@ -0,0 +1,81 @@
+/*!
+ * @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, async } from '@angular/core/testing';
+import { AccordionComponent } from './accordion.component';
+import { AccordionGroupComponent } from './accordion-group.component';
+
+describe('AccordionComponent', () => {
+
+ let fixture: ComponentFixture;
+ let component: AccordionComponent;
+ let componentGroup1: AccordionGroupComponent;
+ let componentGroup2: AccordionGroupComponent;
+ let componentGroup3: AccordionGroupComponent;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ AccordionComponent
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AccordionComponent);
+ component = fixture.componentInstance;
+ });
+
+ afterEach(() => {
+ component.groups = [];
+ });
+
+ it('should create the component', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should add the AccordionGroup', () => {
+ component.addGroup(componentGroup1);
+ expect(component.groups.length).toBe(1);
+ });
+
+ it('should close all the other group', () => {
+ componentGroup1 = new AccordionGroupComponent(component);
+ componentGroup2 = new AccordionGroupComponent(component);
+ componentGroup3 = new AccordionGroupComponent(component);
+ componentGroup1.isOpen = false;
+ componentGroup2.isOpen = true;
+ componentGroup3.isOpen = false;
+
+ expect(component.groups[0].isOpen).toBeFalsy();
+ expect(component.groups[1].isOpen).toBeTruthy();
+ expect(component.groups[2].isOpen).toBeFalsy();
+
+ componentGroup1.isOpen = true;
+
+ expect(component.groups[0].isOpen).toBeTruthy();
+ expect(component.groups[1].isOpen).toBeFalsy();
+ expect(component.groups[2].isOpen).toBeFalsy();
+ });
+
+ it('should remove the AccordionGroup', () => {
+ component.addGroup(componentGroup1);
+ component.removeGroup(componentGroup1);
+ expect(component.groups.length).toBe(0);
+ });
+
+});
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.ts
new file mode 100644
index 0000000000..54c52378ee
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/accordion.component.ts
@@ -0,0 +1,51 @@
+/*!
+ * @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 } from '@angular/core';
+import { AccordionGroupComponent } from './accordion-group.component';
+
+@Component({
+ selector: 'accordion',
+ template: `
+
+ `,
+ host: {
+ 'class': 'panel-group'
+ }
+})
+export class AccordionComponent {
+ groups: Array = [];
+
+ addGroup(group: AccordionGroupComponent): void {
+ this.groups.push(group);
+ }
+
+ closeOthers(openGroup: AccordionGroupComponent): void {
+ this.groups.forEach((group: AccordionGroupComponent) => {
+ if (group !== openGroup) {
+ group.isOpen = false;
+ }
+ });
+ }
+
+ removeGroup(group: AccordionGroupComponent): void {
+ const index = this.groups.indexOf(group);
+ if (index !== -1) {
+ this.groups.splice(index, 1);
+ }
+ }
+}
diff --git a/ng2-components/ng2-alfresco-core/src/components/collapsable/index.ts b/ng2-components/ng2-alfresco-core/src/components/collapsable/index.ts
new file mode 100644
index 0000000000..90ded41f70
--- /dev/null
+++ b/ng2-components/ng2-alfresco-core/src/components/collapsable/index.ts
@@ -0,0 +1,24 @@
+/*!
+ * @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 {AccordionComponent} from './accordion.component';
+import {AccordionGroupComponent} from './accordion-group.component';
+
+export const COLLAPSABLE_DIRECTIVES: [any] = [
+ AccordionComponent,
+ AccordionGroupComponent
+];
diff --git a/ng2-components/ng2-alfresco-core/src/components/index.ts b/ng2-components/ng2-alfresco-core/src/components/index.ts
index ecc9adaed9..87a331deeb 100644
--- a/ng2-components/ng2-alfresco-core/src/components/index.ts
+++ b/ng2-components/ng2-alfresco-core/src/components/index.ts
@@ -17,3 +17,4 @@
export * from './context-menu/index';
export * from './material/index';
+export * from './collapsable/index';