coer-elements 2.0.59 → 2.0.60
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-filebox/coer-filebox-image/coer-filebox-image.component.d.ts +0 -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 +1 -2
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +13 -19
- 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/interfaces/lib/coer-filebox/file-image.interface.d.ts +1 -0
- package/package.json +1 -1
- package/styles/coer-elements.css +1 -1
- package/styles/components.scss +2 -1
- package/styles/containers.scss +1 -0
- package/styles/scroll-bars.scss +1 -1
|
@@ -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<"left" | "
|
|
26
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
27
27
|
isWritable: import("@angular/core").InputSignal<boolean>;
|
|
28
28
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
29
29
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -31,7 +31,6 @@ export declare class CoerFileboxImage implements OnDestroy {
|
|
|
31
31
|
protected _isEnable: import("@angular/core").Signal<boolean>;
|
|
32
32
|
protected _showTrashButton: import("@angular/core").Signal<boolean>;
|
|
33
33
|
protected _showExpandButton: import("@angular/core").Signal<boolean>;
|
|
34
|
-
protected _figureWidth: import("@angular/core").Signal<string>;
|
|
35
34
|
protected _figureDashed: import("@angular/core").Signal<boolean>;
|
|
36
35
|
/** */
|
|
37
36
|
protected _SelectImages(event: any): Promise<void>;
|
|
@@ -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<"left" | "
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
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<"left" | "
|
|
20
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
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,10 +1,9 @@
|
|
|
1
|
-
import { AfterViewInit
|
|
1
|
+
import { AfterViewInit } 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
6
|
protected readonly _toogleButton: import("@angular/core").Signal<MatIconButton>;
|
|
7
|
-
protected readonly _isModalOpen: WritableSignal<boolean>;
|
|
8
7
|
protected _isReadyPage: boolean;
|
|
9
8
|
protected _awaitSignals: boolean;
|
|
10
9
|
protected _appName: string;
|
|
@@ -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<"left" | "
|
|
15
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
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<"left" | "
|
|
19
|
+
textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
|
|
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>;
|
|
@@ -830,7 +830,7 @@ class CoerFileboxImage {
|
|
|
830
830
|
&& this.IsNotNull(this._image())
|
|
831
831
|
&& this.IsNotNull(this._image().value)
|
|
832
832
|
&& this.IsNotOnlyWhiteSpace(this._base64())
|
|
833
|
-
&& (this.
|
|
833
|
+
&& (this.IsNotNull(this._image()?.allowDelete) && this._image()?.allowDelete);
|
|
834
834
|
});
|
|
835
835
|
//computed
|
|
836
836
|
this._showExpandButton = computed(() => {
|
|
@@ -839,19 +839,14 @@ class CoerFileboxImage {
|
|
|
839
839
|
&& this.IsNotNull(this._image())
|
|
840
840
|
&& this.IsNotNull(this._image().value)
|
|
841
841
|
&& this.IsNotOnlyWhiteSpace(this._base64())
|
|
842
|
-
&& (this.
|
|
843
|
-
});
|
|
844
|
-
//computed
|
|
845
|
-
this._figureWidth = computed(() => {
|
|
846
|
-
return Tools.IsNotOnlyWhiteSpace(this._image()?.value)
|
|
847
|
-
&& !this._isLoading()
|
|
848
|
-
? 'fit-content' : '210px';
|
|
842
|
+
&& (this.IsNotNull(this._image()?.allowExpand) && this._image()?.allowExpand);
|
|
849
843
|
});
|
|
850
844
|
//computed
|
|
851
845
|
this._figureDashed = computed(() => {
|
|
852
846
|
return !this.isReadonly()
|
|
853
847
|
&& !this.isDisabled()
|
|
854
|
-
&& this.IsOnlyWhiteSpace(this._image()?.value)
|
|
848
|
+
&& this.IsOnlyWhiteSpace(this._image()?.value)
|
|
849
|
+
&& (Tools.IsNull(this.image()?.noImage) || this.image()?.noImage == 'IMAGE');
|
|
855
850
|
});
|
|
856
851
|
this._effect = effect(() => {
|
|
857
852
|
if (Tools.IsNotNull(this.image())) {
|
|
@@ -916,11 +911,11 @@ class CoerFileboxImage {
|
|
|
916
911
|
this._modal().Open();
|
|
917
912
|
}
|
|
918
913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
919
|
-
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{display:contents!important}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" }] }); }
|
|
920
915
|
}
|
|
921
916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
|
|
922
917
|
type: Component,
|
|
923
|
-
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{display:contents!important}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"] }]
|
|
924
919
|
}], ctorParameters: () => [] });
|
|
925
920
|
|
|
926
921
|
class CoerFilebox {
|
|
@@ -938,11 +933,11 @@ class CoerFilebox {
|
|
|
938
933
|
this.onDeleteImage = output();
|
|
939
934
|
}
|
|
940
935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
-
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:
|
|
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}div.coer-filebox coer-filebox-image{display:inherit!important}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
|
|
942
937
|
}
|
|
943
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
|
|
944
939
|
type: Component,
|
|
945
|
-
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:
|
|
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}div.coer-filebox coer-filebox-image{display:inherit!important}\n"] }]
|
|
946
941
|
}] });
|
|
947
942
|
|
|
948
943
|
class CoerForm {
|
|
@@ -4132,11 +4127,11 @@ class CoerSidenav {
|
|
|
4132
4127
|
});
|
|
4133
4128
|
}
|
|
4134
4129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4135
|
-
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()\"
|
|
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:1;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"] }] }); }
|
|
4136
4131
|
}
|
|
4137
4132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
4138
4133
|
type: Component,
|
|
4139
|
-
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()\"
|
|
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:1;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"] }]
|
|
4140
4135
|
}], ctorParameters: () => [] });
|
|
4141
4136
|
|
|
4142
4137
|
class CoerDropdown extends ControlValue {
|
|
@@ -4570,8 +4565,7 @@ class CoerToolbar {
|
|
|
4570
4565
|
constructor() {
|
|
4571
4566
|
//Elements
|
|
4572
4567
|
this._toogleButton = viewChild.required('toogleButton');
|
|
4573
|
-
//variables
|
|
4574
|
-
this._isModalOpen = isModalOpenSIGNAL;
|
|
4568
|
+
//variables
|
|
4575
4569
|
this._isReadyPage = false;
|
|
4576
4570
|
this._awaitSignals = false;
|
|
4577
4571
|
//appSettings
|
|
@@ -4653,11 +4647,11 @@ class CoerToolbar {
|
|
|
4653
4647
|
? '5px' : '0px';
|
|
4654
4648
|
}
|
|
4655
4649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4656
|
-
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\"
|
|
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;z-index:1}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" }] }); }
|
|
4657
4651
|
}
|
|
4658
4652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
4659
4653
|
type: Component,
|
|
4660
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\"
|
|
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;z-index:1}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"] }]
|
|
4661
4655
|
}] });
|
|
4662
4656
|
|
|
4663
4657
|
class ComponentsModule {
|