New packages org (#2639)

New packages org

lib/core/collapsable/accordion-group.component.html

@@ -0,0 +1,20 @@
+<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
+    <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
+        <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 id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">
+            <i class="material-icons">{{getAccordionIcon()}}</i>
+        </div>
+    </div>
+    <div class="adf-panel-collapse" [hidden]="!isOpen">
+        <div class="adf-panel-body" #contentWrapper>
+            <ng-content></ng-content>
+        </div>
+    </div>
+</div>

lib/core/collapsable/accordion-group.component.scss

@@ -0,0 +1,43 @@
+@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;
+    }
+
+    .adf-panel-heading-selected {
+        color: mat-color($primary);
+    }
+
+    .adf-panel-heading-icon {
+        float: left;
+    }
+
+    .adf-panel-body {
+        display: inline-block;
+    }
+
+    .adf-panel-heading-text {
+        float: left;
+        padding-left: 20px;
+        padding-top: 4px;
+    }
+
+    .adf-panel-heading-toggle {
+        float: right;
+        cursor: pointer;
+    }
+
+    .adf-panel-heading-toggle:hover {
+        opacity: 0.4;
+    }
+}

lib/core/collapsable/accordion-group.component.spec.ts

@@ -0,0 +1,118 @@
+/*!
+ * @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 { AccordionComponent } from './accordion.component';
+import { MaterialModule } from '../material.module';
+
+describe('AccordionGroupComponent', () => {
+
+    let fixture: ComponentFixture<AccordionGroupComponent>;
+    let component: AccordionGroupComponent;
+    let element: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MaterialModule
+            ],
+            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';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerText = element.querySelector('#heading-text');
+            expect(headerText.innerText).toEqual('Fake Header');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
+            expect(headerIcon.innerText).toEqual('fake-icon');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
+            expect(headerToggle.innerText).toEqual('expand_more');
+        });
+    });
+
+    it('should be open when click', () => {
+        component.isSelected = true;
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.detectChanges();
+        element.querySelector('#accordion-button').click();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerText = element.querySelector('#heading-text');
+            expect(headerText.innerText).toEqual('Fake Header');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
+            expect(headerIcon.innerText).toEqual('fake-icon');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
+            expect(headerToggle.innerText).toEqual('expand_less');
+        });
+    });
+
+    it('should show expand icon by default', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeDefined();
+        });
+    });
+
+    it('should hide expand icon', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.hasAccordionIcon = false;
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeNull();
+        });
+    });
+
+    it('should emit an event when a heading clicked', (done) => {
+        component.heading = 'Fake Header';
+        fixture.detectChanges();
+        let heading: string = component.heading;
+        component.headingClick.subscribe((headName: string) => {
+            expect(headName).toBeDefined();
+            expect(headName).toEqual(heading);
+            done();
+        });
+        let header = element.querySelector('.adf-panel-heading');
+        header.click();
+    });
+
+});

lib/core/collapsable/accordion-group.component.ts

@@ -0,0 +1,92 @@
+/*!
+ * @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, EventEmitter, Input, OnDestroy, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AccordionComponent } from './accordion.component';
+
+@Component({
+    selector: 'adf-accordion-group',
+    templateUrl: 'accordion-group.component.html',
+    styleUrls: ['./accordion-group.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AccordionGroupComponent implements OnDestroy {
+    private _isOpen: boolean = false;
+    private _isSelected: boolean = false;
+
+    @ViewChild('contentWrapper')
+    contentWrapper: any;
+
+    @Input()
+    heading: string;
+
+    @Input()
+    headingIcon: string;
+
+    @Input()
+    headingIconTooltip: string;
+
+    @Input()
+    hasAccordionIcon: boolean = true;
+
+    @Output()
+    headingClick: EventEmitter<any> = new EventEmitter<any>();
+
+    @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;
+        this.headingClick.emit(this.heading);
+    }
+
+    getAccordionIcon(): string {
+        return this.isOpen ? 'expand_less' : 'expand_more';
+    }
+
+}

lib/core/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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccordionGroupComponent } from './accordion-group.component';
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+
+    let fixture: ComponentFixture<AccordionComponent>;
+    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);
+    });
+
+});

lib/core/collapsable/accordion.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @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';
+import { AccordionGroupComponent } from './accordion-group.component';
+
+@Component({
+    selector: 'adf-accordion',
+    template: `
+        <ng-content></ng-content>
+    `,
+    host: {
+        'class': 'panel-group'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class AccordionComponent {
+    groups: Array<AccordionGroupComponent> = [];
+
+    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);
+        }
+    }
+}

lib/core/collapsable/collapsable.module.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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';
+
+@NgModule({
+    imports: [
+        MaterialModule,
+        CommonModule
+    ],
+    declarations: [
+        AccordionComponent,
+        AccordionGroupComponent
+    ],
+    exports: [
+        AccordionComponent,
+        AccordionGroupComponent
+    ]
+})
+export class CollapsableModule {}

lib/core/collapsable/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @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';

lib/core/collapsable/public-api.ts

@@ -0,0 +1,21 @@
+/*!
+ * @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';