coer-elements 0.0.76 → 0.0.78

package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts

@@ -1,11 +1,21 @@
-import { EventEmitter, WritableSignal } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class CoerToolbar {
     protected isLoading: boolean;
     protected _isModalOpen: WritableSignal<boolean>;
+    protected _isLoading: WritableSignal<boolean>;
     appName: import("@angular/core").InputSignal<string>;
-    onClick: EventEmitter<MouseEvent>;
+    user: import("@angular/core").InputSignal<any>;
+    image: import("@angular/core").InputSignal<string>;
+    onClickMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    onClickUser: import("@angular/core").OutputEmitterRef<void>;
+    /** */
     protected ToogleSideNave(event: MouseEvent): void;
+    protected userName: import("@angular/core").Signal<string>;
+    protected userTitle: import("@angular/core").Signal<string>;
+    protected userImage: import("@angular/core").Signal<string>;
+    /** */
+    protected ClickUser(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerToolbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerToolbar, "coer-toolbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerToolbar, "coer-toolbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; }, { "onClickMenu": "onClickMenu"; "onClickUser": "onClickUser"; }, never, never, false, never>;
 }

package/fesm2022/coer-elements-components.mjs

@@ -2851,9 +2851,9 @@ class CoerTreeAccordion {
                 || (this.isCollapsed && element.classList.contains('active-link'));
         };
         /** */
-        this.IsMenu = (item) => item.hasOwnProperty('items') && Tools.IsNotOnlyWhiteSpace(item.items);
+        this.IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
         /** */
-        this.IsGrid = (item) => item.hasOwnProperty('show') && Tools.IsNotOnlyWhiteSpace(item.show) && item.show === 'GRID';
+        this.IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
         /** */
         this.GetGridIcon = (icon) => Tools.IsNotOnlyWhiteSpace(icon) ? icon : 'fa-solid fa-grip';
     }
@@ -2997,9 +2997,9 @@ class CoerSidenav {
         //Outputs 
         this.onMenuSelected = output();
         /** */
-        this.IsMenu = (item) => item.hasOwnProperty('items') && Tools.IsNotOnlyWhiteSpace(item.items);
+        this.IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
         /** */
-        this.IsGrid = (item) => item.hasOwnProperty('show') && Tools.IsNotOnlyWhiteSpace(item.show) && item.show === 'GRID';
+        this.IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
         /** */
         this.GetIcon = (item) => {
             if (Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item.icon)) {
@@ -3441,26 +3441,67 @@ class CoerToolbar {
         //variables
         this.isLoading = false;
         this._isModalOpen = isModalOpenSIGNAL;
+        this._isLoading = isLoadingSIGNAL;
         //Inputs
         this.appName = input('');
-        //Outputs
-        this.onClick = new EventEmitter();
+        this.user = input(null);
+        this.image = input('');
+        //Outputs 
+        this.onClickMenu = output();
+        this.onClickUser = output();
+        //computed
+        this.userName = computed(() => {
+            const name = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.name) ? this.user().name : '';
+            const firstName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.firstName) ? this.user().firstName : '';
+            const middleName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.middleName) ? this.user().middleName : '';
+            const lastName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.lastName) ? this.user().lastName : '';
+            const secondLastName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.secondName) ? this.user().secondLastName : '';
+            return `${name} ${firstName} ${middleName} ${lastName} ${secondLastName}`.trim();
+        });
+        //computed
+        this.userTitle = computed(() => {
+            const position = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.position) ? this.user().position : '';
+            const legend = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.legend) ? this.user().legend : '';
+            const caption = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.caption) ? this.user().caption : '';
+            const title = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.title) ? this.user().title : '';
+            return `${position}${legend}${caption}${title}`.trim();
+        });
+        //computed
+        this.userImage = computed(() => {
+            const NO_IMAGE = 'coer-elements/images/no-user.png';
+            if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.image)) {
+                return this.user().image;
+            }
+            if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.userImage)) {
+                return this.user().userImage;
+            }
+            if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.photo)) {
+                return this.user().photo;
+            }
+            if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.userPhoto)) {
+                return this.user().userPhoto;
+            }
+            return NO_IMAGE;
+        });
     }
+    /** */
     ToogleSideNave(event) {
         this.isLoading = true;
-        this.onClick.emit(event);
+        this.onClickMenu.emit(event);
         isMenuOpenSIGNAL.set(!isMenuOpenSIGNAL());
         Tools.Sleep(500, 'ToogleSideNave').then(() => this.isLoading = false);
     }
+    /** */
+    ClickUser() {
+        this.onClickUser.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, 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> {{ appName() }} </span>\r\n\r\n        <span class=\"fill-space\"></span>\r\n    </mat-toolbar>\r\n\r\n    <div class=\"shadow\"></div>\r\n</div>", 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 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: "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", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }] }); }
+    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 } }, outputs: { onClickMenu: "onClickMenu", onClickUser: "onClickUser" }, 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        @if(!_isLoading()) {\r\n            <div class=\"user-container\" (click)=\"ClickUser()\">\r\n                <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + userImage() + ')' }\"></div>\r\n                <div class=\"user-identity\">\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    </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;padding-right:10px!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;padding-left:5px!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}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", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
             type: Component,
-            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> {{ appName() }} </span>\r\n\r\n        <span class=\"fill-space\"></span>\r\n    </mat-toolbar>\r\n\r\n    <div class=\"shadow\"></div>\r\n</div>", 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 div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
-        }], propDecorators: { onClick: [{
-                type: Output
-            }] } });
+            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        @if(!_isLoading()) {\r\n            <div class=\"user-container\" (click)=\"ClickUser()\">\r\n                <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + userImage() + ')' }\"></div>\r\n                <div class=\"user-identity\">\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    </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;padding-right:10px!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;padding-left:5px!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}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"] }]
+        }] });
 
 class ComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }