coer-elements 2.0.34 → 2.0.36
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.
- package/components/lib/coer-button/coer-button.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-menu-option/coer-menu-option.component.d.ts +3 -3
- package/components/lib/coer-sidenav/coer-sidenav.component.d.ts +4 -0
- package/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.d.ts +2 -2
- package/fesm2022/coer-elements-components.mjs +32 -14
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +70 -73
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +27 -2
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-system/coer-system.component.d.ts +29 -23
- package/styles/coer-elements.css +1 -1
- package/styles/scroll-bars.scss +5 -0
- package/tools/lib/html-elements.tools.d.ts +4 -0
|
@@ -5,7 +5,7 @@ export declare class CoerButton implements AfterViewInit {
|
|
|
5
5
|
private _element;
|
|
6
6
|
id: import("@angular/core").InputSignal<string>;
|
|
7
7
|
color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
|
|
8
|
-
type: import("@angular/core").InputSignal<"
|
|
8
|
+
type: import("@angular/core").InputSignal<"icon" | "filled" | "outline" | "icon-outline" | "icon-no-border">;
|
|
9
9
|
icon: import("@angular/core").InputSignal<string | null | undefined>;
|
|
10
10
|
iconPosition: import("@angular/core").InputSignal<"left" | "right">;
|
|
11
11
|
path: import("@angular/core").InputSignal<string | (string | number)[]>;
|
|
@@ -8,14 +8,14 @@ export declare class CoerMenuOption {
|
|
|
8
8
|
icon: import("@angular/core").InputSignal<string | undefined>;
|
|
9
9
|
path: import("@angular/core").InputSignal<string | undefined>;
|
|
10
10
|
tree: import("@angular/core").InputSignal<IMenu[]>;
|
|
11
|
-
|
|
11
|
+
onClickMenuOption: import("@angular/core").OutputEmitterRef<IMenuOptionSelected>;
|
|
12
12
|
protected _icon: import("@angular/core").Signal<string>;
|
|
13
13
|
protected _path: import("@angular/core").Signal<string>;
|
|
14
14
|
protected _tree: import("@angular/core").Signal<IMenu[]>;
|
|
15
15
|
protected _marginLeft: import("@angular/core").Signal<string>;
|
|
16
16
|
protected _identityClass: import("@angular/core").Signal<string>;
|
|
17
17
|
/** */
|
|
18
|
-
|
|
18
|
+
protected _ClickMenuOption(queryParams: string, resetSource?: boolean): void;
|
|
19
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerMenuOption, never>;
|
|
20
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerMenuOption, "coer-menu-option", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "path": { "alias": "path"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; }, { "
|
|
20
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerMenuOption, "coer-menu-option", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "path": { "alias": "path"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; }, { "onClickMenuOption": "onClickMenuOption"; }, never, never, false, never>;
|
|
21
21
|
}
|
|
@@ -21,8 +21,12 @@ export declare class CoerSidenav {
|
|
|
21
21
|
/** */
|
|
22
22
|
SetActiveLink(selectedOption: IMenuOptionSelected | null): void;
|
|
23
23
|
/** */
|
|
24
|
+
_Open(): void;
|
|
25
|
+
/** */
|
|
24
26
|
Open(event: MouseEvent, item?: IMenu | null): void;
|
|
25
27
|
/** */
|
|
28
|
+
_Close(): void;
|
|
29
|
+
/** */
|
|
26
30
|
Close(): void;
|
|
27
31
|
/** */
|
|
28
32
|
Toggle(): void;
|
|
@@ -11,7 +11,7 @@ export declare class CoerTreeAccordion {
|
|
|
11
11
|
tree: import("@angular/core").InputSignal<IMenu[]>;
|
|
12
12
|
showTree: import("@angular/core").InputSignal<boolean>;
|
|
13
13
|
showGridMenu: import("@angular/core").OutputEmitterRef<IMenuOptionSelected>;
|
|
14
|
-
|
|
14
|
+
onClickMenuOption: import("@angular/core").OutputEmitterRef<IMenuOptionSelected>;
|
|
15
15
|
clickMenu: import("@angular/core").OutputEmitterRef<IMenuSelected>;
|
|
16
16
|
protected _tree: import("@angular/core").Signal<IMenu[]>;
|
|
17
17
|
protected _icon: import("@angular/core").Signal<string>;
|
|
@@ -38,5 +38,5 @@ export declare class CoerTreeAccordion {
|
|
|
38
38
|
/** */
|
|
39
39
|
protected _ShowGridMenu(menuOption: IMenuOptionSelected, menu: IMenu): void;
|
|
40
40
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerTreeAccordion, never>;
|
|
41
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTreeAccordion, "coer-tree-accordion", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "showTree": { "alias": "showTree"; "required": false; "isSignal": true; }; }, { "showGridMenu": "showGridMenu"; "
|
|
41
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTreeAccordion, "coer-tree-accordion", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "showTree": { "alias": "showTree"; "required": false; "isSignal": true; }; }, { "showGridMenu": "showGridMenu"; "onClickMenuOption": "onClickMenuOption"; "clickMenu": "clickMenu"; }, never, never, false, never>;
|
|
42
42
|
}
|
|
@@ -2940,7 +2940,7 @@ class CoerMenuOption {
|
|
|
2940
2940
|
this.path = input();
|
|
2941
2941
|
this.tree = input([]);
|
|
2942
2942
|
//Outputs
|
|
2943
|
-
this.
|
|
2943
|
+
this.onClickMenuOption = output();
|
|
2944
2944
|
//computed
|
|
2945
2945
|
this._icon = computed(() => {
|
|
2946
2946
|
return Tools.IsNotOnlyWhiteSpace(this.icon()) ? this.icon() : '';
|
|
@@ -2976,7 +2976,7 @@ class CoerMenuOption {
|
|
|
2976
2976
|
});
|
|
2977
2977
|
}
|
|
2978
2978
|
/** */
|
|
2979
|
-
|
|
2979
|
+
_ClickMenuOption(queryParams, resetSource = true) {
|
|
2980
2980
|
if (resetSource) {
|
|
2981
2981
|
let routerURL = this._router.url;
|
|
2982
2982
|
if (this._router.url.includes('?')) {
|
|
@@ -2986,7 +2986,7 @@ class CoerMenuOption {
|
|
|
2986
2986
|
Source.Reset();
|
|
2987
2987
|
}
|
|
2988
2988
|
}
|
|
2989
|
-
this.
|
|
2989
|
+
this.onClickMenuOption.emit({
|
|
2990
2990
|
level: this.level(),
|
|
2991
2991
|
label: this.label(),
|
|
2992
2992
|
path: this._path(),
|
|
@@ -2996,11 +2996,11 @@ class CoerMenuOption {
|
|
|
2996
2996
|
});
|
|
2997
2997
|
}
|
|
2998
2998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2999
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
2999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenuOption: "onClickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n <mat-list-item>\r\n <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [class]=\"'label-container ' + _identityClass()\">\r\n {{ label() }}\r\n </span>\r\n </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
|
|
3000
3000
|
}
|
|
3001
3001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, decorators: [{
|
|
3002
3002
|
type: Component,
|
|
3003
|
-
args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"
|
|
3003
|
+
args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n <mat-list-item>\r\n <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n <i [class]=\"_icon()\"></i>\r\n </span>\r\n\r\n <span [class]=\"'label-container ' + _identityClass()\">\r\n {{ label() }}\r\n </span>\r\n </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
|
|
3004
3004
|
}] });
|
|
3005
3005
|
|
|
3006
3006
|
class CoerSecretBox extends ControlValue {
|
|
@@ -3189,8 +3189,9 @@ class CoerPageTitle {
|
|
|
3189
3189
|
});
|
|
3190
3190
|
//computed
|
|
3191
3191
|
this._breadcrumbs = computed(() => {
|
|
3192
|
-
return
|
|
3193
|
-
.slice(0, (breakpointSIGNAL() == 'mv' ? 1 : this.breadcrumbs().length))
|
|
3192
|
+
return this.breadcrumbs()
|
|
3193
|
+
.slice(0, (breakpointSIGNAL() == 'mv' ? 1 : this.breadcrumbs().length))
|
|
3194
|
+
.map((item, index) => Object.assign(item, { index }));
|
|
3194
3195
|
});
|
|
3195
3196
|
const MENU = Menu.GetSelectedOption();
|
|
3196
3197
|
if (MENU) {
|
|
@@ -3228,7 +3229,7 @@ class CoerTreeAccordion {
|
|
|
3228
3229
|
this.showTree = input(true);
|
|
3229
3230
|
//Outputs
|
|
3230
3231
|
this.showGridMenu = output();
|
|
3231
|
-
this.
|
|
3232
|
+
this.onClickMenuOption = output();
|
|
3232
3233
|
this.clickMenu = output();
|
|
3233
3234
|
//computed
|
|
3234
3235
|
this._tree = computed(() => {
|
|
@@ -3313,7 +3314,7 @@ class CoerTreeAccordion {
|
|
|
3313
3314
|
if (showGridMenu)
|
|
3314
3315
|
this.showGridMenu.emit(menuOption);
|
|
3315
3316
|
else
|
|
3316
|
-
this.
|
|
3317
|
+
this.onClickMenuOption.emit(menuOption);
|
|
3317
3318
|
}
|
|
3318
3319
|
/** */
|
|
3319
3320
|
_ClickMenu(menu) {
|
|
@@ -3337,11 +3338,11 @@ class CoerTreeAccordion {
|
|
|
3337
3338
|
this._ClickMenuOption(menuOption, true);
|
|
3338
3339
|
}
|
|
3339
3340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3340
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, showTree: { classPropertyName: "showTree", publicName: "showTree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showGridMenu: "showGridMenu",
|
|
3341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, showTree: { classPropertyName: "showTree", publicName: "showTree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showGridMenu: "showGridMenu", onClickMenuOption: "onClickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + _identityClass()\">\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"_Toggle()\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'background-navigation': (isExpanded && level() == 1),\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': _marginLeft() }\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon()\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-sidenav-active': _IsActive(labelContainer)\r\n }\"> {{ item().label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n @if(showTree()) { \r\n <div *ngFor=\"let subItem of item().items\">\r\n @if(_IsMenu(subItem)) {\r\n <!-- Sub Menu -->\r\n @if(_IsGrid(subItem)) {\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"_GetGridIcon(subItem!.icon)\"\r\n path='menu'\r\n [level]=\"level() + 1\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, subItem)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [level]=\"level() + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ClickMenuOption($event)\"\r\n (clickMenu)=\"_ClickMenu($event)\"\r\n ></coer-tree-accordion> \r\n }\r\n }\r\n\r\n @else {\r\n <!-- Option Menu --> \r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level() + 1\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n } \r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
|
|
3341
3342
|
}
|
|
3342
3343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, decorators: [{
|
|
3343
3344
|
type: Component,
|
|
3344
|
-
args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + _identityClass()\">\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"_Toggle()\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'background-navigation': (isExpanded && level() == 1),\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': _marginLeft() }\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon()\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-sidenav-active': _IsActive(labelContainer)\r\n }\"> {{ item().label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n @if(showTree()) { \r\n <div *ngFor=\"let subItem of item().items\">\r\n @if(_IsMenu(subItem)) {\r\n <!-- Sub Menu -->\r\n @if(_IsGrid(subItem)) {\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"_GetGridIcon(subItem!.icon)\"\r\n path='menu'\r\n [level]=\"level() + 1\"\r\n [tree]=\"_tree()\"\r\n (
|
|
3345
|
+
args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + _identityClass()\">\r\n\r\n <!-- Header -->\r\n <mat-expansion-panel-header (click)=\"_Toggle()\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'background-navigation': (isExpanded && level() == 1),\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\">\r\n <mat-panel-description>\r\n <span #iconContainer\r\n [ngStyle]=\"{ 'margin-left': _marginLeft() }\"\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'icon-container': true,\r\n 'text-sidenav-active': _IsActive(iconContainer)\r\n }\"> <i [class]=\"_icon()\"></i> </span>\r\n\r\n <span #labelContainer\r\n [class]=\"_identityClass()\"\r\n [ngClass]=\"{\r\n 'label-container': true,\r\n 'text-sidenav-active': _IsActive(labelContainer)\r\n }\"> {{ item().label }} </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n\r\n @if(showTree()) { \r\n <div *ngFor=\"let subItem of item().items\">\r\n @if(_IsMenu(subItem)) {\r\n <!-- Sub Menu -->\r\n @if(_IsGrid(subItem)) {\r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"_GetGridIcon(subItem!.icon)\"\r\n path='menu'\r\n [level]=\"level() + 1\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, subItem)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [level]=\"level() + 1\"\r\n [item]=\"subItem\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ClickMenuOption($event)\"\r\n (clickMenu)=\"_ClickMenu($event)\"\r\n ></coer-tree-accordion> \r\n }\r\n }\r\n\r\n @else {\r\n <!-- Option Menu --> \r\n <coer-menu-option\r\n [label]=\"subItem.label\"\r\n [icon]=\"subItem?.icon\"\r\n [path]=\"subItem?.path\"\r\n [level]=\"level() + 1\"\r\n [tree]=\"_tree()\"\r\n (onClickMenuOption)=\"_ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n } \r\n\r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
|
|
3345
3346
|
}] });
|
|
3346
3347
|
|
|
3347
3348
|
class CoerSidenav {
|
|
@@ -3352,7 +3353,7 @@ class CoerSidenav {
|
|
|
3352
3353
|
//Elements
|
|
3353
3354
|
this.sidenav = viewChild.required('matSidenav');
|
|
3354
3355
|
this.menuList = viewChildren(CoerTreeAccordion);
|
|
3355
|
-
//Variables
|
|
3356
|
+
//Variables
|
|
3356
3357
|
this._isOpen = isMenuOpenSIGNAL;
|
|
3357
3358
|
this._isModalOpen = isModalOpenSIGNAL;
|
|
3358
3359
|
this._isLoading = isLoadingSIGNAL;
|
|
@@ -3441,19 +3442,31 @@ class CoerSidenav {
|
|
|
3441
3442
|
}
|
|
3442
3443
|
}
|
|
3443
3444
|
//Add active-link
|
|
3445
|
+
let scroll = 0;
|
|
3446
|
+
let find = false;
|
|
3444
3447
|
const levels = selectedOption.tree.length;
|
|
3445
3448
|
for (let i = 0; i < levels; i++) {
|
|
3446
3449
|
for (const element of collection) {
|
|
3447
3450
|
const identityClass = this._GetIdentityClass(selectedOption.tree);
|
|
3448
3451
|
if (element.classList.contains(identityClass)) {
|
|
3449
3452
|
element.classList.add('active-link');
|
|
3453
|
+
find = true;
|
|
3450
3454
|
}
|
|
3455
|
+
else if (!find)
|
|
3456
|
+
scroll += 50;
|
|
3451
3457
|
}
|
|
3452
3458
|
selectedOption.tree.pop();
|
|
3453
3459
|
}
|
|
3460
|
+
//Scroll sideNav
|
|
3461
|
+
HTMLElements.Scroll(this._isOpen() ? '.mat-drawer-inner-container' : 'aside', scroll);
|
|
3454
3462
|
}
|
|
3455
3463
|
}
|
|
3456
3464
|
/** */
|
|
3465
|
+
_Open() {
|
|
3466
|
+
this._isOpen.set(true);
|
|
3467
|
+
Tools.Sleep().then(_ => this.SetActiveLink(Menu.GetSelectedOption()));
|
|
3468
|
+
}
|
|
3469
|
+
/** */
|
|
3457
3470
|
Open(event, item = null) {
|
|
3458
3471
|
event.stopPropagation();
|
|
3459
3472
|
if (!this._isOpen()) {
|
|
@@ -3462,6 +3475,11 @@ class CoerSidenav {
|
|
|
3462
3475
|
}
|
|
3463
3476
|
}
|
|
3464
3477
|
/** */
|
|
3478
|
+
_Close() {
|
|
3479
|
+
this._isOpen.set(false);
|
|
3480
|
+
Tools.Sleep().then(_ => this.SetActiveLink(Menu.GetSelectedOption()));
|
|
3481
|
+
}
|
|
3482
|
+
/** */
|
|
3465
3483
|
Close() {
|
|
3466
3484
|
if (this._isOpen()) {
|
|
3467
3485
|
this._isOpen.set(false);
|
|
@@ -3547,11 +3565,11 @@ class CoerSidenav {
|
|
|
3547
3565
|
});
|
|
3548
3566
|
}
|
|
3549
3567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"
|
|
3568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
|
|
3551
3569
|
}
|
|
3552
3570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3553
3571
|
type: Component,
|
|
3554
|
-
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"
|
|
3572
|
+
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
|
|
3555
3573
|
}], ctorParameters: () => [] });
|
|
3556
3574
|
|
|
3557
3575
|
class CoerDropdown extends ControlValue {
|