coer-elements 0.0.97 → 0.0.98

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.
@@ -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<"center" | "left" | "right">;
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<"center" | "left" | "right">;
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
  /** */
@@ -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<"center" | "left" | "right">;
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<"center" | "left" | "right">;
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
- this.clickMenuOption.emit(menuOption);
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 {
@@ -3716,7 +3726,7 @@ class CoerToolbar {
3716
3726
  };
3717
3727
  }
3718
3728
  ngAfterViewInit() {
3719
- Tools.Sleep().then(() => this.isReadyPage = true);
3729
+ Tools.Sleep(1000).then(() => this.isReadyPage = true);
3720
3730
  }
3721
3731
  /** */
3722
3732
  ToogleSideNave(event) {