coer-elements 2.0.34 → 2.0.35
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-datebox/coer-datebox.component.d.ts +1 -1
- package/components/lib/coer-modal/coer-modal.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.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 +5 -1
- package/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.d.ts +2 -2
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +29 -12
- 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
|
@@ -17,7 +17,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
21
21
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
22
22
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
23
23
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
@@ -13,7 +13,7 @@ export declare class CoerModal implements AfterViewInit {
|
|
|
13
13
|
title: import("@angular/core").InputSignal<string>;
|
|
14
14
|
icon: import("@angular/core").InputSignal<string>;
|
|
15
15
|
showCloseButton: import("@angular/core").InputSignal<boolean>;
|
|
16
|
-
width: import("@angular/core").InputSignal<"
|
|
16
|
+
width: import("@angular/core").InputSignal<"small" | "auto" | "full">;
|
|
17
17
|
height: import("@angular/core").InputSignal<string>;
|
|
18
18
|
maxHeight: import("@angular/core").InputSignal<string>;
|
|
19
19
|
onOpen: import("@angular/core").OutputEmitterRef<void>;
|
|
@@ -17,7 +17,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
21
21
|
min: import("@angular/core").InputSignal<number>;
|
|
22
22
|
max: import("@angular/core").InputSignal<number>;
|
|
23
23
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -14,7 +14,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
|
|
|
14
14
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
15
15
|
label: import("@angular/core").InputSignal<string>;
|
|
16
16
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
17
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
17
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
18
18
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
19
19
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
20
20
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -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
|
}
|
|
@@ -13,7 +13,7 @@ export declare class CoerSidenav {
|
|
|
13
13
|
onMenuSelected: import("@angular/core").OutputEmitterRef<IMenuSelected>;
|
|
14
14
|
constructor();
|
|
15
15
|
protected _backdrop: import("@angular/core").Signal<boolean>;
|
|
16
|
-
protected _mode: import("@angular/core").Signal<"
|
|
16
|
+
protected _mode: import("@angular/core").Signal<"over" | "push">;
|
|
17
17
|
protected _showAsideMenu: import("@angular/core").Signal<boolean>;
|
|
18
18
|
protected _navigation: import("@angular/core").Signal<IMenu[]>;
|
|
19
19
|
/** */
|
|
@@ -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
|
}
|
|
@@ -10,7 +10,7 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit
|
|
|
10
10
|
id: import("@angular/core").InputSignal<string>;
|
|
11
11
|
label: import("@angular/core").InputSignal<string>;
|
|
12
12
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
13
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
13
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
14
14
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
15
15
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
16
16
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
20
20
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
21
21
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -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 {
|
|
@@ -3228,7 +3228,7 @@ class CoerTreeAccordion {
|
|
|
3228
3228
|
this.showTree = input(true);
|
|
3229
3229
|
//Outputs
|
|
3230
3230
|
this.showGridMenu = output();
|
|
3231
|
-
this.
|
|
3231
|
+
this.onClickMenuOption = output();
|
|
3232
3232
|
this.clickMenu = output();
|
|
3233
3233
|
//computed
|
|
3234
3234
|
this._tree = computed(() => {
|
|
@@ -3313,7 +3313,7 @@ class CoerTreeAccordion {
|
|
|
3313
3313
|
if (showGridMenu)
|
|
3314
3314
|
this.showGridMenu.emit(menuOption);
|
|
3315
3315
|
else
|
|
3316
|
-
this.
|
|
3316
|
+
this.onClickMenuOption.emit(menuOption);
|
|
3317
3317
|
}
|
|
3318
3318
|
/** */
|
|
3319
3319
|
_ClickMenu(menu) {
|
|
@@ -3337,11 +3337,11 @@ class CoerTreeAccordion {
|
|
|
3337
3337
|
this._ClickMenuOption(menuOption, true);
|
|
3338
3338
|
}
|
|
3339
3339
|
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",
|
|
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", 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
3341
|
}
|
|
3342
3342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, decorators: [{
|
|
3343
3343
|
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 (
|
|
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 (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
3345
|
}] });
|
|
3346
3346
|
|
|
3347
3347
|
class CoerSidenav {
|
|
@@ -3352,7 +3352,7 @@ class CoerSidenav {
|
|
|
3352
3352
|
//Elements
|
|
3353
3353
|
this.sidenav = viewChild.required('matSidenav');
|
|
3354
3354
|
this.menuList = viewChildren(CoerTreeAccordion);
|
|
3355
|
-
//Variables
|
|
3355
|
+
//Variables
|
|
3356
3356
|
this._isOpen = isMenuOpenSIGNAL;
|
|
3357
3357
|
this._isModalOpen = isModalOpenSIGNAL;
|
|
3358
3358
|
this._isLoading = isLoadingSIGNAL;
|
|
@@ -3441,19 +3441,31 @@ class CoerSidenav {
|
|
|
3441
3441
|
}
|
|
3442
3442
|
}
|
|
3443
3443
|
//Add active-link
|
|
3444
|
+
let scroll = 0;
|
|
3445
|
+
let find = false;
|
|
3444
3446
|
const levels = selectedOption.tree.length;
|
|
3445
3447
|
for (let i = 0; i < levels; i++) {
|
|
3446
3448
|
for (const element of collection) {
|
|
3447
3449
|
const identityClass = this._GetIdentityClass(selectedOption.tree);
|
|
3448
3450
|
if (element.classList.contains(identityClass)) {
|
|
3449
3451
|
element.classList.add('active-link');
|
|
3452
|
+
find = true;
|
|
3450
3453
|
}
|
|
3454
|
+
else if (!find)
|
|
3455
|
+
scroll += 50;
|
|
3451
3456
|
}
|
|
3452
3457
|
selectedOption.tree.pop();
|
|
3453
3458
|
}
|
|
3459
|
+
//Scroll sideNav
|
|
3460
|
+
HTMLElements.Scroll(this._isOpen() ? '.mat-drawer-inner-container' : 'aside', scroll);
|
|
3454
3461
|
}
|
|
3455
3462
|
}
|
|
3456
3463
|
/** */
|
|
3464
|
+
_Open() {
|
|
3465
|
+
this._isOpen.set(true);
|
|
3466
|
+
Tools.Sleep().then(_ => this.SetActiveLink(Menu.GetSelectedOption()));
|
|
3467
|
+
}
|
|
3468
|
+
/** */
|
|
3457
3469
|
Open(event, item = null) {
|
|
3458
3470
|
event.stopPropagation();
|
|
3459
3471
|
if (!this._isOpen()) {
|
|
@@ -3462,6 +3474,11 @@ class CoerSidenav {
|
|
|
3462
3474
|
}
|
|
3463
3475
|
}
|
|
3464
3476
|
/** */
|
|
3477
|
+
_Close() {
|
|
3478
|
+
this._isOpen.set(false);
|
|
3479
|
+
Tools.Sleep().then(_ => this.SetActiveLink(Menu.GetSelectedOption()));
|
|
3480
|
+
}
|
|
3481
|
+
/** */
|
|
3465
3482
|
Close() {
|
|
3466
3483
|
if (this._isOpen()) {
|
|
3467
3484
|
this._isOpen.set(false);
|
|
@@ -3547,11 +3564,11 @@ class CoerSidenav {
|
|
|
3547
3564
|
});
|
|
3548
3565
|
}
|
|
3549
3566
|
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)=\"
|
|
3567
|
+
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
3568
|
}
|
|
3552
3569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3553
3570
|
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)=\"
|
|
3571
|
+
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
3572
|
}], ctorParameters: () => [] });
|
|
3556
3573
|
|
|
3557
3574
|
class CoerDropdown extends ControlValue {
|