angular-admin-lte
Version:
Admin-lte implémentation for Angular 4+
1,349 lines • 143 kB
JavaScript
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';
var RoutingService = (function () {
/**
* \@method constructor
* @param {?} router
*/
function RoutingService(router$$1) {
this.router = router$$1;
this.onChange = new BehaviorSubject$1(undefined);
this.init();
}
/**
* [init description]
* \@method init
* @return {?}
*/
RoutingService.prototype.init = function () {
var _this = this;
this.router.events.subscribe(function (routeEvent) {
if (routeEvent instanceof NavigationEnd) {
var /** @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 (var /** @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 {?}
*/
RoutingService.prototype.createBreadcrumb = function (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 {?}
*/
RoutingService.prototype.isChildrenSelfRoute = function (route) {
var /** @type {?} */ children = route.routeConfig.children;
for (var /** @type {?} */ index in children) {
if (children[index].path === '' && (children[index].component || children[index].loadChildren)) {
return true;
}
}
};
/**
* [createUrl description]
* \@method createUrl
* @param {?} route
* @return {?}
*/
RoutingService.prototype.createUrl = function (route) {
return route.url.map(function (urlSegment) { return urlSegment.toString(); }).join('/');
};
return RoutingService;
}());
RoutingService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
RoutingService.ctorParameters = function () { return [
{ type: Router, },
]; };
var BreadcrumbsComponent = (function () {
/**
* \@method constructor
* @param {?} routingService
* @param {?} changeDetectorRef
*/
function BreadcrumbsComponent(routingService, changeDetectorRef) {
this.routingService = routingService;
this.changeDetectorRef = changeDetectorRef;
this.homeIcon = 'fa fa-home';
}
/**
* \@method ngOnInit
* @return {?}
*/
BreadcrumbsComponent.prototype.ngOnInit = function () {
var _this = this;
this.subscription = this.routingService.onChange.subscribe(function (value) {
_this.breadcrumbs = value;
});
};
/**
* \@method ngOnDestroy
* @return {?}
*/
BreadcrumbsComponent.prototype.ngOnDestroy = function () {
this.subscription.unsubscribe();
};
return BreadcrumbsComponent;
}());
BreadcrumbsComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-breadcrumbs',
template: "\n <ol class=\"breadcrumb\">\n <li *ngFor=\"let breadcrumb of breadcrumbs; let first = first; let last = last\" [class.active]=\"last || !breadcrumb.url\">\n <a *ngIf=\"breadcrumb.url\" [routerLink]=\"breadcrumb.url\">\n <i *ngIf=\"first\" ngClass=\"{{homeIcon}}\"></i>\n <ng-template [ngIf]=\"breadcrumb.data.breadcrumbs\">{{breadcrumb.data.breadcrumbs}}</ng-template>\n <ng-template [ngIf]=\"!breadcrumb.data.breadcrumbs\">{{breadcrumb.data.title}}</ng-template>\n </a>\n <ng-template [ngIf]=\"!breadcrumb.url\">\n <i *ngIf=\"first\" ngClass=\"{{homeIcon}}\"></i>\n <ng-template [ngIf]=\"breadcrumb.data.breadcrumbs\">{{breadcrumb.data.breadcrumbs}}</ng-template>\n <ng-template [ngIf]=\"!breadcrumb.data.breadcrumbs\">{{breadcrumb.data.title}}</ng-template>\n </ng-template>\n </li>\n </ol>\n ",
styles: ["\n .breadcrumb {\n float: right;\n background: transparent;\n margin-top: 0;\n margin-bottom: 0;\n font-size: 12px;\n padding: 7px 5px;\n position: absolute;\n top: 15px;\n right: 10px;\n border-radius: 2px;\n }\n\n .breadcrumb > li > a {\n color: #444;\n text-decoration: none;\n display: inline-block;\n }\n\n .breadcrumb > li > a > .fa,\n .breadcrumb > li > a > .glyphicon,\n .breadcrumb > li > a > .ion {\n margin-right: 5px;\n }\n "]
},] },
];
/**
* @nocollapse
*/
BreadcrumbsComponent.ctorParameters = function () { return [
{ type: RoutingService, },
{ type: ChangeDetectorRef, },
]; };
BreadcrumbsComponent.propDecorators = {
'homeIcon': [{ type: Input },],
};
var BreadcrumbsModule = (function () {
function BreadcrumbsModule() {
}
return BreadcrumbsModule;
}());
BreadcrumbsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule],
exports: [BreadcrumbsComponent],
declarations: [BreadcrumbsComponent]
},] },
];
/**
* @nocollapse
*/
BreadcrumbsModule.ctorParameters = function () { return []; };
var LayoutStore = (function () {
/**
* \@method constructor
* @param {?} layoutConfig
*/
function LayoutStore(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();
}
Object.defineProperty(LayoutStore.prototype, "windowInnerHeight", {
/**
* [windowInnerHeight description]
* \@method windowInnerHeight
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('windowInnerHeight').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "windowInnerWidth", {
/**
* [windowInnerWidth description]
* \@method windowInnerWidth
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('windowInnerWidth').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarLeftCollapsed", {
/**
* [isSidebarLeftCollapsed description]
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarLeftCollapsed').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarLeftExpandOnOver", {
/**
* [isSidebarLeftExpandOnOver description]
* \@method isSidebarLeftExpandOnOver
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarLeftExpandOnOver').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarLeftMouseOver", {
/**
* [isSidebarLeftMouseOver description]
* \@method isSidebarLeftMouseOver
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarLeftMouseOver').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarLeftMini", {
/**
* [isSidebarLeftMini description]
* \@method isSidebarLeftMini
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarLeftMini').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "sidebarRightSkin", {
/**
* [sidebarRightSkin description]
* \@method sidebarRightSkin
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('sidebarRightSkin').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarRightCollapsed", {
/**
* [isSidebarRightCollapsed description]
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarRightCollapsed').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "isSidebarRightOverContent", {
/**
* [isSidebarRightOverContent description]
* \@method isSidebarRightOverContent
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('isSidebarRightOverContent').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "sidebarLeftMenu", {
/**
* [sidebarLeftMenu description]
* \@method sidebarLeftMenu
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('sidebarLeftMenu').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "sidebarLeftElementHeight", {
/**
* [sidebarLeftElementHeight description]
* \@method sidebarLeftElementHeight
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('sidebarLeftElementHeight').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "layout", {
/**
* [layoutType description]
* \@method layoutType
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('layout').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "skin", {
/**
* [skin description]
* \@method skin
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('skin').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutStore.prototype, "wrapperClasses", {
/**
* [wrapperClasses description]
* \@method wrapperClasses
* @return {?}
*/
get: function () {
return (this.layoutState.pluck('wrapperClasses').distinctUntilChanged());
},
enumerable: true,
configurable: true
});
/**
* [sidebarLeftCollapsed description]
* \@method sidebarLeftCollapsed
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarLeftCollapsed = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftCollapsed: value }));
};
/**
* [sidebarLeftExpandOnOver description]
* \@method sidebarLeftExpandOnOver
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarLeftExpandOnOver = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftExpandOnOver: value }));
};
/**
* [setSidebarLeftElementHeight description]
* \@method setSidebarLeftElementHeight
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setSidebarLeftElementHeight = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarLeftElementHeight: value }));
};
/**
* [setSidebarRightSkin description]
* \@method setSidebarRightSkin
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.setSidebarRightSkin = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarRightSkin: value }));
};
/**
* [sidebarLeftMouseOver description]
* \@method sidebarLeftMouseOver
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarLeftMouseOver = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMouseOver: value }));
};
/**
* [sidebarLeftMini description]
* \@method sidebarLeftMini
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarLeftMini = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMini: value }));
};
/**
* [sidebarRightCollapsed description]
* \@method sidebarRightCollapsed
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarRightCollapsed = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightCollapsed: value }));
};
/**
* [sidebarRightOverContent description]
* \@method sidebarRightOverContent
* @param {?=} value
* @return {?}
*/
LayoutStore.prototype.sidebarRightOverContent = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightOverContent: value }));
};
/**
* [setSidebarLeftMenu description]
* \@method setSidebarLeftMenu
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setSidebarLeftMenu = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sSidebarLeftMenu: value }));
};
/**
* [setLayout description]
* \@method setLayout
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setLayout = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { layout: value }));
};
/**
* [setSkin description]
* \@method setSkin
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setSkin = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { skin: value }));
};
/**
* [setWrapperClasses description]
* \@method setWrapperClasses
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setWrapperClasses = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { wrapperClasses: value }));
};
/**
* [setWindowInnerHeight description]
* \@method setWindowInnerHeight
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setWindowInnerHeight = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerHeight: value }));
};
/**
* [setWindowInnerWidth description]
* \@method setWindowInnerWidth
* @param {?} value
* @return {?}
*/
LayoutStore.prototype.setWindowInnerWidth = function (value) {
this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerWidth: value }));
};
return LayoutStore;
}());
var SidebarRightService = (function () {
function SidebarRightService() {
}
Object.defineProperty(SidebarRightService.prototype, "offsetHeight", {
/**
* [offsetHeight description]
* \@method offsetHeight
* @return {?}
*/
get: function () {
return this.elementRef ? this.elementRef.nativeElement.offsetHeight : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SidebarRightService.prototype, "scrollHeight", {
/**
* [scrollHeight description]
* \@method scrollHeight
* @return {?}
*/
get: function () {
return this.elementRef ? this.elementRef.nativeElement.scrollHeight : null;
},
enumerable: true,
configurable: true
});
return SidebarRightService;
}());
SidebarRightService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
SidebarRightService.ctorParameters = function () { return []; };
var HeaderService = (function () {
function HeaderService() {
}
Object.defineProperty(HeaderService.prototype, "offsetHeight", {
/**
* [offsetHeight description]
* \@method offsetHeight
* @return {?}
*/
get: function () {
return this.elementRef.nativeElement.offsetHeight;
},
enumerable: true,
configurable: true
});
return HeaderService;
}());
HeaderService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
HeaderService.ctorParameters = function () { return []; };
var FooterService = (function () {
function FooterService() {
}
Object.defineProperty(FooterService.prototype, "offsetHeight", {
/**
* [offsetHeight description]
* \@method offsetHeight
* @return {?}
*/
get: function () {
return this.elementRef.nativeElement.offsetHeight;
},
enumerable: true,
configurable: true
});
return FooterService;
}());
FooterService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
FooterService.ctorParameters = function () { return []; };
var ContentComponent = (function () {
/**
* \@method constructor
* @param {?} layoutStore
* @param {?} routingService
* @param {?} titleService
* @param {?} elementRef
* @param {?} changeDetectorRef
* @param {?} sidebarRightService
* @param {?} headerService
* @param {?} footerService
* @param {?} router
*/
function ContentComponent(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 {?}
*/
ContentComponent.prototype.ngOnInit = function () {
var _this = this;
this.titleTag = this.titleService.getTitle();
this.routingService.onChange.subscribe(function (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(function (routeEvent) {
if (routeEvent instanceof NavigationStart) {
_this.navigationEnd = false;
}
if (routeEvent instanceof NavigationEnd) {
_this.navigationEnd = true;
_this.setContentMinHeight();
}
});
this.layoutStore.sidebarLeftElementHeight.subscribe(function (value) {
_this.sidebarLeftHeight = value;
_this.setContentMinHeight();
});
this.layoutStore.layout.subscribe(function (value) {
_this.layout = value;
_this.setContentMinHeight();
});
this.layoutStore.windowInnerHeight.subscribe(function (value) {
_this.windowInnerHeight = value;
_this.setContentMinHeight();
});
this.heightStyle = this.windowInnerHeight;
};
Object.defineProperty(ContentComponent.prototype, "scrollHeight", {
/**
* @return {?}
*/
get: function () {
return this.contentInnerElement.nativeElement.scrollHeight;
},
enumerable: true,
configurable: true
});
/**
* [getTitle description]
* \@method getTitle
* @param {?} title
* @return {?}
*/
ContentComponent.prototype.getTitle = function (title) {
return title ? title + " - " + this.titleTag : this.titleTag;
};
/**
* [setMinHeight description]
* \@method setMinHeight
* @return {?}
*/
ContentComponent.prototype.setContentMinHeight = function () {
if (this.navigationEnd) {
var /** @type {?} */ heightStyle = void 0, /** @type {?} */ headerFooterOffsetHeight = this.headerService.offsetHeight + this.footerService.offsetHeight;
if (this.layout === 'fixed') {
heightStyle = this.windowInnerHeight - this.footerService.offsetHeight;
}
else {
var /** @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();
}
}
};
return ContentComponent;
}());
ContentComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-content',
template: "\n <div class=\"content-wrapper\" [style.min-height.px]=\"heightStyle\">\n <div #contentInnerElement class=\"content-inner\">\n <ng-content select=\"[mk-layout-content-before-header]\"></ng-content>\n <section *ngIf=\"header || description\" class=\"content-header\">\n <h1>\n {{header}}\n <small *ngIf=\"description\">{{description}}</small>\n </h1>\n <mk-breadcrumbs></mk-breadcrumbs>\n </section>\n <ng-content select=\"[mk-layout-content-after-header]\"></ng-content>\n <section class=\"content\">\n <ng-content></ng-content>\n </section>\n </div>\n </div>\n ",
styles: ["\n :host {\n display: block;\n }\n\n .content-wrapper {\n position: relative;\n }\n "],
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/**
* @nocollapse
*/
ContentComponent.ctorParameters = function () { return [
{ 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',] },],
};
var ContentModule = (function () {
function ContentModule() {
}
return ContentModule;
}());
ContentModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule, BreadcrumbsModule],
exports: [ContentComponent],
declarations: [ContentComponent]
},] },
];
/**
* @nocollapse
*/
ContentModule.ctorParameters = function () { return []; };
/**
* Footer Left
*/
var FooterLeftComponent = (function () {
function FooterLeftComponent() {
}
return FooterLeftComponent;
}());
FooterLeftComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-footer-left',
template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
},] },
];
/**
* @nocollapse
*/
FooterLeftComponent.ctorParameters = function () { return []; };
FooterLeftComponent.propDecorators = {
'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
* Footer Right
*/
var FooterRightComponent = (function () {
function FooterRightComponent() {
}
return FooterRightComponent;
}());
FooterRightComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-footer-right',
template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
},] },
];
/**
* @nocollapse
*/
FooterRightComponent.ctorParameters = function () { return []; };
FooterRightComponent.propDecorators = {
'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
var FooterComponent = (function () {
/**
* @param {?} elementRef
* @param {?} footerService
*/
function FooterComponent(elementRef, footerService) {
this.elementRef = elementRef;
this.footerService = footerService;
}
/**
* @return {?}
*/
FooterComponent.prototype.ngOnInit = function () {
this.footerService.elementRef = this.elementRef;
};
return FooterComponent;
}());
FooterComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-footer',
template: "\n <footer class=\"main-footer\">\n <div class=\"pull-right hidden-xs\">\n <ng-template [ngTemplateOutlet]=\"footerRightComponent?.templateRef\"></ng-template>\n </div>\n <ng-template [ngTemplateOutlet]=\"footerLeftComponent?.templateRef\"></ng-template>\n </footer>\n ",
styles: ["\n :host {\n display: block;\n }\n "]
},] },
];
/**
* @nocollapse
*/
FooterComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: FooterService, },
]; };
FooterComponent.propDecorators = {
'footerLeftComponent': [{ type: ContentChild, args: [FooterLeftComponent,] },],
'footerRightComponent': [{ type: ContentChild, args: [FooterRightComponent,] },],
};
var FooterModule = (function () {
function FooterModule() {
}
return FooterModule;
}());
FooterModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [FooterComponent, FooterLeftComponent, FooterRightComponent],
declarations: [FooterComponent, FooterLeftComponent, FooterRightComponent]
},] },
];
/**
* @nocollapse
*/
FooterModule.ctorParameters = function () { return []; };
/**
* Header Logo
*/
var HeaderLogoComponent = (function () {
function HeaderLogoComponent() {
}
return HeaderLogoComponent;
}());
HeaderLogoComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-header-logo',
template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
},] },
];
/**
* @nocollapse
*/
HeaderLogoComponent.ctorParameters = function () { return []; };
HeaderLogoComponent.propDecorators = {
'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
* Header Logo Mini
*/
var HeaderLogoMiniComponent = (function () {
function HeaderLogoMiniComponent() {
}
return 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 = function () { return []; };
HeaderLogoMiniComponent.propDecorators = {
'templateRef': [{ type: ViewChild, args: ['templateRef',] },],
};
/**
* Header
*/
var HeaderComponent = (function () {
/**
* \@method constructor
* @param {?} layoutStore
* @param {?} ngZone
* @param {?} renderer2
* @param {?} elementRef
* @param {?} headerService
*/
function HeaderComponent(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 {?}
*/
HeaderComponent.prototype.ngOnInit = function () {
};
/**
* \@method ngAfterViewInit
* @return {?}
*/
HeaderComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.headerService.elementRef = this.headerElement;
if (this.sidebarLeftToggleElement) {
this.layoutStore.isSidebarLeftCollapsed.subscribe(function (value) {
_this.isSidebarLeftCollapsed = value;
});
this.ngZone.runOutsideAngular(function () {
_this.renderer2.listen(_this.sidebarLeftToggleElement.nativeElement, 'click', function (event) {
event.preventDefault();
_this.layoutStore.sidebarLeftCollapsed(!_this.isSidebarLeftCollapsed);
});
});
}
if (this.sidebarRightToggleElement) {
this.layoutStore.isSidebarRightCollapsed.subscribe(function (value) {
_this.isSidebarRightCollapsed = value;
});
this.ngZone.runOutsideAngular(function () {
_this.renderer2.listen(_this.sidebarRightToggleElement.nativeElement, 'click', function (event) {
event.preventDefault();
_this.layoutStore.sidebarRightCollapsed(!_this.isSidebarRightCollapsed);
});
});
}
};
return HeaderComponent;
}());
HeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'mk-layout-header',
template: "\n <header #headerElement class=\"main-header\">\n <a href=\"/\" class=\"logo\">\n <span class=\"logo-mini\"><ng-template [ngTemplateOutlet]=\"headerLogoMiniComponent?.templateRef\"></ng-template></span>\n <span class=\"logo-lg\"><ng-template [ngTemplateOutlet]=\"headerLogoComponent?.templateRef\"></ng-template></span>\n </a>\n <nav *ngIf=\"isSidebarLeftToggle\" class=\"navbar navbar-static-top\">\n <a #sidebarLeftToggleElement href=\"#\" class=\"sidebar-toggle\">\n <span class=\"sr-only\">Toggle navigation</span>\n <span class=\"icon-bar\"></span>\n <span class=\"icon-bar\"></span>\n <span class=\"icon-bar\"></span>\n </a>\n <div *ngIf=\"isSidebarRightToggle\" class=\"sidebar-right-toggle\">\n <a #sidebarRightToggleElement href=\"#\"><i class=\"fa fa-gears\"></i></a>\n </div>\n <ng-content></ng-content>\n </nav>\n </header>\n ",
styles: ["\n :host {\n display: block;\n }\n\n .sidebar-right-toggle {\n float: right;\n }\n\n .sidebar-right-toggle a {\n padding: 15px;\n display: block;\n line-height: 20px;\n cursor: pointer;\n }\n "]
},] },
];
/**
* @nocollapse
*/
HeaderComponent.ctorParameters = function () { return [
{ 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',] },],
};
var HeaderModule = (function () {
function HeaderModule() {
}
return HeaderModule;
}());
HeaderModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent],
declarations: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent]
},] },
];
/**
* @nocollapse
*/
HeaderModule.ctorParameters = function () { return []; };
var CollapseAnimationDirective = (function () {
/**
* \@method constructor
* @param {?} elementRef
* @param {?} ngZone
* @param {?} renderer2
*/
function CollapseAnimationDirective(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();
}
Object.defineProperty(CollapseAnimationDirective.prototype, "_isCollapsed", {
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this.lastIsCollapsed = this.isCollapsed;
this.isCollapsed = value;
if (!this.firstStart) {
this.emit('start');
if (value) {
this.collapse();
}
else if (value === false) {
this.unCollapse();
}
}
},
enumerable: true,
configurable: true
});
/**
* \@method ngOnInit
* @return {?}
*/
CollapseAnimationDirective.prototype.ngOnInit = function () {
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 {?}
*/
CollapseAnimationDirective.prototype.ngAfterContentInit = function () {
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 {?}
*/
CollapseAnimationDirective.prototype.ngOnDestroy = function () {
if (this.listener) {
this.listener();
}
};
/**
* [subscriptions description]
* \@method subscriptions
* @return {?}
*/
CollapseAnimationDirective.prototype.subscriptions = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.listener = _this.renderer2.listen(_this.elementRef.nativeElement, 'transitionend', function () {
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(function () {
_this.renderer2.removeStyle(_this.elementRef.nativeElement, 'height');
_this.emit('done');
_this.transitioning = false;
});
});
});
};
/**
* [unCollapse description]
* \@method unCollapse
* @return {?}
*/
CollapseAnimationDirective.prototype.unCollapse = function () {
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 {?}
*/
CollapseAnimationDirective.prototype.collapse = function () {
var _this = this;
requestAnimationFrame(function () {
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(function () {
_this.renderer2.setStyle(_this.elementRef.nativeElement, 'height', "0px");
});
});
};
/**
* @param {?} phaseName
* @return {?}
*/
CollapseAnimationDirective.prototype.emit = function (phaseName) {
var /** @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);
}
};
return CollapseAnimationDirective;
}());
CollapseAnimationDirective.decorators = [
{ type: Directive, args: [{
selector: '[collapseAnimation]'
},] },
];
/**
* @nocollapse
*/
CollapseAnimationDirective.ctorParameters = function () { return [
{ 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',] },],
};
var AnimationsModule = (function () {
function AnimationsModule() {
}
return AnimationsModule;
}());
AnimationsModule.decorators = [
{ type: NgModule, args: [{
exports: [CollapseAnimationDirective],
declarations: [CollapseAnimationDirective]
},] },
];
/**
* @nocollapse
*/
AnimationsModule.ctorParameters = function () { return []; };
var SidebarLeftToggleDirective = (function () {
/**
* \@method constructor
* @param {?} elementRef
*/
function SidebarLeftToggleDirective(elementRef) {
this.elementRef = elementRef;
}
return SidebarLeftToggleDirective;
}());
SidebarLeftToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[mkMenuToggle]'
},] },
];
/**
* @nocollapse
*/
SidebarLeftToggleDirective.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
SidebarLeftToggleDirective.propDecorators = {
'item': [{ type: Input, args: ['mkMenuToggle',] },],
};
var WrapperService = (function () {
function WrapperService() {
}
return WrapperService;
}());
WrapperService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
WrapperService.ctorParameters = function () { return []; };
var SidebarLeftComponent = (function () {
/**
* \@method constructor
* @param {?} changeDetectorRef
* @param {?} layoutStore
* @param {?} ngZone
* @param {?} renderer2
* @param {?} router
* @param {?} wrapperService
* @param {?} headerService
*/
function SidebarLeftComponent(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 {?}
*/
SidebarLeftComponent.prototype.ngOnInit = function () {
this.setMenuListeners();
this.setSidebarListeners();
};
/**
* \@method ngAfterViewInit
* @return {?}
*/
SidebarLeftComponent.prototype.ngAfterViewInit = function () {
this.setMenuTogglesListeners();
this.checkMenuWithoutChildren();
};
/**
* [setSidebarListeners description]
* \@method setSidebarListeners
* @return {?}
*/
SidebarLeftComponent.prototype.setSidebarListeners = function () {
var _this = this;
this.layoutStore.layout.subscribe(function (value) {
_this.layout = value;
_this.setSidebarHeight();
});
this.layoutStore.windowInnerHeight.subscribe(function (value) {
_this.windowInnerHeight = value;
_this.setSidebarHeight();
});
this.ngZone.runOutsideAngular(function () {
_this.renderer2.listen(_this.sidebarElement.nativeElement, 'mouseenter', function (event) {
_this.layoutStore.sidebarLeftMouseOver(true);
});
_this.renderer2.listen(_this.sidebarElement.nativeElement, 'mouseleave', function (event) {
_this.layoutStore.sidebarLeftMouseOver(false);
});
});
this.layoutStore.windowInnerWidth.subscribe(function (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(function (value) {
_this.isSidebarLeftMouseOver = value;
if (_this.isSidebarLeftExpandOnOver) {
_this.layoutStore.sidebarLeftCollapsed(!value);
}
});
this.layoutStore.isSidebarLeftExpandOnOver.subscribe(function (value) {
_this.isSidebarLeftExpandOnOver = value;
if (_this.windowInnerWidth > 767) {
_this.layoutStore.sidebarLeftCollapsed(value);
}
});
this.layoutStore.isSidebarLeftCollapsed.subscribe(function (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(function (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 {?}
*/
SidebarLeftComponent.prototype.setMenuListeners = function () {
var _this = this;
this.router.events.subscribe(function (event) {
if (event instanceof NavigationStart) {
if (event.url === '/') {
_this.activeItems(event.url);
_this.changeDetectorRef.detectChanges();
}
else {
var /** @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(function (value) {
_this.menu = value;
_this.monkeyPatchMenu(_this.menu);
});
};
/**
* [getIconClasses description]
* \@method getIconClasses
* @param {?} item
* @return {?}
*/
SidebarLeftComponent.prototype.getIconClasses = function (item) {
if (item.iconClasses || item.iconClasses === '') {
return item.iconClasses;
}
else {
return 'fa fa-circle-o';
}
};
/**
* [visibilityStateStart description]
* \@method visibilityStateStart
* @param {?} eve