coer-elements 0.0.98 → 0.0.99
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 +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 {
|