@energycap/components 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230531-1002 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230601-1619
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/energycap-components.min.css +1 -1
- package/esm2020/lib/display/app-bar/app-bar.component.mjs +3 -3
- package/esm2020/lib/display/avatar/avatar.component.mjs +2 -2
- package/fesm2015/energycap-components.mjs +4 -4
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +4 -4
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_global-variables.scss +3 -3
|
@@ -4873,10 +4873,10 @@ class AvatarComponent {
|
|
|
4873
4873
|
}
|
|
4874
4874
|
}
|
|
4875
4875
|
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AvatarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4876
|
-
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AvatarComponent, selector: "ec-avatar", inputs: { user: "user" }, usesOnChanges: true, ngImport: i0, template: '{{label}}', isInline: true, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.
|
|
4876
|
+
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AvatarComponent, selector: "ec-avatar", inputs: { user: "user" }, usesOnChanges: true, ngImport: i0, template: '{{label}}', isInline: true, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-2));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-2));color:var(--ec-avatar-color-orange, var(--ec-color-secondary-dark))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-2));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-2));color:var(--ec-avatar-color-green, var(--ec-color-secondary-dark))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-2));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-2));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-2));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] });
|
|
4877
4877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
4878
4878
|
type: Component,
|
|
4879
|
-
args: [{ selector: 'ec-avatar', template: '{{label}}', styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.
|
|
4879
|
+
args: [{ selector: 'ec-avatar', template: '{{label}}', styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-2));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-2));color:var(--ec-avatar-color-orange, var(--ec-color-secondary-dark))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-2));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-2));color:var(--ec-avatar-color-green, var(--ec-color-secondary-dark))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-2));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-2));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-2));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }]
|
|
4880
4880
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AvatarService }]; }, propDecorators: { user: [{
|
|
4881
4881
|
type: Input
|
|
4882
4882
|
}] } });
|
|
@@ -4903,10 +4903,10 @@ class AppBarComponent {
|
|
|
4903
4903
|
}
|
|
4904
4904
|
}
|
|
4905
4905
|
AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4906
|
-
AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AppBarComponent, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [items]=\"menuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <
|
|
4906
|
+
AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AppBarComponent, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [items]=\"menuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <ec-avatar [user]=\"user\"></ec-avatar>\r\n</ng-template>", 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}ec-dropdown ::ng-deep ec-button{--ec-border-radius: 50%}ec-dropdown ::ng-deep ec-button button{border:none!important;box-shadow:none!important;background-color:transparent!important}ec-dropdown ::ng-deep ec-button button:focus{outline:calc(var(--ec-border-width) * 2) solid var(--ec-color-interactive)}ec-dropdown ::ng-deep ec-button.active button{outline:var(--ec-border-width) solid var(--ec-color-interactive);outline-offset:var(--ec-border-width)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
4907
4907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
4908
4908
|
type: Component,
|
|
4909
|
-
args: [{ selector: 'ec-app-bar', template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [items]=\"menuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <
|
|
4909
|
+
args: [{ selector: 'ec-app-bar', template: "<section class=\"logo-container\">\r\n <img src=\"{{iconPath}}\"\r\n alt=\"EnergyCAP Platform\">\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n <ng-content select=\".app-bar-actions\"></ng-content>\r\n <ec-dropdown id=\"AppBarUserMenu\"\r\n *ngIf=\"userMenuItems.length; else avatar\"\r\n [items]=\"menuItems\"\r\n [buttonCustomTemplate]=\"avatar\"\r\n [showArrow]=\"false\"\r\n [menuWidth]=\"userMenuWidth\"\r\n [menuMinWidth]=\"userMenuMinWidth\"\r\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n</section>\r\n\r\n<ng-template #avatar>\r\n <ec-avatar [user]=\"user\"></ec-avatar>\r\n</ng-template>", 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}ec-dropdown ::ng-deep ec-button{--ec-border-radius: 50%}ec-dropdown ::ng-deep ec-button button{border:none!important;box-shadow:none!important;background-color:transparent!important}ec-dropdown ::ng-deep ec-button button:focus{outline:calc(var(--ec-border-width) * 2) solid var(--ec-color-interactive)}ec-dropdown ::ng-deep ec-button.active button{outline:var(--ec-border-width) solid var(--ec-color-interactive);outline-offset:var(--ec-border-width)}\n"] }]
|
|
4910
4910
|
}], ctorParameters: function () { return [{ type: AvatarService }]; }, propDecorators: { user: [{
|
|
4911
4911
|
type: Input
|
|
4912
4912
|
}], userMenuItems: [{
|