angular-admin-lte-teliqo
Version:
npm# angular-admin-lte
1,479 lines (1,459 loc) • 390 kB
JavaScript
import { Injectable, Component, Input, ChangeDetectorRef, NgModule, ChangeDetectionStrategy, ViewChild, ElementRef, ContentChild, NgZone, Renderer2, Directive, Output, EventEmitter, ViewChildren, InjectionToken, Optional, SkipSelf, ContentChildren, ViewContainerRef, HostListener } from '@angular/core';
import { NavigationEnd, PRIMARY_OUTLET, Router, RouterModule, NavigationStart } from '@angular/router';
import { BehaviorSubject, Subject } from 'rxjs';
import { CommonModule } from '@angular/common';
import { distinctUntilChanged, pluck } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';
import { NgControl, FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RoutingService {
/**
* \@method constructor
* @param {?} router [description]
*/
constructor(router) {
this.router = router;
this.onChange = new BehaviorSubject(undefined);
this.events = new BehaviorSubject(undefined);
this.init();
}
/**
* [createUrl description]
* \@method createUrl
* @param {?} route [description]
* @return {?} [description]
*/
static createUrl(route) {
const /** @type {?} */ url = route.url.map(urlSegment => urlSegment.toString()).join('/');
return url;
}
/**
* [isChildrenSelfRoute description]
* \@method isChildrenSelfRoute
* @param {?} route [description]
* @return {?} [description]
*/
static isChildrenSelfRoute(route) {
route.routeConfig.children.forEach(child => {
if (child.path === '' && (child.component || child.loadChildren)) {
return true;
}
});
return false;
}
/**
* [createBreadcrumb description]
* \@method createBreadcrumb
* @param {?} route [description]
* @param {?} url [description]
* @return {?} [description]
*/
static createBreadcrumb(route, url) {
let /** @type {?} */ isUrl = true;
if (route.children.length !== 0 && route.firstChild.routeConfig.path) {
if (url !== '/' && !route.routeConfig.loadChildren && !route.routeConfig.component && !RoutingService.isChildrenSelfRoute(route)) {
isUrl = false;
}
}
return {
data: route.data,
params: route.params,
url: isUrl ? url : null
};
}
/**
* [init description]
* \@method init
* @return {?}
*/
init() {
this.router.events.subscribe(routeEvent => {
// https://github.com/angular/angular/issues/17473: event not fired anymore on load for routed component.
this.events.next(routeEvent);
if (routeEvent instanceof NavigationEnd) {
let /** @type {?} */ route = this.router.routerState.root.snapshot, /** @type {?} */
tmpUrl = '', /** @type {?} */
url = '', /** @type {?} */
rootRoot = true;
const /** @type {?} */ paths = [];
while (route.children.length) {
route = route.firstChild;
tmpUrl = `/${RoutingService.createUrl(route)}`;
if (route.outlet !== PRIMARY_OUTLET || (!route.routeConfig.path && !rootRoot)) {
continue;
}
rootRoot = false;
if (route.params || route.data) {
for (const /** @type {?} */ key in route.params) {
if (!key) {
continue;
}
if (route.data['title']) {
route.data['title'] = route.data['title'].replace(`:${key}`, route.params[key]);
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(RoutingService.createBreadcrumb(route, tmpUrl));
}
else {
url += tmpUrl;
paths.push(RoutingService.createBreadcrumb(route, url));
}
}
this.onChange.next(paths);
}
});
}
}
RoutingService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
RoutingService.ctorParameters = () => [
{ type: Router, },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BreadcrumbsComponent {
/**
* \@method constructor
* @param {?} routingService [description]
* @param {?} changeDetectorRef [description]
*/
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:0 0;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 },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BreadcrumbsModule {
}
BreadcrumbsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule],
exports: [BreadcrumbsComponent],
declarations: [BreadcrumbsComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class LayoutStore {
/**
* \@method constructor
* @param {?} layoutConfig [description]
*/
constructor(layoutConfig) {
this.initialLayoutState = {
isSidebarLeftCollapsed: false,
isSidebarLeftExpandOnOver: false,
isSidebarLeftMouseOver: false,
isSidebarLeftMini: true,
sidebarRightSkin: 'dark',
isSidebarRightCollapsed: true,
isSidebarRightOverContent: true,
layout: 'normal',
sidebarLeftMenu: [],
sidebarLeftMenuActiveUrl: '',
skin: 'blue'
};
if (layoutConfig) {
this.initialLayoutState = Object.assign(this.initialLayoutState, layoutConfig);
}
this._layoutState = new BehaviorSubject(this.initialLayoutState);
this.layoutState = this._layoutState.asObservable();
}
/**
* [windowInnerHeight description]
* \@method windowInnerHeight
* @return {?} [description]
*/
get windowInnerHeight() {
return /** @type {?} */ (this.layoutState.pipe(pluck('windowInnerHeight'), distinctUntilChanged()));
}
/**
* [windowInnerWidth description]
* \@method windowInnerWidth
* @return {?} [description]
*/
get windowInnerWidth() {
return /** @type {?} */ (this.layoutState.pipe(pluck('windowInnerWidth'), distinctUntilChanged()));
}
/**
* [isSidebarLeftCollapsed description]
* @return {?} [description]
*/
get isSidebarLeftCollapsed() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarLeftCollapsed'), distinctUntilChanged()));
}
/**
* [isSidebarLeftExpandOnOver description]
* \@method isSidebarLeftExpandOnOver
* @return {?} [description]
*/
get isSidebarLeftExpandOnOver() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarLeftExpandOnOver'), distinctUntilChanged()));
}
/**
* [isSidebarLeftMouseOver description]
* \@method isSidebarLeftMouseOver
* @return {?} [description]
*/
get isSidebarLeftMouseOver() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarLeftMouseOver'), distinctUntilChanged()));
}
/**
* [isSidebarLeftMini description]
* \@method isSidebarLeftMini
* @return {?} [description]
*/
get isSidebarLeftMini() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarLeftMini'), distinctUntilChanged()));
}
/**
* [sidebarRightSkin description]
* \@method sidebarRightSkin
* @return {?} [description]
*/
get sidebarRightSkin() {
return /** @type {?} */ (this.layoutState.pipe(pluck('sidebarRightSkin'), distinctUntilChanged()));
}
/**
* [isSidebarRightCollapsed description]
* @return {?} [description]
*/
get isSidebarRightCollapsed() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarRightCollapsed'), distinctUntilChanged()));
}
/**
* [isSidebarRightOverContent description]
* \@method isSidebarRightOverContent
* @return {?} [description]
*/
get isSidebarRightOverContent() {
return /** @type {?} */ (this.layoutState.pipe(pluck('isSidebarRightOverContent'), distinctUntilChanged()));
}
/**
* [sidebarLeftMenu description]
* \@method sidebarLeftMenu
* @return {?} [description]
*/
get sidebarLeftMenu() {
return /** @type {?} */ (this.layoutState.pipe(pluck('sidebarLeftMenu'), distinctUntilChanged()));
}
/**
* [sidebarLeftMenuActiveUrl description]
* \@method sidebarLeftMenuActiveUrl
* @return {?} [description]
*/
get sidebarLeftMenuActiveUrl() {
return /** @type {?} */ (this.layoutState.pipe(pluck('sidebarLeftMenuActiveUrl'), distinctUntilChanged()));
}
/**
* [sidebarLeftElementHeight description]
* \@method sidebarLeftElementHeight
* @return {?} [description]
*/
get sidebarLeftElementHeight() {
return /** @type {?} */ (this.layoutState.pipe(pluck('sidebarLeftElementHeight'), distinctUntilChanged()));
}
/**
* [layoutType description]
* \@method layoutType
* @return {?} [description]
*/
get layout() {
return /** @type {?} */ (this.layoutState.pipe(pluck('layout'), distinctUntilChanged()));
}
/**
* [skin description]
* \@method skin
* @return {?} [description]
*/
get skin() {
return /** @type {?} */ (this.layoutState.pipe(pluck('skin'), distinctUntilChanged()));
}
/**
* [wrapperClasses description]
* \@method wrapperClasses
* @return {?} [description]
*/
get wrapperClasses() {
return /** @type {?} */ (this.layoutState.pipe(pluck('wrapperClasses'), distinctUntilChanged()));
}
/**
* [sidebarLeftCollapsed description]
* \@method sidebarLeftCollapsed
* @param {?=} value [description]
* @return {?}
*/
sidebarLeftCollapsed(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftCollapsed: value }));
}
/**
* [sidebarLeftExpandOnOver description]
* \@method sidebarLeftExpandOnOver
* @param {?=} value [description]
* @return {?}
*/
sidebarLeftExpandOnOver(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftExpandOnOver: value }));
}
/**
* [setSidebarLeftElementHeight description]
* \@method setSidebarLeftElementHeight
* @param {?} value [description]
* @return {?}
*/
setSidebarLeftElementHeight(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarLeftElementHeight: value }));
}
/**
* [setSidebarRightSkin description]
* \@method setSidebarRightSkin
* @param {?=} value [description]
* @return {?}
*/
setSidebarRightSkin(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarRightSkin: value }));
}
/**
* [sidebarLeftMouseOver description]
* \@method sidebarLeftMouseOver
* @param {?=} value [description]
* @return {?}
*/
sidebarLeftMouseOver(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMouseOver: value }));
}
/**
* [sidebarLeftMini description]
* \@method sidebarLeftMini
* @param {?=} value [description]
* @return {?}
*/
sidebarLeftMini(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarLeftMini: value }));
}
/**
* [sidebarRightCollapsed description]
* \@method sidebarRightCollapsed
* @param {?=} value [description]
* @return {?}
*/
sidebarRightCollapsed(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightCollapsed: value }));
}
/**
* [sidebarRightOverContent description]
* \@method sidebarRightOverContent
* @param {?=} value [description]
* @return {?}
*/
sidebarRightOverContent(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { isSidebarRightOverContent: value }));
}
/**
* [setSidebarLeftMenu description]
* \@method setSidebarLeftMenu
* @param {?} value [description]
* @return {?}
*/
setSidebarLeftMenu(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarLeftMenu: value }));
}
/**
* [setSidebarLeftMenuActiveUrl description]
* \@method setSidebarLeftMenuActiveUrl
* @param {?} value [description]
* @return {?}
*/
setSidebarLeftMenuActiveUrl(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { sidebarLeftMenuActiveUrl: value }));
}
/**
* [setLayout description]
* \@method setLayout
* @param {?} value [description]
* @return {?}
*/
setLayout(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { layout: value }));
}
/**
* [setSkin description]
* \@method setSkin
* @param {?} value [description]
* @return {?}
*/
setSkin(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { skin: value }));
}
/**
* [setWrapperClasses description]
* \@method setWrapperClasses
* @param {?} value [description]
* @return {?}
*/
setWrapperClasses(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { wrapperClasses: value }));
}
/**
* [setWindowInnerHeight description]
* \@method setWindowInnerHeight
* @param {?} value [description]
* @return {?}
*/
setWindowInnerHeight(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerHeight: value }));
}
/**
* [setWindowInnerWidth description]
* \@method setWindowInnerWidth
* @param {?} value [description]
* @return {?}
*/
setWindowInnerWidth(value) {
this._layoutState.next(Object.assign(this._layoutState.value, { windowInnerWidth: value }));
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SidebarRightService {
/**
* [scrollHeight description]
* \@method scrollHeight
* @return {?} [description]
*/
get scrollHeight() {
return this.elementRef ? this.elementRef.nativeElement.scrollHeight : null;
}
}
SidebarRightService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class HeaderService {
/**
* [offsetHeight description]
* \@method offsetHeight
* @return {?} [description]
*/
get offsetHeight() {
return this.elementRef.nativeElement.offsetHeight;
}
}
HeaderService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class FooterService {
/**
* [offsetHeight description]
* \@method offsetHeight
* @return {?} [description]
*/
get offsetHeight() {
return this.elementRef.nativeElement.offsetHeight;
}
}
FooterService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* [throttle description]
* \@method throttle
* @param {?} callback [description]
* @param {?} delay [description]
* @return {?} [description]
*/
function throttle(callback, delay) {
let /** @type {?} */ timeout = null;
return (...args) => {
if (!timeout) {
timeout = setTimeout(() => {
callback.call(this, ...args);
timeout = null;
}, delay);
}
};
}
/**
* [removeSubscriptions description]
* \@method removeSubscriptions
* @param {?} subscriptions
* @return {?}
*/
function removeSubscriptions(subscriptions) {
if (subscriptions) {
subscriptions.forEach((subscription) => {
subscription.unsubscribe();
});
}
return [];
}
/**
* [removeListeners description]
* \@method removeListeners
* @param {?} listeners
* @return {?}
*/
function removeListeners(listeners) {
if (listeners) {
listeners.forEach((listener) => {
listener();
});
}
return [];
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
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) {
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;
this.subscriptions = [];
}
/**
* \@method ngOnInit
* @return {?}
*/
ngOnInit() {
this.titleTag = this.titleService.getTitle();
this.subscriptions.push(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.subscriptions.push(this.router.events.subscribe((routeEvent) => {
if (routeEvent instanceof NavigationStart) {
this.navigationEnd = false;
}
if (routeEvent instanceof NavigationEnd) {
this.navigationEnd = true;
this.setContentMinHeight();
}
}));
this.subscriptions.push(this.layoutStore.sidebarLeftElementHeight.subscribe((value) => {
this.sidebarLeftHeight = value;
this.setContentMinHeight();
}));
this.subscriptions.push(this.layoutStore.layout.subscribe((value) => {
this.layout = value;
this.setContentMinHeight();
}));
this.subscriptions.push(this.layoutStore.windowInnerHeight.subscribe((value) => {
this.windowInnerHeight = value;
this.setContentMinHeight();
}));
this.heightStyle = this.windowInnerHeight;
}
/**
* \@method ngOnDestroy
* @return {?}
*/
ngOnDestroy() {
this.subscriptions = removeSubscriptions(this.subscriptions);
}
/**
* [scrollHeight description]
* \@method scrollHeight
* @return {?} [description]
*/
get scrollHeight() {
return this.contentInnerElement.nativeElement.scrollHeight;
}
/**
* [getTitle description]
* \@method getTitle
* @param {?} title [description]
* @return {?} [description]
*/
getTitle(title) {
return title ? `${title} - ${this.titleTag}` : this.titleTag;
}
/**
* [setMinHeight description]
* \@method setMinHeight
* @return {?}
*/
setContentMinHeight() {
if (this.navigationEnd) {
let /** @type {?} */ heightStyle;
const /** @type {?} */ headerFooterOffsetHeight = this.headerService.offsetHeight + this.footerService.offsetHeight;
if (this.layout === 'fixed') {
heightStyle = this.windowInnerHeight - this.footerService.offsetHeight;
}
else {
const /** @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',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ContentModule {
}
ContentModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule, BreadcrumbsModule],
exports: [ContentComponent],
declarations: [ContentComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* 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.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.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,] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class FooterModule {
}
FooterModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [FooterComponent, FooterLeftComponent, FooterRightComponent],
declarations: [FooterComponent, FooterLeftComponent, FooterRightComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* 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.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.propDecorators = {
"templateRef": [{ type: ViewChild, args: ['templateRef',] },],
};
/**
* Header
*/
class HeaderComponent {
/**
* \@method constructor
* @param {?} layoutStore [description]
* @param {?} ngZone [description]
* @param {?} renderer2 [description]
* @param {?} elementRef [description]
* @param {?} headerService [description]
*/
constructor(layoutStore, ngZone, renderer2, elementRef, headerService) {
this.layoutStore = layoutStore;
this.ngZone = ngZone;
this.renderer2 = renderer2;
this.elementRef = elementRef;
this.headerService = headerService;
this.listeners = [];
this.subscriptions = [];
this.isSidebarLeftToggle = true;
this.isSidebarRightToggle = true;
}
/**
* \@method ngAfterViewInit
* @return {?}
*/
ngAfterViewInit() {
this.headerService.elementRef = this.headerElement;
if (this.sidebarLeftToggleElement) {
this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value) => {
this.isSidebarLeftCollapsed = value;
}));
this.ngZone.runOutsideAngular(() => {
this.listeners.push(this.renderer2.listen(this.sidebarLeftToggleElement.nativeElement, 'click', (event) => {
event.preventDefault();
this.layoutStore.sidebarLeftCollapsed(!this.isSidebarLeftCollapsed);
}));
});
}
if (this.sidebarRightToggleElement) {
this.subscriptions.push(this.layoutStore.isSidebarRightCollapsed.subscribe((value) => {
this.isSidebarRightCollapsed = value;
}));
this.ngZone.runOutsideAngular(() => {
this.listeners.push(this.renderer2.listen(this.sidebarRightToggleElement.nativeElement, 'click', (event) => {
event.preventDefault();
this.layoutStore.sidebarRightCollapsed(!this.isSidebarRightCollapsed);
}));
});
}
}
/**
* \@method ngOnDestroy
* @return {?}
*/
ngOnDestroy() {
this.listeners = removeListeners(this.listeners);
this.subscriptions = removeSubscriptions(this.subscriptions);
}
}
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 class="navbar navbar-static-top">
<a *ngIf="isSidebarLeftToggle" #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',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class HeaderModule {
}
HeaderModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent],
declarations: [HeaderComponent, HeaderLogoComponent, HeaderLogoMiniComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class CollapseAnimationDirective {
/**
* \@method constructor
* @param {?} elementRef [description]
* @param {?} ngZone [description]
* @param {?} renderer2 [description]
*/
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 {?} [description]
*/
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) {
const /** @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',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class AnimationsModule {
}
AnimationsModule.decorators = [
{ type: NgModule, args: [{
exports: [CollapseAnimationDirective],
declarations: [CollapseAnimationDirective]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SidebarLeftToggleDirective {
/**
* \@method constructor
* @param {?} elementRef [description]
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
SidebarLeftToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[mkMenuToggle]'
},] },
];
/** @nocollapse */
SidebarLeftToggleDirective.ctorParameters = () => [
{ type: ElementRef, },
];
SidebarLeftToggleDirective.propDecorators = {
"item": [{ type: Input, args: ['mkMenuToggle',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class WrapperService {
}
WrapperService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class SidebarLeftComponent {
/**
* \@method constructor
* @param {?} changeDetectorRef [description]
* @param {?} layoutStore [description]
* @param {?} ngZone [description]
* @param {?} renderer2 [description]
* @param {?} router [description]
* @param {?} routingService [description]
* @param {?} wrapperService [description]
* @param {?} headerService [description]
*/
constructor(changeDetectorRef, layoutStore, ngZone, renderer2, router, routingService, wrapperService, headerService) {
this.changeDetectorRef = changeDetectorRef;
this.layoutStore = layoutStore;
this.ngZone = ngZone;
this.renderer2 = renderer2;
this.router = router;
this.routingService = routingService;
this.wrapperService = wrapperService;
this.headerService = headerService;
this.collapsedItems = [];
this.activatedItems = [];
this.toggleListeners = [];
this.listeners = [];
this.itemsByIds = {};
this.runningAnimations = 0;
this.subscriptions = [];
}
/**
* \@method ngOnInit
* @return {?}
*/
ngOnInit() {
this.subscriptions.push(this.layoutStore.sidebarLeftMenu.subscribe(value => {
this.menu = value;
this.monkeyPatchMenu(this.menu);
if (this.initialized) {
this.setMenuListeners(this.activeUrl);
this.setSidebarListeners();
this.setMenuTogglesListeners();
}
this.initialized = true;
}));
this.subscriptions.push(this.layoutStore.sidebarLeftMenuActiveUrl.subscribe(value => {
this.activeUrl = value;
this.setMenuListeners(value);
}));
this.subscriptions.push(this.routingService.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.activeUrl = event.url;
this.setMenuListeners(event.url);
}
}));
this.setSidebarListeners();
}
/**
* \@method ngAfterViewInit
* @return {?}
*/
ngAfterViewInit() {
this.setMenuTogglesListeners();
this.checkMenuWithoutChildren();
}
/**
* \@method ngOnDestroy
* @return {?}
*/
ngOnDestroy() {
this.subscriptions = removeSubscriptions(this.subscriptions);
this.listeners = removeListeners(this.listeners);
this.toggleListeners = removeListeners(this.toggleListeners);
}
/**
* [setSidebarListeners description]
* \@method setSidebarListeners
* @return {?}
*/
setSidebarListeners() {
this.subscriptions.push(this.layoutStore.layout.subscribe((value) => {
this.layout = value;
this.setSidebarHeight();
}));
this.subscriptions.push(this.layoutStore.windowInnerHeight.subscribe((value) => {
this.windowInnerHeight = value;
this.setSidebarHeight();
}));
this.subscriptions.push(this.layoutStore.sidebarLeftMenu.subscribe(() => {
this.changeDetectorRef.detectChanges();
}));
this.ngZone.runOutsideAngular(() => {
this.listeners.push(this.renderer2.listen(this.sidebarElement.nativeElement, 'mouseenter', () => {
this.layoutStore.sidebarLeftMouseOver(true);
}));
this.listeners.push(this.renderer2.listen(this.sidebarElement.nativeElement, 'mouseleave', () => {
this.layoutStore.sidebarLeftMouseOver(false);
}));
});
this.subscriptions.push(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.subscriptions.push(this.layoutStore.isSidebarLeftMouseOver.subscribe((value) => {
this.isSidebarLeftMouseOver = value;
if (this.isSidebarLeftExpandOnOver) {
this.layoutStore.sidebarLeftCollapsed(!value);
}
}));
this.subscriptions.push(this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value) => {
this.isSidebarLeftExpandOnOver = value;
if (this.windowInnerWidth > 767 && this.isSidebarLeftCollapsed !== undefined) {
this.layoutStore.sidebarLeftCollapsed(value);
}
}));
this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value) => {
this.isSidebarLeftCollapsed = 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.subscriptions.push(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
* @param {?} url
* @return {?}
*/
setMenuListeners(url) {
if (url === '/') {
this.activeItems(url);
this.changeDetectorRef.detectChanges();
}
else {
const /** @type {?} */ primaryOutlet = this.router.parseUrl(url).root.children[PRIMARY_OUTLET];
if (primaryOutlet) {
this.activeItems(primaryOutlet.toString());
this.changeDetectorRef.detectChanges();
}
}
if (this.windowInnerWidth <= 767 || this.isSidebarLeftExpandOnOver) {
this.layoutStore.sidebarLeftCollapsed(true);
}
}
/**
* [getIconClasses description]
* \@method getIconClasses
* @param {?} item [description]
* @return {?} [description]
*/
getIconClasses(item) {
if (item.iconClasses || item.iconClasses === '') {
return item.iconClasses;
}
else {
return 'fa fa-circle-o';
}
}
/**
* [visibilityStateStart description]
* \@method visibilityStateStart
* @param {?} event [description]
* @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 [description]
* @param {?=} isActive [description]
* @return {?}
*/
uncollapseItemParents(item, isActive = false) {
if (isActive) {
item.isActive = true;
this.activatedItems.push(item);
}
item.isCollapsed = false;
this.collapsedItems.push(item);
if (item.parentId) {
this.uncollapseItemParents(this.itemsByIds[item.parentId], isActive);
}
}
/**
* [findItemsByUrl description]
* \@method findItemsByUrl
* @param {?} url [description]
* @param {?} items [description]
* @param {?=} returnItems [description]
* @return {?} [description]
*/
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 [description]
* @return {?}
*/
activeItems(url) {
this.activatedItems.forEach((item) => {
item.isActive = false;
});
this.activatedItems = [];
this.collapsedItems.forEach((item) => {
item.isActive = false;