[ADF-2559] Sidenav layout (#3119)

* First step of extraction

* Add sidenav-layout to demo-shell

* Fix some sidenav-layout styles

* Fix tests

* Add documentation

* Fix typescript transpiler's stomache

* Modify component's directive's interface

* Enrich documentation

* Another documentation enrichment

* Fix tests and mobile expanded issue

lib/core/core.module.ts

@@ -37,6 +37,7 @@ import { ToolbarModule } from './toolbar/toolbar.module';
 import { UserInfoModule } from './userinfo/userinfo.module';
 import { ViewerModule } from './viewer/viewer.module';
 import { FormModule } from './form/form.module';
+import { SidenavLayoutModule } from './sidenav-layout/sidenav-layout.module';
 import { SideBarActionModule } from './sidebar/sidebar-action.module';
 
 import { DirectiveModule } from './directives/directive.module';
@@ -122,6 +123,7 @@ export function providers() {
 @NgModule({
     imports: [
         ViewerModule,
+        SidenavLayoutModule,
         SideBarActionModule,
         PipeModule,
         CommonModule,
@@ -155,6 +157,7 @@ export function providers() {
     exports: [
         ViewerModule,
         SideBarActionModule,
+        SidenavLayoutModule,
         PipeModule,
         CommonModule,
         DirectiveModule,
@@ -186,6 +189,7 @@ export class CoreModuleLazy {
     imports: [
         ViewerModule,
         SideBarActionModule,
+        SidenavLayoutModule,
         PipeModule,
         CommonModule,
         DirectiveModule,
@@ -218,6 +222,7 @@ export class CoreModuleLazy {
     exports: [
         ViewerModule,
         SideBarActionModule,
+        SidenavLayoutModule,
         PipeModule,
         CommonModule,
         DirectiveModule,

lib/core/sidenav-layout/components/layout-container/layout-container.component.html

@@ -0,0 +1,13 @@
+<mat-sidenav-container>
+    <mat-sidenav
+        [ngClass]="{ 'sidenav--hidden': hideSidenav }"
+        [@sidenavAnimation]="sidenavAnimationState"
+        [opened]="!isMobileScreenSize"
+        [mode]="isMobileScreenSize ? 'over' : 'side'">
+        <ng-content sidenav select="[app-layout-navigation]"></ng-content>
+    </mat-sidenav>
+
+    <mat-sidenav-content [@contentAnimation]="contentAnimationState">
+        <ng-content select="[app-layout-content]"></ng-content>
+    </mat-sidenav-content>
+</mat-sidenav-container>

lib/core/sidenav-layout/components/layout-container/layout-container.component.scss

@@ -0,0 +1,39 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+ng-content {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.sidenav--hidden {
+    visibility: hidden !important;
+    width: 0 !important;
+    transform: unset !important;
+    opacity: 0 !important;
+}
+
+.mat-sidenav-container {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mat-sidenav {
+    overflow: hidden;
+}
+
+.mat-sidenav-content,
+.mat-drawer-transition .mat-drawer-content {
+    transform: unset !important;
+    transition-property: unset !important;
+    transition-duration: unset !important;
+    transition-timing-function: unset !important;
+}

lib/core/sidenav-layout/components/layout-container/layout-container.component.ts

@@ -0,0 +1,109 @@
+/*!
+ * @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, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
+
+@Component({
+    selector: 'adf-layout-container',
+    templateUrl: './layout-container.component.html',
+    styleUrls: ['./layout-container.component.scss'],
+    animations: [ sidenavAnimation, contentAnimation ]
+})
+export class LayoutContainerComponent implements OnInit, OnDestroy {
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+    @Input() mediaQueryList: MediaQueryList;
+    @Input() hideSidenav = false;
+    @Input() expandedSidenav = true;
+
+    @ViewChild(MatSidenav) sidenav: MatSidenav;
+
+    sidenavAnimationState: any;
+    contentAnimationState: any;
+
+    SIDENAV_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
+    CONTENT_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
+
+    constructor() {
+        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
+    }
+
+    ngOnInit() {
+        this.SIDENAV_STATES.MOBILE = { value: 'expanded', params: { width: this.sidenavMax } };
+        this.SIDENAV_STATES.EXPANDED = { value: 'expanded', params: { width: this.sidenavMax } };
+        this.SIDENAV_STATES.COMPACT = { value: 'compact', params: {width: this.sidenavMin } };
+
+        this.CONTENT_STATES.MOBILE = { value: 'expanded', params: { marginLeft: 0 } };
+        this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { marginLeft: this.sidenavMin } };
+        this.CONTENT_STATES.COMPACT = { value: 'compact', params: { marginLeft: this.sidenavMax } };
+
+        this.mediaQueryList.addListener(this.onMediaQueryChange);
+
+        if (this.isMobileScreenSize) {
+            this.sidenavAnimationState = this.SIDENAV_STATES.MOBILE;
+            this.contentAnimationState = this.CONTENT_STATES.MOBILE;
+        } else if (this.expandedSidenav) {
+            this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
+            this.contentAnimationState = this.CONTENT_STATES.COMPACT;
+        } else {
+            this.sidenavAnimationState = this.SIDENAV_STATES.COMPACT;
+            this.contentAnimationState = this.CONTENT_STATES.EXPANDED;
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.mediaQueryList.removeListener(this.onMediaQueryChange);
+    }
+
+    toggleMenu(): void {
+        if (this.isMobileScreenSize) {
+            this.sidenav.toggle();
+        } else {
+            this.sidenavAnimationState = this.toggledSidenavAnimation;
+            this.contentAnimationState = this.toggledContentAnimation;
+        }
+    }
+
+    private get toggledSidenavAnimation() {
+        return this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED
+            ? this.SIDENAV_STATES.COMPACT
+            : this.SIDENAV_STATES.EXPANDED;
+    }
+
+    private get toggledContentAnimation() {
+        if (this.isMobileScreenSize) {
+            return this.CONTENT_STATES.MOBILE;
+        }
+
+        if (this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED) {
+            return this.CONTENT_STATES.COMPACT;
+        } else {
+            return this.CONTENT_STATES.EXPANDED;
+        }
+    }
+
+    private get isMobileScreenSize(): boolean {
+        return this.mediaQueryList.matches;
+    }
+
+    private onMediaQueryChange() {
+        this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
+        this.contentAnimationState = this.toggledContentAnimation;
+    }
+}

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.html

@@ -0,0 +1,26 @@
+<div class="sidenav-layout">
+    <ng-container *ngIf="!isHeaderInside">
+        <ng-container class="adf-sidenav-layout-outer-header" *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
+    </ng-container>
+
+    <adf-layout-container #container
+        [sidenavMin]="sidenavMin"
+        [sidenavMax]="sidenavMax"
+        [mediaQueryList]="mediaQueryList"
+        [hideSidenav]="hideSidenav"
+        [expandedSidenav]="expandedSidenav"
+        data-automation-id="adf-layout-container"
+        class="layout__content">
+
+        <ng-container app-layout-navigation *ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
+
+        <ng-container app-layout-content>
+            <ng-container *ngIf="isHeaderInside">
+                <ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
+            </ng-container>
+            <ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
+        </ng-container>
+    </adf-layout-container>
+</div>
+
+<ng-template #emptyTemplate></ng-template>

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -0,0 +1,18 @@
+:host {
+    display: flex;
+    flex: 1;
+
+    .sidenav-layout {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .layout__content {
+            flex: 1 1 auto;
+        }
+    }
+
+    router-outlet {
+        flex: 0 0;
+    }
+}

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.spec.ts

@@ -0,0 +1,280 @@
+/*!
+ * @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.
+ */
+
+/*tslint:disable: ban*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SidenavLayoutComponent } from './sidenav-layout.component';
+import { Component, Input } from '@angular/core';
+import { LayoutModule, MediaMatcher } from '@angular/cdk/layout';
+import { PlatformModule } from '@angular/cdk/platform';
+import { MaterialModule } from '../../../material.module';
+import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
+import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
+import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'adf-layout-container',
+    template: `
+        <ng-content select="[app-layout-navigation]"></ng-content>
+        <ng-content select="[app-layout-content]"></ng-content>`
+})
+export class DummyLayoutContainerComponent {
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+    @Input() mediaQueryList: MediaQueryList;
+    @Input() hideSidenav: boolean;
+    @Input() expandedSidenav: boolean;
+    toggleMenu () {}
+}
+
+describe('SidenavLayoutComponent', () => {
+
+    let fixture: ComponentFixture<any>,
+        mediaMatcher: MediaMatcher,
+        mediaQueryList: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CommonModule,
+                PlatformModule,
+                LayoutModule,
+                MaterialModule
+            ],
+            declarations: [
+                DummyLayoutContainerComponent,
+                SidenavLayoutComponent,
+                SidenavLayoutContentDirective,
+                SidenavLayoutHeaderDirective,
+                SidenavLayoutNavigationDirective
+            ],
+            providers: [
+                MediaMatcher
+            ]
+        });
+    }));
+
+    beforeEach(() => {
+        mediaQueryList = {
+            matches: false,
+            addListener: () => {},
+            removeListener: () => {}
+        };
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('Template transclusion', () => {
+
+        @Component({
+            selector: 'adf-test-component-for-sidenav',
+            template: `
+            <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
+
+                <adf-sidenav-layout-header>
+                    <ng-template let-toggleMenu="toggleMenu">
+                        <div id="header-test" (click)="toggleMenu()"></div>
+                    </ng-template>
+                </adf-sidenav-layout-header>
+
+                <adf-sidenav-layout-navigation>
+                    <ng-template let-isMenuMinimized="isMenuMinimized">
+                        <div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
+                    </ng-template>
+                </adf-sidenav-layout-navigation>
+
+                <adf-sidenav-layout-content>
+                    <ng-template>
+                        <div id="content-test"></div>
+                    </ng-template>
+                </adf-sidenav-layout-content>
+            </adf-sidenav-layout>`
+        })
+        class SidenavLayoutTesterComponent {}
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({ declarations: [ SidenavLayoutTesterComponent ] }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutTesterComponent);
+            fixture.detectChanges();
+        });
+
+        describe('adf-sidenav-layout-navigation', () => {
+
+            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #nav-test');
+
+            it('should contain the transcluded side navigation template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement === null).toBe(false);
+            });
+
+            it('should let the isMenuMinimized property of component to be accessed by the transcluded template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement.nativeElement.innerText.trim()).toBe('variable-is-injected');
+            });
+        });
+
+        describe('adf-sidenav-layout-header', () => {
+
+            const outerHeaderSelector = By.css('.sidenav-layout > #header-test'),
+                innerHeaderSelector = By.css('.sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
+
+            it('should contain the transcluded header template outside of the layout-container', () => {
+                mediaQueryList.matches = false;
+                fixture.detectChanges();
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
+
+                expect(outerHeaderElement === null).toBe(false, 'Outer header should be shown');
+                expect(innerHeaderElement === null).toBe(true, 'Inner header should not be shown');
+            });
+
+            it('should contain the transcluded header template inside of the layout-container', () => {
+                mediaQueryList.matches = true;
+                fixture.detectChanges();
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
+
+                expect(outerHeaderElement === null).toBe(true, 'Outer header should not be shown');
+                expect(innerHeaderElement === null).toBe(false, 'Inner header should be shown');
+            });
+
+            it('should call through the layout container\'s toggleMenu method', () => {
+                mediaQueryList.matches = false;
+                fixture.detectChanges();
+                const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
+                spyOn(layoutContainerComponent, 'toggleMenu');
+
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                outerHeaderElement.triggerEventHandler('click', {});
+
+                expect(layoutContainerComponent.toggleMenu).toHaveBeenCalled();
+            });
+        });
+
+        describe('adf-sidenav-layout-content', () => {
+
+            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #content-test');
+
+            it('should contain the transcluded content template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement === null).toBe(false);
+            });
+        });
+    });
+
+    describe('General behaviour', () => {
+
+        let component: SidenavLayoutComponent;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.callFake((mediaQuery) => {
+                mediaQueryList.originalMediaQueryPassed = mediaQuery;
+                spyOn(mediaQueryList, 'addListener').and.stub();
+                spyOn(mediaQueryList, 'removeListener').and.stub();
+                return mediaQueryList;
+            });
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+
+        it('should pass through input paramters', () => {
+            component.sidenavMin = 1;
+            component.sidenavMax = 2;
+            component.hideSidenav = true;
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
+
+            expect(layoutContainerComponent.sidenavMin).toBe(component.sidenavMin);
+            expect(layoutContainerComponent.sidenavMax).toBe(component.sidenavMax);
+            expect(layoutContainerComponent.hideSidenav).toBe(component.hideSidenav);
+            expect(layoutContainerComponent.expandedSidenav).toBe(component.expandedSidenav);
+            expect(layoutContainerComponent.mediaQueryList.originalMediaQueryPassed).toBe(`(max-width: 600px)`);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            expect(mediaQueryList.addListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.addListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            fixture.destroy();
+
+            expect(mediaQueryList.removeListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.removeListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+    });
+
+    describe('toggleMenu', () => {
+
+        let component;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+
+        it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
+            mediaQueryList.matches = false;
+            component.isMenuMinimized = false;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(true);
+        });
+
+        it('should set the isMenuMinimized to false if the mediaQueryList.matches is true (we are on mobile)', () => {
+            mediaQueryList.matches = true;
+            component.isMenuMinimized = true;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(false);
+        });
+    });
+});

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -0,0 +1,101 @@
+/*!
+ * @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, ContentChild, Input, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
+import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
+import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
+
+@Component({
+    selector: 'adf-sidenav-layout',
+    templateUrl: './sidenav-layout.component.html',
+    styleUrls: ['./sidenav-layout.component.scss']
+})
+export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
+
+    static STEP_OVER = 600;
+
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+    @Input() stepOver: number;
+    @Input() hideSidenav = false;
+    @Input() expandedSidenav = true;
+
+    @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective;
+    @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
+    @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
+
+    @ViewChild('container') container: any;
+    @ViewChild('emptyTemplate') emptyTemplate: any;
+
+    mediaQueryList: MediaQueryList;
+    isMenuMinimized;
+    templateContext = {
+        toggleMenu: () => {},
+        isMenuMinimized: () => this.isMenuMinimized
+    };
+
+    constructor(private mediaMatcher: MediaMatcher) {
+        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
+    }
+
+    ngOnInit() {
+        const stepOver = this.stepOver || SidenavLayoutComponent.STEP_OVER;
+        this.isMenuMinimized = !this.expandedSidenav;
+        this.mediaQueryList = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
+        this.mediaQueryList.addListener(this.onMediaQueryChange);
+    }
+
+    ngAfterViewInit() {
+        this.templateContext.toggleMenu = this.toggleMenu.bind(this);
+    }
+
+    ngOnDestroy(): void {
+        this.mediaQueryList.removeListener(this.onMediaQueryChange);
+    }
+
+    toggleMenu() {
+        if (!this.mediaQueryList.matches) {
+            this.isMenuMinimized = !this.isMenuMinimized;
+        } else {
+            this.isMenuMinimized = false;
+        }
+
+        this.container.toggleMenu();
+    }
+
+    get isHeaderInside() {
+        return this.mediaQueryList.matches;
+    }
+
+    get headerTemplate(): TemplateRef<any> {
+        return this.headerDirective && this.headerDirective.template || this.emptyTemplate;
+    }
+
+    get navigationTemplate(): TemplateRef<any> {
+        return this.navigationDirective && this.navigationDirective.template || this.emptyTemplate;
+    }
+
+    get contentTemplate(): TemplateRef<any> {
+        return this.contentDirective && this.contentDirective.template || this.emptyTemplate;
+    }
+
+    onMediaQueryChange() {
+        this.isMenuMinimized = false;
+    }
+}

lib/core/sidenav-layout/directives/sidenav-layout-content.directive.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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 { ContentChild, Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'adf-sidenav-layout-content'
+})
+export class SidenavLayoutContentDirective {
+    @ContentChild(TemplateRef)
+    public template: TemplateRef<any>;
+}

lib/core/sidenav-layout/directives/sidenav-layout-header.directive.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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 { ContentChild, Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'adf-sidenav-layout-header'
+})
+export class SidenavLayoutHeaderDirective {
+    @ContentChild(TemplateRef)
+    public template: TemplateRef<any>;
+}

lib/core/sidenav-layout/directives/sidenav-layout-navigation.directive.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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 { ContentChild, Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'adf-sidenav-layout-navigation'
+})
+export class SidenavLayoutNavigationDirective {
+    @ContentChild(TemplateRef)
+    public template: TemplateRef<any>;
+}

lib/core/sidenav-layout/helpers/animations.ts

@@ -0,0 +1,30 @@
+/*!
+ * @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 { trigger, transition, animate, style, state, AnimationTriggerMetadata } from '@angular/animations';
+
+export const sidenavAnimation: AnimationTriggerMetadata = trigger('sidenavAnimation', [
+    state('expanded', style({ width: '{{ width }}px' }), { params : { width: 0 } }),
+    state('compact',  style({ width: '{{ width }}px' }), { params : { width: 0 } }),
+    transition('compact <=> expanded', animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)'))
+]);
+
+export const contentAnimation: AnimationTriggerMetadata = trigger('contentAnimation', [
+    state('expanded', style({ 'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
+    state('compact',  style({'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
+    transition('expanded <=> compact', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
+]);

lib/core/sidenav-layout/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/sidenav-layout/public-api.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 './components/sidenav-layout/sidenav-layout.component';

lib/core/sidenav-layout/sidenav-layout.module.ts

@@ -0,0 +1,47 @@
+/*!
+ * @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 { SidenavLayoutContentDirective } from './directives/sidenav-layout-content.directive';
+import { SidenavLayoutHeaderDirective } from './directives/sidenav-layout-header.directive';
+import { SidenavLayoutNavigationDirective } from './directives/sidenav-layout-navigation.directive';
+import { SidenavLayoutComponent } from '.';
+import { LayoutContainerComponent } from './components/layout-container/layout-container.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule
+    ],
+    exports: [
+        SidenavLayoutHeaderDirective,
+        SidenavLayoutContentDirective,
+        SidenavLayoutNavigationDirective,
+        SidenavLayoutComponent,
+        LayoutContainerComponent
+    ],
+    declarations: [
+        SidenavLayoutHeaderDirective,
+        SidenavLayoutContentDirective,
+        SidenavLayoutNavigationDirective,
+        SidenavLayoutComponent,
+        LayoutContainerComponent
+    ]
+})
+export class SidenavLayoutModule {}