coer-elements 0.0.77 → 0.0.79
Sign up to get free protection for your applications and to get access to all the features.
- package/components/lib/coer-datebox/coer-datebox.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +16 -3
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +75 -11
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-interfaces.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +104 -9
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +67 -13
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/fesm2022/coer-elements.mjs +5 -4
- package/fesm2022/coer-elements.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/interfaces/lib/login.interface.d.ts +4 -0
- package/interfaces/public-api.d.ts +1 -0
- package/package.json +1 -1
- package/pages/lib/coer-system/coer-system.component.d.ts +16 -0
- package/pages/lib/coer-system/login/login.component.d.ts +16 -0
- package/pages/lib/pages.module.d.ts +10 -6
- package/pages/public-api.d.ts +1 -0
- package/tools/lib/user.class.d.ts +13 -0
- package/tools/public-api.d.ts +1 -0
|
@@ -19,7 +19,7 @@ export declare class CoerDateBox extends ControlValue implements OnInit {
|
|
|
19
19
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
20
20
|
isInvalid: import("@angular/core").InputSignal<boolean>;
|
|
21
21
|
isValid: import("@angular/core").InputSignal<boolean>;
|
|
22
|
-
textPosition: import("@angular/core").InputSignal<"left" | "
|
|
22
|
+
textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
|
|
23
23
|
width: import("@angular/core").InputSignal<string>;
|
|
24
24
|
minWidth: import("@angular/core").InputSignal<string>;
|
|
25
25
|
maxWidth: import("@angular/core").InputSignal<string>;
|
|
@@ -30,7 +30,7 @@ export declare class CoerNumberBox extends ControlValue implements OnInit {
|
|
|
30
30
|
isReadonly: import("@angular/core").InputSignal<boolean>;
|
|
31
31
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
32
32
|
selectOnFocus: import("@angular/core").InputSignal<boolean>;
|
|
33
|
-
textPosition: import("@angular/core").InputSignal<"left" | "
|
|
33
|
+
textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
|
|
34
34
|
onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
|
|
35
35
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
36
36
|
ngOnInit(): void;
|
|
@@ -1,11 +1,24 @@
|
|
|
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
|
+
protected get showUser(): boolean;
|
|
18
|
+
protected get paddingLeft(): string;
|
|
19
|
+
protected GetPadding: (container: "user-identity" | "user-container") => string;
|
|
20
|
+
/** */
|
|
21
|
+
protected ClickUser(): void;
|
|
9
22
|
static ɵfac: i0.ɵɵFactoryDeclaration<CoerToolbar, never>;
|
|
10
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CoerToolbar, "coer-toolbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; }, { "
|
|
23
|
+
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
24
|
}
|
|
@@ -28,7 +28,7 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
|
|
|
28
28
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
29
29
|
showFooter: import("@angular/core").InputSignal<boolean>;
|
|
30
30
|
resize: import("@angular/core").InputSignal<boolean>;
|
|
31
|
-
textPosition: import("@angular/core").InputSignal<"left" | "
|
|
31
|
+
textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
|
|
32
32
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
33
33
|
ngOnInit(): void;
|
|
34
34
|
get value(): string | number | null | undefined;
|
|
@@ -32,7 +32,7 @@ export declare class CoerTextBox extends ControlValue implements OnInit {
|
|
|
32
32
|
isReadonly: import("@angular/core").InputSignal<boolean>;
|
|
33
33
|
isLoading: import("@angular/core").InputSignal<boolean>;
|
|
34
34
|
selectOnFocus: import("@angular/core").InputSignal<boolean>;
|
|
35
|
-
textPosition: import("@angular/core").InputSignal<"left" | "
|
|
35
|
+
textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
|
|
36
36
|
onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
|
|
37
37
|
onInput: import("@angular/core").OutputEmitterRef<string | number>;
|
|
38
38
|
onClickClear: import("@angular/core").OutputEmitterRef<void>;
|
|
@@ -1367,7 +1367,7 @@ class CoerTextBox extends ControlValue {
|
|
|
1367
1367
|
this.isInvisible = input(false);
|
|
1368
1368
|
this.isReadonly = input(false);
|
|
1369
1369
|
this.isLoading = input(false);
|
|
1370
|
-
this.selectOnFocus = input(
|
|
1370
|
+
this.selectOnFocus = input(false);
|
|
1371
1371
|
this.textPosition = input('left');
|
|
1372
1372
|
//Outputs
|
|
1373
1373
|
this.onKeyupEnter = output();
|
|
@@ -3167,11 +3167,11 @@ class CoerSidenav {
|
|
|
3167
3167
|
});
|
|
3168
3168
|
}
|
|
3169
3169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"isOpen()\"\r\n (opened)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n\r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <coer-menu-option
|
|
3170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"isOpen()\"\r\n (opened)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n\r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"fa-solid fa-sync fa-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!isOpen() && showAsideMenu) }\">\r\n <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n <i [class]=\"GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--black)!important;z-index:1!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["clickMenuOption", "clickMenu"] }] }); }
|
|
3171
3171
|
}
|
|
3172
3172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
|
|
3173
3173
|
type: Component,
|
|
3174
|
-
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"isOpen()\"\r\n (opened)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n\r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <coer-menu-option
|
|
3174
|
+
args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n <mat-drawer\r\n #matSidenav\r\n [opened]=\"isOpen()\"\r\n (opened)=\"isOpen.set(true)\"\r\n (closed)=\"isOpen.set(false)\"\r\n [mode]=\"mode\">\r\n\r\n @if(!_isLoading()) {\r\n @if(_navigation().length > 0) {\r\n <div *ngFor=\"let item of _navigation()\">\r\n <!-- Menu -->\r\n <div *ngIf=\"IsMenu(item); else OptionMenu\">\r\n @if(IsGrid(item)) {\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"GetGridIcon(item?.icon)\"\r\n path=\"menu\"\r\n (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n ></coer-menu-option>\r\n }\r\n\r\n @else {\r\n <coer-tree-accordion\r\n [item]=\"item\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n (clickMenu)=\"MenuSelected($event)\"\r\n ></coer-tree-accordion>\r\n }\r\n </div>\r\n \r\n <!-- Option Menu -->\r\n <ng-template #OptionMenu>\r\n <coer-menu-option\r\n [label]=\"item.label\"\r\n [icon]=\"item?.icon\"\r\n [path]=\"item?.path\"\r\n (clickMenuOption)=\"NavigateTo($event)\"\r\n ></coer-menu-option>\r\n </ng-template>\r\n \r\n <div class=\"separator\"></div>\r\n </div>\r\n }\r\n\r\n @else {\r\n <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n }\r\n }\r\n\r\n @else {\r\n <coer-menu-option\r\n label=\"LOADING\"\r\n icon=\"fa-solid fa-sync fa-spin\"\r\n ></coer-menu-option>\r\n }\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </mat-drawer>\r\n\r\n <!-- Main Screen -->\r\n <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!isOpen() && showAsideMenu) }\">\r\n <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n <div *ngFor=\"let item of _navigation()\" (click)=\"Open($event, item)\">\r\n <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n <i [class]=\"GetIcon(item)\"></i>\r\n </span>\r\n </div>\r\n\r\n <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n </aside>\r\n\r\n <ng-content></ng-content>\r\n </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--black)!important;z-index:1!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--gray)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--gray)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--white)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--black)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--white)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:#2f2f2f!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--orange)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
|
|
3175
3175
|
}], ctorParameters: () => [] });
|
|
3176
3176
|
|
|
3177
3177
|
class CoerTab {
|
|
@@ -3441,26 +3441,90 @@ 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
|
+
});
|
|
3486
|
+
//getter
|
|
3487
|
+
this.GetPadding = (container) => {
|
|
3488
|
+
if (this.userName().length > 0 || this.userTitle().length > 0) {
|
|
3489
|
+
switch (container) {
|
|
3490
|
+
case 'user-container': return '10px';
|
|
3491
|
+
case 'user-identity': return '5px';
|
|
3492
|
+
}
|
|
3493
|
+
}
|
|
3494
|
+
switch (container) {
|
|
3495
|
+
case 'user-container': return '2px';
|
|
3496
|
+
case 'user-identity': return '0px';
|
|
3497
|
+
}
|
|
3498
|
+
};
|
|
3448
3499
|
}
|
|
3500
|
+
/** */
|
|
3449
3501
|
ToogleSideNave(event) {
|
|
3450
3502
|
this.isLoading = true;
|
|
3451
|
-
this.
|
|
3503
|
+
this.onClickMenu.emit(event);
|
|
3452
3504
|
isMenuOpenSIGNAL.set(!isMenuOpenSIGNAL());
|
|
3453
3505
|
Tools.Sleep(500, 'ToogleSideNave').then(() => this.isLoading = false);
|
|
3454
3506
|
}
|
|
3507
|
+
//getter
|
|
3508
|
+
get showUser() {
|
|
3509
|
+
return !this._isLoading()
|
|
3510
|
+
&& Tools.IsNotNull(this.user());
|
|
3511
|
+
}
|
|
3512
|
+
//getter
|
|
3513
|
+
get paddingLeft() {
|
|
3514
|
+
return (this.userName().length > 0 || this.userTitle().length > 0)
|
|
3515
|
+
? '5px' : '0px';
|
|
3516
|
+
}
|
|
3517
|
+
/** */
|
|
3518
|
+
ClickUser() {
|
|
3519
|
+
this.onClickUser.emit();
|
|
3520
|
+
}
|
|
3455
3521
|
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.
|
|
3522
|
+
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(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + userImage() + ')' }\"></div>\r\n <div 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 </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: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
3523
|
}
|
|
3458
3524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3459
3525
|
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
|
-
}] } });
|
|
3526
|
+
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(showUser) {\r\n <div class=\"user-container\" (click)=\"ClickUser()\" [ngStyle]=\"{ 'padding-right': GetPadding('user-container') }\">\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + userImage() + ')' }\"></div>\r\n <div 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 </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: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"] }]
|
|
3527
|
+
}] });
|
|
3464
3528
|
|
|
3465
3529
|
class ComponentsModule {
|
|
3466
3530
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|