coer-elements 0.0.114 → 0.0.116
Sign up to get free protection for your applications and to get access to all the features.
- package/components/lib/coer-filebox/coer-filebox.component.d.ts +1 -0
- package/components/lib/coer-modal/coer-modal.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +0 -1
- package/fesm2022/coer-elements-components.mjs +17 -23
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +97 -10
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +6 -1
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-system/coer-system.component.d.ts +24 -4
- package/tools/lib/service.class.d.ts +1 -0
|
@@ -7,6 +7,7 @@ export declare class CoerFilebox {
|
|
|
7
7
|
protected readonly alert: CoerAlert;
|
|
8
8
|
protected IsNull: <T>(value: T | null | undefined) => boolean;
|
|
9
9
|
protected IsNotNull: <T>(value: T | null | undefined) => boolean;
|
|
10
|
+
protected IsNotOnlyWhiteSpace: <T>(value: T | null | undefined) => boolean;
|
|
10
11
|
protected inputFileImage: import("@angular/core").Signal<ElementRef<any>>;
|
|
11
12
|
protected modal: import("@angular/core").Signal<CoerModal>;
|
|
12
13
|
protected base64: string;
|
|
@@ -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<"small" | "full">;
|
|
16
|
+
width: import("@angular/core").InputSignal<"small" | "full" | "auto">;
|
|
17
17
|
height: import("@angular/core").InputSignal<string>;
|
|
18
18
|
maxHeight: import("@angular/core").InputSignal<string>;
|
|
19
19
|
get isOpen(): boolean;
|
|
@@ -17,7 +17,6 @@ export declare class CoerToolbar implements AfterViewInit {
|
|
|
17
17
|
ngAfterViewInit(): void;
|
|
18
18
|
/** */
|
|
19
19
|
protected ToogleSideNave(event: MouseEvent): void;
|
|
20
|
-
protected toolbarMenu: import("@angular/core").Signal<IToolbarMenu[]>;
|
|
21
20
|
protected userName: import("@angular/core").Signal<string>;
|
|
22
21
|
protected userTitle: import("@angular/core").Signal<string>;
|
|
23
22
|
protected get showUser(): boolean;
|
|
@@ -508,6 +508,7 @@ class CoerModal {
|
|
|
508
508
|
switch (this.width()) {
|
|
509
509
|
case 'small': return '450px';
|
|
510
510
|
case 'full': return `${this.windowWidth - 50}px`;
|
|
511
|
+
case 'auto': return 'fit-content';
|
|
511
512
|
default: return 'auto';
|
|
512
513
|
}
|
|
513
514
|
}
|
|
@@ -556,6 +557,7 @@ class CoerFilebox {
|
|
|
556
557
|
this.alert = inject(CoerAlert);
|
|
557
558
|
this.IsNull = Tools.IsNull;
|
|
558
559
|
this.IsNotNull = Tools.IsNotNull;
|
|
560
|
+
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
|
|
559
561
|
//Elements
|
|
560
562
|
this.inputFileImage = viewChild.required('inputFileImage');
|
|
561
563
|
this.modal = viewChild.required('modal');
|
|
@@ -637,11 +639,11 @@ class CoerFilebox {
|
|
|
637
639
|
this.modal().Open();
|
|
638
640
|
}
|
|
639
641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
640
|
-
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 }, 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() ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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(IsNull(_image?.allowDelete) || _image!.allowDelete) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(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\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{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" }] }); }
|
|
642
|
+
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 }, 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() ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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)) {\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\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{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" }] }); }
|
|
641
643
|
}
|
|
642
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
|
|
643
645
|
type: Component,
|
|
644
|
-
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"_isEnable() ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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(IsNull(_image?.allowDelete) || _image!.allowDelete) {\r\n <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n }\r\n\r\n @if(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\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{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"] }]
|
|
646
|
+
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() == 'image') {\r\n <figure (click)=\"_isEnable() ? inputFileImage.click() : null\"\r\n [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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)) {\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\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{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"] }]
|
|
645
647
|
}], propDecorators: { image: [{
|
|
646
648
|
type: Input
|
|
647
649
|
}] } });
|
|
@@ -3671,14 +3673,6 @@ class CoerToolbar {
|
|
|
3671
3673
|
this.onClickMenu = output();
|
|
3672
3674
|
this.onClickOption = output();
|
|
3673
3675
|
//computed
|
|
3674
|
-
this.toolbarMenu = computed(() => {
|
|
3675
|
-
const menu = [...this.menu()];
|
|
3676
|
-
return [
|
|
3677
|
-
{ label: 'Reset Password', icon: 'fa-solid fa-lock' },
|
|
3678
|
-
{ label: 'Log Out', icon: 'fa-solid fa-door-open' }
|
|
3679
|
-
].concat(menu);
|
|
3680
|
-
});
|
|
3681
|
-
//computed
|
|
3682
3676
|
this.userName = computed(() => {
|
|
3683
3677
|
const user = this.user();
|
|
3684
3678
|
if (Tools.IsNotNull(user)) {
|
|
@@ -3686,11 +3680,11 @@ class CoerToolbar {
|
|
|
3686
3680
|
return user?.nickname;
|
|
3687
3681
|
if (Tools.IsNotOnlyWhiteSpace(user?.fullName))
|
|
3688
3682
|
return user?.fullName;
|
|
3689
|
-
const name = Tools.
|
|
3690
|
-
const firstName = Tools.
|
|
3691
|
-
const middleName = Tools.
|
|
3692
|
-
const lastName = Tools.
|
|
3693
|
-
const secondLastName = Tools.
|
|
3683
|
+
const name = Tools.IsNotOnlyWhiteSpace(this.user()?.name) ? this.user().name : '';
|
|
3684
|
+
const firstName = Tools.IsNotOnlyWhiteSpace(this.user()?.firstName) ? this.user().firstName : '';
|
|
3685
|
+
const middleName = Tools.IsNotOnlyWhiteSpace(this.user()?.middleName) ? this.user().middleName : '';
|
|
3686
|
+
const lastName = Tools.IsNotOnlyWhiteSpace(this.user()?.lastName) ? this.user().lastName : '';
|
|
3687
|
+
const secondLastName = Tools.IsNotOnlyWhiteSpace(this.user()?.secondName) ? this.user().secondLastName : '';
|
|
3694
3688
|
return `${name} ${firstName} ${middleName} ${lastName} ${secondLastName}`;
|
|
3695
3689
|
}
|
|
3696
3690
|
return '';
|
|
@@ -3699,16 +3693,16 @@ class CoerToolbar {
|
|
|
3699
3693
|
this.userTitle = computed(() => {
|
|
3700
3694
|
const user = this.user();
|
|
3701
3695
|
if (Tools.IsNotNull(user)) {
|
|
3702
|
-
if (user?.title)
|
|
3696
|
+
if (Tools.IsNotOnlyWhiteSpace(user?.title))
|
|
3703
3697
|
return user.title;
|
|
3704
|
-
if (user?.
|
|
3705
|
-
return user.role;
|
|
3706
|
-
if (user?.position)
|
|
3698
|
+
if (Tools.IsNotOnlyWhiteSpace(user?.position))
|
|
3707
3699
|
return user.position;
|
|
3708
|
-
if (user?.legend)
|
|
3700
|
+
if (Tools.IsNotOnlyWhiteSpace(user?.legend))
|
|
3709
3701
|
return user.legend;
|
|
3710
|
-
if (user?.caption)
|
|
3702
|
+
if (Tools.IsNotOnlyWhiteSpace(user?.caption))
|
|
3711
3703
|
return user.caption;
|
|
3704
|
+
if (Tools.IsNotOnlyWhiteSpace(user?.role))
|
|
3705
|
+
return user.role;
|
|
3712
3706
|
}
|
|
3713
3707
|
return '';
|
|
3714
3708
|
});
|
|
@@ -3757,11 +3751,11 @@ class CoerToolbar {
|
|
|
3757
3751
|
this.dropdown().Open();
|
|
3758
3752
|
}
|
|
3759
3753
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3760
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n \r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3754
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n \r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px;position:relative;z-index:10;padding:0}div#coer-tool-bar mat-toolbar span.app-name{max-width:45%}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:40px!important;max-height:40px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$a.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "animation", "isLoading", "isDisabled", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["value", "id", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isDisabled", "isReadonly", "isInvisible", "isLoading", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
3761
3755
|
}
|
|
3762
3756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3763
3757
|
type: Component,
|
|
3764
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n \r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3758
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n <mat-toolbar>\r\n <coer-button\r\n type=\"icon\"\r\n icon=\"menu\"\r\n [isLoading]=\"isLoading\"\r\n (onClick)=\"ToogleSideNave($event)\"\r\n ></coer-button>\r\n\r\n <span class=\"app-name\"> {{ appName() }} </span>\r\n\r\n <span class=\"fill-space\"></span> \r\n\r\n \r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n \r\n <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n </mat-toolbar>\r\n\r\n <div class=\"shadow\"></div>\r\n</div>\r\n", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px;position:relative;z-index:10;padding:0}div#coer-tool-bar mat-toolbar span.app-name{max-width:45%}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:40px!important;max-height:40px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
|
|
3765
3759
|
}] });
|
|
3766
3760
|
|
|
3767
3761
|
class ComponentsModule {
|