coer-elements 1.1.34 → 2.0.0
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-sidenav/coer-sidenav.component.d.ts +3 -5
- package/fesm2022/coer-elements-components.mjs +11 -17
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +11 -3
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +10 -0
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/fesm2022/coer-elements.mjs.map +1 -1
- package/package.json +26 -8
- package/pages/lib/coer-menu/coer-menu.component.d.ts +6 -1
- package/tools/lib/service.class.d.ts +2 -0
- package/README.md +0 -63
|
@@ -31,13 +31,11 @@ export declare class CoerSidenav {
|
|
|
31
31
|
/** */
|
|
32
32
|
protected ShowGridMenu(menuOption: IMenuOptionSelected, menu: IMenu): void;
|
|
33
33
|
/** */
|
|
34
|
-
protected
|
|
34
|
+
protected _IsMenu: (item: IMenu) => boolean;
|
|
35
35
|
/** */
|
|
36
|
-
protected
|
|
36
|
+
protected _IsGrid: (item: IMenu) => boolean;
|
|
37
37
|
/** */
|
|
38
|
-
protected
|
|
39
|
-
/** */
|
|
40
|
-
protected GetGridIcon: (icon: string | null | undefined) => string;
|
|
38
|
+
protected _GetIcon: (item: IMenu) => string;
|
|
41
39
|
/** */
|
|
42
40
|
protected SetIdentityClass: (label: String) => string;
|
|
43
41
|
/** */
|
|
@@ -2862,11 +2862,11 @@ class CoerMenuOption {
|
|
|
2862
2862
|
});
|
|
2863
2863
|
}
|
|
2864
2864
|
get _icon() {
|
|
2865
|
-
return (this.icon && this.icon.length > 0)
|
|
2865
|
+
return (Tools.IsNotOnlyWhiteSpace(this.icon) && this.icon.length > 0)
|
|
2866
2866
|
? this.icon : '';
|
|
2867
2867
|
}
|
|
2868
2868
|
get _path() {
|
|
2869
|
-
return (this.path && this.path.length > 0)
|
|
2869
|
+
return (Tools.IsNotOnlyWhiteSpace(this.path) && this.path.length > 0)
|
|
2870
2870
|
? this.path : '/home';
|
|
2871
2871
|
}
|
|
2872
2872
|
get _tree() {
|
|
@@ -3163,7 +3163,7 @@ class CoerTreeAccordion {
|
|
|
3163
3163
|
return [...this.tree].concat([{ ...this.item }]);
|
|
3164
3164
|
}
|
|
3165
3165
|
get _icon() {
|
|
3166
|
-
return (this.item && this.item
|
|
3166
|
+
return (this.item && Tools.IsNotOnlyWhiteSpace(this.item?.icon) && this.item.icon.length > 0)
|
|
3167
3167
|
? this.item.icon : 'fa-solid fa-bars';
|
|
3168
3168
|
}
|
|
3169
3169
|
get marginLeft() {
|
|
@@ -3304,21 +3304,15 @@ class CoerSidenav {
|
|
|
3304
3304
|
//Outputs
|
|
3305
3305
|
this.onMenuSelected = output();
|
|
3306
3306
|
/** */
|
|
3307
|
-
this.
|
|
3307
|
+
this._IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotNull(item?.items);
|
|
3308
3308
|
/** */
|
|
3309
|
-
this.
|
|
3309
|
+
this._IsGrid = (item) => item?.show === 'GRID';
|
|
3310
3310
|
/** */
|
|
3311
|
-
this.
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
}
|
|
3315
|
-
return this.IsMenu(item)
|
|
3316
|
-
? 'fa-solid fa-bars'
|
|
3317
|
-
: '';
|
|
3311
|
+
this._GetIcon = (item) => {
|
|
3312
|
+
return item?.icon
|
|
3313
|
+
|| (this._IsMenu(item) ? (this._IsGrid(item) ? 'fa-solid fa-grip' : 'fa-solid fa-bars') : '');
|
|
3318
3314
|
};
|
|
3319
3315
|
/** */
|
|
3320
|
-
this.GetGridIcon = (icon) => Tools.IsNotOnlyWhiteSpace(icon) ? icon : 'fa-solid fa-grip';
|
|
3321
|
-
/** */
|
|
3322
3316
|
this.SetIdentityClass = (label) => {
|
|
3323
3317
|
let identity = `lv1${label}`;
|
|
3324
3318
|
if (identity.includes(' '))
|
|
@@ -3422,7 +3416,7 @@ class CoerSidenav {
|
|
|
3422
3416
|
menuSelectedSIGNAL.set({
|
|
3423
3417
|
level: 1,
|
|
3424
3418
|
label: menu.label,
|
|
3425
|
-
icon: this.
|
|
3419
|
+
icon: this._GetIcon(menu),
|
|
3426
3420
|
isExpanded: true,
|
|
3427
3421
|
isCollapsed: false,
|
|
3428
3422
|
items: menu.items,
|
|
@@ -3478,11 +3472,11 @@ class CoerSidenav {
|
|
|
3478
3472
|
});
|
|
3479
3473
|
}
|
|
3480
3474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3481
|
-
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=\"
|
|
3475
|
+
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]=\"_GetIcon(item)\"\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 @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"fa-solid fa-sync fa-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--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"] }] }); }
|
|
3482
3476
|
}
|
|
3483
3477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3484
3478
|
type: Component,
|
|
3485
|
-
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=\"
|
|
3479
|
+
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]=\"_GetIcon(item)\"\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 @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"fa-solid fa-sync fa-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--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"] }]
|
|
3486
3480
|
}], ctorParameters: () => [] });
|
|
3487
3481
|
|
|
3488
3482
|
class CoerDropdown extends ControlValue {
|