coer-elements 0.0.97 → 0.0.99
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-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-sidenav.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +1 -0
- package/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.d.ts +3 -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 -11
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +87 -12
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/fesm2022/coer-elements.mjs +2 -1
- package/fesm2022/coer-elements.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-loading/loading.component.d.ts +5 -0
- package/pages/lib/coer-system/coer-system.component.d.ts +19 -3
- package/pages/lib/pages.module.d.ts +8 -6
- package/pages/public-api.d.ts +1 -0
|
@@ -19,7 +19,7 @@ export declare class CoerDateBox extends ControlValue implements OnInit {
|
|
|
19
19
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
20
20
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
21
21
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
22
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
22
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
23
23
|
width: import("@angular/core").InputSignal<string>;
|
|
24
24
|
minWidth: import("@angular/core").InputSignal<string>;
|
|
25
25
|
maxWidth: import("@angular/core").InputSignal<string>;
|
|
@@ -30,7 +30,7 @@ export declare class CoerNumberBox extends ControlValue implements OnInit {
|
|
|
30
30
|
isReadonly: import("@angular/core").InputSignal<boolean>;
|
|
31
31
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
32
32
|
selectOnFocus: import("@angular/core").InputSignal<boolean>;
|
|
33
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
33
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
34
34
|
onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
|
|
35
35
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
36
36
|
ngOnInit(): void;
|
|
@@ -17,7 +17,7 @@ export declare class CoerSidenav {
|
|
|
17
17
|
protected get showAsideMenu(): boolean;
|
|
18
18
|
constructor();
|
|
19
19
|
/** */
|
|
20
|
-
protected NavigateTo(selectedOption: IMenuOptionSelected): void
|
|
20
|
+
protected NavigateTo(selectedOption: IMenuOptionSelected, showGridMenu?: boolean): Promise<void>;
|
|
21
21
|
/** */
|
|
22
22
|
SetActiveLink(selectedOption: IMenuOptionSelected | null): void;
|
|
23
23
|
/** */
|
|
@@ -18,6 +18,7 @@ export declare class CoerToolbar implements AfterViewInit {
|
|
|
18
18
|
ngAfterViewInit(): void;
|
|
19
19
|
/** */
|
|
20
20
|
protected ToogleSideNave(event: MouseEvent): void;
|
|
21
|
+
protected toolbarMenu: import("@angular/core").Signal<IToolbarMenu[]>;
|
|
21
22
|
protected userName: import("@angular/core").Signal<string>;
|
|
22
23
|
protected userTitle: import("@angular/core").Signal<string>;
|
|
23
24
|
protected get showUser(): boolean;
|
|
@@ -11,6 +11,7 @@ export declare class CoerTreeAccordion {
|
|
|
11
11
|
item: IMenu;
|
|
12
12
|
tree: IMenu[];
|
|
13
13
|
showTree: boolean;
|
|
14
|
+
showGridMenu: EventEmitter<IMenuOptionSelected>;
|
|
14
15
|
clickMenuOption: EventEmitter<IMenuOptionSelected>;
|
|
15
16
|
clickMenu: EventEmitter<IMenuSelected>;
|
|
16
17
|
protected get _tree(): IMenu[];
|
|
@@ -32,11 +33,11 @@ export declare class CoerTreeAccordion {
|
|
|
32
33
|
/** */
|
|
33
34
|
protected Toggle(): void;
|
|
34
35
|
/** */
|
|
35
|
-
protected ClickMenuOption(menuOption: IMenuOptionSelected): void;
|
|
36
|
+
protected ClickMenuOption(menuOption: IMenuOptionSelected, showGridMenu?: boolean): void;
|
|
36
37
|
/** */
|
|
37
38
|
protected ClickMenu(menu: IMenuSelected): void;
|
|
38
39
|
/** */
|
|
39
40
|
protected ShowGridMenu(menuOption: IMenuOptionSelected, menu: IMenu): void;
|
|
40
41
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerTreeAccordion, never>;
|
|
41
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTreeAccordion, "coer-tree-accordion", never, { "level": { "alias": "level"; "required": false; }; "item": { "alias": "item"; "required": false; }; "tree": { "alias": "tree"; "required": false; }; "showTree": { "alias": "showTree"; "required": false; }; }, { "clickMenuOption": "clickMenuOption"; "clickMenu": "clickMenu"; }, never, never, false, never>;
|
|
42
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CoerTreeAccordion, "coer-tree-accordion", never, { "level": { "alias": "level"; "required": false; }; "item": { "alias": "item"; "required": false; }; "tree": { "alias": "tree"; "required": false; }; "showTree": { "alias": "showTree"; "required": false; }; }, { "showGridMenu": "showGridMenu"; "clickMenuOption": "clickMenuOption"; "clickMenu": "clickMenu"; }, never, never, false, never>;
|
|
42
43
|
}
|
|
@@ -28,7 +28,7 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
|
|
|
28
28
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
29
29
|
showFooter: import("@angular/core").InputSignal<boolean>;
|
|
30
30
|
resize: import("@angular/core").InputSignal<boolean>;
|
|
31
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
31
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
32
32
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
33
33
|
ngOnInit(): void;
|
|
34
34
|
get value(): string | number | null | undefined;
|
|
@@ -32,7 +32,7 @@ export declare class CoerTextBox extends ControlValue implements OnInit {
|
|
|
32
32
|
isReadonly: import("@angular/core").InputSignal<boolean>;
|
|
33
33
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
34
34
|
selectOnFocus: import("@angular/core").InputSignal<boolean>;
|
|
35
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
35
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
36
36
|
onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
|
|
37
37
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
38
38
|
onClickClear: import("@angular/core").OutputEmitterRef<void>;
|
|
@@ -2846,6 +2846,7 @@ class CoerTreeAccordion {
|
|
|
2846
2846
|
this.tree = [];
|
|
2847
2847
|
this.showTree = true;
|
|
2848
2848
|
//Outputs
|
|
2849
|
+
this.showGridMenu = new EventEmitter();
|
|
2849
2850
|
this.clickMenuOption = new EventEmitter();
|
|
2850
2851
|
this.clickMenu = new EventEmitter();
|
|
2851
2852
|
/** */
|
|
@@ -2918,13 +2919,16 @@ class CoerTreeAccordion {
|
|
|
2918
2919
|
});
|
|
2919
2920
|
}
|
|
2920
2921
|
/** */
|
|
2921
|
-
ClickMenuOption(menuOption) {
|
|
2922
|
+
ClickMenuOption(menuOption, showGridMenu = false) {
|
|
2922
2923
|
for (const menu of this.menuList.toArray()) {
|
|
2923
2924
|
if (menu.item.label != menuOption.tree[this.level].label) {
|
|
2924
2925
|
menu.Close();
|
|
2925
2926
|
}
|
|
2926
2927
|
}
|
|
2927
|
-
|
|
2928
|
+
if (showGridMenu)
|
|
2929
|
+
this.showGridMenu.emit(menuOption);
|
|
2930
|
+
else
|
|
2931
|
+
this.clickMenuOption.emit(menuOption);
|
|
2928
2932
|
}
|
|
2929
2933
|
/** */
|
|
2930
2934
|
ClickMenu(menu) {
|
|
@@ -2945,10 +2949,10 @@ class CoerTreeAccordion {
|
|
|
2945
2949
|
items: menu.items,
|
|
2946
2950
|
tree: []
|
|
2947
2951
|
});
|
|
2948
|
-
this.ClickMenuOption(menuOption);
|
|
2952
|
+
this.ClickMenuOption(menuOption, true);
|
|
2949
2953
|
}
|
|
2950
2954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree", showTree: "showTree" }, outputs: { clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: 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-orange': (isExpanded && level == 1),\r\n 'text-orange': 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-orange': 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-orange': 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 <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\"> \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 (clickMenuOption)=\"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 (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion> \r\n }\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\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 (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\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(--black)!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-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(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header 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(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["clickMenuOption", "clickMenu"] }] }); }
|
|
2955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree", showTree: "showTree" }, outputs: { showGridMenu: "showGridMenu", clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: 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-orange': (isExpanded && level == 1),\r\n 'text-orange': 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-orange': 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-orange': 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 <!-- Sub Menu -->\r\n <div *ngIf=\"IsMenu(subItem); else isOption\"> \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 (clickMenuOption)=\"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 (clickMenuOption)=\"ClickMenuOption($event)\"\r\n (clickMenu)=\"ClickMenu($event)\"\r\n ></coer-tree-accordion> \r\n }\r\n </div>\r\n\r\n <!-- Option Menu -->\r\n <ng-template #isOption>\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 (clickMenuOption)=\"ClickMenuOption($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\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(--black)!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-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(--white)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header 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(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--white)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-orange span.mat-expansion-indicator:after{color:var(--orange)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-orange):hover{background-color:#2f2f2f!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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
|
|
2952
2956
|
}
|
|
2953
2957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, decorators: [{
|
|
2954
2958
|
type: Component,
|
|
@@ -2967,6 +2971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
2967
2971
|
type: Input
|
|
2968
2972
|
}], showTree: [{
|
|
2969
2973
|
type: Input
|
|
2974
|
+
}], showGridMenu: [{
|
|
2975
|
+
type: Output
|
|
2970
2976
|
}], clickMenuOption: [{
|
|
2971
2977
|
type: Output
|
|
2972
2978
|
}], clickMenu: [{
|
|
@@ -3032,10 +3038,14 @@ class CoerSidenav {
|
|
|
3032
3038
|
});
|
|
3033
3039
|
}
|
|
3034
3040
|
/** */
|
|
3035
|
-
NavigateTo(selectedOption) {
|
|
3041
|
+
async NavigateTo(selectedOption, showGridMenu = false) {
|
|
3036
3042
|
let url = `${selectedOption.path}`;
|
|
3037
3043
|
if (selectedOption.queryParams.length > 0)
|
|
3038
3044
|
url += `?${selectedOption.queryParams}`;
|
|
3045
|
+
if (showGridMenu) {
|
|
3046
|
+
this._router.navigateByUrl('/loading');
|
|
3047
|
+
await Tools.Sleep();
|
|
3048
|
+
}
|
|
3039
3049
|
this._router.navigateByUrl(url);
|
|
3040
3050
|
//Set active link
|
|
3041
3051
|
this.SetActiveLink(selectedOption);
|
|
@@ -3120,7 +3130,7 @@ class CoerSidenav {
|
|
|
3120
3130
|
items: menu.items,
|
|
3121
3131
|
tree: []
|
|
3122
3132
|
});
|
|
3123
|
-
this.NavigateTo(menuOption);
|
|
3133
|
+
this.NavigateTo(menuOption, true);
|
|
3124
3134
|
}
|
|
3125
3135
|
/** */
|
|
3126
3136
|
GetIdentityClass(tree) {
|
|
@@ -3170,11 +3180,11 @@ class CoerSidenav {
|
|
|
3170
3180
|
});
|
|
3171
3181
|
}
|
|
3172
3182
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3173
|
-
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)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\"\r\n [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"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 (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (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 <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\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(--black)!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(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!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}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!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(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["clickMenuOption", "clickMenu"] }] }); }
|
|
3183
|
+
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)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\"\r\n [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"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, true)\"\r\n (clickMenuOption)=\"NavigateTo($event, false)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (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 <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\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(--black)!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(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!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}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!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(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
|
|
3174
3184
|
}
|
|
3175
3185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3176
3186
|
type: Component,
|
|
3177
|
-
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)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\"\r\n [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"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 (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (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 <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\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(--black)!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(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!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}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!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(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
|
|
3187
|
+
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)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\"\r\n [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"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, true)\"\r\n (clickMenuOption)=\"NavigateTo($event, false)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\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=\"fa-solid fa-sync fa-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': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (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 <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\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(--black)!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(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!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}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!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(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
|
|
3178
3188
|
}], ctorParameters: () => [] });
|
|
3179
3189
|
|
|
3180
3190
|
class CoerDropdown extends ControlValue {
|
|
@@ -3662,6 +3672,14 @@ class CoerToolbar {
|
|
|
3662
3672
|
this.onClickUser = output();
|
|
3663
3673
|
this.onClickOption = output();
|
|
3664
3674
|
//computed
|
|
3675
|
+
this.toolbarMenu = computed(() => {
|
|
3676
|
+
const menu = [...this.menu()];
|
|
3677
|
+
return [
|
|
3678
|
+
{ label: 'Reset Password', icon: 'fa-solid fa-lock' },
|
|
3679
|
+
{ label: 'Log Out', icon: 'fa-solid fa-door-open' }
|
|
3680
|
+
].concat(menu);
|
|
3681
|
+
});
|
|
3682
|
+
//computed
|
|
3665
3683
|
this.userName = computed(() => {
|
|
3666
3684
|
const user = this.user();
|
|
3667
3685
|
if (Tools.IsNotNull(user)) {
|
|
@@ -3716,7 +3734,7 @@ class CoerToolbar {
|
|
|
3716
3734
|
};
|
|
3717
3735
|
}
|
|
3718
3736
|
ngAfterViewInit() {
|
|
3719
|
-
Tools.Sleep().then(() => this.isReadyPage = true);
|
|
3737
|
+
Tools.Sleep(1000).then(() => this.isReadyPage = true);
|
|
3720
3738
|
}
|
|
3721
3739
|
/** */
|
|
3722
3740
|
ToogleSideNave(event) {
|
|
@@ -3741,11 +3759,11 @@ class CoerToolbar {
|
|
|
3741
3759
|
this.dropdown().Open();
|
|
3742
3760
|
}
|
|
3743
3761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3744
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickUser: "onClickUser", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n @if(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickUser: "onClickUser", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n @if(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"toolbarMenu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px;position:relative;z-index:10;padding:0}div#coer-tool-bar mat-toolbar span.app-name{max-width:45%}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:40px!important;max-height:40px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$a.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "animation", "isLoading", "isDisabled", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["value", "id", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isDisabled", "isReadonly", "isInvisible", "isLoading", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
3745
3763
|
}
|
|
3746
3764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3747
3765
|
type: Component,
|
|
3748
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n @if(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3766
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n @if(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"toolbarMenu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n }\r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px;position:relative;z-index:10;padding:0}div#coer-tool-bar mat-toolbar span.app-name{max-width:45%}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:40px!important;max-height:40px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
|
|
3749
3767
|
}] });
|
|
3750
3768
|
|
|
3751
3769
|
class ComponentsModule {
|