coer-elements 2.0.60 → 2.0.62
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-grid/coer-grid-cell/coer-grid-cell.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +2 -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 +15 -17
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +2 -2
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +24 -0
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +1 -1
- package/styles/containers.scss +1 -2
- package/styles/positions.scss +4 -5
- package/tools/lib/tools.d.ts +8 -0
|
@@ -23,7 +23,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
|
|
|
23
23
|
value: import("@angular/core").InputSignal<string | null | undefined>;
|
|
24
24
|
label: import("@angular/core").InputSignal<string>;
|
|
25
25
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
26
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
26
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
27
27
|
isWritable: import("@angular/core").InputSignal<boolean>;
|
|
28
28
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
29
29
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -26,7 +26,7 @@ export declare class CoerGridCell<T> {
|
|
|
26
26
|
/** */
|
|
27
27
|
protected _GetCellValue: import("@angular/core").Signal<string>;
|
|
28
28
|
/** */
|
|
29
|
-
protected _GetTextAlign: import("@angular/core").Signal<"
|
|
29
|
+
protected _GetTextAlign: import("@angular/core").Signal<"flex-start" | "center" | "flex-end">;
|
|
30
30
|
/** */
|
|
31
31
|
protected _GetTextBreak: import("@angular/core").Signal<"break-word" | "keep-all">;
|
|
32
32
|
/** */
|
|
@@ -16,7 +16,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
20
20
|
min: import("@angular/core").InputSignal<number>;
|
|
21
21
|
max: import("@angular/core").InputSignal<number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -17,7 +17,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
|
|
|
17
17
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
18
18
|
label: import("@angular/core").InputSignal<string>;
|
|
19
19
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
20
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
21
21
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
23
23
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { AfterViewInit } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, WritableSignal } from '@angular/core';
|
|
2
2
|
import { IMenuToolbar, IUserLogin } from 'coer-elements/interfaces';
|
|
3
3
|
import { MatIconButton } from '@angular/material/button';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class CoerToolbar implements AfterViewInit {
|
|
6
|
+
protected readonly _isModalOpenSIGNAL: WritableSignal<boolean>;
|
|
6
7
|
protected readonly _toogleButton: import("@angular/core").Signal<MatIconButton>;
|
|
7
8
|
protected _isReadyPage: boolean;
|
|
8
9
|
protected _awaitSignals: boolean;
|
|
@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit,
|
|
|
12
12
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
13
13
|
label: import("@angular/core").InputSignal<string>;
|
|
14
14
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
15
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
15
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
16
16
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
17
17
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
18
18
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
|
|
|
16
16
|
value: import("@angular/core").InputSignal<string | number | null | undefined>;
|
|
17
17
|
label: import("@angular/core").InputSignal<string>;
|
|
18
18
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
19
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
20
20
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
21
21
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
22
22
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -911,11 +911,11 @@ class CoerFileboxImage {
|
|
|
911
911
|
this._modal().Open();
|
|
912
912
|
}
|
|
913
913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">
|
|
914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
|
|
915
915
|
}
|
|
916
916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
|
|
917
917
|
type: Component,
|
|
918
|
-
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\">
|
|
918
|
+
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
|
|
919
919
|
}], ctorParameters: () => [] });
|
|
920
920
|
|
|
921
921
|
class CoerFilebox {
|
|
@@ -933,11 +933,11 @@ class CoerFilebox {
|
|
|
933
933
|
this.onDeleteImage = output();
|
|
934
934
|
}
|
|
935
935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}
|
|
936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n } \r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
|
|
937
937
|
}
|
|
938
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
|
|
939
939
|
type: Component,
|
|
940
|
-
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}
|
|
940
|
+
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n } \r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}\n"] }]
|
|
941
941
|
}] });
|
|
942
942
|
|
|
943
943
|
class CoerForm {
|
|
@@ -2552,15 +2552,12 @@ class CoerGridCell {
|
|
|
2552
2552
|
});
|
|
2553
2553
|
/** */
|
|
2554
2554
|
this._GetTextColor = computed(() => {
|
|
2555
|
-
switch (['textBlue', 'textGreen', 'textYellow', 'textOrange', 'textRed']
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
row: { ...this.row() },
|
|
2562
|
-
value: this.row()[this.header()?.property || '']
|
|
2563
|
-
})))) {
|
|
2555
|
+
switch (['textBlue', 'textGreen', 'textYellow', 'textOrange', 'textRed'].find(color => Tools.IsNotNull(this.header()?.config) && ((Tools.IsBooleanTrue(this.header()?.config, color)) || (Tools.IsFunction(this.header()?.config, color) && (this.header()?.config)[color]({
|
|
2556
|
+
indexRow: this.row().indexRow,
|
|
2557
|
+
property: this.header()?.property,
|
|
2558
|
+
row: { ...this.row() },
|
|
2559
|
+
value: this.row()[this.header()?.property || '']
|
|
2560
|
+
}))))) {
|
|
2564
2561
|
case 'textBlue': return colorsSIGNAL().fixedColors.blue;
|
|
2565
2562
|
case 'textGreen': return colorsSIGNAL().fixedColors.green;
|
|
2566
2563
|
case 'textYellow': return colorsSIGNAL().fixedColors.yellow;
|
|
@@ -4127,11 +4124,11 @@ class CoerSidenav {
|
|
|
4127
4124
|
});
|
|
4128
4125
|
}
|
|
4129
4126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:
|
|
4127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
|
|
4131
4128
|
}
|
|
4132
4129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
4133
4130
|
type: Component,
|
|
4134
|
-
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:
|
|
4131
|
+
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n <mat-drawer \r\n #matSidenav\r\n [opened]=\"_isOpen()\"\r\n (opened)=\"_Open()\"\r\n (closed)=\"_Close()\"\r\n [mode]=\"_mode()\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) { \r\n @for(item of _navigation(); track item.id) {\r\n \r\n <!-- Menu --> \r\n @if(_IsMenu(item)) {\r\n @if(_IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"_GetIcon(item)\"\r\n path=\"menu\"\r\n (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (showGridMenu)=\"_NavigateTo($event)\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n (clickMenu)=\"_MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n }\r\n \r\n <!-- Option Menu -->\r\n @else {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (onClickMenuOption)=\"_NavigateTo($event)\"\r\n ></coer-menu-option>\r\n }\r\n \r\n \r\n <div class=\"separator\"></div> \r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"icon-arrows-sync animation-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n @if(_isLoading()) {\r\n <span class=\"icon-container\">\r\n <i class=\"icon-arrows-sync animation-spin\"></i>\r\n </span>\r\n }\r\n\r\n @else {\r\n @for (item of _navigation(); track item.id) {\r\n <div (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n <i [class]=\"_GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n } \r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside> \r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:3;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
|
|
4135
4132
|
}], ctorParameters: () => [] });
|
|
4136
4133
|
|
|
4137
4134
|
class CoerDropdown extends ControlValue {
|
|
@@ -4564,6 +4561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
4564
4561
|
class CoerToolbar {
|
|
4565
4562
|
constructor() {
|
|
4566
4563
|
//Elements
|
|
4564
|
+
this._isModalOpenSIGNAL = isModalOpenSIGNAL;
|
|
4567
4565
|
this._toogleButton = viewChild.required('toogleButton');
|
|
4568
4566
|
//variables
|
|
4569
4567
|
this._isReadyPage = false;
|
|
@@ -4647,11 +4645,11 @@ class CoerToolbar {
|
|
|
4647
4645
|
? '5px' : '0px';
|
|
4648
4646
|
}
|
|
4649
4647
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { 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", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \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 @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative
|
|
4648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { 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", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [class]=\"_isModalOpenSIGNAL() ? 'z-index-1': 'z-index-2'\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \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 @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}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:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!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;min-width:70px!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:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
|
|
4651
4649
|
}
|
|
4652
4650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
4653
4651
|
type: Component,
|
|
4654
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \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 @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative
|
|
4652
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [class]=\"_isModalOpenSIGNAL() ? 'z-index-1': 'z-index-2'\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \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 @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}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:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!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;min-width:70px!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:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"] }]
|
|
4655
4653
|
}] });
|
|
4656
4654
|
|
|
4657
4655
|
class ComponentsModule {
|