coer-elements 0.0.77 → 0.0.79
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-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 }); }
|