coer-elements 0.0.96 → 0.0.97
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-toolbar/coer-toolbar.component.d.ts +3 -1
- 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 +16 -14
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +16 -9
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/interfaces/lib/login-response.interface.d.ts +1 -0
- package/interfaces/lib/screen-size.interface.d.ts +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +5 -2
|
@@ -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<"center" | "left" | "right">;
|
|
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<"center" | "left" | "right">;
|
|
34
34
|
onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
|
|
35
35
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
36
36
|
ngOnInit(): void;
|
|
@@ -15,7 +15,6 @@ export declare class CoerToolbar implements AfterViewInit {
|
|
|
15
15
|
onClickMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
|
|
16
16
|
onClickUser: import("@angular/core").OutputEmitterRef<void>;
|
|
17
17
|
onClickOption: import("@angular/core").OutputEmitterRef<IToolbarMenu>;
|
|
18
|
-
protected GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
|
|
19
18
|
ngAfterViewInit(): void;
|
|
20
19
|
/** */
|
|
21
20
|
protected ToogleSideNave(event: MouseEvent): void;
|
|
@@ -23,8 +22,11 @@ export declare class CoerToolbar implements AfterViewInit {
|
|
|
23
22
|
protected userTitle: import("@angular/core").Signal<string>;
|
|
24
23
|
protected get showUser(): boolean;
|
|
25
24
|
protected get paddingLeft(): string;
|
|
25
|
+
/** */
|
|
26
26
|
protected GetPadding: (container: "user-identity" | "user-container") => string;
|
|
27
27
|
/** */
|
|
28
|
+
protected GetElementWidth: (element: HTMLElement) => string;
|
|
29
|
+
/** */
|
|
28
30
|
protected ClickUser(): void;
|
|
29
31
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerToolbar, never>;
|
|
30
32
|
static ɵcmp: i0.ɵɵComponentDeclaration<CoerToolbar, "coer-toolbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onClickMenu": "onClickMenu"; "onClickUser": "onClickUser"; "onClickOption": "onClickOption"; }, never, never, false, never>;
|
|
@@ -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<"center" | "left" | "right">;
|
|
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<"center" | "left" | "right">;
|
|
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>;
|
|
@@ -2819,11 +2819,11 @@ class CoerPageTitle {
|
|
|
2819
2819
|
return 'bi bi-house-door-fill';
|
|
2820
2820
|
}
|
|
2821
2821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: "title", showNavigation: "showNavigation", breadcrumbs: "breadcrumbs", goBack: "goBack", showInformation: "showInformation" }, ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title }} </span>\r\n\r\n <!-- Button Information -->\r\n <button\r\n *ngIf=\"showInformation\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </button>\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n <nav *ngIf=\"showNavigation\" aria-label=\"breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <li class=\"breadcrumb-item\">\r\n <a><i [class]=\"_icon\"></i></a>\r\n </li>\r\n\r\n <li *ngFor=\"let nav of breadcrumbs\" class=\"breadcrumb-item\">\r\n <a [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </li>\r\n </ol>\r\n\r\n <!-- Go Back -->\r\n <a *ngIf=\"goBack.show\"\r\n [routerLink]=\"goBack.path\"\r\n [queryParams]='goBack.queryParams'\r\n (click)=\"(goBack.click) ? goBack.click() : null\">\r\n Go back\r\n </a>\r\n </nav>\r\n\r\n <!-- Tooltip\r\n <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n [(visible)]=\"showModal\"\r\n minWidth=\"500px\" minHeight=\"430px\"\r\n [width]=\"width\" [height]=\"height\"\r\n [hideOnOutsideClick]=\"true\"\r\n [resizeEnabled]=\"false\"\r\n [dragEnabled]=\"true\"\r\n (onHidden)=\"(showModal = false)\"\r\n >\r\n\r\n -- Header --\r\n <header *dxTemplate=\"let data of 'title'\">\r\n <div class=\"modal-header\">\r\n <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n </div>\r\n </header>\r\n\r\n -- Body --\r\n <section *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view width=\"100%\" height=\"100%\">\r\n <ol class=\"list-group list-group-numbered\">\r\n <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n <li class=\"list-group-item\">\r\n For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n </li>\r\n </ol>\r\n </dx-scroll-view>\r\n </section>\r\n\r\n -- Button --\r\n <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n <dx-button\r\n coer-button\r\n icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n width=\"125px\" height=\"40px\"\r\n (onClick)=\"(showModal = false)\"\r\n color=\"red\"\r\n ></dx-button>\r\n </div>\r\n </dxi-toolbar-item>\r\n</dx-popup> -->", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:var(--blue)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}header.coer-page-title li.list-group-item a{color:var(--orange)!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\n"], dependencies: [{ 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: "title", showNavigation: "showNavigation", breadcrumbs: "breadcrumbs", goBack: "goBack", showInformation: "showInformation" }, ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title }} </span>\r\n\r\n <!-- Button Information -->\r\n <button\r\n *ngIf=\"showInformation\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </button>\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n <nav *ngIf=\"showNavigation\" aria-label=\"breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <li class=\"breadcrumb-item\">\r\n <a><i [class]=\"_icon\"></i></a>\r\n </li>\r\n\r\n <li *ngFor=\"let nav of breadcrumbs\" class=\"breadcrumb-item\">\r\n <a [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </li>\r\n </ol>\r\n\r\n <!-- Go Back -->\r\n <a *ngIf=\"goBack.show\"\r\n [routerLink]=\"goBack.path\"\r\n [queryParams]='goBack.queryParams'\r\n class=\"go-back-button\"\r\n (click)=\"(goBack.click) ? goBack.click() : null\">\r\n Go back\r\n </a>\r\n </nav>\r\n\r\n <!-- Tooltip\r\n <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n [(visible)]=\"showModal\"\r\n minWidth=\"500px\" minHeight=\"430px\"\r\n [width]=\"width\" [height]=\"height\"\r\n [hideOnOutsideClick]=\"true\"\r\n [resizeEnabled]=\"false\"\r\n [dragEnabled]=\"true\"\r\n (onHidden)=\"(showModal = false)\"\r\n >\r\n\r\n -- Header --\r\n <header *dxTemplate=\"let data of 'title'\">\r\n <div class=\"modal-header\">\r\n <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n </div>\r\n </header>\r\n\r\n -- Body --\r\n <section *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view width=\"100%\" height=\"100%\">\r\n <ol class=\"list-group list-group-numbered\">\r\n <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n <li class=\"list-group-item\">\r\n For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n </li>\r\n </ol>\r\n </dx-scroll-view>\r\n </section>\r\n\r\n -- Button --\r\n <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n <dx-button\r\n coer-button\r\n icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n width=\"125px\" height=\"40px\"\r\n (onClick)=\"(showModal = false)\"\r\n color=\"red\"\r\n ></dx-button>\r\n </div>\r\n </dxi-toolbar-item>\r\n</dx-popup> -->", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:auto;min-height:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title nav a.go-back-button{min-width:60px}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:var(--blue)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}header.coer-page-title li.list-group-item a{color:var(--orange)!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\n"], dependencies: [{ 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: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
2823
2823
|
}
|
|
2824
2824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, decorators: [{
|
|
2825
2825
|
type: Component,
|
|
2826
|
-
args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title }} </span>\r\n\r\n <!-- Button Information -->\r\n <button\r\n *ngIf=\"showInformation\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </button>\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n <nav *ngIf=\"showNavigation\" aria-label=\"breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <li class=\"breadcrumb-item\">\r\n <a><i [class]=\"_icon\"></i></a>\r\n </li>\r\n\r\n <li *ngFor=\"let nav of breadcrumbs\" class=\"breadcrumb-item\">\r\n <a [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </li>\r\n </ol>\r\n\r\n <!-- Go Back -->\r\n <a *ngIf=\"goBack.show\"\r\n [routerLink]=\"goBack.path\"\r\n [queryParams]='goBack.queryParams'\r\n (click)=\"(goBack.click) ? goBack.click() : null\">\r\n Go back\r\n </a>\r\n </nav>\r\n\r\n <!-- Tooltip\r\n <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n [(visible)]=\"showModal\"\r\n minWidth=\"500px\" minHeight=\"430px\"\r\n [width]=\"width\" [height]=\"height\"\r\n [hideOnOutsideClick]=\"true\"\r\n [resizeEnabled]=\"false\"\r\n [dragEnabled]=\"true\"\r\n (onHidden)=\"(showModal = false)\"\r\n >\r\n\r\n -- Header --\r\n <header *dxTemplate=\"let data of 'title'\">\r\n <div class=\"modal-header\">\r\n <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n </div>\r\n </header>\r\n\r\n -- Body --\r\n <section *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view width=\"100%\" height=\"100%\">\r\n <ol class=\"list-group list-group-numbered\">\r\n <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n <li class=\"list-group-item\">\r\n For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n </li>\r\n </ol>\r\n </dx-scroll-view>\r\n </section>\r\n\r\n -- Button --\r\n <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n <dx-button\r\n coer-button\r\n icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n width=\"125px\" height=\"40px\"\r\n (onClick)=\"(showModal = false)\"\r\n color=\"red\"\r\n ></dx-button>\r\n </div>\r\n </dxi-toolbar-item>\r\n</dx-popup> -->", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:var(--blue)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}header.coer-page-title li.list-group-item a{color:var(--orange)!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\n"] }]
|
|
2826
|
+
args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n <h2>\r\n <span> {{ title }} </span>\r\n\r\n <!-- Button Information -->\r\n <button\r\n *ngIf=\"showInformation\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </button>\r\n </h2>\r\n\r\n <!-- Navigation -->\r\n <nav *ngIf=\"showNavigation\" aria-label=\"breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <li class=\"breadcrumb-item\">\r\n <a><i [class]=\"_icon\"></i></a>\r\n </li>\r\n\r\n <li *ngFor=\"let nav of breadcrumbs\" class=\"breadcrumb-item\">\r\n <a [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n [queryParams]='nav.queryParams'\r\n (click)=\"(nav.click) ? nav.click() : null\">\r\n {{ nav.page }}\r\n </a>\r\n </li>\r\n </ol>\r\n\r\n <!-- Go Back -->\r\n <a *ngIf=\"goBack.show\"\r\n [routerLink]=\"goBack.path\"\r\n [queryParams]='goBack.queryParams'\r\n class=\"go-back-button\"\r\n (click)=\"(goBack.click) ? goBack.click() : null\">\r\n Go back\r\n </a>\r\n </nav>\r\n\r\n <!-- Tooltip\r\n <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n [(visible)]=\"showModal\"\r\n minWidth=\"500px\" minHeight=\"430px\"\r\n [width]=\"width\" [height]=\"height\"\r\n [hideOnOutsideClick]=\"true\"\r\n [resizeEnabled]=\"false\"\r\n [dragEnabled]=\"true\"\r\n (onHidden)=\"(showModal = false)\"\r\n >\r\n\r\n -- Header --\r\n <header *dxTemplate=\"let data of 'title'\">\r\n <div class=\"modal-header\">\r\n <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n </div>\r\n </header>\r\n\r\n -- Body --\r\n <section *dxTemplate=\"let data of 'content'\">\r\n <dx-scroll-view width=\"100%\" height=\"100%\">\r\n <ol class=\"list-group list-group-numbered\">\r\n <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n <li class=\"list-group-item\">\r\n For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n </li>\r\n </ol>\r\n </dx-scroll-view>\r\n </section>\r\n\r\n -- Button --\r\n <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n <dx-button\r\n coer-button\r\n icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n width=\"125px\" height=\"40px\"\r\n (onClick)=\"(showModal = false)\"\r\n color=\"red\"\r\n ></dx-button>\r\n </div>\r\n </dxi-toolbar-item>\r\n</dx-popup> -->", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:auto;min-height:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title nav a.go-back-button{min-width:60px}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:var(--blue)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}header.coer-page-title li.list-group-item a{color:var(--orange)!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\n"] }]
|
|
2827
2827
|
}], propDecorators: { title: [{
|
|
2828
2828
|
type: Input
|
|
2829
2829
|
}], showNavigation: [{
|
|
@@ -3024,8 +3024,8 @@ class CoerSidenav {
|
|
|
3024
3024
|
this.BackButtonBrowser();
|
|
3025
3025
|
this.isOpen.set(['xxl'].includes(Screen.BREAKPOINT));
|
|
3026
3026
|
Screen.Resize.subscribe({
|
|
3027
|
-
next: ({
|
|
3028
|
-
breakpointSIGNAL.set(
|
|
3027
|
+
next: ({ breakpoint }) => {
|
|
3028
|
+
breakpointSIGNAL.set(breakpoint);
|
|
3029
3029
|
if (this.backdrop)
|
|
3030
3030
|
this.Close();
|
|
3031
3031
|
}
|
|
@@ -3170,11 +3170,11 @@ class CoerSidenav {
|
|
|
3170
3170
|
});
|
|
3171
3171
|
}
|
|
3172
3172
|
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\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
|
|
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"] }] }); }
|
|
3174
3174
|
}
|
|
3175
3175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3176
3176
|
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\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
|
|
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"] }]
|
|
3178
3178
|
}], ctorParameters: () => [] });
|
|
3179
3179
|
|
|
3180
3180
|
class CoerDropdown extends ControlValue {
|
|
@@ -3661,8 +3661,6 @@ class CoerToolbar {
|
|
|
3661
3661
|
this.onClickMenu = output();
|
|
3662
3662
|
this.onClickUser = output();
|
|
3663
3663
|
this.onClickOption = output();
|
|
3664
|
-
//Generic Tools
|
|
3665
|
-
this.GetElementWidth = ElementsHTML.GetElementWidth;
|
|
3666
3664
|
//computed
|
|
3667
3665
|
this.userName = computed(() => {
|
|
3668
3666
|
const user = this.user();
|
|
@@ -3697,7 +3695,7 @@ class CoerToolbar {
|
|
|
3697
3695
|
}
|
|
3698
3696
|
return '';
|
|
3699
3697
|
});
|
|
3700
|
-
|
|
3698
|
+
/** */
|
|
3701
3699
|
this.GetPadding = (container) => {
|
|
3702
3700
|
if (this.userName().length > 0 || this.userTitle().length > 0) {
|
|
3703
3701
|
switch (container) {
|
|
@@ -3710,11 +3708,15 @@ class CoerToolbar {
|
|
|
3710
3708
|
case 'user-identity': return '0px';
|
|
3711
3709
|
}
|
|
3712
3710
|
};
|
|
3711
|
+
/** */
|
|
3712
|
+
this.GetElementWidth = (element) => {
|
|
3713
|
+
return this.isReadyPage
|
|
3714
|
+
? ElementsHTML.GetElementWidth(element, 48)
|
|
3715
|
+
: '0px';
|
|
3716
|
+
};
|
|
3713
3717
|
}
|
|
3714
3718
|
ngAfterViewInit() {
|
|
3715
|
-
|
|
3716
|
-
this.isReadyPage = true;
|
|
3717
|
-
});
|
|
3719
|
+
Tools.Sleep().then(() => this.isReadyPage = true);
|
|
3718
3720
|
}
|
|
3719
3721
|
/** */
|
|
3720
3722
|
ToogleSideNave(event) {
|
|
@@ -3739,11 +3741,11 @@ class CoerToolbar {
|
|
|
3739
3741
|
this.dropdown().Open();
|
|
3740
3742
|
}
|
|
3741
3743
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3742
|
-
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]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity
|
|
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]=\"menu()\" \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" }] }); }
|
|
3743
3745
|
}
|
|
3744
3746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3745
3747
|
type: Component,
|
|
3746
|
-
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]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity
|
|
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]=\"menu()\" \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"] }]
|
|
3747
3749
|
}] });
|
|
3748
3750
|
|
|
3749
3751
|
class ComponentsModule {
|