coer-elements 0.0.98 → 0.0.99
Sign up to get free protection for your applications and to get access to all the features.
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +1 -0
- package/fesm2022/coer-elements-components.mjs +10 -2
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +69 -8
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/package.json +1 -1
- package/pages/lib/coer-system/coer-system.component.d.ts +19 -3
- package/pages/lib/pages.module.d.ts +3 -2
|
@@ -18,6 +18,7 @@ export declare class CoerToolbar implements AfterViewInit {
|
|
|
18
18
|
ngAfterViewInit(): void;
|
|
19
19
|
/** */
|
|
20
20
|
protected ToogleSideNave(event: MouseEvent): void;
|
|
21
|
+
protected toolbarMenu: import("@angular/core").Signal<IToolbarMenu[]>;
|
|
21
22
|
protected userName: import("@angular/core").Signal<string>;
|
|
22
23
|
protected userTitle: import("@angular/core").Signal<string>;
|
|
23
24
|
protected get showUser(): boolean;
|
|
@@ -3672,6 +3672,14 @@ class CoerToolbar {
|
|
|
3672
3672
|
this.onClickUser = output();
|
|
3673
3673
|
this.onClickOption = output();
|
|
3674
3674
|
//computed
|
|
3675
|
+
this.toolbarMenu = computed(() => {
|
|
3676
|
+
const menu = [...this.menu()];
|
|
3677
|
+
return [
|
|
3678
|
+
{ label: 'Reset Password', icon: 'fa-solid fa-lock' },
|
|
3679
|
+
{ label: 'Log Out', icon: 'fa-solid fa-door-open' }
|
|
3680
|
+
].concat(menu);
|
|
3681
|
+
});
|
|
3682
|
+
//computed
|
|
3675
3683
|
this.userName = computed(() => {
|
|
3676
3684
|
const user = this.user();
|
|
3677
3685
|
if (Tools.IsNotNull(user)) {
|
|
@@ -3751,11 +3759,11 @@ class CoerToolbar {
|
|
|
3751
3759
|
this.dropdown().Open();
|
|
3752
3760
|
}
|
|
3753
3761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3754
|
-
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 }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickUser: "onClickUser", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], 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 <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3762
|
+
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 }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickUser: "onClickUser", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], 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 <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"toolbarMenu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n }\r\n </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 coer-dropdown{position:absolute;transform:translate(-3px)}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", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["value", "id", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isDisabled", "isReadonly", "isInvisible", "isLoading", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
|
|
3755
3763
|
}
|
|
3756
3764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
|
|
3757
3765
|
type: Component,
|
|
3758
|
-
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 <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"
|
|
3766
|
+
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 <coer-dropdown\r\n #dropdown\r\n [dataSource]=\"toolbarMenu()\" \r\n propDisplay=\"label\" \r\n width=\"auto\"\r\n [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n maxWidth=\"auto\"\r\n (onSelected)=\"onClickOption.emit($event)\"\r\n ></coer-dropdown>\r\n\r\n <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n \r\n @if(userName().length > 0) {\r\n <p> {{ userName() }} </p>\r\n }\r\n \r\n @if(userTitle().length > 0) {\r\n <p> {{ userTitle() }} </p>\r\n }\r\n </div> \r\n </div> \r\n }\r\n </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 coer-dropdown{position:absolute;transform:translate(-3px)}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"] }]
|
|
3759
3767
|
}] });
|
|
3760
3768
|
|
|
3761
3769
|
class ComponentsModule {
|