angular-admin-lte/angular-admin-lte.js

Admin-lte implémentation for Angular 4+

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, Output, Renderer2, SkipSelf, ViewChild, ViewChildren, ViewContainerRef, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavigationEnd, NavigationStart, PRIMARY_OUTLET, Router, RouterModule } from '@angular/router';
import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/BehaviorSubject';
import { Title } from '@angular/platform-browser';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/pluck';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';

class RoutingService {
    /**
     * \@method constructor
     * @param {?} router
     */
    constructor(router$$1) {
        this.router = router$$1;
        this.onChange = new BehaviorSubject$1(undefined);
        this.init();
    }
    /**
     * [init description]
     * \@method init
     * @return {?}
     */
    init() {
        this.router.events.subscribe(routeEvent => {
            if (routeEvent instanceof NavigationEnd) {
                let /** @type {?} */ route = this.router.routerState.root.snapshot, /** @type {?} */ tmpUrl = '', /** @type {?} */ url = '', /** @type {?} */ paths = [], /** @type {?} */ rootRoot = true;
                while (route.children.length) {
                    route = route.firstChild;
                    tmpUrl = `/${this.createUrl(route)}`;
                    if (route.outlet !== PRIMARY_OUTLET || (!route.routeConfig.path && !rootRoot)) {
                        continue;
                    }
                    rootRoot = false;
                    if (route.params || route.data) {
                        for (let /** @type {?} */ key in route.params) {
                            if (route.data['title']) {
                                route.data['title'] = route.data['title'].replace(`:${key}`, route.params[key]);
                            }
                            if (route.data['breadcrumbs']) {
                                route.data['breadcrumbs'] = route.data['breadcrumbs'].replace(`:${key}`, route.params[key]);
                            }
                            if (route.data['description']) {
                                route.data['description'] = route.data['description'].replace(`:${key}`, route.params[key]);
                            }
                        }
                    }
                    if (tmpUrl === '/') {
                        paths.push(this.createBreadcrumb(route, tmpUrl));
                    }
                    else {
                        url += tmpUrl;
                        paths.push(this.createBreadcrumb(route, url));
                    }
                }
                this.onChange.next(paths);
            }
        });
    }
    /**
     * [createBreadcrumb description]
     * \@method createBreadcrumb
     * @param {?} route
     * @param {?} url
     * @return {?}
     */
    createBreadcrumb(route, url) {
        if (route.children.length !== 0 && route.firstChild.routeConfig.path) {
            var /** @type {?} */ isUrl = true;
            if (url !== '/' && !route.routeConfig.loadChildren && !route.routeConfig.component && !this.isChildrenSelfRoute(route)) {
                isUrl = false;
            }
        }
        return {
            data: route.data,
            params: route.params,
            url: isUrl ? url : null
        };
    }
    /**
     * [isChildrenSelfRoute description]
     * \@method isChildrenSelfRoute
     * @param {?} route
     * @return {?}
     */
    isChildrenSelfRoute(route) {
        let /** @type {?} */ children = route.routeConfig.children;
        for (let /** @type {?} */ index in children) {
            if (children[index].path === '' && (children[index].component || children[index].loadChildren)) {
                return true;
            }
        }
    }
    /**
     * [createUrl description]
     * \@method createUrl
     * @param {?} route
     * @return {?}
     */
    createUrl(route) {
        return route.url.map(urlSegment => urlSegment.toString()).join('/');
    }
}
RoutingService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
RoutingService.ctorParameters = () => [
    { type: Router, },
];

class BreadcrumbsComponent {
    /**
     * \@method constructor
     * @param {?} routingService
     * @param {?} changeDetectorRef
     */
    constructor(routingService, changeDetectorRef) {
        this.routingService = routingService;
        this.changeDetectorRef = changeDetectorRef;
        this.homeIcon = 'fa fa-home';
    }
    /**
     * \@method ngOnInit
     * @return {?}
     */
    ngOnInit() {
        this.subscription = this.routingService.onChange.subscribe(value => {
            this.breadcrumbs = value;
        });
    }
    /**
     * \@method ngOnDestroy
     * @return {?}
     */
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
BreadcrumbsComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-breadcrumbs',
                template: `
    <ol class="breadcrumb">
      <li *ngFor="let breadcrumb of breadcrumbs; let first = first; let last = last" [class.active]="last || !breadcrumb.url">
        <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">
          <i *ngIf="first" ngClass="{{homeIcon}}"></i>
          <ng-template [ngIf]="breadcrumb.data.breadcrumbs">{{breadcrumb.data.breadcrumbs}}</ng-template>
          <ng-template [ngIf]="!breadcrumb.data.breadcrumbs">{{breadcrumb.data.title}}</ng-template>
        </a>
        <ng-template [ngIf]="!breadcrumb.url">
          <i *ngIf="first" ngClass="{{homeIcon}}"></i>
          <ng-template [ngIf]="breadcrumb.data.breadcrumbs">{{breadcrumb.data.breadcrumbs}}</ng-template>
          <ng-template [ngIf]="!breadcrumb.data.breadcrumbs">{{breadcrumb.data.title}}</ng-template>
        </ng-template>
      </li>
    </ol>
  `,
                styles: [`
    .breadcrumb {
      float: right;
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      position: absolute;
      top: 15px;
      right: 10px;
      border-radius: 2px;
    }

    .breadcrumb > li > a {
      color: #444;
      text-decoration: none;
      display: inline-block;
    }

    .breadcrumb > li > a > .fa,
    .breadcrumb > li > a > .glyphicon,
    .breadcrumb > li > a > .ion {
      margin-right: 5px;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
BreadcrumbsComponent.ctorParameters = () => [
    { type: RoutingService, },
    { type: ChangeDetectorRef, },
];
BreadcrumbsComponent.propDecorators = {
    'homeIcon': [{ type: Input },],
};

class BreadcrumbsModule {
}
BreadcrumbsModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, RouterModule],
                exports: [BreadcrumbsComponent],
                declarations: [BreadcrumbsComponent]
            },] },
];
/**
 * @nocollapse
 */
BreadcrumbsModule.ctorParameters = () => [];

class LayoutStore {
    /**
     * \@method constructor
     * @param {?} layoutConfig
     */
    constructor(layoutConfig) {
        this.initialLayoutState = {
            isSidebarLeftCollapsed: false,
            isSidebarLeftExpandOnOver: false,
            isSidebarLeftMouseOver: false,
            isSidebarLeftMini: true,
            sidebarRightSkin: 'dark',
            isSidebarRightCollapsed: true,
            isSidebarRightOverContent: true,
            layout: 'normal',
            sidebarLeftMenu: [],
            skin: 'blue',
        };
        if (layoutConfig) {
            this.initialLayoutState = Object.assign(this.initialLayoutState, layoutConfig);
        }
        this._layoutState = new BehaviorSubject$1(this.initialLayoutState);
        this.layoutState = this._layoutState.asObservable();
    }
    /**
     * [windowInnerHeight description]
     * \@method windowInnerHeight
     * @return {?}
     */
    get windowInnerHeight() {
        return (this.layoutState.pluck('windowInnerHeight').distinctUntilChanged());
    }
    /**
     * [windowInnerWidth description]
     * \@method windowInnerWidth
     * @return {?}
     */
    get windowInnerWidth() {
        return (this.layoutState.pluck('windowInnerWidth').distinctUntilChanged());
    }
    /**
     * [isSidebarLeftCollapsed description]
     * @return {?}
     */
    get isSidebarLeftCollapsed() {
        return (this.layoutState.pluck('isSidebarLeftCollapsed').distinctUntilChanged());
    }
    /**
     * [isSidebarLeftExpandOnOver description]
     * \@method isSidebarLeftExpandOnOver
     * @return {?}
     */
    get isSidebarLeftExpandOnOver() {
        return (this.layoutState.pluck('isSidebarLeftExpandOnOver').distinctUntilChanged());
    }
    /**
     * [isSidebarLeftMouseOver description]
     * \@method isSidebarLeftMouseOver
     * @return {?}
     */
    get isSidebarLeftMouseOver() {
        return (this.layoutState.pluck('isSidebarLeftMouseOver').distinctUntilChanged());
    }
    /**
     * [isSidebarLeftMini description]
     * \@method isSidebarLeftMini
     * @return {?}
     */
    get isSidebarLeftMini() {
        return (this.layoutState.pluck('isSidebarLeftMini').distinctUntilChanged());
    }
    /**
     * [sidebarRightSkin description]
     * \@method sidebarRightSkin
     * @return {?}
     */
    get sidebarRightSkin() {
        return (this.layoutState.pluck('sidebarRightSkin').distinctUntilChanged());
    }
    /**
     * [isSidebarRightCollapsed description]
     * @return {?}
     */
    get isSidebarRightCollapsed() {
        return (this.layoutState.pluck('isSidebarRightCollapsed').distinctUntilChanged());
    }
    /**
     * [isSidebarRightOverContent description]
     * \@method isSidebarRightOverContent
     * @return {?}
     */
    get isSidebarRightOverContent() {
        return (this.layoutState.pluck('isSidebarRightOverContent').distinctUntilChanged());
    }
    /**
     * [sidebarLeftMenu description]
     * \@method sidebarLeftMenu
     * @return {?}
     */
    get sidebarLeftMenu() {
        return (this.layoutState.pluck('sidebarLeftMenu').distinctUntilChanged());
    }
    /**
     * [sidebarLeftElementHeight description]
     * \@method sidebarLeftElementHeight
     * @return {?}
     */
    get sidebarLeftElementHeight() {
        return (this.layoutState.pluck('sidebarLeftElementHeight').distinctUntilChanged());
    }
    /**
     * [layoutType description]
     * \@method layoutType
     * @return {?}
     */
    get layout() {
        return (this.layoutState.pluck('layout').distinctUntilChanged());
    }
    /**
     * [skin description]
     * \@method skin
     * @return {?}
     */
    get skin() {
        return (this.layoutState.pluck('skin').distinctUntilChanged());
    }
    /**
     * [wrapperClasses description]
     * \@method wrapperClasses
     * @return {?}
     */
    get wrapperClasses() {
        return (this.layoutState.pluck('wrapperClasses').distinctUntilChanged());
    }
    /**
     * [sidebarLeftCollapsed description]
     * \@method sidebarLeftCollapsed
     * @param {?=} value
     * @return {?}
     */
    sidebarLeftCollapsed(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftCollapsed: value }));
    }
    /**
     * [sidebarLeftExpandOnOver description]
     * \@method sidebarLeftExpandOnOver
     * @param {?=} value
     * @return {?}
     */
    sidebarLeftExpandOnOver(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftExpandOnOver: value }));
    }
    /**
     * [setSidebarLeftElementHeight description]
     * \@method setSidebarLeftElementHeight
     * @param {?} value
     * @return {?}
     */
    setSidebarLeftElementHeight(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { sidebarLeftElementHeight: value }));
    }
    /**
     * [setSidebarRightSkin description]
     * \@method setSidebarRightSkin
     * @param {?=} value
     * @return {?}
     */
    setSidebarRightSkin(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { sidebarRightSkin: value }));
    }
    /**
     * [sidebarLeftMouseOver description]
     * \@method sidebarLeftMouseOver
     * @param {?=} value
     * @return {?}
     */
    sidebarLeftMouseOver(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMouseOver: value }));
    }
    /**
     * [sidebarLeftMini description]
     * \@method sidebarLeftMini
     * @param {?=} value
     * @return {?}
     */
    sidebarLeftMini(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMini: value }));
    }
    /**
     * [sidebarRightCollapsed description]
     * \@method sidebarRightCollapsed
     * @param {?=} value
     * @return {?}
     */
    sidebarRightCollapsed(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightCollapsed: value }));
    }
    /**
     * [sidebarRightOverContent description]
     * \@method sidebarRightOverContent
     * @param {?=} value
     * @return {?}
     */
    sidebarRightOverContent(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightOverContent: value }));
    }
    /**
     * [setSidebarLeftMenu description]
     * \@method setSidebarLeftMenu
     * @param {?} value
     * @return {?}
     */
    setSidebarLeftMenu(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { sSidebarLeftMenu: value }));
    }
    /**
     * [setLayout description]
     * \@method setLayout
     * @param {?} value
     * @return {?}
     */
    setLayout(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { layout: value }));
    }
    /**
     * [setSkin description]
     * \@method setSkin
     * @param {?} value
     * @return {?}
     */
    setSkin(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { skin: value }));
    }
    /**
     * [setWrapperClasses description]
     * \@method setWrapperClasses
     * @param {?} value
     * @return {?}
     */
    setWrapperClasses(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { wrapperClasses: value }));
    }
    /**
     * [setWindowInnerHeight description]
     * \@method setWindowInnerHeight
     * @param {?} value
     * @return {?}
     */
    setWindowInnerHeight(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerHeight: value }));
    }
    /**
     * [setWindowInnerWidth description]
     * \@method setWindowInnerWidth
     * @param {?} value
     * @return {?}
     */
    setWindowInnerWidth(value) {
        this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerWidth: value }));
    }
}

class SidebarRightService {
    /**
     * [offsetHeight description]
     * \@method offsetHeight
     * @return {?}
     */
    get offsetHeight() {
        return this.elementRef ? this.elementRef.nativeElement.offsetHeight : null;
    }
    /**
     * [scrollHeight description]
     * \@method scrollHeight
     * @return {?}
     */
    get scrollHeight() {
        return this.elementRef ? this.elementRef.nativeElement.scrollHeight : null;
    }
}
SidebarRightService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
SidebarRightService.ctorParameters = () => [];

class HeaderService {
    /**
     * [offsetHeight description]
     * \@method offsetHeight
     * @return {?}
     */
    get offsetHeight() {
        return this.elementRef.nativeElement.offsetHeight;
    }
}
HeaderService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
HeaderService.ctorParameters = () => [];

class FooterService {
    /**
     * [offsetHeight description]
     * \@method offsetHeight
     * @return {?}
     */
    get offsetHeight() {
        return this.elementRef.nativeElement.offsetHeight;
    }
}
FooterService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
FooterService.ctorParameters = () => [];

class ContentComponent {
    /**
     * \@method constructor
     * @param {?} layoutStore
     * @param {?} routingService
     * @param {?} titleService
     * @param {?} elementRef
     * @param {?} changeDetectorRef
     * @param {?} sidebarRightService
     * @param {?} headerService
     * @param {?} footerService
     * @param {?} router
     */
    constructor(layoutStore, routingService, titleService, elementRef, changeDetectorRef, sidebarRightService, headerService, footerService, router$$1) {
        this.layoutStore = layoutStore;
        this.routingService = routingService;
        this.titleService = titleService;
        this.elementRef = elementRef;
        this.changeDetectorRef = changeDetectorRef;
        this.sidebarRightService = sidebarRightService;
        this.headerService = headerService;
        this.footerService = footerService;
        this.router = router$$1;
    }
    /**
     * \@method ngOnInit
     * @return {?}
     */
    ngOnInit() {
        this.titleTag = this.titleService.getTitle();
        this.routingService.onChange.subscribe((value) => {
            if (value && value[value.length - 1]) {
                this.titleService.setTitle(this.getTitle(value[value.length - 1].data['title']));
                this.header = value[value.length - 1].data['title'];
                this.description = value[value.length - 1].data['description'];
            }
            this.changeDetectorRef.markForCheck();
        });
        this.router.events.subscribe((routeEvent) => {
            if (routeEvent instanceof NavigationStart) {
                this.navigationEnd = false;
            }
            if (routeEvent instanceof NavigationEnd) {
                this.navigationEnd = true;
                this.setContentMinHeight();
            }
        });
        this.layoutStore.sidebarLeftElementHeight.subscribe((value) => {
            this.sidebarLeftHeight = value;
            this.setContentMinHeight();
        });
        this.layoutStore.layout.subscribe((value) => {
            this.layout = value;
            this.setContentMinHeight();
        });
        this.layoutStore.windowInnerHeight.subscribe((value) => {
            this.windowInnerHeight = value;
            this.setContentMinHeight();
        });
        this.heightStyle = this.windowInnerHeight;
    }
    /**
     * @return {?}
     */
    get scrollHeight() {
        return this.contentInnerElement.nativeElement.scrollHeight;
    }
    /**
     * [getTitle description]
     * \@method getTitle
     * @param {?} title
     * @return {?}
     */
    getTitle(title) {
        return title ? `${title} - ${this.titleTag}` : this.titleTag;
    }
    /**
     * [setMinHeight description]
     * \@method setMinHeight
     * @return {?}
     */
    setContentMinHeight() {
        if (this.navigationEnd) {
            let /** @type {?} */ heightStyle, /** @type {?} */ headerFooterOffsetHeight = this.headerService.offsetHeight + this.footerService.offsetHeight;
            if (this.layout === 'fixed') {
                heightStyle = this.windowInnerHeight - this.footerService.offsetHeight;
            }
            else {
                let /** @type {?} */ sidebarRight = this.sidebarRightService.scrollHeight ? this.sidebarRightService.scrollHeight - this.headerService.offsetHeight : 0;
                heightStyle = Math.max(this.windowInnerHeight - headerFooterOffsetHeight, this.sidebarLeftHeight - this.headerService.offsetHeight, sidebarRight);
            }
            if (heightStyle && heightStyle !== this.heightStyle) {
                if (this.scrollHeight > heightStyle) {
                    heightStyle = null;
                }
                this.heightStyle = heightStyle;
                this.changeDetectorRef.detectChanges();
            }
        }
    }
}
ContentComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-content',
                template: `
    <div class="content-wrapper" [style.min-height.px]="heightStyle">
      <div #contentInnerElement class="content-inner">
        <ng-content select="[mk-layout-content-before-header]"></ng-content>
        <section *ngIf="header || description" class="content-header">
          <h1>
            {{header}}
            <small *ngIf="description">{{description}}</small>
          </h1>
          <mk-breadcrumbs></mk-breadcrumbs>
        </section>
        <ng-content select="[mk-layout-content-after-header]"></ng-content>
        <section class="content">
          <ng-content></ng-content>
        </section>
      </div>
    </div>
  `,
                styles: [`
    :host {
      display: block;
    }

    .content-wrapper {
         position: relative;
    }
  `],
                changeDetection: ChangeDetectionStrategy.OnPush
            },] },
];
/**
 * @nocollapse
 */
ContentComponent.ctorParameters = () => [
    { type: LayoutStore, },
    { type: RoutingService, },
    { type: Title, },
    { type: ElementRef, },
    { type: ChangeDetectorRef, },
    { type: SidebarRightService, },
    { type: HeaderService, },
    { type: FooterService, },
    { type: Router, },
];
ContentComponent.propDecorators = {
    'contentInnerElement': [{ type: ViewChild, args: ['contentInnerElement',] },],
};

class ContentModule {
}
ContentModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, RouterModule, BreadcrumbsModule],
                exports: [ContentComponent],
                declarations: [ContentComponent]
            },] },
];
/**
 * @nocollapse
 */
ContentModule.ctorParameters = () => [];

/**
 * Footer Left
 */
class FooterLeftComponent {
}
FooterLeftComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-footer-left',
                template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
            },] },
];
/**
 * @nocollapse
 */
FooterLeftComponent.ctorParameters = () => [];
FooterLeftComponent.propDecorators = {
    'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
 * Footer Right
 */
class FooterRightComponent {
}
FooterRightComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-footer-right',
                template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
            },] },
];
/**
 * @nocollapse
 */
FooterRightComponent.ctorParameters = () => [];
FooterRightComponent.propDecorators = {
    'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
class FooterComponent {
    /**
     * @param {?} elementRef
     * @param {?} footerService
     */
    constructor(elementRef, footerService) {
        this.elementRef = elementRef;
        this.footerService = footerService;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.footerService.elementRef = this.elementRef;
    }
}
FooterComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-footer',
                template: `
    <footer class="main-footer">
      <div class="pull-right hidden-xs">
        <ng-template [ngTemplateOutlet]="footerRightComponent?.templateRef"></ng-template>
      </div>
      <ng-template [ngTemplateOutlet]="footerLeftComponent?.templateRef"></ng-template>
    </footer>
  `,
                styles: [`
    :host {
      display: block;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
FooterComponent.ctorParameters = () => [
    { type: ElementRef, },
    { type: FooterService, },
];
FooterComponent.propDecorators = {
    'footerLeftComponent': [{ type: ContentChild, args: [FooterLeftComponent,] },],
    'footerRightComponent': [{ type: ContentChild, args: [FooterRightComponent,] },],
};

class FooterModule {
}
FooterModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                exports: [FooterComponent, FooterLeftComponent, FooterRightComponent],
                declarations: [FooterComponent, FooterLeftComponent, FooterRightComponent]
            },] },
];
/**
 * @nocollapse
 */
FooterModule.ctorParameters = () => [];

/**
 * Header Logo
 */
class HeaderLogoComponent {
}
HeaderLogoComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-header-logo',
                template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
            },] },
];
/**
 * @nocollapse
 */
HeaderLogoComponent.ctorParameters = () => [];
HeaderLogoComponent.propDecorators = {
    'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
 * Header Logo Mini
 */
class HeaderLogoMiniComponent {
}
HeaderLogoMiniComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-header-logo-mini',
                template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
            },] },
];
/**
 * @nocollapse
 */
HeaderLogoMiniComponent.ctorParameters = () => [];
HeaderLogoMiniComponent.propDecorators = {
    'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
 * Header
 */
class HeaderComponent {
    /**
     * \@method constructor
     * @param {?} layoutStore
     * @param {?} ngZone
     * @param {?} renderer2
     * @param {?} elementRef
     * @param {?} headerService
     */
    constructor(layoutStore, ngZone, renderer2, elementRef, headerService) {
        this.layoutStore = layoutStore;
        this.ngZone = ngZone;
        this.renderer2 = renderer2;
        this.elementRef = elementRef;
        this.headerService = headerService;
        this.isSidebarLeftToggle = true;
        this.isSidebarRightToggle = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * \@method ngAfterViewInit
     * @return {?}
     */
    ngAfterViewInit() {
        this.headerService.elementRef = this.headerElement;
        if (this.sidebarLeftToggleElement) {
            this.layoutStore.isSidebarLeftCollapsed.subscribe((value) => {
                this.isSidebarLeftCollapsed = value;
            });
            this.ngZone.runOutsideAngular(() => {
                this.renderer2.listen(this.sidebarLeftToggleElement.nativeElement, 'click', (event) => {
                    event.preventDefault();
                    this.layoutStore.sidebarLeftCollapsed(!this.isSidebarLeftCollapsed);
                });
            });
        }
        if (this.sidebarRightToggleElement) {
            this.layoutStore.isSidebarRightCollapsed.subscribe((value) => {
                this.isSidebarRightCollapsed = value;
            });
            this.ngZone.runOutsideAngular(() => {
                this.renderer2.listen(this.sidebarRightToggleElement.nativeElement, 'click', (event) => {
                    event.preventDefault();
                    this.layoutStore.sidebarRightCollapsed(!this.isSidebarRightCollapsed);
                });
            });
        }
    }
}
HeaderComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-header',
                template: `
    <header #headerElement class="main-header">
      <a href="/" class="logo">
        <span class="logo-mini"><ng-template [ngTemplateOutlet]="headerLogoMiniComponent?.templateRef"></ng-template></span>
        <span class="logo-lg"><ng-template [ngTemplateOutlet]="headerLogoComponent?.templateRef"></ng-template></span>
      </a>
      <nav *ngIf="isSidebarLeftToggle" class="navbar navbar-static-top">
        <a #sidebarLeftToggleElement href="#" class="sidebar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div *ngIf="isSidebarRightToggle" class="sidebar-right-toggle">
          <a #sidebarRightToggleElement href="#"><i class="fa fa-gears"></i></a>
        </div>
        <ng-content></ng-content>
      </nav>
    </header>
  `,
                styles: [`
    :host {
      display: block;
    }

    .sidebar-right-toggle {
      float: right;
    }

    .sidebar-right-toggle a {
      padding: 15px;
      display: block;
      line-height: 20px;
      cursor: pointer;
    }
  `]
            },] },
];
/**
 * @nocollapse
 */
HeaderComponent.ctorParameters = () => [
    { type: LayoutStore, },
    { type: NgZone, },
    { type: Renderer2, },
    { type: ElementRef, },
    { type: HeaderService, },
];
HeaderComponent.propDecorators = {
    'isSidebarLeftToggle': [{ type: Input },],
    'isSidebarRightToggle': [{ type: Input },],
    'headerLogoComponent': [{ type: ContentChild, args: [HeaderLogoComponent,] },],
    'headerLogoMiniComponent': [{ type: ContentChild, args: [HeaderLogoMiniComponent,] },],
    'headerElement': [{ type: ViewChild, args: ['headerElement',] },],
    'sidebarLeftToggleElement': [{ type: ViewChild, args: ['sidebarLeftToggleElement',] },],
    'sidebarRightToggleElement': [{ type: ViewChild, args: ['sidebarRightToggleElement',] },],
};

class HeaderModule {
}
HeaderModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                exports: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent],
                declarations: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent]
            },] },
];
/**
 * @nocollapse
 */
HeaderModule.ctorParameters = () => [];

class CollapseAnimationDirective {
    /**
     * \@method constructor
     * @param {?} elementRef
     * @param {?} ngZone
     * @param {?} renderer2
     */
    constructor(elementRef, ngZone, renderer2) {
        this.elementRef = elementRef;
        this.ngZone = ngZone;
        this.renderer2 = renderer2;
        this.firstStart = true;
        this.collapseAnimationDuration = 350;
        this.startEventEmitter = new EventEmitter();
        this.doneEventEmitter = new EventEmitter();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set _isCollapsed(value) {
        this.lastIsCollapsed = this.isCollapsed;
        this.isCollapsed = value;
        if (!this.firstStart) {
            this.emit('start');
            if (value) {
                this.collapse();
            }
            else if (value === false) {
                this.unCollapse();
            }
        }
    }
    /**
     * \@method ngOnInit
     * @return {?}
     */
    ngOnInit() {
        if (this.collapseAnimationDuration && this.collapseAnimationDuration !== 350) {
            this.renderer2.setStyle(this.elementRef.nativeElement, 'transition-duration', `${this.collapseAnimationDuration}ms`);
        }
        if (this.collapseAnimationTiming) {
            this.renderer2.setStyle(this.elementRef.nativeElement, 'transition-timing-function', this.collapseAnimationTiming);
        }
    }
    /**
     * \@method ngAfterContentInit
     * @return {?}
     */
    ngAfterContentInit() {
        this.emit('start');
        if (this.isCollapsed) {
            this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'none');
            this.renderer2.addClass(this.elementRef.nativeElement, 'collapsing');
        }
        this.emit('done');
        this.firstStart = false;
        this.subscriptions();
    }
    /**
     * [ngOnDestroy description]
     * \@method ngOnDestroy
     * @return {?}
     */
    ngOnDestroy() {
        if (this.listener) {
            this.listener();
        }
    }
    /**
     * [subscriptions description]
     * \@method subscriptions
     * @return {?}
     */
    subscriptions() {
        this.ngZone.runOutsideAngular(() => {
            this.listener = this.renderer2.listen(this.elementRef.nativeElement, 'transitionend', () => {
                if (!this.isCollapsed) {
                    this.renderer2.removeClass(this.elementRef.nativeElement, 'un-collapse');
                    this.renderer2.removeClass(this.elementRef.nativeElement, 'collapsing');
                }
                else {
                    this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'none');
                }
                requestAnimationFrame(() => {
                    this.renderer2.removeStyle(this.elementRef.nativeElement, 'height');
                    this.emit('done');
                    this.transitioning = false;
                });
            });
        });
    }
    /**
     * [unCollapse description]
     * \@method unCollapse
     * @return {?}
     */
    unCollapse() {
        this.transitioning = true;
        this.renderer2.addClass(this.elementRef.nativeElement, 'un-collapse');
        this.renderer2.removeStyle(this.elementRef.nativeElement, 'display');
        this.renderer2.setStyle(this.elementRef.nativeElement, 'height', `${this.elementRef.nativeElement.scrollHeight}px`);
    }
    /**
     * [collapse description]
     * \@method collapse
     * @return {?}
     */
    collapse() {
        requestAnimationFrame(() => {
            if (!this.transitioning) {
                this.renderer2.setStyle(this.elementRef.nativeElement, 'height', `${this.elementRef.nativeElement.offsetHeight}px`);
                this.renderer2.addClass(this.elementRef.nativeElement, 'collapsing');
            }
            this.transitioning = true;
            requestAnimationFrame(() => {
                this.renderer2.setStyle(this.elementRef.nativeElement, 'height', `0px`);
            });
        });
    }
    /**
     * @param {?} phaseName
     * @return {?}
     */
    emit(phaseName) {
        let /** @type {?} */ event = {
            element: this.elementRef.nativeElement,
            fromState: this.lastIsCollapsed === undefined ? 'void' : this.lastIsCollapsed ? '1' : '0',
            phaseName: phaseName,
            toState: this.isCollapsed === undefined ? 'void' : this.isCollapsed ? '1' : '0',
            totalTime: this.collapseAnimationDuration,
            triggerName: 'collapseAnimation'
        };
        if (phaseName === 'done') {
            this.doneEventEmitter.emit(event);
        }
        else if (phaseName === 'start') {
            this.startEventEmitter.emit(event);
        }
    }
}
CollapseAnimationDirective.decorators = [
    { type: Directive, args: [{
                selector: '[collapseAnimation]'
            },] },
];
/**
 * @nocollapse
 */
CollapseAnimationDirective.ctorParameters = () => [
    { type: ElementRef, },
    { type: NgZone, },
    { type: Renderer2, },
];
CollapseAnimationDirective.propDecorators = {
    'collapseAnimationDuration': [{ type: Input },],
    'collapseAnimationTiming': [{ type: Input },],
    '_isCollapsed': [{ type: Input, args: ['collapseAnimation',] },],
    'startEventEmitter': [{ type: Output, args: ['collapseAnimation.start',] },],
    'doneEventEmitter': [{ type: Output, args: ['collapseAnimation.done',] },],
};

class AnimationsModule {
}
AnimationsModule.decorators = [
    { type: NgModule, args: [{
                exports: [CollapseAnimationDirective],
                declarations: [CollapseAnimationDirective]
            },] },
];
/**
 * @nocollapse
 */
AnimationsModule.ctorParameters = () => [];

class SidebarLeftToggleDirective {
    /**
     * \@method constructor
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
SidebarLeftToggleDirective.decorators = [
    { type: Directive, args: [{
                selector: '[mkMenuToggle]'
            },] },
];
/**
 * @nocollapse
 */
SidebarLeftToggleDirective.ctorParameters = () => [
    { type: ElementRef, },
];
SidebarLeftToggleDirective.propDecorators = {
    'item': [{ type: Input, args: ['mkMenuToggle',] },],
};

class WrapperService {
}
WrapperService.decorators = [
    { type: Injectable },
];
/**
 * @nocollapse
 */
WrapperService.ctorParameters = () => [];

class SidebarLeftComponent {
    /**
     * \@method constructor
     * @param {?} changeDetectorRef
     * @param {?} layoutStore
     * @param {?} ngZone
     * @param {?} renderer2
     * @param {?} router
     * @param {?} wrapperService
     * @param {?} headerService
     */
    constructor(changeDetectorRef, layoutStore, ngZone, renderer2, router$$1, wrapperService, headerService) {
        this.changeDetectorRef = changeDetectorRef;
        this.layoutStore = layoutStore;
        this.ngZone = ngZone;
        this.renderer2 = renderer2;
        this.router = router$$1;
        this.wrapperService = wrapperService;
        this.headerService = headerService;
        this.collapsedItems = [];
        this.activatedItems = [];
        this.itemsByIds = {};
        this.runningAnimations = 0;
    }
    /**
     * \@method ngOnInit
     * @return {?}
     */
    ngOnInit() {
        this.setMenuListeners();
        this.setSidebarListeners();
    }
    /**
     * \@method ngAfterViewInit
     * @return {?}
     */
    ngAfterViewInit() {
        this.setMenuTogglesListeners();
        this.checkMenuWithoutChildren();
    }
    /**
     * [setSidebarListeners description]
     * \@method setSidebarListeners
     * @return {?}
     */
    setSidebarListeners() {
        this.layoutStore.layout.subscribe((value) => {
            this.layout = value;
            this.setSidebarHeight();
        });
        this.layoutStore.windowInnerHeight.subscribe((value) => {
            this.windowInnerHeight = value;
            this.setSidebarHeight();
        });
        this.ngZone.runOutsideAngular(() => {
            this.renderer2.listen(this.sidebarElement.nativeElement, 'mouseenter', (event) => {
                this.layoutStore.sidebarLeftMouseOver(true);
            });
            this.renderer2.listen(this.sidebarElement.nativeElement, 'mouseleave', (event) => {
                this.layoutStore.sidebarLeftMouseOver(false);
            });
        });
        this.layoutStore.windowInnerWidth.subscribe((value) => {
            this.windowInnerWidth = value;
            if (!this.isSidebarLeftCollapsed && this.windowInnerWidth <= 767) {
                this.layoutStore.sidebarLeftCollapsed(true);
            }
            else if (this.windowInnerWidth > 767 && this.isSidebarLeftCollapsed && !this.isSidebarLeftExpandOnOver) {
                this.layoutStore.sidebarLeftCollapsed(false);
            }
        });
        this.layoutStore.isSidebarLeftMouseOver.subscribe((value) => {
            this.isSidebarLeftMouseOver = value;
            if (this.isSidebarLeftExpandOnOver) {
                this.layoutStore.sidebarLeftCollapsed(!value);
            }
        });
        this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value) => {
            this.isSidebarLeftExpandOnOver = value;
            if (this.windowInnerWidth > 767) {
                this.layoutStore.sidebarLeftCollapsed(value);
            }
        });
        this.layoutStore.isSidebarLeftCollapsed.subscribe((value) => {
            if (this.windowInnerWidth <= 767) {
                if (value) {
                    this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-open');
                }
                else {
                    this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-open');
                }
            }
            else {
                if (this.isSidebarLeftExpandOnOver && !this.isSidebarLeftMouseOver && !value) {
                    this.layoutStore.sidebarLeftExpandOnOver(false);
                }
                if (value) {
                    this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-collapse');
                    if (this.isSidebarLeftExpandOnOver) {
                        this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-expanded-on-hover');
                    }
                }
                else {
                    this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-collapse');
                    if (this.isSidebarLeftExpandOnOver) {
                        this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-expanded-on-hover');
                    }
                }
            }
        });
        this.layoutStore.isSidebarLeftMini.subscribe((value) => {
            if (value) {
                this.renderer2.addClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-mini');
            }
            else {
                this.renderer2.removeClass(this.wrapperService.wrapperElementRef.nativeElement, 'sidebar-mini');
            }
        });
    }
    /**
     * [setMenuListeners description]
     * \@method setMenuListeners
     * @return {?}
     */
    setMenuListeners() {
        this.router.events.subscribe((event) => {
            if (event instanceof NavigationStart) {
                if (event.url === '/') {
                    this.activeItems(event.url);
                    this.changeDetectorRef.detectChanges();
                }
                else {
                    let /** @type {?} */ primaryOutlet = this.router.parseUrl(event.url).root.children[PRIMARY_OUTLET];
                    if (primaryOutlet) {
                        this.activeItems(primaryOutlet.toString());
                        this.changeDetectorRef.detectChanges();
                    }
                }
                if (this.windowInnerWidth <= 767 || this.isSidebarLeftExpandOnOver) {
                    this.layoutStore.sidebarLeftCollapsed(true);
                }
            }
        });
        this.layoutStore.sidebarLeftMenu.subscribe(value => {
            this.menu = value;
            this.monkeyPatchMenu(this.menu);
        });
    }
    /**
     * [getIconClasses description]
     * \@method getIconClasses
     * @param {?} item
     * @return {?}
     */
    getIconClasses(item) {
        if (item.iconClasses || item.iconClasses === '') {
            return item.iconClasses;
        }
        else {
            return 'fa fa-circle-o';
        }
    }
    /**
     * [visibilityStateStart description]
     * \@method visibilityStateStart
     * @param {?} event
     * @return {?}
     */
    visibilityStateStart(event) {
        this.runningAnimations++;
        this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                this.runningAnimations--;
                if (!this.runningAnimations) {
                    this.layoutStore.setSidebarLeftElementHeight(this.sidebarElement.nativeElement.offsetHeight);
                }
            }, event.totalTime);
        });
    }
    /**
     * [uncollapseItemParents description]
     * \@method uncollapseItemParents
     * @param {?} item
     * @param {?=} isActive
     * @return {?}
     */
    uncollapseItemParents(item, isActive = false) {
        if (isActive) {
            item.isActive = true;
        }
        item.isCollapsed = false;
        this.collapsedItems.push(item);
        if (item.parentId) {
            this.uncollapseItemParents(this.itemsByIds[item.parentId], isActive);
        }
    }
    /**
     * [findItemsByUrl description]
     * \@method findItemsByUrl
     * @param {?} url
     * @param {?} items
     * @param {?=} returnItems
     * @return {?}
     */
    findItemsByUrl(url, items, returnItems = []) {
        items.forEach((item) => {
            if (item.route === url) {
                returnItems.push(item);
            }
            else if (item.children) {
                this.findItemsByUrl(url, item.children, returnItems);
            }
        });
        return returnItems;
    }
    /**
     * [activeItems description]
     * \@method activeItems
     * @param {?} url
     * @return {?}
     */
    activeItems(url) {
        this.activatedItems.forEach((item) => {
            item.isActive = false;
        });
        this.activatedItems = [];
        this.collapsedItems.forEach((item) => {
            item.isActive = false;
            item.isCollapsed = true;
        });
        this.collapsedItems = [];
        let /** @type {?} */ items = this.findItemsByUrl(url, this.menu);
        items.forEach(item => {
            item.isActive = true;
            this.uncollapseItemParents(item, true);
            this.activatedItems.push(item);
        });
    }
    /**
     * [monkeyPatchMenu description]
     * \@method monkeyPatchMenu
     * @param {?} items
     * @param {?=} parentId
     * @return {?}
     */
    monkeyPatchMenu(items, parentId) {
        items.forEach((item, index) => {
            item.id = parentId ? Number(parentId + '' + index) : index;
            if (parentId) {
                item.parentId = parentId;
            }
            item.isCollapsed = true;
            item.isActive = false;
            if (parentId || item.children) {
                this.itemsByIds[item.id] = item;
            }
            if (item.children) {
                this.monkeyPatchMenu(item.children, item.id);
            }
        });
    }
    /**
     * [removeListeners description]
     * \@method removeListeners
     * @return {?}
     */
    removeListeners() {
        if (this.toggleListeners) {
            this.toggleListeners.forEach((listener) => {
                listener();
            });
        }
        this.toggleListeners = [];
    }
    /**
     * [setMenuTogglesListeners description]
     * \@method setMenuTogglesListeners
     * @return {?}
     */
    setMenuTogglesListeners() {
        this.ngZone.runOutsideAngular(() => {
            this.removeListeners();
            this.sidebarLeftToggleDirectives.forEach((menuToggle) => {
                this.toggleListeners.push(this.renderer2.listen(menuToggle.elementRef.nativeElement, 'click', (event) => {
                    event.preventDefault();
                    if (menuToggle.item.isCollapsed) {
                        this.collapsedItems.forEach((item) => {
                            item.isCollapsed = true;
                        });
                        this.collapsedItems = [];
                        this.uncollapseItemParents(menuToggle.item);
                    }
                    else {
                        menuToggle.item.isCollapsed = !menuToggle.item.isCollapsed;
                    }
                    this.changeDetectorRef.detectChanges();
                }));
            });
        });
    }
    /**
     * [checkMenuWithoutChildren description]
     * \@method checkMenuWithoutChildren
     * @return {?}
     */
    checkMenuWithoutChildren() {
        let /** @type {?} */ menuHaveChildren;
        this.menu.forEach((item) => {
            if (item.children) {
                return menuHaveChildren = true;
            }
        });
        if (!menuHaveChildren) {
            this.ngZone.runOutsideAngular(() => {
                setTimeout(() => {
                    this.layoutStore.setSidebarLeftElementHeight(this.sidebarElement.nativeElement.offsetHeight);
                });
            });
        }
    }
    /**
     * [setSidebarHeight description]
     * \@method setSidebarHeight
     * @return {?}
     */
    setSidebarHeight() {
        if (this.layout === 'fixed') {
            let /** @type {?} */ height = this.windowInnerHeight - this.headerService.offsetHeight;
            if (height && height !== this.sidebarHeight) {
                this.sidebarHeight = height;
                this.sidebarOverflow = 'auto';
                this.changeDetectorRef.detectChanges();
            }
        }
        else if (this.sidebarHeight) {
            this.sidebarOverflow = this.sidebarHeight = null;
            this.changeDetectorRef.detectChanges();
        }
    }
}
SidebarLeftComponent.decorators = [
    { type: Component, args: [{
                selector: 'mk-layout-sidebar-left',
                template: `
    <aside class="main-sidebar">
      <section class="sidebar" #sidebarElement [style.height.px]="sidebarHeight" [style.overflow]="sidebarOverflow">
        <ng-content></ng-content>
      	<ul class="sidebar-menu">
          <ng-container *ngFor="let item of menu">
            <ng-container *ngTemplateOutlet="sidebarInner; context: {item: item}"></ng-container>
          </ng-container>
      	</ul>
      </section>
    </aside>

    <ng-template #sidebarInner let-item="item">
      <li [class.active]="item.isActive" [class.header]="item.separator" [class.menu-open]="!item.isCollapsed">
        <span *ngIf="item.separator">{{item.label}}</span>
        <a *ngIf="!item.separator && item.route" [routerLink]="item.route">
        	<i [class]="getIconClasses(item)"></i><span>{{item.label}}</span>
        	<span *ngIf="item.children || item.pullRights" class="pull-right-container">
        		<span *ngFor="let rightItem of item.pullRights" class="pull-right {{rightItem.classes}}">{{rightItem.text}}</span>
        	  <i *ngIf="!item.pullRights" class="fa fa-angle-left pull-right"></i>
        	</span>
        </a>
        <a *ngIf="!item.separator && !item.route" href="#" [mkMenuToggle]="item">
        	<i [class]="getIconClasses(item)"></i><span>{{item.label}}</span>
        	<span *ngIf="item.children || item.pullRights" class="pull-right-container">
        		<span *ngFor="let rightItem of item.pullRights" class="pull-right {{rightItem.classes}}">{{rightItem.text}}</span>
        	  <i *ngIf="!item.pullRights" class="fa fa-angle-left pull-right"></i>
        	</span>
        </a>
        <ul *ngIf="item.children" [collapseAnimation]="item.isCollapsed" (collapseAnimation.start)="visibilityStateStart($event)" class="treeview-menu">
          <ng-container *ngFor="let item of item.children">
            <ng-contain