@energycap/components 0.46.2 → 0.46.4
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.
|
@@ -4020,11 +4020,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
4020
4020
|
/** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
|
|
4021
4021
|
class SpinnerComponent {
|
|
4022
4022
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n
|
|
4023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }); }
|
|
4024
4024
|
}
|
|
4025
4025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
4026
4026
|
type: Component,
|
|
4027
|
-
args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n
|
|
4027
|
+
args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n <span class=\"spinner-dot\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }]
|
|
4028
4028
|
}] });
|
|
4029
4029
|
|
|
4030
4030
|
class Overlay {
|
|
@@ -9909,6 +9909,7 @@ class AppBarComponent {
|
|
|
9909
9909
|
this.userMenuMinWidth = 160;
|
|
9910
9910
|
this.userMenuTabindex = 0;
|
|
9911
9911
|
this.iconPath = '/assets/images/icon.svg';
|
|
9912
|
+
this.iconLink = null;
|
|
9912
9913
|
this.hideAppIcon = false;
|
|
9913
9914
|
this.menuItems = [];
|
|
9914
9915
|
this.userItem = [];
|
|
@@ -9923,11 +9924,11 @@ class AppBarComponent {
|
|
|
9923
9924
|
this.menuItems = [...this.userItem, ...this.userMenuItems];
|
|
9924
9925
|
}
|
|
9925
9926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9926
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
|
|
9927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", iconLink: "iconLink", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
|
|
9927
9928
|
}
|
|
9928
9929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
9929
9930
|
type: Component,
|
|
9930
|
-
args: [{ selector: 'ec-app-bar', standalone: false, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
|
|
9931
|
+
args: [{ selector: 'ec-app-bar', standalone: false, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
|
|
9931
9932
|
}], ctorParameters: () => [{ type: AvatarService }], propDecorators: { user: [{
|
|
9932
9933
|
type: Input
|
|
9933
9934
|
}], userMenuItems: [{
|
|
@@ -9940,6 +9941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
9940
9941
|
type: Input
|
|
9941
9942
|
}], iconPath: [{
|
|
9942
9943
|
type: Input
|
|
9944
|
+
}], iconLink: [{
|
|
9945
|
+
type: Input
|
|
9943
9946
|
}], hideAppIcon: [{
|
|
9944
9947
|
type: Input
|
|
9945
9948
|
}] } });
|