coer-elements 0.0.76 → 0.0.78
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 +13 -3
- package/fesm2022/coer-elements-components.mjs +53 -12
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/coer-elements.css +42 -1
- package/styles/index.scss +1 -0
- package/styles/layout.scss +1 -1
- package/styles/position.scss +3 -1
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { WritableSignal } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class CoerToolbar {
|
|
4
4
|
protected isLoading: boolean;
|
|
5
5
|
protected _isModalOpen: WritableSignal<boolean>;
|
|
6
|
+
protected _isLoading: WritableSignal<boolean>;
|
|
6
7
|
appName: import("@angular/core").InputSignal<string>;
|
|
7
|
-
|
|
8
|
+
user: import("@angular/core").InputSignal<any>;
|
|
9
|
+
image: import("@angular/core").InputSignal<string>;
|
|
10
|
+
onClickMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
|
|
11
|
+
onClickUser: import("@angular/core").OutputEmitterRef<void>;
|
|
12
|
+
/** */
|
|
8
13
|
protected ToogleSideNave(event: MouseEvent): void;
|
|
14
|
+
protected userName: import("@angular/core").Signal<string>;
|
|
15
|
+
protected userTitle: import("@angular/core").Signal<string>;
|
|
16
|
+
protected userImage: import("@angular/core").Signal<string>;
|
|
17
|
+
/** */
|
|
18
|
+
protected ClickUser(): void;
|
|
9
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerToolbar, never>;
|
|
10
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerToolbar, "coer-toolbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; }, { "
|
|
20
|
+
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>;
|
|
11
21
|
}
|
|
@@ -2851,9 +2851,9 @@ class CoerTreeAccordion {
|
|
|
2851
2851
|
|| (this.isCollapsed && element.classList.contains('active-link'));
|
|
2852
2852
|
};
|
|
2853
2853
|
/** */
|
|
2854
|
-
this.IsMenu = (item) =>
|
|
2854
|
+
this.IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
|
|
2855
2855
|
/** */
|
|
2856
|
-
this.IsGrid = (item) =>
|
|
2856
|
+
this.IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
|
|
2857
2857
|
/** */
|
|
2858
2858
|
this.GetGridIcon = (icon) => Tools.IsNotOnlyWhiteSpace(icon) ? icon : 'fa-solid fa-grip';
|
|
2859
2859
|
}
|
|
@@ -2997,9 +2997,9 @@ class CoerSidenav {
|
|
|
2997
2997
|
//Outputs
|
|
2998
2998
|
this.onMenuSelected = output();
|
|
2999
2999
|
/** */
|
|
3000
|
-
this.IsMenu = (item) =>
|
|
3000
|
+
this.IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
|
|
3001
3001
|
/** */
|
|
3002
|
-
this.IsGrid = (item) =>
|
|
3002
|
+
this.IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
|
|
3003
3003
|
/** */
|
|
3004
3004
|
this.GetIcon = (item) => {
|
|
3005
3005
|
if (Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item.icon)) {
|
|
@@ -3441,26 +3441,67 @@ class CoerToolbar {
|
|
|
3441
3441
|
//variables
|
|
3442
3442
|
this.isLoading = false;
|
|
3443
3443
|
this._isModalOpen = isModalOpenSIGNAL;
|
|
3444
|
+
this._isLoading = isLoadingSIGNAL;
|
|
3444
3445
|
//Inputs
|
|
3445
3446
|
this.appName = input('');
|
|
3446
|
-
|
|
3447
|
-
this.
|
|
3447
|
+
this.user = input(null);
|
|
3448
|
+
this.image = input('');
|
|
3449
|
+
//Outputs
|
|
3450
|
+
this.onClickMenu = output();
|
|
3451
|
+
this.onClickUser = output();
|
|
3452
|
+
//computed
|
|
3453
|
+
this.userName = computed(() => {
|
|
3454
|
+
const name = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.name) ? this.user().name : '';
|
|
3455
|
+
const firstName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.firstName) ? this.user().firstName : '';
|
|
3456
|
+
const middleName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.middleName) ? this.user().middleName : '';
|
|
3457
|
+
const lastName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.lastName) ? this.user().lastName : '';
|
|
3458
|
+
const secondLastName = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.secondName) ? this.user().secondLastName : '';
|
|
3459
|
+
return `${name} ${firstName} ${middleName} ${lastName} ${secondLastName}`.trim();
|
|
3460
|
+
});
|
|
3461
|
+
//computed
|
|
3462
|
+
this.userTitle = computed(() => {
|
|
3463
|
+
const position = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.position) ? this.user().position : '';
|
|
3464
|
+
const legend = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.legend) ? this.user().legend : '';
|
|
3465
|
+
const caption = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.caption) ? this.user().caption : '';
|
|
3466
|
+
const title = Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.title) ? this.user().title : '';
|
|
3467
|
+
return `${position}${legend}${caption}${title}`.trim();
|
|
3468
|
+
});
|
|
3469
|
+
//computed
|
|
3470
|
+
this.userImage = computed(() => {
|
|
3471
|
+
const NO_IMAGE = 'coer-elements/images/no-user.png';
|
|
3472
|
+
if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.image)) {
|
|
3473
|
+
return this.user().image;
|
|
3474
|
+
}
|
|
3475
|
+
if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.userImage)) {
|
|
3476
|
+
return this.user().userImage;
|
|
3477
|
+
}
|
|
3478
|
+
if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.photo)) {
|
|
3479
|
+
return this.user().photo;
|
|
3480
|
+
}
|
|
3481
|
+
if (Tools.IsNotNull(this.user()) && Tools.IsNotOnlyWhiteSpace(this.user()?.userPhoto)) {
|
|
3482
|
+
return this.user().userPhoto;
|
|
3483
|
+
}
|
|
3484
|
+
return NO_IMAGE;
|
|
3485
|
+
});
|
|
3448
3486
|
}
|
|
3487
|
+
/** */
|
|
3449
3488
|
ToogleSideNave(event) {
|
|
3450
3489
|
this.isLoading = true;
|
|
3451
|
-
this.
|
|
3490
|
+
this.onClickMenu.emit(event);
|
|
3452
3491
|
isMenuOpenSIGNAL.set(!isMenuOpenSIGNAL());
|
|
3453
3492
|
Tools.Sleep(500, 'ToogleSideNave').then(() => this.isLoading = false);
|
|
3454
3493
|
}
|
|
3494
|
+
/** */
|
|
3495
|
+
ClickUser() {
|
|
3496
|
+
this.onClickUser.emit();
|
|
3497
|
+
}
|
|
3455
3498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3499
|
+
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"] }] }); }
|
|
3457
3500
|
}
|
|
3458
3501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3459
3502
|
type: Component,
|
|
3460
|
-
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
|
|
3461
|
-
}]
|
|
3462
|
-
type: Output
|
|
3463
|
-
}] } });
|
|
3503
|
+
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"] }]
|
|
3504
|
+
}] });
|
|
3464
3505
|
|
|
3465
3506
|
class ComponentsModule {
|
|
3466
3507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|