@brggroup/share-lib 0.0.70 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5968,7 +5968,7 @@ class LayoutUser extends BaseComponent {
|
|
|
5968
5968
|
this.authService.signOut();
|
|
5969
5969
|
}
|
|
5970
5970
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5971
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "layout-user", usesInheritance: true, ngImport: i0, template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n <button nz-button nzType=\"text\" nzSize=\"small\">\n <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n </button>\n</nz-badge>\n\n<button\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"
|
|
5971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutUser, isStandalone: true, selector: "layout-user", usesInheritance: true, ngImport: i0, template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n <button nz-button nzType=\"text\" nzSize=\"small\">\n <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n </button>\n</nz-badge>\n\n<button\n *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\n [@fadeInOut]\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menuOrg\"\n style=\"height: 50px; color: #ffffff\"\n>\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n <ul nz-menu>\n @for (org of lstOrg; track $index) {\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n <li nz-menu-item (click)=\"changeOrg(org)\">\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\n </li>\n }\n </ul>\n</nz-dropdown-menu>\n\n<button\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menuUser\"\n style=\"height: 50px; color: #ffffff\"\n>\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n {{ TokenStorage.getUserFullname() }}\n</button>\n\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\n <ul nz-menu>\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\n </li>\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\n <li nz-menu-item (click)=\"gotoSetting()\">\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\n </li>\n <li nz-menu-divider></li>\n <li nz-menu-item (click)=\"logout()\">\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\n </li>\n </ul>\n</nz-dropdown-menu>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "directive", type: i4$2.NzMenuDividerDirective, selector: "[nz-menu-divider]", exportAs: ["nzMenuDivider"] }, { kind: "directive", type: i5$3.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i5$3.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }, { kind: "directive", type: i5$3.NzDropdownButtonDirective, selector: "[nz-button][nz-dropdown]" }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzFlexModule }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type: NzTreeModule }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NzInputModule }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "ngmodule", type: NzBadgeModule }, { kind: "component", type: i8$1.NzBadgeComponent, selector: "nz-badge", inputs: ["nzShowZero", "nzShowDot", "nzStandalone", "nzDot", "nzOverflowCount", "nzColor", "nzStyle", "nzText", "nzTitle", "nzStatus", "nzCount", "nzOffset", "nzSize"], exportAs: ["nzBadge"] }], animations: [fadeInOut] });
|
|
5972
5972
|
}
|
|
5973
5973
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutUser, decorators: [{
|
|
5974
5974
|
type: Component,
|
|
@@ -5989,7 +5989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
5989
5989
|
NzTreeModule,
|
|
5990
5990
|
NzSegmentedModule,
|
|
5991
5991
|
NzBadgeModule,
|
|
5992
|
-
], animations: [fadeInOut], template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n <button nz-button nzType=\"text\" nzSize=\"small\">\n <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n </button>\n</nz-badge>\n\n<button\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"
|
|
5992
|
+
], animations: [fadeInOut], template: "<nz-badge [nzSize]=\"'small'\" [nzCount]=\"0\">\n <button nz-button nzType=\"text\" nzSize=\"small\">\n <nz-icon nzType=\"bell\" nzTheme=\"outline\" style=\"color: #ffffff\" />\n </button>\n</nz-badge>\n\n<button\n *ngIf=\"!isXSmall && TokenStorage.getOrgName()\"\n [@fadeInOut]\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menuOrg\"\n style=\"height: 50px; color: #ffffff\"\n>\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" />\n {{ TokenStorage.getOrgName() }}\n</button>\n\n<nz-dropdown-menu #menuOrg=\"nzDropdownMenu\">\n <ul nz-menu>\n @for (org of lstOrg; track $index) {\n <li *ngIf=\"$index > 0\" nz-menu-divider></li>\n <li nz-menu-item (click)=\"changeOrg(org)\">\n <nz-icon nzType=\"swap\" nzTheme=\"outline\" /> {{ org.Name }}\n </li>\n }\n </ul>\n</nz-dropdown-menu>\n\n<button\n nz-button\n nzType=\"text\"\n nz-dropdown\n nzTrigger=\"click\"\n [nzDropdownMenu]=\"menuUser\"\n style=\"height: 50px; color: #ffffff\"\n>\n <nz-icon nzType=\"user\" nzTheme=\"outline\" />\n {{ TokenStorage.getUserFullname() }}\n</button>\n\n<nz-dropdown-menu #menuUser=\"nzDropdownMenu\">\n <ul nz-menu>\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-item>\n <nz-icon nzType=\"cluster\" nzTheme=\"outline\" /> {{ TokenStorage.getOrgName() }}\n </li>\n <li *ngIf=\"!(!isXSmall && TokenStorage.getOrgName())\" nz-menu-divider></li>\n <li nz-menu-item (click)=\"gotoSetting()\">\n <nz-icon nzType=\"setting\" nzTheme=\"outline\" /> {{ TranslateKey.SETTING | translate }}\n </li>\n <li nz-menu-divider></li>\n <li nz-menu-item (click)=\"logout()\">\n <nz-icon nzType=\"logout\" nzTheme=\"outline\" /> {{ TranslateKey.LOGOUT | translate }}\n </li>\n </ul>\n</nz-dropdown-menu>\n" }]
|
|
5993
5993
|
}] });
|
|
5994
5994
|
|
|
5995
5995
|
const URLs$2 = {
|
|
@@ -6554,7 +6554,7 @@ class LayoutComponent extends BaseComponent {
|
|
|
6554
6554
|
return r;
|
|
6555
6555
|
}
|
|
6556
6556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "divuser", first: true, predicate: ["divuser"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n <nz-header class=\"app-header\">\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\n @if (isCollapsed) {\n <div @fadeInOut>\n <button nz-button (click)=\"visibleMenuDrawer = true\">\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n </button>\n </div>\n }\n\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n <img\n *ngIf=\"logoUrl$ | async as url\"\n [src]=\"url\"\n height=\"40px\"\n style=\"position: relative; top: 5px\"\n hideIfError\n />\n @if (!isCollapsed) {\n @if (SYSTEM_NAME) {\n <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n } @else {\n -- o0o --\n }\n }\n </div>\n </div>\n @if (!HEADER_MENU_IN_USE) {\n <box [width]=\"8\"></box>\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n }\n <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n <div style=\"overflow: auto\">\n <nz-segmented\n [nzOptions]=\"lstHeaderMenuDisplay\"\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n ></nz-segmented>\n </div>\n </div>\n <div #divuser>\n <layout-user></layout-user>\n </div>\n </div>\n </nz-header>\n <nz-layout class=\"body-layout\">\n <nz-sider\n class=\"menu-sidebar\"\n nzCollapsible\n [nzWidth]=\"siderWidth\"\n [nzCollapsedWidth]=\"0\"\n [nzBreakpoint]=\"'md'\"\n [(nzCollapsed)]=\"isCollapsed\"\n [nzTrigger]=\"null\"\n [nzTheme]=\"'dark'\"\n >\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv4.Url\">{{ menuLv4.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\">{{ menuLv2.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\">{{ menuLv1.Name }}</a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n </div>\n <div class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </span>\n </div>\n </div>\n </nz-sider>\n <nz-layout class=\"main-layout\">\n <nz-content class=\"content\">\n <div class=\"inner-content\">\n @if (HEADER_MENU_IN_USE) {\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n <box [height]=\"8\"></box>\n }\n <router-outlet></router-outlet>\n </div>\n <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n </div>\n </div>\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n </nz-content>\n </nz-layout>\n </nz-layout>\n</nz-layout>\n\n<nz-drawer\n [nzWrapClassName]=\"'same-theme-color'\"\n [nzWidth]=\"350\"\n [nzClosable]=\"false\"\n [(nzVisible)]=\"visibleMenuDrawer\"\n [nzMaskClosable]=\"true\"\n nzPlacement=\"left\"\n nzTitle=\"\"\n (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n <ng-container *nzDrawerContent>\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper in-drawer\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper in-drawer\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv4.Url\">{{ menuLv4.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\">{{ menuLv2.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\">{{ menuLv1.Name }}</a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n <ng-template #afterTemplate>\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </button>\n </ng-template>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 80px)}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$3.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$3.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$3.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$3.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10$1.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: i14$1.NzSegmentedComponent, selector: "nz-segmented", inputs: ["nzBlock", "nzDisabled", "nzOptions", "nzSize"], outputs: ["nzValueChange"], exportAs: ["nzSegmented"] }, { kind: "component", type: LayoutUser, selector: "layout-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }], animations: [fadeInOut] });
|
|
6557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: LayoutComponent, isStandalone: true, selector: "layout", viewQueries: [{ propertyName: "divuser", first: true, predicate: ["divuser"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n <nz-header class=\"app-header\">\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\n @if (isCollapsed) {\n <div @fadeInOut>\n <button nz-button (click)=\"visibleMenuDrawer = true\">\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n </button>\n </div>\n }\n\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n <img\n *ngIf=\"logoUrl$ | async as url\"\n [src]=\"url\"\n height=\"40px\"\n style=\"position: relative; top: 5px\"\n hideIfError\n />\n @if (!isCollapsed) {\n @if (SYSTEM_NAME) {\n <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n } @else {\n -- o0o --\n }\n }\n </div>\n </div>\n @if (!HEADER_MENU_IN_USE) {\n <box [width]=\"8\"></box>\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n }\n <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n <div style=\"overflow: auto\">\n <nz-segmented\n [nzOptions]=\"lstHeaderMenuDisplay\"\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n ></nz-segmented>\n </div>\n </div>\n <div #divuser>\n <layout-user></layout-user>\n </div>\n </div>\n </nz-header>\n <nz-layout class=\"body-layout\">\n <nz-sider\n class=\"menu-sidebar\"\n nzCollapsible\n [nzWidth]=\"siderWidth\"\n [nzCollapsedWidth]=\"0\"\n [nzBreakpoint]=\"'md'\"\n [(nzCollapsed)]=\"isCollapsed\"\n [nzTrigger]=\"null\"\n [nzTheme]=\"'dark'\"\n >\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a\n [routerLink]=\"menuLv4.Url\"\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n ></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n </div>\n <div class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </span>\n </div>\n </div>\n </nz-sider>\n <nz-layout class=\"main-layout\">\n <nz-content class=\"content\">\n <div class=\"inner-content\">\n @if (HEADER_MENU_IN_USE) {\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n <box [height]=\"8\"></box>\n }\n <router-outlet></router-outlet>\n </div>\n <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n </div>\n </div>\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n </nz-content>\n </nz-layout>\n </nz-layout>\n</nz-layout>\n\n<nz-drawer\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n [nzWidth]=\"350\"\n [nzClosable]=\"false\"\n [(nzVisible)]=\"visibleMenuDrawer\"\n [nzMaskClosable]=\"true\"\n nzPlacement=\"left\"\n nzTitle=\"\"\n (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n <ng-container *nzDrawerContent>\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper in-drawer\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper in-drawer\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a\n [routerLink]=\"menuLv4.Url\"\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n ></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n <ng-template #afterTemplate>\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </button>\n </ng-template>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: NzLayoutModule }, { kind: "component", type: i2$3.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { kind: "component", type: i2$3.NzHeaderComponent, selector: "nz-header", exportAs: ["nzHeader"] }, { kind: "component", type: i2$3.NzContentComponent, selector: "nz-content", exportAs: ["nzContent"] }, { kind: "component", type: i2$3.NzSiderComponent, selector: "nz-sider", inputs: ["nzWidth", "nzTheme", "nzCollapsedWidth", "nzBreakpoint", "nzZeroTrigger", "nzTrigger", "nzReverseArrow", "nzCollapsible", "nzCollapsed"], outputs: ["nzCollapsedChange"], exportAs: ["nzSider"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i4$2.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i4$2.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i4$2.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzFlexModule }, { kind: "directive", type: i14.NzFlexDirective, selector: "[nz-flex],nz-flex", inputs: ["nzVertical", "nzJustify", "nzAlign", "nzGap", "nzWrap", "nzFlex"], exportAs: ["nzFlex"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i8.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: Breadcrumb, selector: "app-breadcrumb" }, { kind: "component", type: GlobalSpinnerComponent, selector: "app-global-spinner" }, { kind: "ngmodule", type: NzTreeModule }, { kind: "component", type: i10$1.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckboxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "ngmodule", type: NzBackTopModule }, { kind: "ngmodule", type: NzDrawerModule }, { kind: "component", type: i4$1.NzDrawerComponent, selector: "nz-drawer", inputs: ["nzContent", "nzCloseIcon", "nzClosable", "nzMaskClosable", "nzMask", "nzCloseOnNavigation", "nzNoAnimation", "nzKeyboard", "nzTitle", "nzExtra", "nzFooter", "nzPlacement", "nzSize", "nzMaskStyle", "nzBodyStyle", "nzWrapClassName", "nzWidth", "nzHeight", "nzZIndex", "nzOffsetX", "nzOffsetY", "nzVisible"], outputs: ["nzOnViewInit", "nzOnClose", "nzVisibleChange"], exportAs: ["nzDrawer"] }, { kind: "directive", type: i4$1.NzDrawerContentDirective, selector: "[nzDrawerContent]", exportAs: ["nzDrawerContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "component", type: Box, selector: "box", inputs: ["display", "width", "height"] }, { kind: "ngmodule", type: NzSegmentedModule }, { kind: "component", type: i14$1.NzSegmentedComponent, selector: "nz-segmented", inputs: ["nzBlock", "nzDisabled", "nzOptions", "nzSize"], outputs: ["nzValueChange"], exportAs: ["nzSegmented"] }, { kind: "component", type: LayoutUser, selector: "layout-user" }, { kind: "component", type: IconDelete, selector: "icon-delete", inputs: ["size"], outputs: ["click"] }, { kind: "component", type: IconSearch, selector: "icon-search", inputs: ["size"], outputs: ["click"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "directive", type: HideIfErrorDirective, selector: "img[hideIfError]" }], animations: [fadeInOut] });
|
|
6558
6558
|
}
|
|
6559
6559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
6560
6560
|
type: Component,
|
|
@@ -6584,7 +6584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
|
|
|
6584
6584
|
IconSearch,
|
|
6585
6585
|
HighlightPipe,
|
|
6586
6586
|
HideIfErrorDirective,
|
|
6587
|
-
], animations: [fadeInOut], template: "<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n <nz-header class=\"app-header\">\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\n @if (isCollapsed) {\n <div @fadeInOut>\n <button nz-button (click)=\"visibleMenuDrawer = true\">\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n </button>\n </div>\n }\n\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n <img\n *ngIf=\"logoUrl$ | async as url\"\n [src]=\"url\"\n height=\"40px\"\n style=\"position: relative; top: 5px\"\n hideIfError\n />\n @if (!isCollapsed) {\n @if (SYSTEM_NAME) {\n <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n } @else {\n -- o0o --\n }\n }\n </div>\n </div>\n @if (!HEADER_MENU_IN_USE) {\n <box [width]=\"8\"></box>\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n }\n <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n <div style=\"overflow: auto\">\n <nz-segmented\n [nzOptions]=\"lstHeaderMenuDisplay\"\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n ></nz-segmented>\n </div>\n </div>\n <div #divuser>\n <layout-user></layout-user>\n </div>\n </div>\n </nz-header>\n <nz-layout class=\"body-layout\">\n <nz-sider\n class=\"menu-sidebar\"\n nzCollapsible\n [nzWidth]=\"siderWidth\"\n [nzCollapsedWidth]=\"0\"\n [nzBreakpoint]=\"'md'\"\n [(nzCollapsed)]=\"isCollapsed\"\n [nzTrigger]=\"null\"\n [nzTheme]=\"'dark'\"\n >\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv4.Url\">{{ menuLv4.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\">{{ menuLv2.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\">{{ menuLv1.Name }}</a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n </div>\n <div class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </span>\n </div>\n </div>\n </nz-sider>\n <nz-layout class=\"main-layout\">\n <nz-content class=\"content\">\n <div class=\"inner-content\">\n @if (HEADER_MENU_IN_USE) {\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n <box [height]=\"8\"></box>\n }\n <router-outlet></router-outlet>\n </div>\n <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n </div>\n </div>\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n </nz-content>\n </nz-layout>\n </nz-layout>\n</nz-layout>\n\n<nz-drawer\n [nzWrapClassName]=\"'same-theme-color'\"\n [nzWidth]=\"350\"\n [nzClosable]=\"false\"\n [(nzVisible)]=\"visibleMenuDrawer\"\n [nzMaskClosable]=\"true\"\n nzPlacement=\"left\"\n nzTitle=\"\"\n (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n <ng-container *nzDrawerContent>\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper in-drawer\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper in-drawer\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv4.Url\">{{ menuLv4.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\">{{ menuLv2.Name }}</a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\">{{ menuLv1.Name }}</a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n <ng-template #afterTemplate>\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </button>\n </ng-template>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 80px)}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
|
|
6587
|
+
], animations: [fadeInOut], template: "<app-global-spinner></app-global-spinner>\n<nz-layout class=\"app-layout\">\n <nz-header class=\"app-header\">\n <div nz-row nzAlign=\"middle\" class=\"header-content\">\n @if (isCollapsed) {\n <div @fadeInOut>\n <button nz-button (click)=\"visibleMenuDrawer = true\">\n <nz-icon nzType=\"menu\" nzTheme=\"outline\" />\n </button>\n </div>\n }\n\n <div class=\"header-logo\" [style.width]=\"!isCollapsed ? siderWidthStorage : '100px'\">\n <div nz-flex nzJustify=\"center\" nzGap=\"small\">\n <img\n *ngIf=\"logoUrl$ | async as url\"\n [src]=\"url\"\n height=\"40px\"\n style=\"position: relative; top: 5px\"\n hideIfError\n />\n @if (!isCollapsed) {\n @if (SYSTEM_NAME) {\n <h2 style=\"color: whitesmoke\">{{ SYSTEM_NAME }}</h2>\n } @else {\n -- o0o --\n }\n }\n </div>\n </div>\n @if (!HEADER_MENU_IN_USE) {\n <box [width]=\"8\"></box>\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\" class=\"breadcrumb-header\"></app-breadcrumb>\n }\n <div *ngIf=\"HEADER_MENU_IN_USE\" [ngStyle]=\"{ width: getHeaderMenuWidth() }\" class=\"header-menu\">\n <div style=\"overflow: auto\">\n <nz-segmented\n [nzOptions]=\"lstHeaderMenuDisplay\"\n [(ngModel)]=\"selectedHeaderMenuDisplay\"\n (nzValueChange)=\"handleValueChangeHeaderMenu($event)\"\n ></nz-segmented>\n </div>\n </div>\n <div #divuser>\n <layout-user></layout-user>\n </div>\n </div>\n </nz-header>\n <nz-layout class=\"body-layout\">\n <nz-sider\n class=\"menu-sidebar\"\n nzCollapsible\n [nzWidth]=\"siderWidth\"\n [nzCollapsedWidth]=\"0\"\n [nzBreakpoint]=\"'md'\"\n [(nzCollapsed)]=\"isCollapsed\"\n [nzTrigger]=\"null\"\n [nzTheme]=\"'dark'\"\n >\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\" [nzInlineCollapsed]=\"isCollapsed\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a\n [routerLink]=\"menuLv4.Url\"\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n ></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n </div>\n <div class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_LEFT || \"-- o0o --\" }}\n\n <span style=\"float: right\" (click)=\"triggerCollapse()\">\n <nz-icon class=\"trigger\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </span>\n </div>\n </div>\n </nz-sider>\n <nz-layout class=\"main-layout\">\n <nz-content class=\"content\">\n <div class=\"inner-content\">\n @if (HEADER_MENU_IN_USE) {\n <app-breadcrumb [@fadeInOut] nz-col nzFlex=\"auto\"></app-breadcrumb>\n <box [height]=\"8\"></box>\n }\n <router-outlet></router-outlet>\n </div>\n <div nz-row class=\"sider-footer\" style=\"height: 22px\">\n <div nz-col nzFlex=\"auto\" class=\"content-footer text-italic\" style=\"font-size: 0.9em; color: lightgray\">\n {{ SYSTEM_SUB_NAME_RIGHT || \"-- o0o --\" }}\n </div>\n </div>\n <!-- <nz-back-top [nzTarget]=\"'.content'\" [nzVisibilityHeight]=\"500\"></nz-back-top> -->\n </nz-content>\n </nz-layout>\n </nz-layout>\n</nz-layout>\n\n<nz-drawer\n [nzWrapClassName]=\"'same-theme-color menu-drawer'\"\n [nzWidth]=\"350\"\n [nzClosable]=\"false\"\n [(nzVisible)]=\"visibleMenuDrawer\"\n [nzMaskClosable]=\"true\"\n nzPlacement=\"left\"\n nzTitle=\"\"\n (nzOnClose)=\"visibleMenuDrawer = false\"\n>\n <ng-container *nzDrawerContent>\n <div class=\"menu-wapper\">\n @if (MENU_TYPE == 1) {\n <div class=\"nz-tree-wapper in-drawer\">\n <nz-tree\n [nzData]=\"nodes\"\n [nzSearchValue]=\"searchValue\"\n [nzShowLine]=\"true\"\n [nzSelectedKeys]=\"selectedKeys\"\n [nzExpandedKeys]=\"expandedKeys\"\n (nzClick)=\"nzEvent($event)\"\n ></nz-tree>\n </div>\n } @else {\n <div class=\"nz-tree-wapper in-drawer\">\n <ul nz-menu nzTheme=\"light\" nzMode=\"inline\">\n @for (menuLv1 of lstMenu; track menuLv1.App_Menu_Id) {\n @if (menuLv1.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv1.Open\" [nzTitle]=\"menuLv1.Name\" [nzIcon]=\"menuLv1.Icon\">\n @for (menuLv2 of menuLv1.SubMenu; track menuLv2.App_Menu_Id) {\n @if (menuLv2.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv2.Open\" [nzTitle]=\"menuLv2.Name\" [nzIcon]=\"menuLv2.Icon\">\n @for (menuLv3 of menuLv2.SubMenu; track menuLv3.App_Menu_Id) {\n @if (menuLv3.SubMenu) {\n <ul nz-submenu [nzOpen]=\"menuLv3.Open\" [nzTitle]=\"menuLv3.Name\" [nzIcon]=\"menuLv3.Icon\">\n @for (menuLv4 of menuLv3.SubMenu; track menuLv4.App_Menu_Id) {\n @if (menuLv4.SubMenu) {\n <ul\n nz-submenu\n [nzOpen]=\"menuLv4.Open\"\n [nzTitle]=\"menuLv4.Name\"\n [nzIcon]=\"menuLv4.Icon\"\n >\n @for (menuLv5 of menuLv4.SubMenu; track menuLv5.App_Menu_Id) {}\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a\n [routerLink]=\"menuLv4.Url\"\n [innerHTML]=\"menuLv4.Name | highlight: searchValue\"\n ></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv3.Url\" [innerHTML]=\"menuLv3.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv2.Url\" [innerHTML]=\"menuLv2.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n } @else {\n <li nz-menu-item nzMatchRouter>\n <a [routerLink]=\"menuLv1.Url\" [innerHTML]=\"menuLv1.Name | highlight: searchValue\"></a>\n </li>\n }\n }\n </ul>\n </div>\n }\n\n <nz-input-group [nzSuffix]=\"suffixTemplate\" [nzAddOnAfter]=\"afterTemplate\">\n <input nz-input placeholder=\"T\u00ECm menu\" [(ngModel)]=\"searchValue\" />\n </nz-input-group>\n <ng-template #suffixTemplate>\n <span class=\"suffix-wrap\">\n <icon-delete\n class=\"suffix-icon delete\"\n [class.show]=\"searchValue\"\n [size]=\"14\"\n (click)=\"searchValue = ''\"\n ></icon-delete>\n\n <icon-search class=\"suffix-icon search\" [class.show]=\"!searchValue\"></icon-search>\n </span>\n </ng-template>\n <ng-template #afterTemplate>\n <button nz-button (click)=\"triggerCollapse(); this.visibleMenuDrawer = false\">\n <nz-icon *ngIf=\"isCollapsed\" [nzType]=\"isCollapsed ? 'menu-unfold' : 'menu-fold'\" />\n </button>\n </ng-template>\n </div>\n </ng-container>\n</nz-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:flex;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,app-root{height:100%;margin:0}.app-layout{display:flex;flex-direction:column;height:100vh}.app-header{position:fixed;top:0;left:0;width:100%;height:50px;background:var(--theme-color);color:var(--theme-text-color);box-shadow:0 1px 4px #00152914;z-index:1000;display:flex;align-items:center;padding:0}.header-content{width:100%}.header-logo{height:50px;text-align:center;color:var(--theme-text-color);transition:width .3s}.body-layout{display:flex;flex:1;margin-top:50px;height:calc(100vh - 50px);overflow:hidden}.menu-sidebar{width:256px;background:#f0f2f5;overflow-y:auto;min-height:calc(100vh - 50px)}.menu-wapper{min-height:calc(100% - 22px)}.main-layout{display:flex;flex-direction:column;flex:1;overflow:hidden}.content{flex:1;background:#f1f2f5;overflow-x:hidden;overflow-y:auto;height:100%}.inner-content{background:#f1f2f5;min-height:calc(100% - 22px);padding:8px}.content-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:center}.sider-footer{background:var(--theme-color);color:var(--theme-text-color);align-items:center;text-align:right}.trigger{margin-right:8px}.menu-sidebar .ant-menu-inline .ant-menu-item{margin-top:0;margin-bottom:0}::ng-deep .menu-wapper .anticon-file{display:none}:host ::ng-deep .ant-back-top{right:30px;bottom:40px}::ng-deep .same-theme-color .ant-drawer-content{background:var(--theme-menu-color)}.nz-tree-wapper{height:calc(100vh - 104px);overflow-y:auto}.nz-tree-wapper.in-drawer{height:calc(100vh - 32px);overflow-y:auto}::ng-deep .menu-drawer .ant-drawer-body{padding:0}::ng-deep .breadcrumb-header .ant-breadcrumb-link{color:var(--theme-text-color);cursor:pointer}::ng-deep .breadcrumb-header .ant-breadcrumb-separator{color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item:not(.ant-segmented-item-selected){color:var(--theme-text-color)}::ng-deep .header-menu .ant-segmented-item{border-left:1px solid}::ng-deep .header-menu .ant-segmented-item:last-child{border-right:1px solid}.suffix-wrap{position:relative;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.suffix-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.4,0,.2,1);transform:scale(.6) translate(4px)}.suffix-icon.show{opacity:1;pointer-events:auto;transform:scale(1) translate(0)}.search{color:#00000073}.delete{color:#bfbfbf}.delete.show{animation:popIn .18s ease}@keyframes popIn{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}\n"] }]
|
|
6588
6588
|
}], propDecorators: { divuser: [{
|
|
6589
6589
|
type: ViewChild,
|
|
6590
6590
|
args: ['divuser']
|