coer-elements 1.1.30 → 1.1.31
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-modal/coer-modal.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-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 +3 -3
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +13 -1
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-system/coer-system.component.d.ts +4 -0
|
@@ -17,7 +17,7 @@ export declare class CoerDateBox extends ControlValue implements OnInit {
|
|
|
17
17
|
id: string;
|
|
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
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
22
22
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
23
23
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
@@ -13,7 +13,7 @@ export declare class CoerModal implements OnInit {
|
|
|
13
13
|
title: import("@angular/core").InputSignal<string>;
|
|
14
14
|
icon: import("@angular/core").InputSignal<string>;
|
|
15
15
|
showCloseButton: import("@angular/core").InputSignal<boolean>;
|
|
16
|
-
width: import("@angular/core").InputSignal<"
|
|
16
|
+
width: import("@angular/core").InputSignal<"small" | "auto" | "full">;
|
|
17
17
|
height: import("@angular/core").InputSignal<string>;
|
|
18
18
|
maxHeight: import("@angular/core").InputSignal<string>;
|
|
19
19
|
get isOpen(): boolean;
|
|
@@ -14,7 +14,7 @@ export declare class CoerNumberBox extends ControlValue implements OnInit {
|
|
|
14
14
|
id: string;
|
|
15
15
|
label: import("@angular/core").InputSignal<string>;
|
|
16
16
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
17
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
17
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
18
18
|
min: import("@angular/core").InputSignal<number>;
|
|
19
19
|
max: import("@angular/core").InputSignal<number>;
|
|
20
20
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -13,7 +13,7 @@ export declare class CoerSecretBox extends ControlValue implements OnInit {
|
|
|
13
13
|
id: string;
|
|
14
14
|
label: import("@angular/core").InputSignal<string>;
|
|
15
15
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
16
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
16
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
17
17
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
18
18
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
19
19
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
|
|
|
12
12
|
id: string;
|
|
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>;
|
|
@@ -13,7 +13,7 @@ export declare class CoerTextBox extends ControlValue implements OnInit {
|
|
|
13
13
|
id: string;
|
|
14
14
|
label: import("@angular/core").InputSignal<string>;
|
|
15
15
|
placeholder: import("@angular/core").InputSignal<string>;
|
|
16
|
-
textPosition: import("@angular/core").InputSignal<"
|
|
16
|
+
textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
|
|
17
17
|
minLength: import("@angular/core").InputSignal<string | number>;
|
|
18
18
|
maxLength: import("@angular/core").InputSignal<string | number>;
|
|
19
19
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
@@ -709,11 +709,11 @@ class CoerFilebox {
|
|
|
709
709
|
this.modal().Open();
|
|
710
710
|
}
|
|
711
711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
712
|
-
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 }, 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 }, image: { classPropertyName: "image", publicName: "image", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "inputFileImage", first: true, predicate: ["inputFileImage"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ \r\n 'dashed': IsNull(_image?.value), \r\n 'd-none': isInvisible() \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <img [src]=\"_base64 | noImage\"\r\n [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n\r\n <input #inputFileImage\r\n type=\"file\"\r\n accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n (change)=\"UploadImages($event)\"\r\n [multiple]=\"multiple()\">\r\n\r\n @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n <div class=\"icon-container\">\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n <i class=\"fa-solid fa-expand\" (click)=\"ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n\r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\"> \r\n\r\n <img [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n </figure>\r\n }\r\n }\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--orange)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox 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 div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox 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"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
712
|
+
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 }, 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 }, image: { classPropertyName: "image", publicName: "image", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "inputFileImage", first: true, predicate: ["inputFileImage"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ \r\n 'dashed': IsNull(_image?.value), \r\n 'd-none': isInvisible() \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <img [src]=\"_base64 | noImage\"\r\n [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n\r\n <input #inputFileImage\r\n type=\"file\"\r\n accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n (change)=\"UploadImages($event)\"\r\n [multiple]=\"multiple()\">\r\n\r\n @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n <div class=\"icon-container\">\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n <i class=\"fa-solid fa-expand\" (click)=\"ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n\r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\"> \r\n\r\n <img [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n </figure>\r\n }\r\n }\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-filebox{display:flex;justify-content:center;align-items:center}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--orange)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox 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 div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox 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"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
713
713
|
}
|
|
714
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
|
|
715
715
|
type: Component,
|
|
716
|
-
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ \r\n 'dashed': IsNull(_image?.value), \r\n 'd-none': isInvisible() \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <img [src]=\"_base64 | noImage\"\r\n [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n\r\n <input #inputFileImage\r\n type=\"file\"\r\n accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n (change)=\"UploadImages($event)\"\r\n [multiple]=\"multiple()\">\r\n\r\n @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n <div class=\"icon-container\">\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n <i class=\"fa-solid fa-expand\" (click)=\"ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n\r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\"> \r\n\r\n <img [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n </figure>\r\n }\r\n }\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--orange)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox 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 div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox 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"] }]
|
|
716
|
+
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ \r\n 'dashed': IsNull(_image?.value), \r\n 'd-none': isInvisible() \r\n }\"\r\n [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\">\r\n\r\n @if(isLoading()) {\r\n <div class=\"loading\">\r\n <i class=\"spinner-border\"></i>\r\n </div>\r\n\r\n <div class=\"placeholder-glow\">\r\n <span class=\"placeholder\"></span>\r\n </div>\r\n }\r\n\r\n <img [src]=\"_base64 | noImage\"\r\n [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n\r\n <input #inputFileImage\r\n type=\"file\"\r\n accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n (change)=\"UploadImages($event)\"\r\n [multiple]=\"multiple()\">\r\n\r\n @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n <div class=\"icon-container\">\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n <i class=\"fa-solid fa-expand\" (click)=\"ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n }\r\n </figure>\r\n\r\n @if(isInvisible()) {\r\n <figure [ngStyle]=\"{\r\n 'margin-top': _image?.marginTop || '',\r\n 'margin-right': _image?.marginRight || '',\r\n 'margin-bottom': _image?.marginBottom || '',\r\n 'margin-left': _image?.marginLeft || ''\r\n }\"> \r\n\r\n <img [ngStyle]=\"{\r\n 'width': _image?.width || '',\r\n 'max-width': _image?.maxWidth || '',\r\n 'height': _image?.height || '',\r\n 'max-height': _image?.maxHeight || '210px'\r\n }\">\r\n </figure>\r\n }\r\n }\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-filebox{display:flex;justify-content:center;align-items:center}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--orange)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox 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 div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox 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"] }]
|
|
717
717
|
}], propDecorators: { image: [{
|
|
718
718
|
type: Input
|
|
719
719
|
}] } });
|
|
@@ -3326,7 +3326,7 @@ class CoerSidenav {
|
|
|
3326
3326
|
return identity.toLowerCase();
|
|
3327
3327
|
};
|
|
3328
3328
|
this.BackButtonBrowser();
|
|
3329
|
-
this.isOpen.set(
|
|
3329
|
+
this.isOpen.set(false);
|
|
3330
3330
|
Screen.Resize.subscribe({
|
|
3331
3331
|
next: ({ breakpoint }) => {
|
|
3332
3332
|
breakpointSIGNAL.set(breakpoint);
|