npm - @energycap/components - Versions diffs - 0.37.7-ECAP-18600-ech-theme-updates.20230913-2351 → 0.37.7-ECAP-18600-ech-theme-updates.20230914-0921 - Mend

@energycap/components 0.37.7-ECAP-18600-ech-theme-updates.20230913-2351 → 0.37.7-ECAP-18600-ech-theme-updates.20230914-0921

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/fesm2015/energycap-components.mjs CHANGED Viewed

@@ -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:rem-calc(16px)}: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-color-text, 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-color-text, 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-color-text, 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 .5rem;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:rem-calc(7);padding-right:rem-calc(7);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-color-text, 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-color-text, 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-color-text, 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 .5rem;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.ec-button-icon .ec-icon{color:inherit}: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:rem-calc(16px)}: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-color-text, 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-color-text, 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-color-text, 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 .5rem;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:rem-calc(7);padding-right:rem-calc(7);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-color-text, 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-color-text, 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-color-text, 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 .5rem;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.ec-button-icon .ec-icon{color:inherit}: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']
@@ -2291,10 +2291,10 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:rem-calc(8px)}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:rem-calc(8px)}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { 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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { 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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:rem-calc(8px)}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:rem-calc(8px)}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
+            args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <li *ngFor=\"let item of items; index as i\"\r\n                id=\"{{item.id || id + '_item' + i}}\"\r\n                class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n                [attr.disabled]=\"item.disabled\"\r\n                [hidden]=\"item.hidden\"\r\n                ecNavItemActive=\"is-selected\"\r\n                [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n                [ecNavItemActiveUrl]=\"item.url\"\r\n                [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n                (routerLinkActivated)=\"selectItem($event, item)\"\r\n                [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n                (click)=\"selectItem($event, item)\">\r\n\r\n                <a *ngIf=\"item.url && !item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   [routerLink]=\"item.url\"\r\n                   [queryParams]=\"item.queryParams || null\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <a *ngIf=\"item.url && item.externalLink\"\r\n                   id=\"{{item.id}}_link\"\r\n                   title=\"{{truncateItems ? item.label : ''}}\"\r\n                   class=\"item-wrapper\"\r\n                   href=\"{{item.url}}\"\r\n                   target=\"{{item.target || '_self'}}\">\r\n\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </a>\r\n\r\n                <div *ngIf=\"!item.url\"\r\n                     title=\"{{truncateItems ? item.label : ''}}\"\r\n                     class=\"item-wrapper\">\r\n                    <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n                </div>\r\n            </li>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n            class=\"text-body-1\"\r\n            [class.text-truncate]=\"truncateItems\">{{item.label}}</div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\">{{item.caption}}</div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">{{item.label}}</h3>\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -3148,10 +3148,10 @@ class ComboboxComponent extends FormControlBase {
     }
 }
 ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n      <span>{{label | translate}}</span>\r\n      <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n  </label>\r\n\r\n  <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n    <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n  <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n    <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n    <ec-textbox class=\"textbox-group-input mb-0\"\r\n                #textbox\r\n                [id]=\"id\"\r\n                [autofocus]=\"autofocus\"\r\n                [formModel]=\"textboxFormModel\"\r\n                [maxlength]=\"maxlength\"\r\n                [minlength]=\"minlength\"\r\n                [placeholder]=\"effectivePlaceholder\"\r\n                [required]=\"required\"\r\n                [tabindex]=\"tabindex\"\r\n                [readonly]=\"readonly\"\r\n                (input)=\"textboxValueChanged($event)\"\r\n                (keydown)=\"keyNavigate($event)\"\r\n                (focusout)=\"onBlur()\"\r\n                [upperCase]=\"upperCase\"\r\n                [pending]=\"pending && alwaysOpen\"\r\n                [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n               *ngIf=\"!hideToggleButton\"\r\n               [id]=\"id + '_button'\"\r\n               [disabled]=\"formModel.disabled\"\r\n               icon=\"icon-caret-down\"\r\n               [tabindex]=\"-1\"\r\n               type=\"secondary\"\r\n               (click)=\"toggleMenu($event)\"\r\n               (keydown)=\"keyNavigate($event)\"\r\n               [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    <button class=\"add-new {{addNewOptions?.classList}}\"\r\n            id=\"{{id}}_addNew\"\r\n            #addNewButton\r\n            [class.is-selected]=\"addNewSelected\"\r\n            *ngIf=\"addNew\"\r\n            [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n            (click)=\"onAddNew($event)\">\r\n      <span class=\"add-new-label ec-util-truncate\">\r\n        <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n              translate>{{addNewOptions?.label}}\r\n        </span>\r\n        <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n              class=\"ec-util-truncate\" \r\n              [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n        </span>\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n             [ngClass]=\"menuElementClasses\"\r\n             [templateType]=\"templateType\"\r\n             [customMenuTemplate]=\"customMenuTemplate\"\r\n             [showNoItems]=\"!hideNoMatches\"\r\n             [noDataText]=\"noMatchesText\"\r\n             [items]=\"filteredOptions\"\r\n             [selected]=\"selectedItem\"\r\n             (selectedChanged)=\"selectedChanged($event)\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n    <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:rem-calc(8px);text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { 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: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n      <span>{{label | translate}}</span>\r\n      <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n  </label>\r\n\r\n  <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n    <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n  <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n    <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n    <ec-textbox class=\"textbox-group-input mb-0\"\r\n                #textbox\r\n                [id]=\"id\"\r\n                [autofocus]=\"autofocus\"\r\n                [formModel]=\"textboxFormModel\"\r\n                [maxlength]=\"maxlength\"\r\n                [minlength]=\"minlength\"\r\n                [placeholder]=\"effectivePlaceholder\"\r\n                [required]=\"required\"\r\n                [tabindex]=\"tabindex\"\r\n                [readonly]=\"readonly\"\r\n                (input)=\"textboxValueChanged($event)\"\r\n                (keydown)=\"keyNavigate($event)\"\r\n                (focusout)=\"onBlur()\"\r\n                [upperCase]=\"upperCase\"\r\n                [pending]=\"pending && alwaysOpen\"\r\n                [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n               *ngIf=\"!hideToggleButton\"\r\n               [id]=\"id + '_button'\"\r\n               [disabled]=\"formModel.disabled\"\r\n               icon=\"icon-caret-down\"\r\n               [tabindex]=\"-1\"\r\n               type=\"secondary\"\r\n               (click)=\"toggleMenu($event)\"\r\n               (keydown)=\"keyNavigate($event)\"\r\n               [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    <button class=\"add-new {{addNewOptions?.classList}}\"\r\n            id=\"{{id}}_addNew\"\r\n            #addNewButton\r\n            [class.is-selected]=\"addNewSelected\"\r\n            *ngIf=\"addNew\"\r\n            [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n            (click)=\"onAddNew($event)\">\r\n      <span class=\"add-new-label ec-util-truncate\">\r\n        <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n              translate>{{addNewOptions?.label}}\r\n        </span>\r\n        <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n              class=\"ec-util-truncate\" \r\n              [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n        </span>\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n             [ngClass]=\"menuElementClasses\"\r\n             [templateType]=\"templateType\"\r\n             [customMenuTemplate]=\"customMenuTemplate\"\r\n             [showNoItems]=\"!hideNoMatches\"\r\n             [noDataText]=\"noMatchesText\"\r\n             [items]=\"filteredOptions\"\r\n             [selected]=\"selectedItem\"\r\n             (selectedChanged)=\"selectedChanged($event)\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n    <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { 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: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n      <span>{{label | translate}}</span>\r\n      <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n  </label>\r\n\r\n  <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n    <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n  <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n    <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n    <ec-textbox class=\"textbox-group-input mb-0\"\r\n                #textbox\r\n                [id]=\"id\"\r\n                [autofocus]=\"autofocus\"\r\n                [formModel]=\"textboxFormModel\"\r\n                [maxlength]=\"maxlength\"\r\n                [minlength]=\"minlength\"\r\n                [placeholder]=\"effectivePlaceholder\"\r\n                [required]=\"required\"\r\n                [tabindex]=\"tabindex\"\r\n                [readonly]=\"readonly\"\r\n                (input)=\"textboxValueChanged($event)\"\r\n                (keydown)=\"keyNavigate($event)\"\r\n                (focusout)=\"onBlur()\"\r\n                [upperCase]=\"upperCase\"\r\n                [pending]=\"pending && alwaysOpen\"\r\n                [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n               *ngIf=\"!hideToggleButton\"\r\n               [id]=\"id + '_button'\"\r\n               [disabled]=\"formModel.disabled\"\r\n               icon=\"icon-caret-down\"\r\n               [tabindex]=\"-1\"\r\n               type=\"secondary\"\r\n               (click)=\"toggleMenu($event)\"\r\n               (keydown)=\"keyNavigate($event)\"\r\n               [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    <button class=\"add-new {{addNewOptions?.classList}}\"\r\n            id=\"{{id}}_addNew\"\r\n            #addNewButton\r\n            [class.is-selected]=\"addNewSelected\"\r\n            *ngIf=\"addNew\"\r\n            [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n            (click)=\"onAddNew($event)\">\r\n      <span class=\"add-new-label ec-util-truncate\">\r\n        <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n              translate>{{addNewOptions?.label}}\r\n        </span>\r\n        <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n              class=\"ec-util-truncate\" \r\n              [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n        </span>\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n             [ngClass]=\"menuElementClasses\"\r\n             [templateType]=\"templateType\"\r\n             [customMenuTemplate]=\"customMenuTemplate\"\r\n             [showNoItems]=\"!hideNoMatches\"\r\n             [noDataText]=\"noMatchesText\"\r\n             [items]=\"filteredOptions\"\r\n             [selected]=\"selectedItem\"\r\n             (selectedChanged)=\"selectedChanged($event)\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n    <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:rem-calc(8px);text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
+            args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n      <span>{{label | translate}}</span>\r\n      <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n  </label>\r\n\r\n  <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n    <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n  <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n    <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n    <ec-textbox class=\"textbox-group-input mb-0\"\r\n                #textbox\r\n                [id]=\"id\"\r\n                [autofocus]=\"autofocus\"\r\n                [formModel]=\"textboxFormModel\"\r\n                [maxlength]=\"maxlength\"\r\n                [minlength]=\"minlength\"\r\n                [placeholder]=\"effectivePlaceholder\"\r\n                [required]=\"required\"\r\n                [tabindex]=\"tabindex\"\r\n                [readonly]=\"readonly\"\r\n                (input)=\"textboxValueChanged($event)\"\r\n                (keydown)=\"keyNavigate($event)\"\r\n                (focusout)=\"onBlur()\"\r\n                [upperCase]=\"upperCase\"\r\n                [pending]=\"pending && alwaysOpen\"\r\n                [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n               *ngIf=\"!hideToggleButton\"\r\n               [id]=\"id + '_button'\"\r\n               [disabled]=\"formModel.disabled\"\r\n               icon=\"icon-caret-down\"\r\n               [tabindex]=\"-1\"\r\n               type=\"secondary\"\r\n               (click)=\"toggleMenu($event)\"\r\n               (keydown)=\"keyNavigate($event)\"\r\n               [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    <button class=\"add-new {{addNewOptions?.classList}}\"\r\n            id=\"{{id}}_addNew\"\r\n            #addNewButton\r\n            [class.is-selected]=\"addNewSelected\"\r\n            *ngIf=\"addNew\"\r\n            [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n            (click)=\"onAddNew($event)\">\r\n      <span class=\"add-new-label ec-util-truncate\">\r\n        <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n              translate>{{addNewOptions?.label}}\r\n        </span>\r\n        <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n              class=\"ec-util-truncate\" \r\n              [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n        </span>\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n             [ngClass]=\"menuElementClasses\"\r\n             [templateType]=\"templateType\"\r\n             [customMenuTemplate]=\"customMenuTemplate\"\r\n             [showNoItems]=\"!hideNoMatches\"\r\n             [noDataText]=\"noMatchesText\"\r\n             [items]=\"filteredOptions\"\r\n             [selected]=\"selectedItem\"\r\n             (selectedChanged)=\"selectedChanged($event)\"\r\n             [preserveIconSpace]=\"preserveIconSpace\"\r\n             [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n    <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
         }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }, { type: ScrollService }]; }, propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -3378,10 +3378,10 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DropdownComponent, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\r\n  <ec-button [disabled]=\"disabled\"\r\n             id=\"{{id}}_toggle\"\r\n             #dropdownToggle\r\n             [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n             *ecPopup=\"dropdownMenu\"\r\n             [label]=\"label\"\r\n             [icon]=\"icon\"\r\n             [tabindex]=\"tabindex\"\r\n             [type]=\"buttonType\"\r\n             [customTemplate]=\"buttonCustomTemplate\"\r\n             [pending]=\"pending\"\r\n             title=\"{{buttonTitle}}\"\r\n             (click)=\"toggleMenu($event)\"\r\n             (keydown)=\"keyNavigate($event)\"\r\n             [autofocus]=\"autofocus\">\r\n  </ec-button>\r\n  <span class=\"arrow is-{{buttonType}}\"\r\n        *ngIf=\"showArrow\"\r\n        [class.is-disabled]=\"disabled\">\r\n    <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n  <div id=\"{{id}}_popup\"\r\n       class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"status?.status\"\r\n       [message]=\"status?.message\"\r\n       [displayAsMask]=\"true\">\r\n    <!-- Dropdown Menu Title -->\r\n    <header id=\"{{id}}_title\"\r\n            class=\"text-heading-2 px-2 my-2\"\r\n            *ngIf=\"menuTitle\">{{menuTitle}}\r\n    </header>\r\n    <!-- Dropdown Menu -->\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.wrap-items]=\"menuWidth\"\r\n             [templateType]=\"menuTemplateType\"\r\n             [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n             [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n             [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n             [items]=\"items\"\r\n             [showNoItems]=\"true\"\r\n             [enableKeyNav]=\"true\"\r\n             [highlightedItem]=\"highlightedItem\"\r\n             [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n             (selectedChanged)=\"selectedChanged($event)\">\r\n    </ec-menu>\r\n    <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:rem-calc(6);padding-right:rem-calc(6);font-size:rem-calc(12)}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:rem-calc(24px)}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 rem-calc(4px);padding-right:.75remrem-calc(6px)}:host(.is-condensed) ec-button.has-arrow~.arrow{right:rem-calc(6px)}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:inherit}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-icon .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { 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: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DropdownComponent, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\r\n  <ec-button [disabled]=\"disabled\"\r\n             id=\"{{id}}_toggle\"\r\n             #dropdownToggle\r\n             [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n             *ecPopup=\"dropdownMenu\"\r\n             [label]=\"label\"\r\n             [icon]=\"icon\"\r\n             [tabindex]=\"tabindex\"\r\n             [type]=\"buttonType\"\r\n             [customTemplate]=\"buttonCustomTemplate\"\r\n             [pending]=\"pending\"\r\n             title=\"{{buttonTitle}}\"\r\n             (click)=\"toggleMenu($event)\"\r\n             (keydown)=\"keyNavigate($event)\"\r\n             [autofocus]=\"autofocus\">\r\n  </ec-button>\r\n  <span class=\"arrow is-{{buttonType}}\"\r\n        *ngIf=\"showArrow\"\r\n        [class.is-disabled]=\"disabled\">\r\n    <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n  <div id=\"{{id}}_popup\"\r\n       class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"status?.status\"\r\n       [message]=\"status?.message\"\r\n       [displayAsMask]=\"true\">\r\n    <!-- Dropdown Menu Title -->\r\n    <header id=\"{{id}}_title\"\r\n            class=\"text-heading-2 px-2 my-2\"\r\n            *ngIf=\"menuTitle\">{{menuTitle}}\r\n    </header>\r\n    <!-- Dropdown Menu -->\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.wrap-items]=\"menuWidth\"\r\n             [templateType]=\"menuTemplateType\"\r\n             [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n             [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n             [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n             [items]=\"items\"\r\n             [showNoItems]=\"true\"\r\n             [enableKeyNav]=\"true\"\r\n             [highlightedItem]=\"highlightedItem\"\r\n             [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n             (selectedChanged)=\"selectedChanged($event)\">\r\n    </ec-menu>\r\n    <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:inherit}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-icon .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { 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: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-dropdown', template: "<div class=\"control\">\r\n  <ec-button [disabled]=\"disabled\"\r\n             id=\"{{id}}_toggle\"\r\n             #dropdownToggle\r\n             [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n             *ecPopup=\"dropdownMenu\"\r\n             [label]=\"label\"\r\n             [icon]=\"icon\"\r\n             [tabindex]=\"tabindex\"\r\n             [type]=\"buttonType\"\r\n             [customTemplate]=\"buttonCustomTemplate\"\r\n             [pending]=\"pending\"\r\n             title=\"{{buttonTitle}}\"\r\n             (click)=\"toggleMenu($event)\"\r\n             (keydown)=\"keyNavigate($event)\"\r\n             [autofocus]=\"autofocus\">\r\n  </ec-button>\r\n  <span class=\"arrow is-{{buttonType}}\"\r\n        *ngIf=\"showArrow\"\r\n        [class.is-disabled]=\"disabled\">\r\n    <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n  <div id=\"{{id}}_popup\"\r\n       class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"status?.status\"\r\n       [message]=\"status?.message\"\r\n       [displayAsMask]=\"true\">\r\n    <!-- Dropdown Menu Title -->\r\n    <header id=\"{{id}}_title\"\r\n            class=\"text-heading-2 px-2 my-2\"\r\n            *ngIf=\"menuTitle\">{{menuTitle}}\r\n    </header>\r\n    <!-- Dropdown Menu -->\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.wrap-items]=\"menuWidth\"\r\n             [templateType]=\"menuTemplateType\"\r\n             [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n             [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n             [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n             [items]=\"items\"\r\n             [showNoItems]=\"true\"\r\n             [enableKeyNav]=\"true\"\r\n             [highlightedItem]=\"highlightedItem\"\r\n             [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n             (selectedChanged)=\"selectedChanged($event)\">\r\n    </ec-menu>\r\n    <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:rem-calc(6);padding-right:rem-calc(6);font-size:rem-calc(12)}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:rem-calc(24px)}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 rem-calc(4px);padding-right:.75remrem-calc(6px)}:host(.is-condensed) ec-button.has-arrow~.arrow{right:rem-calc(6px)}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:inherit}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-icon .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"] }]
+            args: [{ selector: 'ec-dropdown', template: "<div class=\"control\">\r\n  <ec-button [disabled]=\"disabled\"\r\n             id=\"{{id}}_toggle\"\r\n             #dropdownToggle\r\n             [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n             *ecPopup=\"dropdownMenu\"\r\n             [label]=\"label\"\r\n             [icon]=\"icon\"\r\n             [tabindex]=\"tabindex\"\r\n             [type]=\"buttonType\"\r\n             [customTemplate]=\"buttonCustomTemplate\"\r\n             [pending]=\"pending\"\r\n             title=\"{{buttonTitle}}\"\r\n             (click)=\"toggleMenu($event)\"\r\n             (keydown)=\"keyNavigate($event)\"\r\n             [autofocus]=\"autofocus\">\r\n  </ec-button>\r\n  <span class=\"arrow is-{{buttonType}}\"\r\n        *ngIf=\"showArrow\"\r\n        [class.is-disabled]=\"disabled\">\r\n    <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n  <div id=\"{{id}}_popup\"\r\n       class=\"popup\"\r\n       ecOverlay\r\n       [status]=\"status?.status\"\r\n       [message]=\"status?.message\"\r\n       [displayAsMask]=\"true\">\r\n    <!-- Dropdown Menu Title -->\r\n    <header id=\"{{id}}_title\"\r\n            class=\"text-heading-2 px-2 my-2\"\r\n            *ngIf=\"menuTitle\">{{menuTitle}}\r\n    </header>\r\n    <!-- Dropdown Menu -->\r\n    <ec-menu id=\"{{id}}_menu\"\r\n             [class.wrap-items]=\"menuWidth\"\r\n             [templateType]=\"menuTemplateType\"\r\n             [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n             [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n             [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n             [items]=\"items\"\r\n             [showNoItems]=\"true\"\r\n             [enableKeyNav]=\"true\"\r\n             [highlightedItem]=\"highlightedItem\"\r\n             [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n             (selectedChanged)=\"selectedChanged($event)\">\r\n    </ec-menu>\r\n    <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:inherit}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-icon .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], autofocus: [{
@@ -4296,10 +4296,10 @@ class NumericboxComponent extends FormControlBase {
     }
 }
 NumericboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-NumericboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n  <ec-textbox [id]=\"id\"\r\n              #textbox\r\n              class=\"control-input mb-0\"\r\n              [placeholder]=\"placeholder\"\r\n              [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"textboxFormModel\"\r\n              [required]=\"required\"\r\n              [tabindex]=\"tabindex\"\r\n              [readonly]=\"readonly\"\r\n              [tooltip]=\"tooltip\"\r\n              (focusout)=\"onFocusOut()\">\r\n  </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:rem-calc(8px)}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:rem-calc(8px)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+NumericboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n  <ec-textbox [id]=\"id\"\r\n              #textbox\r\n              class=\"control-input mb-0\"\r\n              [placeholder]=\"placeholder\"\r\n              [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"textboxFormModel\"\r\n              [required]=\"required\"\r\n              [tabindex]=\"tabindex\"\r\n              [readonly]=\"readonly\"\r\n              [tooltip]=\"tooltip\"\r\n              (focusout)=\"onFocusOut()\">\r\n  </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-numericbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n  <ec-textbox [id]=\"id\"\r\n              #textbox\r\n              class=\"control-input mb-0\"\r\n              [placeholder]=\"placeholder\"\r\n              [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"textboxFormModel\"\r\n              [required]=\"required\"\r\n              [tabindex]=\"tabindex\"\r\n              [readonly]=\"readonly\"\r\n              [tooltip]=\"tooltip\"\r\n              (focusout)=\"onFocusOut()\">\r\n  </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:rem-calc(8px)}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:rem-calc(8px)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"] }]
+            args: [{ selector: 'ec-numericbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n  <ec-textbox [id]=\"id\"\r\n              #textbox\r\n              class=\"control-input mb-0\"\r\n              [placeholder]=\"placeholder\"\r\n              [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"textboxFormModel\"\r\n              [required]=\"required\"\r\n              [tabindex]=\"tabindex\"\r\n              [readonly]=\"readonly\"\r\n              [tooltip]=\"tooltip\"\r\n              (focusout)=\"onFocusOut()\">\r\n  </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.Renderer2 }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], decimals: [{
@@ -4657,10 +4657,10 @@ class RadioButtonComponent extends FormControlBase {
     }
 }
 RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\r\n\r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:rem-calc(6px) rem-calc(8px);position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:rem-calc(3px) solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\r\n\r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\r\n\r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:rem-calc(6px) rem-calc(8px);position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:rem-calc(3px) solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
+            args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\r\n\r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
         }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { type: [{
                 type: Input
             }], options: [{
@@ -4818,10 +4818,10 @@ class TabsComponent {
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;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:rem-calc(32px);min-width:rem-calc(32px);justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{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}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab: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}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:rem-calc(10px);height:rem-calc(10px);border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;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:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{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}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab: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}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;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:rem-calc(32px);min-width:rem-calc(32px);justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{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}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab: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}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:rem-calc(10px);height:rem-calc(10px);border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
+            args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;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:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{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}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab: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}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], tabindex: [{
@@ -5779,10 +5779,10 @@ class HierarchyTreeComponent extends HierarchyBase {
     }
 }
 HierarchyTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n           *ngIf=\"rootNode?.icon\"></i>\r\n        <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 rem-calc(4px);margin:0 .25rem;height:rem-calc(28px);border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] });
+HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n           *ngIf=\"rootNode?.icon\"></i>\r\n        <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n           *ngIf=\"rootNode?.icon\"></i>\r\n        <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 rem-calc(4px);margin:0 .25rem;height:rem-calc(28px);border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
+            args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n    class=\"flex-grow scroll-y py-1\">\r\n\r\n  <li *ngIf=\"!hideRootNode\">\r\n    <div class=\"item-wrapper\"\r\n         title=\"{{rootNode?.label}}\"\r\n         [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n         ecNavItemActive=\"is-selected\"\r\n         [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n         [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n      <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n         class=\"item flex-grow d-flex align-items-center\"\r\n         routerLink=\"{{rootNode?.url}}\"\r\n         [queryParams]=\"rootNode?.queryParams\">\r\n        <i class=\"ec-icon {{rootNode.icon}} mx-1 flex-shrink\"\r\n           *ngIf=\"rootNode?.icon\"></i>\r\n        <span class=\"mx-1 text-truncate\">{{rootNode?.label}}</span>\r\n      </a>\r\n    </div>\r\n  </li>\r\n\r\n  <ng-template #hierarchyView\r\n               let-items>\r\n    <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n        id=\"treeItem_{{item.id}}\">\r\n      <div class=\"item-wrapper\"\r\n           title=\"{{item.label}}\"\r\n           [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n           ecNavItemActive=\"is-selected\"\r\n           [ecNavItemActiveUrl]=\"item.url\"\r\n           [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n           [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n        <!-- This element provides the indentation for each level -->\r\n        <span id=\"indent_{{item.id}}\"\r\n              class=\"d-block h-100\"\r\n              [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n        </span>\r\n\r\n        <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n        <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                               class=\"flex-shrink\"\r\n                               [style.width.px]=\"indent\"\r\n                               *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n                               [hidden]=\"item.status === 'pending'\"\r\n                               [expanded]=\"item.expanded\"\r\n                               (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n        </ec-collapsible-toggle>\r\n\r\n        <i class=\"ec-icon icon-loading my-1\"\r\n           [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n        <a id=\"treeItem_{{item.id}}_link\"\r\n           class=\"item\"\r\n           *ngIf=\"item.url\"\r\n           (click)=\"selectItem(item)\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams\"\r\n           [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </a>\r\n        <div id=\"treeItem_{{item.id}}_heading\"\r\n             class=\"item\"\r\n             *ngIf=\"!item.url\"\r\n             (click)=\"selectItem(item)\">\r\n          <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n             *ngIf=\"item.icon\"></i>\r\n          <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n        <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ScrollService }, { type: i0.Injector }]; }, propDecorators: { id: [{
                 type: Input
             }], hideRootNode: [{