coer-elements 2.0.60 → 2.0.61
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-sidenav/coer-toolbar/coer-toolbar.component.d.ts +2 -1
- package/fesm2022/coer-elements-components.mjs +7 -6
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +1 -1
- package/styles/containers.scss +1 -2
- package/styles/positions.scss +4 -5
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { AfterViewInit } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, WritableSignal } from '@angular/core';
|
|
2
2
|
import { IMenuToolbar, IUserLogin } from 'coer-elements/interfaces';
|
|
3
3
|
import { MatIconButton } from '@angular/material/button';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class CoerToolbar implements AfterViewInit {
|
|
6
|
+
protected readonly _isModalOpenSIGNAL: WritableSignal<boolean>;
|
|
6
7
|
protected readonly _toogleButton: import("@angular/core").Signal<MatIconButton>;
|
|
7
8
|
protected _isReadyPage: boolean;
|
|
8
9
|
protected _awaitSignals: boolean;
|
|
@@ -911,11 +911,11 @@ class CoerFileboxImage {
|
|
|
911
911
|
this._modal().Open();
|
|
912
912
|
}
|
|
913
913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">
|
|
914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
|
|
915
915
|
}
|
|
916
916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
|
|
917
917
|
type: Component,
|
|
918
|
-
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\">
|
|
918
|
+
args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\"> \r\n <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n [ngClass]=\"{ \r\n 'cursor-pointer' : _isEnable(),\r\n 'dashed' : _figureDashed(),\r\n 'display-none' : isInvisible()\r\n }\"\r\n [ngStyle]=\"{\r\n 'width' : _image()?.width || '40px',\r\n 'min-width' : _image()?.maxWidth || '40px',\r\n 'max-width' : _image()?.maxWidth || '',\r\n 'height' : _image()?.height || '40px',\r\n 'min-height' : _image()?.maxHeight || '40px',\r\n 'max-height' : _image()?.maxHeight || '',\r\n 'margin-top' : _image()?.marginTop || '0px',\r\n 'margin-right' : _image()?.marginRight || '0px',\r\n 'margin-bottom': _image()?.marginBottom || '0px',\r\n 'margin-left' : _image()?.marginLeft || '0px',\r\n }\"> \r\n \r\n <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n \r\n <input #input\r\n type=\"file\"\r\n [accept]=\"_accept\"\r\n (change)=\"_SelectImages($event)\"\r\n (cancel)=\"_isLoadingInner.set(false)\"\r\n [multiple]=\"multiple()\">\r\n \r\n @if(_showTrashButton() || _showExpandButton()) {\r\n <div class=\"icon-container\">\r\n @if(_showTrashButton()) {\r\n <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n }\r\n \r\n @if(_showExpandButton()) {\r\n <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n }\r\n </div>\r\n } \r\n\r\n <!-- Loading / Empty -->\r\n @if(_isLoading()) {\r\n <div class=\"loading\">\r\n <div class=\"loading-content\">\r\n <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n </div>\r\n </div> \r\n } \r\n </figure>\r\n \r\n <!-- Modal -->\r\n <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
|
|
919
919
|
}], ctorParameters: () => [] });
|
|
920
920
|
|
|
921
921
|
class CoerFilebox {
|
|
@@ -933,11 +933,11 @@ class CoerFilebox {
|
|
|
933
933
|
this.onDeleteImage = output();
|
|
934
934
|
}
|
|
935
935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}
|
|
936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n } \r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
|
|
937
937
|
}
|
|
938
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
|
|
939
939
|
type: Component,
|
|
940
|
-
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}
|
|
940
|
+
args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n @if(type() === 'image') {\r\n <coer-filebox-image\r\n [image]=\"image()\"\r\n [multiple]=\"multiple()\"\r\n [isLoading]=\"isLoading()\"\r\n [isDisabled]=\"isDisabled()\"\r\n [isReadonly]=\"isReadonly()\"\r\n [isInvisible]=\"isInvisible()\"\r\n (onSelected)=\"onSelected.emit($event)\"\r\n (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n ></coer-filebox-image>\r\n } \r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}\n"] }]
|
|
941
941
|
}] });
|
|
942
942
|
|
|
943
943
|
class CoerForm {
|
|
@@ -4564,6 +4564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
4564
4564
|
class CoerToolbar {
|
|
4565
4565
|
constructor() {
|
|
4566
4566
|
//Elements
|
|
4567
|
+
this._isModalOpenSIGNAL = isModalOpenSIGNAL;
|
|
4567
4568
|
this._toogleButton = viewChild.required('toogleButton');
|
|
4568
4569
|
//variables
|
|
4569
4570
|
this._isReadyPage = false;
|
|
@@ -4647,11 +4648,11 @@ class CoerToolbar {
|
|
|
4647
4648
|
? '5px' : '0px';
|
|
4648
4649
|
}
|
|
4649
4650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative
|
|
4651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [class]=\"_isModalOpenSIGNAL() ? 'z-index-1': 'z-index-2'\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
|
|
4651
4652
|
}
|
|
4652
4653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
4653
4654
|
type: Component,
|
|
4654
|
-
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative
|
|
4655
|
+
args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [class]=\"_isModalOpenSIGNAL() ? 'z-index-1': 'z-index-2'\">\r\n <mat-toolbar> \r\n @if(showLogo) {\r\n <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"button-container\">\r\n <button\r\n #toogleButton \r\n mat-icon-button \r\n type=\"button\"\r\n (click)=\"ToogleSideNave()\">\r\n <i class=\"icon-bars\"></i>\r\n </button>\r\n </div>\r\n\r\n <span class=\"app-name\"> {{ _appName }} </span> \r\n } \r\n\r\n <span class=\"fill-space\"></span> \r\n \r\n <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n 'padding-right': GetPadding('user-container'),\r\n 'display': showUser ? 'flex' : 'none'\r\n }\">\r\n <div class=\"position-absolute right-0px min-width-150px\">\r\n <coer-dropdown \r\n #dropdown\r\n [dataSource]=\"menu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\" \r\n maxWidth=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n ></coer-dropdown>\r\n </div> \r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n \r\n @if(!showUser) {\r\n <span class=\"me-2\">\r\n <span class=\"fw-bold fa-fade\"> \r\n Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n </span> \r\n </span>\r\n }\r\n </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"] }]
|
|
4655
4656
|
}] });
|
|
4656
4657
|
|
|
4657
4658
|
class ComponentsModule {
|