@delon/theme 12.4.2 → 13.1.0

package/fesm2020/layout-default.mjs

@@ -0,0 +1,654 @@
+import * as i6 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, ChangeDetectionStrategy, EventEmitter, ViewEncapsulation, Inject, Optional, Output, ContentChildren, Directive, NgModule } from '@angular/core';
+import * as i2 from '@angular/router';
+import { NavigationEnd, RouteConfigLoadStart, NavigationError, NavigationCancel, RouteConfigLoadEnd, RouterModule } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil, filter } from 'rxjs/operators';
+import { updateHostClass } from '@delon/util/browser';
+import * as i2$1 from 'ng-zorro-antd/message';
+import { NzMessageModule } from 'ng-zorro-antd/message';
+import * as i1 from '@delon/theme';
+import * as i4 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { __decorate } from 'tslib';
+import { InputBoolean, InputNumber, ZoneOutside } from '@delon/util/decorator';
+import { WINDOW } from '@delon/util/token';
+import * as i3 from '@angular/platform-browser';
+import * as i4$1 from '@angular/cdk/bidi';
+import * as i5 from 'ng-zorro-antd/badge';
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import * as i8 from 'ng-zorro-antd/tooltip';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+
+class LayoutDefaultHeaderItemComponent {
+    constructor() {
+        this.hidden = 'none';
+        this.direction = 'right';
+    }
+}
+LayoutDefaultHeaderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LayoutDefaultHeaderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LayoutDefaultHeaderItemComponent, selector: "layout-default-header-item", inputs: { hidden: "hidden", direction: "direction" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #host>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'layout-default-header-item',
+                    template: `
+    <ng-template #host>
+      <ng-content></ng-content>
+    </ng-template>
+  `
+                }]
+        }], propDecorators: { host: [{
+                type: ViewChild,
+                args: ['host', { static: true }]
+            }], hidden: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+
+class LayoutDefaultHeaderComponent {
+    constructor(settings, cdr) {
+        this.settings = settings;
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+        this.left = [];
+        this.middle = [];
+        this.right = [];
+    }
+    get app() {
+        return this.settings.app;
+    }
+    get collapsed() {
+        return this.settings.layout.collapsed;
+    }
+    get collapsedIcon() {
+        let type = this.collapsed ? 'unfold' : 'fold';
+        if (this.settings.layout.direction === 'rtl') {
+            type = this.collapsed ? 'fold' : 'unfold';
+        }
+        return `menu-${type}`;
+    }
+    refresh() {
+        const arr = this.items.toArray();
+        this.left = arr.filter(i => i.direction === 'left');
+        this.middle = arr.filter(i => i.direction === 'middle');
+        this.right = arr.filter(i => i.direction === 'right');
+        this.cdr.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.items.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.refresh());
+        this.refresh();
+    }
+    toggleCollapsed() {
+        this.settings.setLayout('collapsed', !this.settings.layout.collapsed);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+LayoutDefaultHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderComponent, deps: [{ token: i1.SettingsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LayoutDefaultHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LayoutDefaultHeaderComponent, selector: "layout-default-header", inputs: { items: "items", options: "options" }, host: { properties: { "class.alain-default__header": "true" } }, ngImport: i0, template: `
+    <ng-template #render let-ls>
+      <li *ngFor="let i of ls" [class.hidden-mobile]="i.hidden === 'mobile'" [class.hidden-pc]="i.hidden === 'pc'">
+        <ng-container *ngTemplateOutlet="i.host"></ng-container>
+      </li>
+    </ng-template>
+    <div class="alain-default__header-logo" [style.width.px]="options.logoFixWidth">
+      <a [routerLink]="options.logoLink" class="alain-default__header-logo-link">
+        <img class="alain-default__header-logo-expanded" [attr.src]="options.logoExpanded" [attr.alt]="app.name" />
+        <img class="alain-default__header-logo-collapsed" [attr.src]="options.logoCollapsed" [attr.alt]="app.name" />
+      </a>
+    </div>
+    <div class="alain-default__nav-wrap">
+      <ul class="alain-default__nav">
+        <li *ngIf="!options.hideAside">
+          <div class="alain-default__nav-item alain-default__nav-item--collapse" (click)="toggleCollapsed()">
+            <i nz-icon [nzType]="collapsedIcon"></i>
+          </div>
+        </li>
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: left }"></ng-template>
+      </ul>
+      <div *ngIf="middle.length > 0" class="alain-default__nav alain-default__nav-middle">
+        <ng-container *ngTemplateOutlet="middle[0].host"></ng-container>
+      </div>
+      <ul class="alain-default__nav">
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: right }"></ng-template>
+      </ul>
+    </div>
+  `, isInline: true, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'layout-default-header',
+                    template: `
+    <ng-template #render let-ls>
+      <li *ngFor="let i of ls" [class.hidden-mobile]="i.hidden === 'mobile'" [class.hidden-pc]="i.hidden === 'pc'">
+        <ng-container *ngTemplateOutlet="i.host"></ng-container>
+      </li>
+    </ng-template>
+    <div class="alain-default__header-logo" [style.width.px]="options.logoFixWidth">
+      <a [routerLink]="options.logoLink" class="alain-default__header-logo-link">
+        <img class="alain-default__header-logo-expanded" [attr.src]="options.logoExpanded" [attr.alt]="app.name" />
+        <img class="alain-default__header-logo-collapsed" [attr.src]="options.logoCollapsed" [attr.alt]="app.name" />
+      </a>
+    </div>
+    <div class="alain-default__nav-wrap">
+      <ul class="alain-default__nav">
+        <li *ngIf="!options.hideAside">
+          <div class="alain-default__nav-item alain-default__nav-item--collapse" (click)="toggleCollapsed()">
+            <i nz-icon [nzType]="collapsedIcon"></i>
+          </div>
+        </li>
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: left }"></ng-template>
+      </ul>
+      <div *ngIf="middle.length > 0" class="alain-default__nav alain-default__nav-middle">
+        <ng-container *ngTemplateOutlet="middle[0].host"></ng-container>
+      </div>
+      <ul class="alain-default__nav">
+        <ng-template [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: right }"></ng-template>
+      </ul>
+    </div>
+  `,
+                    host: {
+                        '[class.alain-default__header]': `true`
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SettingsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+const SHOWCLS = 'sidebar-nav__floating-show';
+const FLOATINGCLS = 'sidebar-nav__floating';
+class LayoutDefaultNavComponent {
+    constructor(menuSrv, settings, router, render, cdr, ngZone, sanitizer, doc, win, directionality) {
+        this.menuSrv = menuSrv;
+        this.settings = settings;
+        this.router = router;
+        this.render = render;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.sanitizer = sanitizer;
+        this.doc = doc;
+        this.win = win;
+        this.directionality = directionality;
+        this.destroy$ = new Subject();
+        this.dir = 'ltr';
+        this.list = [];
+        this.disabledAcl = false;
+        this.autoCloseUnderPad = true;
+        this.recursivePath = true;
+        this.openStrictly = false;
+        this.maxLevelIcon = 3;
+        this.select = new EventEmitter();
+    }
+    get collapsed() {
+        return this.settings.layout.collapsed;
+    }
+    getLinkNode(node) {
+        node = node.nodeName === 'A' ? node : node.parentNode;
+        return node.nodeName !== 'A' ? null : node;
+    }
+    floatingClickHandle(e) {
+        e.stopPropagation();
+        const linkNode = this.getLinkNode(e.target);
+        if (linkNode == null) {
+            return false;
+        }
+        const id = +linkNode.dataset.id;
+        // Should be ingore children title trigger event
+        if (isNaN(id)) {
+            return false;
+        }
+        let item;
+        this.menuSrv.visit(this.list, (i) => {
+            if (!item && i._id === id) {
+                item = i;
+            }
+        });
+        this.to(item);
+        this.hideAll();
+        e.preventDefault();
+        return false;
+    }
+    clearFloating() {
+        if (!this.floatingEl)
+            return;
+        this.floatingEl.removeEventListener('click', this.floatingClickHandle.bind(this));
+        // fix ie: https://github.com/ng-alain/delon/issues/52
+        if (this.floatingEl.hasOwnProperty('remove')) {
+            this.floatingEl.remove();
+        }
+        else if (this.floatingEl.parentNode) {
+            this.floatingEl.parentNode.removeChild(this.floatingEl);
+        }
+    }
+    genFloating() {
+        this.clearFloating();
+        this.floatingEl = this.render.createElement('div');
+        this.floatingEl.classList.add(`${FLOATINGCLS}-container`);
+        this.floatingEl.addEventListener('click', this.floatingClickHandle.bind(this), false);
+        this.bodyEl.appendChild(this.floatingEl);
+    }
+    genSubNode(linkNode, item) {
+        const id = `_sidebar-nav-${item._id}`;
+        const childNode = item.badge ? linkNode.nextElementSibling.nextElementSibling : linkNode.nextElementSibling;
+        const node = childNode.cloneNode(true);
+        node.id = id;
+        node.classList.add(FLOATINGCLS);
+        node.addEventListener('mouseleave', () => {
+            node.classList.remove(SHOWCLS);
+        }, false);
+        this.floatingEl.appendChild(node);
+        return node;
+    }
+    hideAll() {
+        const allNode = this.floatingEl.querySelectorAll(`.${FLOATINGCLS}`);
+        for (let i = 0; i < allNode.length; i++) {
+            allNode[i].classList.remove(SHOWCLS);
+        }
+    }
+    // calculate the node position values.
+    calPos(linkNode, node) {
+        const rect = linkNode.getBoundingClientRect();
+        // bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14721015/
+        const scrollTop = Math.max(this.doc.documentElement.scrollTop, this.bodyEl.scrollTop);
+        const docHeight = Math.max(this.doc.documentElement.clientHeight, this.bodyEl.clientHeight);
+        const spacing = 5;
+        let offsetHeight = -spacing;
+        if (docHeight < rect.top + node.clientHeight) {
+            offsetHeight = rect.top + node.clientHeight - docHeight + spacing;
+        }
+        node.style.top = `${rect.top + scrollTop - offsetHeight}px`;
+        if (this.dir === 'rtl') {
+            node.style.right = `${rect.width + spacing}px`;
+        }
+        else {
+            node.style.left = `${rect.right + spacing}px`;
+        }
+    }
+    showSubMenu(e, item) {
+        if (this.collapsed !== true) {
+            return;
+        }
+        e.preventDefault();
+        const linkNode = e.target;
+        this.genFloating();
+        const subNode = this.genSubNode(linkNode, item);
+        this.hideAll();
+        subNode.classList.add(SHOWCLS);
+        this.calPos(linkNode, subNode);
+    }
+    to(item) {
+        this.select.emit(item);
+        if (item.disabled)
+            return;
+        if (item.externalLink) {
+            if (item.target === '_blank') {
+                this.win.open(item.externalLink);
+            }
+            else {
+                this.win.location.href = item.externalLink;
+            }
+            return;
+        }
+        this.ngZone.run(() => this.router.navigateByUrl(item.link));
+    }
+    toggleOpen(item) {
+        if (!this.openStrictly) {
+            this.menuSrv.visit(this.list, (i) => {
+                if (i !== item)
+                    i._open = false;
+            });
+            let pItem = item._parent;
+            while (pItem) {
+                pItem._open = true;
+                pItem = pItem._parent;
+            }
+        }
+        item._open = !item._open;
+        this.cdr.markForCheck();
+    }
+    _click() {
+        if (this.isPad && this.collapsed) {
+            this.openAside(false);
+            this.hideAll();
+        }
+    }
+    closeSubMenu() {
+        if (this.collapsed) {
+            this.hideAll();
+        }
+    }
+    openedByUrl(url) {
+        const { menuSrv, recursivePath, openStrictly } = this;
+        let findItem = menuSrv.getHit(this.menuSrv.menus, url, recursivePath, (i) => {
+            i._selected = false;
+            if (!openStrictly) {
+                i._open = false;
+            }
+        });
+        if (findItem == null)
+            return;
+        do {
+            findItem._selected = true;
+            if (!openStrictly) {
+                findItem._open = true;
+            }
+            findItem = findItem._parent;
+        } while (findItem);
+    }
+    ngOnInit() {
+        const { doc, router, destroy$, menuSrv, settings, cdr } = this;
+        this.bodyEl = doc.querySelector('body');
+        this.openedByUrl(router.url);
+        this.ngZone.runOutsideAngular(() => this.genFloating());
+        menuSrv.change.pipe(takeUntil(destroy$)).subscribe(data => {
+            menuSrv.visit(data, (i, _p, depth) => {
+                i._text = this.sanitizer.bypassSecurityTrustHtml(i.text);
+                i._needIcon = depth <= this.maxLevelIcon && !!i.icon;
+                if (!i._aclResult) {
+                    if (this.disabledAcl) {
+                        i.disabled = true;
+                    }
+                    else {
+                        i._hidden = true;
+                    }
+                }
+                if (this.openStrictly) {
+                    i._open = i.open != null ? i.open : false;
+                }
+                const icon = i.icon;
+                if (icon && icon.type === 'svg' && typeof icon.value === 'string') {
+                    icon.value = this.sanitizer.bypassSecurityTrustHtml(icon.value);
+                }
+            });
+            this.list = menuSrv.menus.filter((w) => w._hidden !== true);
+            cdr.detectChanges();
+        });
+        router.events.pipe(takeUntil(destroy$)).subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                this.openedByUrl(e.urlAfterRedirects);
+                this.underPad();
+                this.cdr.detectChanges();
+            }
+        });
+        settings.notify
+            .pipe(takeUntil(destroy$), filter(t => t.type === 'layout' && t.name === 'collapsed'))
+            .subscribe(() => this.clearFloating());
+        this.underPad();
+        this.dir = this.directionality.value;
+        this.directionality.change?.pipe(takeUntil(destroy$)).subscribe((direction) => {
+            this.dir = direction;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.clearFloating();
+    }
+    // #region Under pad
+    get isPad() {
+        return this.doc.defaultView.innerWidth < 768;
+    }
+    underPad() {
+        if (this.autoCloseUnderPad && this.isPad && !this.collapsed) {
+            setTimeout(() => this.openAside(true));
+        }
+    }
+    openAside(status) {
+        this.settings.setLayout('collapsed', status);
+    }
+}
+LayoutDefaultNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultNavComponent, deps: [{ token: i1.MenuService }, { token: i1.SettingsService }, { token: i2.Router }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.DomSanitizer }, { token: DOCUMENT }, { token: WINDOW }, { token: i4$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LayoutDefaultNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LayoutDefaultNavComponent, selector: "layout-default-nav", inputs: { disabledAcl: "disabledAcl", autoCloseUnderPad: "autoCloseUnderPad", recursivePath: "recursivePath", openStrictly: "openStrictly", maxLevelIcon: "maxLevelIcon" }, outputs: { select: "select" }, host: { listeners: { "click": "_click()", "document:click": "closeSubMenu()" } }, ngImport: i0, template: "<ng-template #icon let-i>\n  <ng-container *ngIf=\"i\" [ngSwitch]=\"i.type\">\n    <i\n      *ngSwitchCase=\"'icon'\"\n      class=\"sidebar-nav__item-icon\"\n      nz-icon\n      [nzType]=\"i.value\"\n      [nzTheme]=\"i.theme\"\n      [nzSpin]=\"i.spin\"\n      [nzTwotoneColor]=\"i.twoToneColor\"\n      [nzIconfont]=\"i.iconfont\"\n      [nzRotate]=\"i.rotate\"\n    ></i>\n    <i *ngSwitchCase=\"'iconfont'\" class=\"sidebar-nav__item-icon\" nz-icon [nzIconfont]=\"i.iconfont\"></i>\n    <img *ngSwitchCase=\"'img'\" [src]=\"i.value\" class=\"sidebar-nav__item-icon sidebar-nav__item-img\" />\n    <span *ngSwitchCase=\"'svg'\" class=\"sidebar-nav__item-icon sidebar-nav__item-svg\" [innerHTML]=\"i.value\"></span>\n    <i *ngSwitchDefault class=\"sidebar-nav__item-icon {{ i.value }}\"></i>\n  </ng-container>\n</ng-template>\n<ng-template #tree let-ls>\n  <ng-container *ngFor=\"let i of ls\">\n    <li\n      *ngIf=\"i._hidden !== true\"\n      class=\"sidebar-nav__item\"\n      [class.sidebar-nav__selected]=\"i._selected\"\n      [class.sidebar-nav__open]=\"i._open\"\n    >\n      <!-- link -->\n      <a\n        *ngIf=\"i.children.length === 0\"\n        (click)=\"to(i)\"\n        [attr.data-id]=\"i._id\"\n        class=\"sidebar-nav__item-link\"\n        [ngClass]=\"{ 'sidebar-nav__item-disabled': i.disabled }\"\n        (mouseenter)=\"closeSubMenu()\"\n      >\n        <ng-container *ngIf=\"i._needIcon\">\n          <ng-container *ngIf=\"!collapsed\">\n            <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n          </ng-container>\n          <span *ngIf=\"collapsed\" nz-tooltip nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"i.text\">\n            <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n          </span>\n        </ng-container>\n        <span class=\"sidebar-nav__item-text\" [innerHTML]=\"i._text\" [attr.title]=\"i.text\"></span>\n      </a>\n      <!-- has children link -->\n      <a\n        *ngIf=\"i.children.length > 0\"\n        (click)=\"toggleOpen(i)\"\n        (mouseenter)=\"showSubMenu($event, i)\"\n        class=\"sidebar-nav__item-link\"\n      >\n        <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n        <span class=\"sidebar-nav__item-text\" [innerHTML]=\"i._text\" [attr.title]=\"i.text\"></span>\n        <i class=\"sidebar-nav__sub-arrow\"></i>\n      </a>\n      <!-- badge -->\n      <nz-badge *ngIf=\"i.badge\" [nzCount]=\"i.badge\" [nzDot]=\"i.badgeDot\" nzStandalone [nzOverflowCount]=\"9\"></nz-badge>\n      <ul *ngIf=\"i.children.length > 0\" class=\"sidebar-nav sidebar-nav__sub sidebar-nav__depth{{ i._depth }}\">\n        <ng-template [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{ $implicit: i.children }\"></ng-template>\n      </ul>\n    </li>\n  </ng-container>\n</ng-template>\n<ul class=\"sidebar-nav\">\n  <ng-container *ngFor=\"let group of list\">\n    <li class=\"sidebar-nav__item sidebar-nav__group-title\" *ngIf=\"group.group\">\n      <span [innerHTML]=\"group._text\"></span>\n    </li>\n    <ng-template [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{ $implicit: group.children }\"></ng-template>\n  </ng-container>\n</ul>\n", components: [{ type: i5.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset"], exportAs: ["nzBadge"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputBoolean()
+], LayoutDefaultNavComponent.prototype, "disabledAcl", void 0);
+__decorate([
+    InputBoolean()
+], LayoutDefaultNavComponent.prototype, "autoCloseUnderPad", void 0);
+__decorate([
+    InputBoolean()
+], LayoutDefaultNavComponent.prototype, "recursivePath", void 0);
+__decorate([
+    InputBoolean()
+], LayoutDefaultNavComponent.prototype, "openStrictly", void 0);
+__decorate([
+    InputNumber()
+], LayoutDefaultNavComponent.prototype, "maxLevelIcon", void 0);
+__decorate([
+    ZoneOutside()
+], LayoutDefaultNavComponent.prototype, "showSubMenu", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'layout-default-nav', host: {
+                        '(click)': '_click()',
+                        '(document:click)': 'closeSubMenu()'
+                    }, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #icon let-i>\n  <ng-container *ngIf=\"i\" [ngSwitch]=\"i.type\">\n    <i\n      *ngSwitchCase=\"'icon'\"\n      class=\"sidebar-nav__item-icon\"\n      nz-icon\n      [nzType]=\"i.value\"\n      [nzTheme]=\"i.theme\"\n      [nzSpin]=\"i.spin\"\n      [nzTwotoneColor]=\"i.twoToneColor\"\n      [nzIconfont]=\"i.iconfont\"\n      [nzRotate]=\"i.rotate\"\n    ></i>\n    <i *ngSwitchCase=\"'iconfont'\" class=\"sidebar-nav__item-icon\" nz-icon [nzIconfont]=\"i.iconfont\"></i>\n    <img *ngSwitchCase=\"'img'\" [src]=\"i.value\" class=\"sidebar-nav__item-icon sidebar-nav__item-img\" />\n    <span *ngSwitchCase=\"'svg'\" class=\"sidebar-nav__item-icon sidebar-nav__item-svg\" [innerHTML]=\"i.value\"></span>\n    <i *ngSwitchDefault class=\"sidebar-nav__item-icon {{ i.value }}\"></i>\n  </ng-container>\n</ng-template>\n<ng-template #tree let-ls>\n  <ng-container *ngFor=\"let i of ls\">\n    <li\n      *ngIf=\"i._hidden !== true\"\n      class=\"sidebar-nav__item\"\n      [class.sidebar-nav__selected]=\"i._selected\"\n      [class.sidebar-nav__open]=\"i._open\"\n    >\n      <!-- link -->\n      <a\n        *ngIf=\"i.children.length === 0\"\n        (click)=\"to(i)\"\n        [attr.data-id]=\"i._id\"\n        class=\"sidebar-nav__item-link\"\n        [ngClass]=\"{ 'sidebar-nav__item-disabled': i.disabled }\"\n        (mouseenter)=\"closeSubMenu()\"\n      >\n        <ng-container *ngIf=\"i._needIcon\">\n          <ng-container *ngIf=\"!collapsed\">\n            <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n          </ng-container>\n          <span *ngIf=\"collapsed\" nz-tooltip nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"i.text\">\n            <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n          </span>\n        </ng-container>\n        <span class=\"sidebar-nav__item-text\" [innerHTML]=\"i._text\" [attr.title]=\"i.text\"></span>\n      </a>\n      <!-- has children link -->\n      <a\n        *ngIf=\"i.children.length > 0\"\n        (click)=\"toggleOpen(i)\"\n        (mouseenter)=\"showSubMenu($event, i)\"\n        class=\"sidebar-nav__item-link\"\n      >\n        <ng-template [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: i.icon }\"></ng-template>\n        <span class=\"sidebar-nav__item-text\" [innerHTML]=\"i._text\" [attr.title]=\"i.text\"></span>\n        <i class=\"sidebar-nav__sub-arrow\"></i>\n      </a>\n      <!-- badge -->\n      <nz-badge *ngIf=\"i.badge\" [nzCount]=\"i.badge\" [nzDot]=\"i.badgeDot\" nzStandalone [nzOverflowCount]=\"9\"></nz-badge>\n      <ul *ngIf=\"i.children.length > 0\" class=\"sidebar-nav sidebar-nav__sub sidebar-nav__depth{{ i._depth }}\">\n        <ng-template [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{ $implicit: i.children }\"></ng-template>\n      </ul>\n    </li>\n  </ng-container>\n</ng-template>\n<ul class=\"sidebar-nav\">\n  <ng-container *ngFor=\"let group of list\">\n    <li class=\"sidebar-nav__item sidebar-nav__group-title\" *ngIf=\"group.group\">\n      <span [innerHTML]=\"group._text\"></span>\n    </li>\n    <ng-template [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{ $implicit: group.children }\"></ng-template>\n  </ng-container>\n</ul>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.MenuService }, { type: i1.SettingsService }, { type: i2.Router }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }, { type: i4$1.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { disabledAcl: [{
+                type: Input
+            }], autoCloseUnderPad: [{
+                type: Input
+            }], recursivePath: [{
+                type: Input
+            }], openStrictly: [{
+                type: Input
+            }], maxLevelIcon: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], showSubMenu: [] } });
+
+class LayoutDefaultComponent {
+    constructor(router, msgSrv, settings, el, renderer, doc) {
+        this.msgSrv = msgSrv;
+        this.settings = settings;
+        this.el = el;
+        this.renderer = renderer;
+        this.doc = doc;
+        this.asideUser = null;
+        this.nav = null;
+        this.content = null;
+        this.destroy$ = new Subject();
+        this.isFetching = false;
+        router.events.pipe(takeUntil(this.destroy$)).subscribe(ev => this.processEv(ev));
+    }
+    processEv(ev) {
+        if (!this.isFetching && ev instanceof RouteConfigLoadStart) {
+            this.isFetching = true;
+        }
+        if (ev instanceof NavigationError || ev instanceof NavigationCancel) {
+            this.isFetching = false;
+            const err = this.customError === null ? null : this.customError ?? `Could not load ${ev.url} route`;
+            if (err && ev instanceof NavigationError) {
+                this.msgSrv.error(err, { nzDuration: 1000 * 3 });
+            }
+            return;
+        }
+        if (!(ev instanceof NavigationEnd || ev instanceof RouteConfigLoadEnd)) {
+            return;
+        }
+        if (this.isFetching) {
+            setTimeout(() => {
+                this.isFetching = false;
+            }, 100);
+        }
+    }
+    setClass() {
+        const { el, doc, renderer, settings } = this;
+        const layout = settings.layout;
+        updateHostClass(el.nativeElement, renderer, {
+            ['alain-default']: true,
+            [`alain-default__fixed`]: layout.fixed,
+            [`alain-default__collapsed`]: layout.collapsed,
+            [`alain-default__hide-aside`]: this.options.hideAside
+        });
+        doc.body.classList[layout.colorWeak ? 'add' : 'remove']('color-weak');
+    }
+    ngOnInit() {
+        this.options = {
+            logoExpanded: `./assets/logo-full.svg`,
+            logoCollapsed: `./assets/logo.svg`,
+            logoLink: `/`,
+            hideAside: false,
+            ...this.options
+        };
+        const { settings, destroy$ } = this;
+        settings.notify.pipe(takeUntil(destroy$)).subscribe(() => this.setClass());
+        this.setClass();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+LayoutDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultComponent, deps: [{ token: i2.Router }, { token: i2$1.NzMessageService }, { token: i1.SettingsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+LayoutDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: LayoutDefaultComponent, selector: "layout-default", inputs: { options: "options", asideUser: "asideUser", nav: "nav", content: "content", customError: "customError" }, queries: [{ propertyName: "headerItems", predicate: LayoutDefaultHeaderItemComponent }], exportAs: ["layoutDefault"], ngImport: i0, template: `
+    <div class="alain-default__progress-bar" *ngIf="isFetching"></div>
+    <layout-default-header [options]="options" [items]="headerItems"></layout-default-header>
+    <div *ngIf="!options.hideAside" class="alain-default__aside">
+      <div class="alain-default__aside-inner">
+        <ng-container *ngTemplateOutlet="asideUser"></ng-container>
+        <ng-container *ngTemplateOutlet="nav"></ng-container>
+        <layout-default-nav *ngIf="!nav" class="d-block py-lg"></layout-default-nav>
+      </div>
+    </div>
+    <section class="alain-default__content">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+      <ng-content></ng-content>
+    </section>
+  `, isInline: true, components: [{ type: LayoutDefaultHeaderComponent, selector: "layout-default-header", inputs: ["items", "options"] }, { type: LayoutDefaultNavComponent, selector: "layout-default-nav", inputs: ["disabledAcl", "autoCloseUnderPad", "recursivePath", "openStrictly", "maxLevelIcon"], outputs: ["select"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'layout-default',
+                    exportAs: 'layoutDefault',
+                    template: `
+    <div class="alain-default__progress-bar" *ngIf="isFetching"></div>
+    <layout-default-header [options]="options" [items]="headerItems"></layout-default-header>
+    <div *ngIf="!options.hideAside" class="alain-default__aside">
+      <div class="alain-default__aside-inner">
+        <ng-container *ngTemplateOutlet="asideUser"></ng-container>
+        <ng-container *ngTemplateOutlet="nav"></ng-container>
+        <layout-default-nav *ngIf="!nav" class="d-block py-lg"></layout-default-nav>
+      </div>
+    </div>
+    <section class="alain-default__content">
+      <ng-container *ngTemplateOutlet="content"></ng-container>
+      <ng-content></ng-content>
+    </section>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i2.Router }, { type: i2$1.NzMessageService }, { type: i1.SettingsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { headerItems: [{
+                type: ContentChildren,
+                args: [LayoutDefaultHeaderItemComponent, { descendants: false }]
+            }], options: [{
+                type: Input
+            }], asideUser: [{
+                type: Input
+            }], nav: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], customError: [{
+                type: Input
+            }] } });
+
+class LayoutDefaultHeaderItemTriggerDirective {
+}
+LayoutDefaultHeaderItemTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderItemTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+LayoutDefaultHeaderItemTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.2", type: LayoutDefaultHeaderItemTriggerDirective, selector: "[layout-default-header-item-trigger]", host: { properties: { "class.alain-default__nav-item": "true" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultHeaderItemTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[layout-default-header-item-trigger]',
+                    host: {
+                        '[class.alain-default__nav-item]': `true`
+                    }
+                }]
+        }] });
+
+const COMPONENTS = [
+    LayoutDefaultComponent,
+    LayoutDefaultNavComponent,
+    LayoutDefaultHeaderComponent,
+    LayoutDefaultHeaderItemComponent,
+    LayoutDefaultHeaderItemTriggerDirective
+];
+class LayoutDefaultModule {
+}
+LayoutDefaultModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LayoutDefaultModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultModule, declarations: [LayoutDefaultComponent,
+        LayoutDefaultNavComponent,
+        LayoutDefaultHeaderComponent,
+        LayoutDefaultHeaderItemComponent,
+        LayoutDefaultHeaderItemTriggerDirective], imports: [CommonModule,
+        RouterModule,
+        NzToolTipModule,
+        NzIconModule,
+        NzAvatarModule,
+        NzDropDownModule,
+        NzMessageModule,
+        NzBadgeModule], exports: [LayoutDefaultComponent,
+        LayoutDefaultNavComponent,
+        LayoutDefaultHeaderComponent,
+        LayoutDefaultHeaderItemComponent,
+        LayoutDefaultHeaderItemTriggerDirective] });
+LayoutDefaultModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultModule, imports: [[
+            CommonModule,
+            RouterModule,
+            NzToolTipModule,
+            NzIconModule,
+            NzAvatarModule,
+            NzDropDownModule,
+            NzMessageModule,
+            NzBadgeModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: LayoutDefaultModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        NzToolTipModule,
+                        NzIconModule,
+                        NzAvatarModule,
+                        NzDropDownModule,
+                        NzMessageModule,
+                        NzBadgeModule
+                    ],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LayoutDefaultComponent, LayoutDefaultHeaderComponent, LayoutDefaultHeaderItemComponent, LayoutDefaultHeaderItemTriggerDirective, LayoutDefaultModule, LayoutDefaultNavComponent };
+//# sourceMappingURL=layout-default.mjs.map