New packages org (#2639)

New packages org

lib/core/info-drawer/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/info-drawer/info-drawer-layout.component.html

@@ -0,0 +1,11 @@
+<div class="adf-info-drawer-layout-header">
+    <div class="adf-info-drawer-layout-header-title">
+        <ng-content select="[info-drawer-title]"></ng-content>
+    </div>
+    <div class="adf-info-drawer-layout-header-buttons">
+        <ng-content select="[info-drawer-buttons]"></ng-content>
+    </div>
+</div>
+<div class="adf-info-drawer-layout-content">
+    <ng-content select="[info-drawer-content]"></ng-content>
+</div>

lib/core/info-drawer/info-drawer-layout.component.scss

@@ -0,0 +1,67 @@
+@mixin adf-info-drawer-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $adf-info-drawer-layout-background-color: mat-color($background, background) !default;
+    $adf-info-drawer-layout-title-color: mat-color($foreground, text, .54) !default;
+    $adf-info-drawer-layout-title-font-size: 20px !default;
+
+    .adf {
+        &-info-drawer-layout {
+            width: 100%;
+            display: block;
+            background-color: $adf-info-drawer-layout-background-color;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+
+            & .mat-tab-label {
+                font-weight: bold;
+                text-align: left;
+                color: mat-color($primary);
+                text-transform: uppercase;
+            }
+
+            &-header {
+                padding: 13px 0px 0px 23px;
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 40px;
+
+                &-buttons {
+                    padding-right:18px; 
+                    mat-icon {
+                        cursor: pointer;
+                    }
+                }
+
+                &-title {
+                    width: 197px;
+                    height: 32px;
+                    font-size: $adf-info-drawer-layout-title-font-size;
+                    line-height: 1.6;
+                    letter-spacing: -0.5px;
+                    text-align: left;
+                    color: $adf-info-drawer-layout-title-color;
+
+                    & > div {
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+
+            &-content {
+                padding: 10px;
+
+                > * {
+                    margin-bottom: 20px;
+                    display: block;
+                }
+
+                > *:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}

lib/core/info-drawer/info-drawer-layout.component.ts

@@ -0,0 +1,31 @@
+/*!
+ * @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, Directive, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-info-drawer-layout',
+    templateUrl: './info-drawer-layout.component.html',
+    styleUrls: ['./info-drawer-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer-layout' }
+})
+export class InfoDrawerLayoutComponent {}
+
+@Directive({ selector: '[info-drawer-title]' }) export class InfoDrawerTitleDirective {}
+@Directive({ selector: '[info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
+@Directive({ selector: '[info-drawer-content]' }) export class InfoDrawerContentDirective {}

lib/core/info-drawer/info-drawer.component.html

@@ -0,0 +1,22 @@
+<adf-info-drawer-layout>
+    <div *ngIf="title" info-drawer-title>{{title}}</div>
+    <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
+
+    <ng-content info-drawer-buttons select="[info-drawer-buttons]"></ng-content>
+
+    <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
+
+    <ng-template #tabLayout>
+        <mat-tab-group class="adf-info-drawer-tabs" (selectChange)="onTabChange($event)">
+            <ng-container *ngFor="let contentBlock of contentBlocks">
+                <mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
+                    <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
+                </mat-tab>
+            </ng-container>
+        </mat-tab-group>
+    </ng-template>
+
+    <ng-template #singleLayout>
+        <ng-content select="[info-drawer-content]"></ng-content>
+    </ng-template>
+</adf-info-drawer-layout>

lib/core/info-drawer/info-drawer.component.scss

@@ -0,0 +1,48 @@
+.adf {
+    &-info-drawer {
+        display: block;
+
+        & &-layout {
+
+            &-content {
+                padding: 0;
+
+                & > :not(.adf-info-drawer-tabs) {
+                    padding: 10px;
+
+                    > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+                }
+
+                .adf-info-drawer-tabs {
+                    & .mat-tab-body-content > * {
+                        margin-bottom: 20px;
+                        display: block;
+                    }
+
+                    & .mat-tab-body-content > *:last-child {
+                        margin-bottom: 0;
+                    }
+
+                    .mat-tab-label {
+                        flex-grow: 1;
+                    }
+
+                    .mat-ink-bar {
+                        height: 4px;
+                    }
+
+                    .mat-tab-body {
+                        padding: 10px;
+                    }
+
+                    .mat-tab-body-content {
+                        overflow: initial;
+                    }
+                }
+            }
+        }
+    }
+}

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -0,0 +1,115 @@
+/*!
+ * @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, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MaterialModule } from '../material.module';
+import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
+import { InfoDrawerComponent } from './info-drawer.component';
+
+describe('InfoDrawerComponent', () => {
+    let debugElement: DebugElement;
+    let element: HTMLElement;
+    let component: InfoDrawerComponent;
+    let fixture: ComponentFixture<InfoDrawerComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                InfoDrawerComponent,
+                InfoDrawerLayoutComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InfoDrawerComponent);
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+        debugElement = fixture.debugElement;
+    });
+
+    it('should create instance of InfoDrawerComponent', () => {
+        expect(fixture.componentInstance instanceof InfoDrawerComponent).toBe(true, 'should create InfoDrawerComponent');
+    });
+
+    it('should define InfoDrawerTabLayout', () => {
+        let infoDrawerTabLayout = element.querySelector('adf-info-drawer-layout');
+        expect(infoDrawerTabLayout).toBeDefined();
+    });
+
+    it('should emit when tab is changed', () => {
+        let tabEmitSpy = spyOn(component.currentTab, 'emit');
+        let event = {index: 1, tab: {textLabel: 'DETAILS'}};
+        component.onTabChange(event);
+        expect(tabEmitSpy).toHaveBeenCalled();
+        expect(tabEmitSpy).toHaveBeenCalledWith('DETAILS');
+    });
+
+    it('should render the title', () => {
+        component.title = 'FakeTitle';
+        fixture.detectChanges();
+        let title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('FakeTitle');
+    });
+});
+
+@Component({
+    template: `
+    <adf-info-drawer>
+        <div info-drawer-title>Fake Title Custom</div>
+    </adf-info-drawer>
+       `
+})
+class CustomInfoDrawerComponent {
+}
+
+describe('Custom InfoDrawer', () => {
+    let fixture: ComponentFixture<CustomInfoDrawerComponent>;
+    let component: CustomInfoDrawerComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                InfoDrawerComponent,
+                InfoDrawerLayoutComponent,
+                CustomInfoDrawerComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomInfoDrawerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should render the title', () => {
+        fixture.detectChanges();
+        let title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('Fake Title Custom');
+    });
+});

lib/core/info-drawer/info-drawer.component.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+@Component({
+    selector: 'adf-info-drawer-tab',
+    template: '<ng-template><ng-content></ng-content></ng-template>'
+})
+export class InfoDrawerTabComponent {
+    @Input('label') label: string = 'Main tab';
+    @ViewChild(TemplateRef) content: TemplateRef<any>;
+}
+
+@Component({
+    selector: 'adf-info-drawer',
+    templateUrl: './info-drawer.component.html',
+    styleUrls: ['./info-drawer.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-info-drawer' }
+})
+export class InfoDrawerComponent {
+    @Input()
+    title: string|null = null;
+
+    @Output()
+    currentTab: EventEmitter<any> = new EventEmitter<any>();
+
+    @ContentChildren(InfoDrawerTabComponent)
+    contentBlocks: QueryList<InfoDrawerTabComponent>;
+
+    showTabLayout(): boolean {
+        return this.contentBlocks.length > 0;
+    }
+
+    onTabChange(event: any) {
+        const tab = event.tab;
+        this.currentTab.emit(tab.textLabel);
+    }
+}

lib/core/info-drawer/info-drawer.module.ts

@@ -0,0 +1,41 @@
+/*!
+ * @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 { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
+import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule
+    ],
+    declarations: [
+        InfoDrawerLayoutComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerComponent
+    ],
+    exports: [
+        InfoDrawerLayoutComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerComponent
+    ]
+})
+export class InfoDrawerModule {}

lib/core/info-drawer/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 './info-drawer-layout.component';
+export * from './info-drawer.component';
+
+export * from './info-drawer.module';