@energycap/components 0.37.7-ECAP-18600-ech-theme-updates.20230913-1005 → 0.37.7-ECAP-18600-ech-theme-updates.20230913-1551

package/fesm2015/energycap-components.mjs

@@ -188,10 +188,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge !== undefined\"\r\n        [class.icon-only]=\"icon && !label\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\" *ngIf=\"pending\">\r\n        <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n    </div>\r\n\r\n    <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge !== undefined\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-color-icon)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-link)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge !== undefined\"\r\n        [class.icon-only]=\"icon && !label\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\" *ngIf=\"pending\">\r\n        <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n    </div>\r\n\r\n    <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge !== undefined\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge !== undefined\"\r\n        [class.icon-only]=\"icon && !label\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\" *ngIf=\"pending\">\r\n        <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n    </div>\r\n\r\n    <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge !== undefined\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-color-icon)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-link)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
+            args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n        [class.has-badge]=\"badge !== undefined\"\r\n        [class.icon-only]=\"icon && !label\"\r\n        tabindex=\"{{tabindex}}\"\r\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"onClick($event)\"\r\n        #element\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n    <!-- Hidden when the button is not pending -->\r\n    <div class=\"pending-container\" *ngIf=\"pending\">\r\n        <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n    </div>\r\n\r\n    <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n    <ng-container *ngIf=\"label\">\r\n        <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"badge !== undefined\">\r\n        <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n    </ng-container>\r\n</ng-template>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-text-color, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .75rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button.icon-only{padding:0;width:2rem}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.badge{border:1px solid var(--ec-color-white);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:var(--ec-button-background-color-badge, var(--ec-color-purple-4));margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -297,10 +297,10 @@ class BannerComponent {
     }
 }
 BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component });
-BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: BannerComponent, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-interactive: var(--ec-color-primary-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-interactive: var(--ec-color-interactive-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ 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: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
+BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: BannerComponent, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-primary-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ 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: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-banner', template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-interactive: var(--ec-color-primary-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-interactive: var(--ec-color-interactive-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-banner', template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-primary-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: CacheService }]; }, propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -4339,10 +4339,10 @@ class TooltipComponent {
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n\r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n\r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TooltipComponent, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n\r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n\r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n\r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n\r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-interactive: var(--ec-color-interactive-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-tooltip', template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  <header *ngIf=\"title || subtitle\" class=\"mb-3\">\r\n    <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n    <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n  </header>\r\n\r\n  <ng-container *ngIf=\"customContent; else textTemplate\">\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #textTemplate>\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  </ng-template>\r\n\r\n  <ec-button *ngIf=\"dismissible\" id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\" style=\"--ec-button-color-icon: var(--ec-color-secondary-light);\"></ec-button>\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2,.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{position:absolute;top:.25rem;right:.25rem}\n"] }]
         }], propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.--ec-tooltip-background-color']
@@ -5800,10 +5800,10 @@ class HelpPopoverComponent {
     }
 }
 HelpPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HelpPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\r\n            icon=\"icon-help-circle\"\r\n            [contentPosition]=\"contentPosition\"\r\n            iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n       class=\"help-popover-content text-body-1\"\r\n       [class.is-right]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n       [style.max-width]=\"maxWidth\">\r\n    <div *ngIf=\"text\"\r\n         [innerHTML]=\"text | translate\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>", styles: [".help-popover-content{--ec-color-interactive: var(--ec-color-interactive-light);background-color:#162f3b;color:var(--ec-color-primary-light);padding:.375rem .5rem .375rem 1.75rem}.help-popover-content.is-right{padding:.375rem 1.75rem .375rem .5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+HelpPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\r\n            icon=\"icon-help-circle\"\r\n            [contentPosition]=\"contentPosition\"\r\n            iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n       class=\"help-popover-content text-body-1\"\r\n       [class.is-right]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n       [style.max-width]=\"maxWidth\">\r\n    <div *ngIf=\"text\"\r\n         [innerHTML]=\"text | translate\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>", styles: [".help-popover-content{--ec-color-link: var(--ec-color-link-light);background-color:#162f3b;color:var(--ec-color-primary-light);padding:.375rem .5rem .375rem 1.75rem}.help-popover-content.is-right{padding:.375rem 1.75rem .375rem .5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HelpPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-help-popover', template: "<ec-popover id=\"{{id}}_popover\"\r\n            icon=\"icon-help-circle\"\r\n            [contentPosition]=\"contentPosition\"\r\n            iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n       class=\"help-popover-content text-body-1\"\r\n       [class.is-right]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n       [style.max-width]=\"maxWidth\">\r\n    <div *ngIf=\"text\"\r\n         [innerHTML]=\"text | translate\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>", styles: [".help-popover-content{--ec-color-interactive: var(--ec-color-interactive-light);background-color:#162f3b;color:var(--ec-color-primary-light);padding:.375rem .5rem .375rem 1.75rem}.help-popover-content.is-right{padding:.375rem 1.75rem .375rem .5rem}\n"] }]
+            args: [{ selector: 'ec-help-popover', template: "<ec-popover id=\"{{id}}_popover\"\r\n            icon=\"icon-help-circle\"\r\n            [contentPosition]=\"contentPosition\"\r\n            iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n       class=\"help-popover-content text-body-1\"\r\n       [class.is-right]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n       [style.max-width]=\"maxWidth\">\r\n    <div *ngIf=\"text\"\r\n         [innerHTML]=\"text | translate\"></div>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>", styles: [".help-popover-content{--ec-color-link: var(--ec-color-link-light);background-color:#162f3b;color:var(--ec-color-primary-light);padding:.375rem .5rem .375rem 1.75rem}.help-popover-content.is-right{padding:.375rem 1.75rem .375rem .5rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }, {
@@ -8003,10 +8003,10 @@ class TreeComponent {
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { 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: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { 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: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
+            args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n        class=\"flex-shrink d-flex align-items-center\">\r\n  <h2 id=\"{{id}}_title\"\r\n      class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n  <ec-dropdown *ngIf=\"menuItems?.length\"\r\n               id=\"{{id}}_dropdown\"\r\n               class=\"flex-shrink\"\r\n               icon=\"icon-menu\"\r\n               [menuTemplateType]=\"menuTemplateType\"\r\n               menuPosition=\"left\"\r\n               [status]=\"menuStatus\"\r\n               [popupFixed]=\"true\"\r\n               [showArrow]=\"false\"\r\n               [menuMinWidth]=\"240\"\r\n               [items]=\"menuItems\">\r\n  </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n     ecOverlay\r\n     [status]=\"status?.status\"\r\n     [message]=\"status?.message\"\r\n     [displayAsMask]=\"true\">\r\n  <ng-container *ngIf=\"type === 'menu'\">\r\n    <ec-menu [id]=\"id\"\r\n             [items]=\"treeItems\"\r\n             [templateType]=\"templateType\"\r\n             [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n             [truncateItems]=\"true\"\r\n             (selectedChanged)=\"onItemSelected($event)\"\r\n             [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             class=\"flex-grow\">\r\n    </ec-menu>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"type === 'hierarchy'\">\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n                       [rootNode]=\"treeHierarchy\"\r\n                       [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n                       (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n                       (itemSelected)=\"onItemSelected($event)\"\r\n                       class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { attrId: [{
                 type: HostBinding,
                 args: ['attr.id']