@bmat/angular/fesm2015/bmat-angular-layout.js

import { CommonModule } from '@angular/common';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Directive, Input, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMContentComponent {
}
BMContentComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-content-container',
                template: "<ng-content></ng-content>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                styles: ["bm-content-container{flex:1 1 0;overflow-x:auto;height:calc(100% - 48px - 3em);box-sizing:content-box;padding:1em 1.5em}"]
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMHeaderComponent {
    constructor() {
        this.role = 'heading';
    }
}
BMHeaderComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-header',
                template: "<ng-content></ng-content>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                styles: ["bm-header{padding:6px 16px;display:flex;flex-direction:row-reverse;align-items:center;background-color:var(--header-background-color,#3e71ad);color:var(--header-color,#f8f8f8);font-weight:600;font-size:2em;flex:1 1 100%;box-sizing:border-box}"]
            }] }
];
BMHeaderComponent.propDecorators = {
    role: [{ type: HostBinding, args: ['attr.role',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMCollapsableDirective {
}
BMCollapsableDirective.decorators = [
    { type: Directive, args: [{
                // tslint:disable-next-line:directive-selector
                selector: '[bmCollapsable]',
            },] }
];
BMCollapsableDirective.propDecorators = {
    collapse: [{ type: Input }, { type: HostBinding, args: ['attr.collapse',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMSidenavContainerComponent {
    constructor() {
        this.role = 'navigation';
        this.openMenu = new EventEmitter();
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set open(v) {
        this._isOpen = v;
        if (this.collapsableChilds) {
            this.collapsableChilds.forEach((/**
             * @param {?} child
             * @return {?}
             */
            (child) => (child.collapse = v ? null : true)));
        }
    }
    /**
     * @return {?}
     */
    get open() {
        return this._isOpen;
    }
    /**
     * @return {?}
     */
    toggle() {
        this.open = !this.open;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    animationDone(event) {
        if (event.fromState === 'expand' && event.toState === 'collapse') {
            this.openMenu.emit(false);
        }
        if (event.fromState === 'collapse' && event.toState === 'expand') {
            this.openMenu.emit(true);
        }
    }
}
BMSidenavContainerComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-sidenav',
                template: "<div class=\"bm-sidenav__container\" [@stretch]=\"(open ? 'expand' : 'collapse')\" (@stretch.done)=\"animationDone($event)\">\n  <div class=\"bm-sidenav__toggle-container\">\n    <button class=\"bm-sidenav__toggle-button\" i18n-arial-label aria-label=\"Toggle menu\" i18n-title title=\"Toggle menu\" (click)=\"toggle()\">\n      <i class=\"fas fa-chevron-right\" aria-hidden=\"true\" [@rotate]=\"(open ? 'expand' : 'collapse')\"></i>\n    </button>\n  </div>\n  <ng-content></ng-content>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                animations: [
                    trigger('stretch', [
                        state('expand', style({ width: '14rem', 'max-width': '100%' })),
                        state('collapse', style({ width: '4em', 'max-width': 'initial' })),
                        transition('expand => collapse', [
                            style({
                                width: '14rem',
                                'max-width': '100%',
                            }),
                            animate('0.2s ease-in'),
                        ]),
                        transition('collapse => expand', [
                            style({
                                width: '4em',
                                'max-width': 'initial',
                            }),
                            animate('0.2s ease-out'),
                        ]),
                    ]),
                    trigger('rotate', [
                        state('expand', style({ transform: 'rotate(0)' })),
                        state('collapse', style({ transform: 'rotate(-180deg)' })),
                        transition('expand => collapse', animate('0.2s ease-in')),
                        transition('collapse => expand', animate('0.2s ease-out')),
                    ]),
                ],
                styles: ["bm-sidenav{box-sizing:content-box;height:calc(100% - 48px);position:relative;display:inline-block;color:var(--header-color,#f8f8f8);flex:0 1 auto}.bm-sidenav__container{height:100%;display:flex}.bm-sidenav__toggle-container{position:absolute;right:-1.2em;top:50%}.bm-sidenav__toggle-button{vertical-align:middle;border:none;background:0 0;margin-left:auto;margin-right:0;padding:0;width:.6em;height:1.5em;color:var(--header-background-color,#3e71ad)}.bm-sidenav__sections-container{padding:0;list-style:none;margin:0;height:100%;width:4.3em;background-color:var(--header-background-color,#3e71ad)}.bm-sidenav-section-link{color:#f8f8f8;display:block;font-size:1em;text-align:center;text-decoration:none}.bm-sidenav-section-link__icon{display:inline-block;font-size:1.7em;padding:.5em 0}.bm-sidenav-section-link--selected{background-color:var(--header-color,#f8f8f8);color:var(--header-background-color,#3e71ad)}.bm-sidenav-submenu__container{background-color:var(--header-color,#f8f8f8);height:100%;flex:1 1 auto}.bm-sidenav-product-logo{width:100%;text-align:center;position:relative;display:block;height:5em}.bm-sidenav-product-logo__graphic{position:absolute;top:-.5em;left:.3em;display:inline-block;color:var(--header-background-color,#3e71ad);height:3.2em;width:3.2em}.bm-sidenav-subsection{padding:0 .5em}.bm-sidenav-subsection--first{margin-top:3rem}.bm-sidenav-subsection__separator-line{border:1px solid #d8d8d8}.bm-sidenav-subsection-title{height:14px;width:100%;color:#333;font-size:12px;font-weight:600;line-height:14px;text-transform:uppercase;padding:.5em}.bm-sidenav-subsection-menu{padding:0;list-style:none;margin:0;width:100%;color:var(--header-background-color,#3e71ad)}.bm-sidenav-subsection-menu__item{padding:.5em;display:block}.bm-sidenav-subsection-menu__item--selected{background-color:#eaeaea}"]
            }] }
];
BMSidenavContainerComponent.propDecorators = {
    collapsableChilds: [{ type: ContentChildren, args: [BMCollapsableDirective,] }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    open: [{ type: HostBinding, args: ['attr.open',] }, { type: Input }],
    openMenu: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMATLayoutModule {
    // tslint:disable-next-line:function-name
    /**
     * @return {?}
     */
    static forRoot() {
        return {
            ngModule: BMATLayoutModule,
            providers: [],
        };
    }
}
BMATLayoutModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                declarations: [
                    BMCollapsableDirective,
                    BMContentComponent,
                    BMHeaderComponent,
                    BMSidenavContainerComponent,
                ],
                exports: [
                    BMCollapsableDirective,
                    BMContentComponent,
                    BMHeaderComponent,
                    BMSidenavContainerComponent,
                ],
                providers: [],
            },] }
];

export { BMATLayoutModule, BMCollapsableDirective, BMContentComponent, BMHeaderComponent, BMSidenavContainerComponent };
//# sourceMappingURL=bmat-angular-layout.js.map