npm - @energycap/components - Versions diffs - 0.45.2-multi-select-component.20260305-1130 → 0.46.0 - Mend

@energycap/components 0.45.2-multi-select-component.20260305-1130 → 0.46.0

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 (60) hide show

package/README.md +188 -188
package/fesm2022/energycap-components.mjs +106 -106
package/fesm2022/energycap-components.mjs.map +1 -1
package/package.json +1 -1
package/schematics/collection.json +4 -4
package/src/assets/images/favicon-ech.svg +14 -14
package/src/assets/images/favicon-esa.svg +6 -6
package/src/assets/images/favicon-eum.svg +13 -13
package/src/assets/images/favicon-whitelabel.svg +4 -4
package/src/assets/images/favicon.svg +12 -12
package/src/assets/images/icon-carbonhub.svg +10 -10
package/src/assets/images/icon-eum.svg +5 -5
package/src/assets/images/icon-ucp.svg +12 -12
package/src/assets/images/icon-wattics.svg +5 -5
package/src/assets/images/icon.svg +11 -11
package/src/assets/images/logo.svg +10 -10
package/src/assets/images/splash-electric.svg +3 -3
package/src/assets/images/splash-interval.svg +3 -3
package/src/assets/images/splash-seedling.svg +11 -11
package/src/assets/images/splash-water.svg +3 -3
package/src/assets/locales/en_US.json +65 -65
package/src/assets/scripts/unsupported-browser.js +17 -17
package/src/styles/_base.scss +38 -38
package/src/styles/_colors.scss +96 -96
package/src/styles/_core.scss +3 -3
package/src/styles/_functions.scss +114 -114
package/src/styles/_global-variables.scss +230 -230
package/src/styles/_icons.scss +23 -23
package/src/styles/bootstrap/_grid.scss +33 -33
package/src/styles/bootstrap/_reboot.scss +322 -322
package/src/styles/components/_badge.scss +14 -14
package/src/styles/components/_card.scss +21 -21
package/src/styles/components/_link-icons.scss +37 -37
package/src/styles/components/_splash.scss +188 -188
package/src/styles/components/_tag.scss +22 -22
package/src/styles/components/_unsupported-browsers.scss +23 -23
package/src/styles/email/_email-base.scss +227 -227
package/src/styles/email/email.scss +42 -42
package/src/styles/index.scss +29 -29
package/src/styles/mixins/_animations.scss +17 -17
package/src/styles/mixins/_button-base.scss +206 -206
package/src/styles/mixins/_card-base.scss +40 -40
package/src/styles/mixins/_common.scss +51 -51
package/src/styles/mixins/_dialog-base.scss +95 -95
package/src/styles/mixins/_form-control-base.scss +674 -674
package/src/styles/mixins/_login.scss +74 -74
package/src/styles/mixins/_menu-base.scss +153 -153
package/src/styles/mixins/_overlay-base.scss +32 -32
package/src/styles/mixins/_resizable-base.scss +57 -57
package/src/styles/mixins/_spinner-base.scss +34 -34
package/src/styles/mixins/_table-base.scss +297 -297
package/src/styles/mixins/_tabs-base.scss +146 -146
package/src/styles/mixins/_tags-base.scss +125 -125
package/src/styles/mixins/_text.scss +89 -89
package/src/styles/mixins.scss +14 -14
package/src/styles/utilities/_borders.scss +29 -29
package/src/styles/utilities/_common.scss +49 -49
package/src/styles/utilities/_layout.scss +115 -115
package/src/styles/utilities/_spacing.scss +64 -64
package/src/styles/utilities/_text.scss +139 -139

package/fesm2022/energycap-components.mjs CHANGED Viewed

@@ -191,11 +191,11 @@ class ButtonComponent {
         this.buttonElement.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", 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        [class.locked]=\"lockButton\"\r\n        [class.has-custom-icon-color]=\"iconColor\"\r\n        [style.--ec-button-custom-icon-color]=\"iconColor\"\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  @if (customTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n  } @else {\r\n  <!-- Hidden when the button is not pending -->\r\n  @if (pending) {\r\n  <div class=\"pending-container\">\r\n    <i class=\"ec-icon {{pendingIcon}}\"\r\n       id=\"{{id}}_pending\"></i>\r\n  </div>\r\n  }\r\n  @if (icon) {\r\n  <i class=\"ec-icon {{icon}}\"\r\n     id=\"{{id}}_icon\"></i>\r\n  }\r\n  @if (label) {\r\n  <span id=\"{{id}}_label\"\r\n        class=\"label\">{{label | translate}}</span>\r\n  }\r\n  @if (badge !== undefined) {\r\n  <span id=\"{{id}}_badge\"\r\n        class=\"badge\">{{badge}}</span>\r\n  }\r\n  }\r\n  <ng-content></ng-content>\r\n</button>", 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-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.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-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.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-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.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-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.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.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.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-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{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-card: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-card: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-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}: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}: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}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{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}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", 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\"\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n        [class.has-badge]=\"badge !== undefined\"\n        [class.icon-only]=\"icon && !label\"\n        [class.locked]=\"lockButton\"\n        [class.has-custom-icon-color]=\"iconColor\"\n        [style.--ec-button-custom-icon-color]=\"iconColor\"\n        tabindex=\"{{tabindex}}\"\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n        [disabled]=\"disabled\"\n        (click)=\"onClick($event)\"\n        #element\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n  @if (customTemplate) {\n  <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n  } @else {\n  <!-- Hidden when the button is not pending -->\n  @if (pending) {\n  <div class=\"pending-container\">\n    <i class=\"ec-icon {{pendingIcon}}\"\n       id=\"{{id}}_pending\"></i>\n  </div>\n  }\n  @if (icon) {\n  <i class=\"ec-icon {{icon}}\"\n     id=\"{{id}}_icon\"></i>\n  }\n  @if (label) {\n  <span id=\"{{id}}_label\"\n        class=\"label\">{{label | translate}}</span>\n  }\n  @if (badge !== undefined) {\n  <span id=\"{{id}}_badge\"\n        class=\"badge\">{{badge}}</span>\n  }\n  }\n  <ng-content></ng-content>\n</button>", 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-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.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-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.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-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.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-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.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.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.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-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{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-card: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-card: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-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}: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}: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}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{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}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-button', standalone: false, 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        [class.locked]=\"lockButton\"\r\n        [class.has-custom-icon-color]=\"iconColor\"\r\n        [style.--ec-button-custom-icon-color]=\"iconColor\"\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  @if (customTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n  } @else {\r\n  <!-- Hidden when the button is not pending -->\r\n  @if (pending) {\r\n  <div class=\"pending-container\">\r\n    <i class=\"ec-icon {{pendingIcon}}\"\r\n       id=\"{{id}}_pending\"></i>\r\n  </div>\r\n  }\r\n  @if (icon) {\r\n  <i class=\"ec-icon {{icon}}\"\r\n     id=\"{{id}}_icon\"></i>\r\n  }\r\n  @if (label) {\r\n  <span id=\"{{id}}_label\"\r\n        class=\"label\">{{label | translate}}</span>\r\n  }\r\n  @if (badge !== undefined) {\r\n  <span id=\"{{id}}_badge\"\r\n        class=\"badge\">{{badge}}</span>\r\n  }\r\n  }\r\n  <ng-content></ng-content>\r\n</button>", 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-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.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-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.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-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.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-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.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.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.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-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{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-card: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-card: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-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}: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}: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}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{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}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
+            args: [{ selector: 'ec-button', standalone: false, template: "<button id=\"{{id}}_button\"\n        class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n        [class.has-badge]=\"badge !== undefined\"\n        [class.icon-only]=\"icon && !label\"\n        [class.locked]=\"lockButton\"\n        [class.has-custom-icon-color]=\"iconColor\"\n        [style.--ec-button-custom-icon-color]=\"iconColor\"\n        tabindex=\"{{tabindex}}\"\n        [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n        [disabled]=\"disabled\"\n        (click)=\"onClick($event)\"\n        #element\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n  @if (customTemplate) {\n  <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n  } @else {\n  <!-- Hidden when the button is not pending -->\n  @if (pending) {\n  <div class=\"pending-container\">\n    <i class=\"ec-icon {{pendingIcon}}\"\n       id=\"{{id}}_pending\"></i>\n  </div>\n  }\n  @if (icon) {\n  <i class=\"ec-icon {{icon}}\"\n     id=\"{{id}}_icon\"></i>\n  }\n  @if (label) {\n  <span id=\"{{id}}_label\"\n        class=\"label\">{{label | translate}}</span>\n  }\n  @if (badge !== undefined) {\n  <span id=\"{{id}}_badge\"\n        class=\"badge\">{{badge}}</span>\n  }\n  }\n  <ng-content></ng-content>\n</button>", 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-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.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-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.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-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.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-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.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.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.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-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{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-card: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-card: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-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}: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}: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}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{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}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -307,11 +307,11 @@ class BannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  @if (showCloseBtn) {\r\n    <ec-button id=\"banner{{id}}_close\"\r\n      type=\"icon\"\r\n      icon=\"icon-cancel\"\r\n      (clicked)=\"close()\">\r\n    </ec-button>\r\n  }\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      @if (title) {\r\n        <p class=\"title mb-0\">\r\n          {{title}}\r\n        </p>\r\n      }\r\n      @if (text) {\r\n        <p class=\"text mb-0\">{{text}}</p>\r\n      }\r\n\r\n      @if (list?.length) {\r\n        <ul class=\"list mb-0\">\r\n          @for (item of list; track item) {\r\n            <li>{{item}}</li>\r\n          }\r\n        </ul>\r\n      }\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n      type=\"icon\"\n      icon=\"icon-cancel\"\n      (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-banner', standalone: false, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  @if (showCloseBtn) {\r\n    <ec-button id=\"banner{{id}}_close\"\r\n      type=\"icon\"\r\n      icon=\"icon-cancel\"\r\n      (clicked)=\"close()\">\r\n    </ec-button>\r\n  }\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      @if (title) {\r\n        <p class=\"title mb-0\">\r\n          {{title}}\r\n        </p>\r\n      }\r\n      @if (text) {\r\n        <p class=\"text mb-0\">{{text}}</p>\r\n      }\r\n\r\n      @if (list?.length) {\r\n        <ul class=\"list mb-0\">\r\n          @for (item of list; track item) {\r\n            <li>{{item}}</li>\r\n          }\r\n        </ul>\r\n      }\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-banner', standalone: false, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\n  @if (showCloseBtn) {\n    <ec-button id=\"banner{{id}}_close\"\n      type=\"icon\"\n      icon=\"icon-cancel\"\n      (clicked)=\"close()\">\n    </ec-button>\n  }\n  <div class=\"banner-content d-flex text-body-1\">\n    <i class=\"ec-icon {{icon}}\"></i>\n    <div class=\"ml-2\">\n      @if (title) {\n        <p class=\"title mb-0\">\n          {{title}}\n        </p>\n      }\n      @if (text) {\n        <p class=\"text mb-0\">{{text}}</p>\n      }\n\n      @if (list?.length) {\n        <ul class=\"list mb-0\">\n          @for (item of list; track item) {\n            <li>{{item}}</li>\n          }\n        </ul>\n      }\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: CacheService }], propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -1836,11 +1836,11 @@ class CalendarComponent {
         return lastRow[lastRow.length - 1];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: false, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n  <button id=\"{{id}}_prev_button\"\r\n    class=\"mr-auto\"\r\n    (click)=\"onPreviousClick()\"\r\n    [disabled]=\"disablePreviousButton\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  @if (view.mode === 'day') {\r\n    <button\r\n      id=\"{{id}}_month_button\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      (click)=\"onMonthClick()\"\r\n      tabindex=\"{{tabindex}}\">\r\n      {{month}}\r\n    </button>\r\n  }\r\n\r\n  @if (view.mode !== 'year') {\r\n    <button\r\n      id=\"{{id}}_year_button\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      (click)=\"onYearClick()\"\r\n      tabindex=\"{{tabindex}}\">\r\n      {{year}}\r\n    </button>\r\n  }\r\n\r\n  @if (view.mode === 'year') {\r\n    <div id=\"{{id}}_year_range\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      [innerHTML]=\"yearRange\">\r\n    </div>\r\n  }\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n    class=\"ml-auto\"\r\n    (click)=\"onNextClick()\"\r\n    [disabled]=\"disableNextButton\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n@if (view.mode === 'day') {\r\n  <div\r\n    class=\"mb-1 px-2 d-flex\">\r\n    @for (day of weekDays; track day) {\r\n      <h3\r\n        class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n    }\r\n  </div>\r\n}\r\n\r\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\r\n  <div\r\n    class=\"px-2 d-flex {{view.mode}}-view\"\r\n    [class.mb-1]=\"!isLast\"\r\n    [class.mb-2]=\"isLast\">\r\n    @for (item of row; track trackByDate($index, item)) {\r\n      <button\r\n        id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n        ec-calendar-item\r\n        [item]=\"item\"\r\n        [selection]=\"selection\"\r\n        [view]=\"view\"\r\n        (click)=\"onItemSelected(item)\"\r\n        [innerHTML]=\"item.label\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        tabindex=\"{{tabindex}}\">\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:inline-block}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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: false, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n  <button id=\"{{id}}_prev_button\"\n    class=\"mr-auto\"\n    (click)=\"onPreviousClick()\"\n    [disabled]=\"disablePreviousButton\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n  </button>\n\n  @if (view.mode === 'day') {\n    <button\n      id=\"{{id}}_month_button\"\n      class=\"text-body-1 font-weight-bold\"\n      (click)=\"onMonthClick()\"\n      tabindex=\"{{tabindex}}\">\n      {{month}}\n    </button>\n  }\n\n  @if (view.mode !== 'year') {\n    <button\n      id=\"{{id}}_year_button\"\n      class=\"text-body-1 font-weight-bold\"\n      (click)=\"onYearClick()\"\n      tabindex=\"{{tabindex}}\">\n      {{year}}\n    </button>\n  }\n\n  @if (view.mode === 'year') {\n    <div id=\"{{id}}_year_range\"\n      class=\"text-body-1 font-weight-bold\"\n      [innerHTML]=\"yearRange\">\n    </div>\n  }\n\n  <button id=\"{{id}}_next_button\"\n    class=\"ml-auto\"\n    (click)=\"onNextClick()\"\n    [disabled]=\"disableNextButton\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n  </button>\n</header>\n\n@if (view.mode === 'day') {\n  <div\n    class=\"mb-1 px-2 d-flex\">\n    @for (day of weekDays; track day) {\n      <h3\n        class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n    }\n  </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n  <div\n    class=\"px-2 d-flex {{view.mode}}-view\"\n    [class.mb-1]=\"!isLast\"\n    [class.mb-2]=\"isLast\">\n    @for (item of row; track trackByDate($index, item)) {\n      <button\n        id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n        ec-calendar-item\n        [item]=\"item\"\n        [selection]=\"selection\"\n        [view]=\"view\"\n        (click)=\"onItemSelected(item)\"\n        [innerHTML]=\"item.label\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        tabindex=\"{{tabindex}}\">\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\r\n  <button id=\"{{id}}_prev_button\"\r\n    class=\"mr-auto\"\r\n    (click)=\"onPreviousClick()\"\r\n    [disabled]=\"disablePreviousButton\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\r\n  </button>\r\n\r\n  @if (view.mode === 'day') {\r\n    <button\r\n      id=\"{{id}}_month_button\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      (click)=\"onMonthClick()\"\r\n      tabindex=\"{{tabindex}}\">\r\n      {{month}}\r\n    </button>\r\n  }\r\n\r\n  @if (view.mode !== 'year') {\r\n    <button\r\n      id=\"{{id}}_year_button\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      (click)=\"onYearClick()\"\r\n      tabindex=\"{{tabindex}}\">\r\n      {{year}}\r\n    </button>\r\n  }\r\n\r\n  @if (view.mode === 'year') {\r\n    <div id=\"{{id}}_year_range\"\r\n      class=\"text-body-1 font-weight-bold\"\r\n      [innerHTML]=\"yearRange\">\r\n    </div>\r\n  }\r\n\r\n  <button id=\"{{id}}_next_button\"\r\n    class=\"ml-auto\"\r\n    (click)=\"onNextClick()\"\r\n    [disabled]=\"disableNextButton\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\r\n  </button>\r\n</header>\r\n\r\n@if (view.mode === 'day') {\r\n  <div\r\n    class=\"mb-1 px-2 d-flex\">\r\n    @for (day of weekDays; track day) {\r\n      <h3\r\n        class=\"text-heading-3 d-flex justify-content-center align-items-center\"\r\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\r\n    }\r\n  </div>\r\n}\r\n\r\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\r\n  <div\r\n    class=\"px-2 d-flex {{view.mode}}-view\"\r\n    [class.mb-1]=\"!isLast\"\r\n    [class.mb-2]=\"isLast\">\r\n    @for (item of row; track trackByDate($index, item)) {\r\n      <button\r\n        id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\r\n        ec-calendar-item\r\n        [item]=\"item\"\r\n        [selection]=\"selection\"\r\n        [view]=\"view\"\r\n        (click)=\"onItemSelected(item)\"\r\n        [innerHTML]=\"item.label\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        tabindex=\"{{tabindex}}\">\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:inline-block}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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
+            args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n  <button id=\"{{id}}_prev_button\"\n    class=\"mr-auto\"\n    (click)=\"onPreviousClick()\"\n    [disabled]=\"disablePreviousButton\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n  </button>\n\n  @if (view.mode === 'day') {\n    <button\n      id=\"{{id}}_month_button\"\n      class=\"text-body-1 font-weight-bold\"\n      (click)=\"onMonthClick()\"\n      tabindex=\"{{tabindex}}\">\n      {{month}}\n    </button>\n  }\n\n  @if (view.mode !== 'year') {\n    <button\n      id=\"{{id}}_year_button\"\n      class=\"text-body-1 font-weight-bold\"\n      (click)=\"onYearClick()\"\n      tabindex=\"{{tabindex}}\">\n      {{year}}\n    </button>\n  }\n\n  @if (view.mode === 'year') {\n    <div id=\"{{id}}_year_range\"\n      class=\"text-body-1 font-weight-bold\"\n      [innerHTML]=\"yearRange\">\n    </div>\n  }\n\n  <button id=\"{{id}}_next_button\"\n    class=\"ml-auto\"\n    (click)=\"onNextClick()\"\n    [disabled]=\"disableNextButton\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n  </button>\n</header>\n\n@if (view.mode === 'day') {\n  <div\n    class=\"mb-1 px-2 d-flex\">\n    @for (day of weekDays; track day) {\n      <h3\n        class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n      style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n    }\n  </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n  <div\n    class=\"px-2 d-flex {{view.mode}}-view\"\n    [class.mb-1]=\"!isLast\"\n    [class.mb-2]=\"isLast\">\n    @for (item of row; track trackByDate($index, item)) {\n      <button\n        id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n        ec-calendar-item\n        [item]=\"item\"\n        [selection]=\"selection\"\n        [view]=\"view\"\n        (click)=\"onItemSelected(item)\"\n        [innerHTML]=\"item.label\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        tabindex=\"{{tabindex}}\">\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:inline-block}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}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:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -2264,11 +2264,11 @@ class TooltipComponent {
         this.overlayRef?.dispose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  @if (title || subtitle) {\r\n    <header class=\"mb-3\">\r\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n    </header>\r\n  }\r\n\r\n  @if (customContent) {\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  } @else {\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  }\r\n\r\n\r\n  @if (dismissible) {\r\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\r\n  @if (title || subtitle) {\r\n    <header class=\"mb-3\">\r\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\r\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\r\n    </header>\r\n  }\r\n\r\n  @if (customContent) {\r\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\r\n  } @else {\r\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\r\n  }\r\n\r\n\r\n  @if (dismissible) {\r\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
+            args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n  @if (title || subtitle) {\n    <header class=\"mb-3\">\n      <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n      <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n    </header>\n  }\n\n  @if (customContent) {\n    <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n  } @else {\n    <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n  }\n\n\n  @if (dismissible) {\n    <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" (clicked)=\"hide()\"></ec-button>\n  }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
         }], propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.--ec-tooltip-background-color']
@@ -2440,11 +2440,11 @@ class TagsComponent {
         this.tagClosed.emit(tag);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\r\n  [class.is-wrapped]=\"wrap\">\r\n  @for (tag of tagsArray; track tag; let i = $index) {\r\n    <li\r\n      id=\"{{id}}_tag_{{i}}\"\r\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n      [class.is-condensed]=\"isCondensed\"\r\n      [class.is-subtle]=\"isSubtle\"\r\n      title=\"{{(tag.tooltip ?? '') | translate}}\">\r\n      @if (tag.icon) {\r\n        <i\r\n        class=\"ec-icon {{tag.icon}} ec-icon-sm\"></i>\r\n      }\r\n      @if (!tag.url) {\r\n        <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\r\n      }\r\n      @if (tag.url) {\r\n        <a\r\n          id=\"{{id}}_tag_{{i}}_link\"\r\n          class=\"font-weight-bold\"\r\n          href=\"{{tag.url}}\"\r\n        target=\"{{tag.target}}\">{{tag.label | translate}}</a>\r\n      }\r\n      @if (tag.isDismissable) {\r\n        <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n          (click)=\"closeTag(tag)\"\r\n          class=\"tag-close-btn\">\r\n          <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n        </button>\r\n      }\r\n    </li>\r\n  }\r\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\n  [class.is-wrapped]=\"wrap\">\n  @for (tag of tagsArray; track tag; let i = $index) {\n    <li\n      id=\"{{id}}_tag_{{i}}\"\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n      [class.is-condensed]=\"isCondensed\"\n      [class.is-subtle]=\"isSubtle\"\n      title=\"{{(tag.tooltip ?? '') | translate}}\">\n      @if (tag.icon) {\n        <i\n        class=\"ec-icon {{tag.icon}} ec-icon-sm\"></i>\n      }\n      @if (!tag.url) {\n        <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\n      }\n      @if (tag.url) {\n        <a\n          id=\"{{id}}_tag_{{i}}_link\"\n          class=\"font-weight-bold\"\n          href=\"{{tag.url}}\"\n        target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n      }\n      @if (tag.isDismissable) {\n        <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n          (click)=\"closeTag(tag)\"\n          class=\"tag-close-btn\">\n          <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\n        </button>\n      }\n    </li>\n  }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tags', standalone: false, template: "<ul class=\"tags\"\r\n  [class.is-wrapped]=\"wrap\">\r\n  @for (tag of tagsArray; track tag; let i = $index) {\r\n    <li\r\n      id=\"{{id}}_tag_{{i}}\"\r\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n      [class.is-condensed]=\"isCondensed\"\r\n      [class.is-subtle]=\"isSubtle\"\r\n      title=\"{{(tag.tooltip ?? '') | translate}}\">\r\n      @if (tag.icon) {\r\n        <i\r\n        class=\"ec-icon {{tag.icon}} ec-icon-sm\"></i>\r\n      }\r\n      @if (!tag.url) {\r\n        <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\r\n      }\r\n      @if (tag.url) {\r\n        <a\r\n          id=\"{{id}}_tag_{{i}}_link\"\r\n          class=\"font-weight-bold\"\r\n          href=\"{{tag.url}}\"\r\n        target=\"{{tag.target}}\">{{tag.label | translate}}</a>\r\n      }\r\n      @if (tag.isDismissable) {\r\n        <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n          (click)=\"closeTag(tag)\"\r\n          class=\"tag-close-btn\">\r\n          <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n        </button>\r\n      }\r\n    </li>\r\n  }\r\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
+            args: [{ selector: 'ec-tags', standalone: false, template: "<ul class=\"tags\"\n  [class.is-wrapped]=\"wrap\">\n  @for (tag of tagsArray; track tag; let i = $index) {\n    <li\n      id=\"{{id}}_tag_{{i}}\"\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n      [class.is-condensed]=\"isCondensed\"\n      [class.is-subtle]=\"isSubtle\"\n      title=\"{{(tag.tooltip ?? '') | translate}}\">\n      @if (tag.icon) {\n        <i\n        class=\"ec-icon {{tag.icon}} ec-icon-sm\"></i>\n      }\n      @if (!tag.url) {\n        <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\n      }\n      @if (tag.url) {\n        <a\n          id=\"{{id}}_tag_{{i}}_link\"\n          class=\"font-weight-bold\"\n          href=\"{{tag.url}}\"\n        target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n      }\n      @if (tag.isDismissable) {\n        <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n          (click)=\"closeTag(tag)\"\n          class=\"tag-close-btn\">\n          <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\n        </button>\n      }\n    </li>\n  }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], tags: [{
@@ -2542,11 +2542,11 @@ class PopoverComponent {
         return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  @if (!tag) {\r\n    <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  }\r\n  @if (tag) {\r\n    <ec-tags\r\n      [isCondensed] = \"true\"\r\n      [tags]=\"tag\">\r\n    </ec-tags>\r\n  }\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n    (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    @if (!tag) {\r\n      <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    }\r\n    @if (tag) {\r\n      <ec-tags\r\n        [isCondensed]=\"true\"\r\n        [tags]=\"hoverTag\">\r\n      </ec-tags>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\">\n  @if (!tag) {\n    <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\n  }\n  @if (tag) {\n    <ec-tags\n      [isCondensed] = \"true\"\n      [tags]=\"tag\">\n    </ec-tags>\n  }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n  <article class=\"popover-content\"\n    (document:mousemove)=\"onMouseMove($event)\">\n    <ng-content></ng-content>\n  </article>\n  <div class=\"p-2 {{contentPosition}}\">\n    @if (!tag) {\n      <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\n    }\n    @if (tag) {\n      <ec-tags\n        [isCondensed]=\"true\"\n        [tags]=\"hoverTag\">\n      </ec-tags>\n    }\n  </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-popover', standalone: false, template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  @if (!tag) {\r\n    <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  }\r\n  @if (tag) {\r\n    <ec-tags\r\n      [isCondensed] = \"true\"\r\n      [tags]=\"tag\">\r\n    </ec-tags>\r\n  }\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n    (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    @if (!tag) {\r\n      <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    }\r\n    @if (tag) {\r\n      <ec-tags\r\n        [isCondensed]=\"true\"\r\n        [tags]=\"hoverTag\">\r\n      </ec-tags>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
+            args: [{ selector: 'ec-popover', standalone: false, template: "<!-- Before hover state -->\n<div class=\"p-2\">\n  @if (!tag) {\n    <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\n  }\n  @if (tag) {\n    <ec-tags\n      [isCondensed] = \"true\"\n      [tags]=\"tag\">\n    </ec-tags>\n  }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n  <article class=\"popover-content\"\n    (document:mousemove)=\"onMouseMove($event)\">\n    <ng-content></ng-content>\n  </article>\n  <div class=\"p-2 {{contentPosition}}\">\n    @if (!tag) {\n      <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\n    }\n    @if (tag) {\n      <ec-tags\n        [isCondensed]=\"true\"\n        [tags]=\"hoverTag\">\n      </ec-tags>\n    }\n  </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: TooltipService }], propDecorators: { icon: [{
                 type: Input
             }], tag: [{
@@ -2576,11 +2576,11 @@ class HelpPopoverComponent {
         this.maxWidth = '15rem';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\r\n  icon=\"icon-help-circle\"\r\n  [contentPosition]=\"contentPosition\"\r\n  iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n    class=\"popover-content-dark\"\r\n    [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n    [style.max-width]=\"maxWidth\">\r\n    @if (text) {\r\n      <div\r\n      [innerHTML]=\"text | translate\"></div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\n  icon=\"icon-help-circle\"\n  [contentPosition]=\"contentPosition\"\n  iconHoverClass=\"font-color-primary-light\">\n  <div id=\"{{id}}_popoverContent\"\n    class=\"popover-content-dark\"\n    [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n    [style.max-width]=\"maxWidth\">\n    @if (text) {\n      <div\n      [innerHTML]=\"text | translate\"></div>\n    }\n    <ng-content></ng-content>\n  </div>\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: HelpPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-help-popover', standalone: false, template: "<ec-popover id=\"{{id}}_popover\"\r\n  icon=\"icon-help-circle\"\r\n  [contentPosition]=\"contentPosition\"\r\n  iconHoverClass=\"font-color-primary-light\">\r\n  <div id=\"{{id}}_popoverContent\"\r\n    class=\"popover-content-dark\"\r\n    [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\r\n    [style.max-width]=\"maxWidth\">\r\n    @if (text) {\r\n      <div\r\n      [innerHTML]=\"text | translate\"></div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ec-popover>" }]
+            args: [{ selector: 'ec-help-popover', standalone: false, template: "<ec-popover id=\"{{id}}_popover\"\n  icon=\"icon-help-circle\"\n  [contentPosition]=\"contentPosition\"\n  iconHoverClass=\"font-color-primary-light\">\n  <div id=\"{{id}}_popoverContent\"\n    class=\"popover-content-dark\"\n    [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n    [style.max-width]=\"maxWidth\">\n    @if (text) {\n      <div\n      [innerHTML]=\"text | translate\"></div>\n    }\n    <ng-content></ng-content>\n  </div>\n</ec-popover>" }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }, {
@@ -2711,11 +2711,11 @@ class CheckboxComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", icon: "icon", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\r\n        }\r\n\r\n        @if (label) {\r\n          <span id=\"{{id}}_label\"\r\n            class=\"label\">\r\n            <span [innerHtml]=\"label | translate\"></span>\r\n            @if (helpPopover) {\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                class=\"d-inline-block my-n2 mx-n1\"\r\n                text=\"{{helpPopover | translate}}\"\r\n                contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n      \r\n    </label>\r\n  </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{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+.ec-icon{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)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{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:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", icon: "icon", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\n  <label class=\"checkbox\"\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n    <input id=\"{{id}}_input\"\n      #checkboxInput\n      class='input'\n      [class.indeterminate]=\"indeterminate\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      type=\"checkbox\"\n      tabindex=\"{{tabindex}}\"\n      [formControl]=\"formModel\"\n      [attr.cdkFocusInitial]=\"autofocus || null\">\n      <i class=\"ec-icon icon-check\"></i>\n\n      <div class=\"d-flex align-items-center\">\n        @if (icon) {\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n        }\n\n        @if (label) {\n          <span id=\"{{id}}_label\"\n            class=\"label\">\n            <span [innerHtml]=\"label | translate\"></span>\n            @if (helpPopover) {\n              <ec-help-popover id=\"{{id}}_helpPopover\"\n                class=\"d-inline-block my-n2 mx-n1\"\n                text=\"{{helpPopover | translate}}\"\n                contentPosition=\"{{helpPopoverPosition}}\">\n              </ec-help-popover>\n            }\n          </span>\n        }\n      </div>\n      \n    </label>\n  </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{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+.ec-icon{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)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{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:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-checkbox', standalone: false, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\r\n        }\r\n\r\n        @if (label) {\r\n          <span id=\"{{id}}_label\"\r\n            class=\"label\">\r\n            <span [innerHtml]=\"label | translate\"></span>\r\n            @if (helpPopover) {\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                class=\"d-inline-block my-n2 mx-n1\"\r\n                text=\"{{helpPopover | translate}}\"\r\n                contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n      \r\n    </label>\r\n  </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{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+.ec-icon{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)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{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:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
+            args: [{ selector: 'ec-checkbox', standalone: false, template: "<div class=\"control\">\n  <label class=\"checkbox\"\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n    <input id=\"{{id}}_input\"\n      #checkboxInput\n      class='input'\n      [class.indeterminate]=\"indeterminate\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      type=\"checkbox\"\n      tabindex=\"{{tabindex}}\"\n      [formControl]=\"formModel\"\n      [attr.cdkFocusInitial]=\"autofocus || null\">\n      <i class=\"ec-icon icon-check\"></i>\n\n      <div class=\"d-flex align-items-center\">\n        @if (icon) {\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n        }\n\n        @if (label) {\n          <span id=\"{{id}}_label\"\n            class=\"label\">\n            <span [innerHtml]=\"label | translate\"></span>\n            @if (helpPopover) {\n              <ec-help-popover id=\"{{id}}_helpPopover\"\n                class=\"d-inline-block my-n2 mx-n1\"\n                text=\"{{helpPopover | translate}}\"\n                contentPosition=\"{{helpPopoverPosition}}\">\n              </ec-help-popover>\n            }\n          </span>\n        }\n      </div>\n      \n    </label>\n  </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{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+.ec-icon{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)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{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:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { name: [{
                 type: Input
             }], icon: [{
@@ -3652,11 +3652,11 @@ class MenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MenuComponent, isStandalone: false, 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 }], usesOnChanges: true, ngImport: i0, template: "<nav>\r\n  <div class=\"parent\"\r\n    [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n    @if (parent) {\r\n      <header id=\"{{id}}_header\"\r\n        class=\"text-heading-3 p-1\"\r\n        [class.is-selected]=\"highlightedItemIndex === -1\"\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\r\n    <ul id=\"{{id}}_list\"\r\n      class=\"py-1\">\r\n      @for (item of items; track item; let i = $index) {\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n        <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n        @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\r\n          @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"itemTemplate\"\r\n              [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\r\n            </ng-container>\r\n          }\r\n        }\r\n      }\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  @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\r\n    <ec-menu\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  }\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n  let-item\r\n  let-i=\"index\"\r\n  let-isDividedSectionChild=\"isDividedSectionChild\"\r\n  let-isFirst=\"isFirst\"\r\n  let-isLast=\"isLast\">\r\n  @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\r\n    <li\r\n      id=\"{{item.id || id + '_item' + i}}\"\r\n      class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n      [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\r\n      [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\r\n      (click)=\"selectItem($event, item)\">\r\n      @if (item.url && !item.externalLink) {\r\n        <a\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          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n      }\r\n      @if (item.url && item.externalLink) {\r\n        <a\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          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n      }\r\n      @if (!item.url) {\r\n        <div\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      }\r\n    </li>\r\n  }\r\n</ng-template>\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\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n  let-item>\r\n\r\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n    ></i>\r\n  }\r\n\r\n  @if (item.icon) {\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n    ></i>\r\n  }\r\n\r\n  <span id=\"{{item.id}}_label\"\r\n    class=\"label\"\r\n    [class.text-truncate]=\"truncateItems\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\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  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n    ></i>\r\n  }\r\n\r\n  <span id=\"{{item.id}}_label\"\r\n    class=\"label\"\r\n    [class.text-truncate]=\"truncateItems\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n  let-item>\r\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n    ></i>\r\n  }\r\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n    <div\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\">\r\n        {{item.label}}\r\n        @if (item.helpPopover) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"helpPopover\"\r\n            [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n      @if (item.caption) {\r\n        <div id=\"{{item.id}}_caption\"\r\n          class=\"text-caption-1\"\r\n          [class.text-truncate]=\"truncateItems\"\r\n        [innerHTML]=\"item.caption\"></div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (item.display === 'heading' || item.display === 'heading-divided-section') {\r\n    <h3\r\n      class=\"flex-grow text-heading-3 align-self-center\"\r\n      [class.text-truncate]=\"truncateItems\">\r\n      {{item.label}}\r\n      @if (item.helpPopover) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"helpPopover\"\r\n          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n      }\r\n    </h3>\r\n  }\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n  let-item>\r\n  <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n    class=\"d-inline-block my-n3 mx-n1\"\r\n    text=\"{{item.helpPopover | translate}}\"\r\n    contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n  </ec-help-popover>\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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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}.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{color:inherit}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MenuComponent, isStandalone: false, 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 }], usesOnChanges: true, ngImport: i0, template: "<nav>\n  <div class=\"parent\"\n    [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n    @if (parent) {\n      <header id=\"{{id}}_header\"\n        class=\"text-heading-3 p-1\"\n        [class.is-selected]=\"highlightedItemIndex === -1\"\n        (click)=\"back($event)\">\n        <div class=\"item-wrapper\">\n          <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n          <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n        </div>\n      </header>\n    }\n\n    <ul id=\"{{id}}_list\"\n      class=\"py-1\">\n      @for (item of items; track item; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n        <!-- Show child items under parent item if the item is a heading or divided-section -->\n        @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n          @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate\"\n              [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n            </ng-container>\n          }\n        }\n      }\n    </ul>\n\n    <p class=\"no-data-message\">{{noDataText | translate}}</p>\n  </div>\n\n  <!-- Child menu (Rendered to the right) -->\n  @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n    <ec-menu\n      id=\"{{id}}_child\"\n      class=\"child\"\n      [parent]=\"selected\"\n      [items]=\"selected?.items\"\n      [showNoItems]=\"true\"\n      [templateType]=\"templateType\"\n      [enableKeyNav]=\"true\"\n      [truncateItems]=\"truncateItems\"\n      (selectedChanged)=\"onSelection($event)\"\n      (menuClosed)=\"toggleChildMenu(false)\">\n    </ec-menu>\n  }\n</nav>\n\n<ng-template #itemTemplate\n  let-item\n  let-i=\"index\"\n  let-isDividedSectionChild=\"isDividedSectionChild\"\n  let-isFirst=\"isFirst\"\n  let-isLast=\"isLast\">\n  @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n    <li\n      id=\"{{item.id || id + '_item' + i}}\"\n      class=\"{{item.display || 'item'}} {{item.classList}}\"\n      [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n      [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n      [attr.disabled]=\"item.disabled\"\n      [hidden]=\"item.hidden\"\n      ecNavItemActive=\"is-selected\"\n      [ecNavItemActiveQueryParams]=\"item.queryParams\"\n      [ecNavItemActiveUrl]=\"item.url\"\n      [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n      (routerLinkActivated)=\"selectItem($event, item)\"\n      [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n      (click)=\"selectItem($event, item)\">\n      @if (item.url && !item.externalLink) {\n        <a\n          id=\"{{item.id}}_link\"\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\"\n          [routerLink]=\"item.url\"\n          [queryParams]=\"item.queryParams || null\"\n          target=\"{{item.target || '_self'}}\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </a>\n      }\n      @if (item.url && item.externalLink) {\n        <a\n          id=\"{{item.id}}_link\"\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\"\n          href=\"{{item.url}}\"\n          target=\"{{item.target || '_self'}}\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </a>\n      }\n      @if (!item.url) {\n        <div\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n  let-item>\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n  let-item>\n\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-check ec-icon-sm\"\n    ></i>\n  }\n\n  @if (item.icon) {\n    <i class=\"ec-icon {{item.icon}} ml-2\"\n    ></i>\n  }\n\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n  let-item>\n  <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n    <i class=\"ec-icon {{item.icon}}\"\n    ></i>\n  }\n\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<ng-template #iconLabelCaption\n  let-item>\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n    <i class=\"ec-icon {{item.icon}}\"\n    ></i>\n  }\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n    <div\n      class=\"label flex-grow\">\n      <div id=\"{{item.id}}_label\"\n        class=\"text-body-1\"\n        [class.text-truncate]=\"truncateItems\">\n        {{item.label}}\n        @if (item.helpPopover) {\n          <ng-container\n            [ngTemplateOutlet]=\"helpPopover\"\n            [ngTemplateOutletContext]=\"{$implicit: item}\">\n          </ng-container>\n        }\n      </div>\n      @if (item.caption) {\n        <div id=\"{{item.id}}_caption\"\n          class=\"text-caption-1\"\n          [class.text-truncate]=\"truncateItems\"\n        [innerHTML]=\"item.caption\"></div>\n      }\n    </div>\n  }\n  @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n    <h3\n      class=\"flex-grow text-heading-3 align-self-center\"\n      [class.text-truncate]=\"truncateItems\">\n      {{item.label}}\n      @if (item.helpPopover) {\n        <ng-container\n          [ngTemplateOutlet]=\"helpPopover\"\n          [ngTemplateOutletContext]=\"{$implicit: item}\">\n        </ng-container>\n      }\n    </h3>\n  }\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n    ></i>\n  }\n</ng-template>\n\n<ng-template #helpPopover\n  let-item>\n  <ec-help-popover id=\"{{item.id}}_helpPopover\"\n    class=\"d-inline-block my-n3 mx-n1\"\n    text=\"{{item.helpPopover | translate}}\"\n    contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n  </ec-help-popover>\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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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}.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{color:inherit}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-menu', standalone: false, template: "<nav>\r\n  <div class=\"parent\"\r\n    [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n    @if (parent) {\r\n      <header id=\"{{id}}_header\"\r\n        class=\"text-heading-3 p-1\"\r\n        [class.is-selected]=\"highlightedItemIndex === -1\"\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\r\n    <ul id=\"{{id}}_list\"\r\n      class=\"py-1\">\r\n      @for (item of items; track item; let i = $index) {\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n        <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n        @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\r\n          @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"itemTemplate\"\r\n              [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\r\n            </ng-container>\r\n          }\r\n        }\r\n      }\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  @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\r\n    <ec-menu\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  }\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n  let-item\r\n  let-i=\"index\"\r\n  let-isDividedSectionChild=\"isDividedSectionChild\"\r\n  let-isFirst=\"isFirst\"\r\n  let-isLast=\"isLast\">\r\n  @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\r\n    <li\r\n      id=\"{{item.id || id + '_item' + i}}\"\r\n      class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n      [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\r\n      [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\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'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\r\n      (click)=\"selectItem($event, item)\">\r\n      @if (item.url && !item.externalLink) {\r\n        <a\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          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n      }\r\n      @if (item.url && item.externalLink) {\r\n        <a\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          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n      }\r\n      @if (!item.url) {\r\n        <div\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      }\r\n    </li>\r\n  }\r\n</ng-template>\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\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n  let-item>\r\n\r\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n    ></i>\r\n  }\r\n\r\n  @if (item.icon) {\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n    ></i>\r\n  }\r\n\r\n  <span id=\"{{item.id}}_label\"\r\n    class=\"label\"\r\n    [class.text-truncate]=\"truncateItems\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\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  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n    ></i>\r\n  }\r\n\r\n  <span id=\"{{item.id}}_label\"\r\n    class=\"label\"\r\n    [class.text-truncate]=\"truncateItems\">\r\n    {{item.label}}\r\n    @if (item.helpPopover) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"helpPopover\"\r\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n      </ng-container>\r\n    }\r\n  </span>\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n  let-item>\r\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n    ></i>\r\n  }\r\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n    <div\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\">\r\n        {{item.label}}\r\n        @if (item.helpPopover) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"helpPopover\"\r\n            [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n      @if (item.caption) {\r\n        <div id=\"{{item.id}}_caption\"\r\n          class=\"text-caption-1\"\r\n          [class.text-truncate]=\"truncateItems\"\r\n        [innerHTML]=\"item.caption\"></div>\r\n      }\r\n    </div>\r\n  }\r\n  @if (item.display === 'heading' || item.display === 'heading-divided-section') {\r\n    <h3\r\n      class=\"flex-grow text-heading-3 align-self-center\"\r\n      [class.text-truncate]=\"truncateItems\">\r\n      {{item.label}}\r\n      @if (item.helpPopover) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"helpPopover\"\r\n          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n      }\r\n    </h3>\r\n  }\r\n\r\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n    ></i>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n  let-item>\r\n  <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n    class=\"d-inline-block my-n3 mx-n1\"\r\n    text=\"{{item.helpPopover | translate}}\"\r\n    contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n  </ec-help-popover>\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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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}.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{color:inherit}.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', standalone: false, template: "<nav>\n  <div class=\"parent\"\n    [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n    @if (parent) {\n      <header id=\"{{id}}_header\"\n        class=\"text-heading-3 p-1\"\n        [class.is-selected]=\"highlightedItemIndex === -1\"\n        (click)=\"back($event)\">\n        <div class=\"item-wrapper\">\n          <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n          <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n        </div>\n      </header>\n    }\n\n    <ul id=\"{{id}}_list\"\n      class=\"py-1\">\n      @for (item of items; track item; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n        <!-- Show child items under parent item if the item is a heading or divided-section -->\n        @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n          @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate\"\n              [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n            </ng-container>\n          }\n        }\n      }\n    </ul>\n\n    <p class=\"no-data-message\">{{noDataText | translate}}</p>\n  </div>\n\n  <!-- Child menu (Rendered to the right) -->\n  @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n    <ec-menu\n      id=\"{{id}}_child\"\n      class=\"child\"\n      [parent]=\"selected\"\n      [items]=\"selected?.items\"\n      [showNoItems]=\"true\"\n      [templateType]=\"templateType\"\n      [enableKeyNav]=\"true\"\n      [truncateItems]=\"truncateItems\"\n      (selectedChanged)=\"onSelection($event)\"\n      (menuClosed)=\"toggleChildMenu(false)\">\n    </ec-menu>\n  }\n</nav>\n\n<ng-template #itemTemplate\n  let-item\n  let-i=\"index\"\n  let-isDividedSectionChild=\"isDividedSectionChild\"\n  let-isFirst=\"isFirst\"\n  let-isLast=\"isLast\">\n  @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n    <li\n      id=\"{{item.id || id + '_item' + i}}\"\n      class=\"{{item.display || 'item'}} {{item.classList}}\"\n      [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n      [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n      [attr.disabled]=\"item.disabled\"\n      [hidden]=\"item.hidden\"\n      ecNavItemActive=\"is-selected\"\n      [ecNavItemActiveQueryParams]=\"item.queryParams\"\n      [ecNavItemActiveUrl]=\"item.url\"\n      [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n      (routerLinkActivated)=\"selectItem($event, item)\"\n      [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading'  && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n      (click)=\"selectItem($event, item)\">\n      @if (item.url && !item.externalLink) {\n        <a\n          id=\"{{item.id}}_link\"\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\"\n          [routerLink]=\"item.url\"\n          [queryParams]=\"item.queryParams || null\"\n          target=\"{{item.target || '_self'}}\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </a>\n      }\n      @if (item.url && item.externalLink) {\n        <a\n          id=\"{{item.id}}_link\"\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\"\n          href=\"{{item.url}}\"\n          target=\"{{item.target || '_self'}}\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </a>\n      }\n      @if (!item.url) {\n        <div\n          title=\"{{truncateItems ? item.label : ''}}\"\n          class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n  let-item>\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n  let-item>\n\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-check ec-icon-sm\"\n    ></i>\n  }\n\n  @if (item.icon) {\n    <i class=\"ec-icon {{item.icon}} ml-2\"\n    ></i>\n  }\n\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n  let-item>\n  <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n    <i class=\"ec-icon {{item.icon}}\"\n    ></i>\n  }\n\n  <span id=\"{{item.id}}_label\"\n    class=\"label\"\n    [class.text-truncate]=\"truncateItems\">\n    {{item.label}}\n    @if (item.helpPopover) {\n      <ng-container\n        [ngTemplateOutlet]=\"helpPopover\"\n        [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-container>\n    }\n  </span>\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270\"\n    ></i>\n  }\n</ng-template>\n\n<ng-template #iconLabelCaption\n  let-item>\n  @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n    <i class=\"ec-icon {{item.icon}}\"\n    ></i>\n  }\n  @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n    <div\n      class=\"label flex-grow\">\n      <div id=\"{{item.id}}_label\"\n        class=\"text-body-1\"\n        [class.text-truncate]=\"truncateItems\">\n        {{item.label}}\n        @if (item.helpPopover) {\n          <ng-container\n            [ngTemplateOutlet]=\"helpPopover\"\n            [ngTemplateOutletContext]=\"{$implicit: item}\">\n          </ng-container>\n        }\n      </div>\n      @if (item.caption) {\n        <div id=\"{{item.id}}_caption\"\n          class=\"text-caption-1\"\n          [class.text-truncate]=\"truncateItems\"\n        [innerHTML]=\"item.caption\"></div>\n      }\n    </div>\n  }\n  @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n    <h3\n      class=\"flex-grow text-heading-3 align-self-center\"\n      [class.text-truncate]=\"truncateItems\">\n      {{item.label}}\n      @if (item.helpPopover) {\n        <ng-container\n          [ngTemplateOutlet]=\"helpPopover\"\n          [ngTemplateOutletContext]=\"{$implicit: item}\">\n        </ng-container>\n      }\n    </h3>\n  }\n\n  @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n    ></i>\n  }\n</ng-template>\n\n<ng-template #helpPopover\n  let-item>\n  <ec-help-popover id=\"{{item.id}}_helpPopover\"\n    class=\"d-inline-block my-n3 mx-n1\"\n    text=\"{{item.helpPopover | translate}}\"\n    contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n  </ec-help-popover>\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-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.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}.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{color:inherit}.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: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }], propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -3991,11 +3991,11 @@ class TextboxComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TextboxComponent, isStandalone: false, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n  [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors |\r\n        translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper control-input\">\r\n    @if (type !== 'multi_line') {\r\n      <input\r\n        #textboxInput\r\n        email=\"{{type === 'email' ? true : false}}\"\r\n        pattern=\"{{validationPattern}}\"\r\n        type=\"{{type}}\"\r\n        tabindex=\"{{tabindex}}\"\r\n        title=\"{{tooltip}}\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.autocomplete]=\"autocomplete\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [attr.required]=\"required ? required : null\"\r\n        [formControl]=\"formModel\"\r\n        [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n        (focusout)=\"focusOutEvent()\"\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    }\r\n\r\n    @if (type === 'multi_line') {\r\n      <textarea\r\n        [attr.rows]=\"rows\"\r\n        #textboxInput\r\n        tabindex=\"{{tabindex}}\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [attr.required]=\"required ? required : null\"\r\n        [formControl]=\"formModel\"\r\n        [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      </textarea>\r\n    }\r\n\r\n    <i class=\"ec-icon icon-required\"></i>\r\n    <i class=\"ec-icon icon-invalid\"></i>\r\n    <i class=\"ec-icon icon-loading\"></i>\r\n  </div>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host 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}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TextboxComponent, isStandalone: false, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n  [ngClass]=\"{'is-readonly': readonly}\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors |\n        translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper control-input\">\n    @if (type !== 'multi_line') {\n      <input\n        #textboxInput\n        email=\"{{type === 'email' ? true : false}}\"\n        pattern=\"{{validationPattern}}\"\n        type=\"{{type}}\"\n        tabindex=\"{{tabindex}}\"\n        title=\"{{tooltip}}\"\n        [attr.id]=\"inputId\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [attr.required]=\"required ? required : null\"\n        [formControl]=\"formModel\"\n        [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n        (focusout)=\"focusOutEvent()\"\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n    }\n\n    @if (type === 'multi_line') {\n      <textarea\n        [attr.rows]=\"rows\"\n        #textboxInput\n        tabindex=\"{{tabindex}}\"\n        [attr.id]=\"inputId\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [attr.required]=\"required ? required : null\"\n        [formControl]=\"formModel\"\n        [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n      </textarea>\n    }\n\n    <i class=\"ec-icon icon-required\"></i>\n    <i class=\"ec-icon icon-invalid\"></i>\n    <i class=\"ec-icon icon-loading\"></i>\n  </div>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host 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}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-textbox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n  [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors |\r\n        translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper control-input\">\r\n    @if (type !== 'multi_line') {\r\n      <input\r\n        #textboxInput\r\n        email=\"{{type === 'email' ? true : false}}\"\r\n        pattern=\"{{validationPattern}}\"\r\n        type=\"{{type}}\"\r\n        tabindex=\"{{tabindex}}\"\r\n        title=\"{{tooltip}}\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.autocomplete]=\"autocomplete\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [attr.required]=\"required ? required : null\"\r\n        [formControl]=\"formModel\"\r\n        [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n        (focusout)=\"focusOutEvent()\"\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    }\r\n\r\n    @if (type === 'multi_line') {\r\n      <textarea\r\n        [attr.rows]=\"rows\"\r\n        #textboxInput\r\n        tabindex=\"{{tabindex}}\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [attr.required]=\"required ? required : null\"\r\n        [formControl]=\"formModel\"\r\n        [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n        [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      </textarea>\r\n    }\r\n\r\n    <i class=\"ec-icon icon-required\"></i>\r\n    <i class=\"ec-icon icon-invalid\"></i>\r\n    <i class=\"ec-icon icon-loading\"></i>\r\n  </div>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host 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}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
+            args: [{ selector: 'ec-textbox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n  [ngClass]=\"{'is-readonly': readonly}\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors |\n        translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper control-input\">\n    @if (type !== 'multi_line') {\n      <input\n        #textboxInput\n        email=\"{{type === 'email' ? true : false}}\"\n        pattern=\"{{validationPattern}}\"\n        type=\"{{type}}\"\n        tabindex=\"{{tabindex}}\"\n        title=\"{{tooltip}}\"\n        [attr.id]=\"inputId\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [attr.required]=\"required ? required : null\"\n        [formControl]=\"formModel\"\n        [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n        (focusout)=\"focusOutEvent()\"\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n    }\n\n    @if (type === 'multi_line') {\n      <textarea\n        [attr.rows]=\"rows\"\n        #textboxInput\n        tabindex=\"{{tabindex}}\"\n        [attr.id]=\"inputId\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [attr.required]=\"required ? required : null\"\n        [formControl]=\"formModel\"\n        [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n        [attr.cdkFocusInitial]=\"autofocus || null\">\n      </textarea>\n    }\n\n    <i class=\"ec-icon icon-required\"></i>\n    <i class=\"ec-icon icon-invalid\"></i>\n    <i class=\"ec-icon icon-loading\"></i>\n  </div>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host 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}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }], propDecorators: { autocomplete: [{
                 type: Input
             }], type: [{
@@ -4020,11 +4020,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 /** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
 class SpinnerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n  <span class=\"spinner-dot\"></span>\r\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
+            args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\">\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n  <span class=\"spinner-dot\"></span>\n</div>", styles: ["@keyframes sk-bouncedelay{0%,80%,to{opacity:0}40%{opacity:1}}.spinner{display:flex}.spinner-dot{width:.75rem;height:.75rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.25rem}.spinner-dot:nth-child(1){animation-delay:-.6s}.spinner-dot:nth-child(2){animation-delay:-.4s}.spinner-dot:nth-child(3){animation-delay:-.2s}:host(.spinner-small) .spinner-dot{width:.5rem;height:.5rem;background-color:var(--ec-spinner-color, var(--ec-color-purple-5));animation:sk-bouncedelay 1.7s infinite ease-in-out both;margin-right:.1666666667rem}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.6s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.4s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:-.2s}\n"] }]
         }] });
 class Overlay {
@@ -4060,11 +4060,11 @@ class ViewOverlayComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\r\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\r\n  <ng-content></ng-content>\r\n}\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\nclass=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n@if (status !== 'hasData') {\r\n  <div\r\n    class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n    <!--Pending Spinner-->\r\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n    @if (status === 'noData' && noDataTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n    }\r\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\r\n      <!--Status Message-->\r\n      @if (message) {\r\n        <div id=\"statusMessage\"\r\n          class=\"message\"\r\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n          [innerHtml]=\"message | translate\">\r\n        </div>\r\n      }\r\n      <!-- Action -->\r\n      @if (action?.onClick) {\r\n        <ec-button type=\"common\"\r\n          class=\"mt-3\"\r\n          [icon]=\"action?.icon\"\r\n          (clicked)=\"actionClicked($event)\"\r\n          [label]=\"action?.label\"\r\n          [hidden]=\"status === 'pending'\">\r\n        </ec-button>\r\n      }\r\n    }\r\n  </div>\r\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ViewOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ecOverlay]', standalone: false, template: "<!-- Transcluded Content -->\r\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\r\n  <ng-content></ng-content>\r\n}\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\nclass=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n@if (status !== 'hasData') {\r\n  <div\r\n    class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n    <!--Pending Spinner-->\r\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n    @if (status === 'noData' && noDataTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n    }\r\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\r\n      <!--Status Message-->\r\n      @if (message) {\r\n        <div id=\"statusMessage\"\r\n          class=\"message\"\r\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n          [innerHtml]=\"message | translate\">\r\n        </div>\r\n      }\r\n      <!-- Action -->\r\n      @if (action?.onClick) {\r\n        <ec-button type=\"common\"\r\n          class=\"mt-3\"\r\n          [icon]=\"action?.icon\"\r\n          (clicked)=\"actionClicked($event)\"\r\n          [label]=\"action?.label\"\r\n          [hidden]=\"status === 'pending'\">\r\n        </ec-button>\r\n      }\r\n    }\r\n  </div>\r\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
+            args: [{ selector: '[ecOverlay]', standalone: false, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n  <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n  <div\n    class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n    <!--Pending Spinner-->\n    <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n    @if (status === 'noData' && noDataTemplate) {\n      <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n    }\n    @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n      <!--Status Message-->\n      @if (message) {\n        <div id=\"statusMessage\"\n          class=\"message\"\n          [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n          [innerHtml]=\"message | translate\">\n        </div>\n      }\n      <!-- Action -->\n      @if (action?.onClick) {\n        <ec-button type=\"common\"\n          class=\"mt-3\"\n          [icon]=\"action?.icon\"\n          (clicked)=\"actionClicked($event)\"\n          [label]=\"action?.label\"\n          [hidden]=\"status === 'pending'\">\n        </ec-button>\n      }\n    }\n  </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
         }], propDecorators: { status: [{
                 type: Input
             }], message: [{
@@ -4802,11 +4802,11 @@ class ComboboxComponent extends FormControlBase {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ComboboxComponent, isStandalone: false, 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", caseSensitive: "caseSensitive" }, 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  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (alwaysOpen) {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\"\r\n      *ecPopup=\"dropdownmenu\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\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  @if (!hideToggleButton) {\r\n    <ec-button class=\"textbox-group-btn-right\"\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  }\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    @if (addNew) {\r\n      <button class=\"add-new {{addNewOptions?.classList}}\"\r\n        id=\"{{id}}_addNew\"\r\n        #addNewButton\r\n        [class.is-selected]=\"addNewSelected\"\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          @if (addNew === 'static' || addNew === true) {\r\n            <span\r\n              translate>{{addNewOptions?.label}}\r\n            </span>\r\n          }\r\n          @if (addNew === 'dynamic') {\r\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n          </span>\r\n        }\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n  }\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  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\r\n    <footer>\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  }\r\n</div>\r\n</ng-template>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}: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:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-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}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ComboboxComponent, isStandalone: false, 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", caseSensitive: "caseSensitive" }, 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}}\"\n     [ngClass]=\"{'open': menuStatus === 'visible',\n                 'invalid': formModel.touched && formModel.invalid,\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled,\n                 'is-always-open': alwaysOpen}\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  @if (alwaysOpen) {\n    <div class=\"textbox-group control-input\"\n      [ngClass]=\"textboxElementClasses\">\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n    </div>\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n    }\n  } @else {\n    <div class=\"textbox-group control-input\"\n      [ngClass]=\"textboxElementClasses\"\n      *ecPopup=\"dropdownmenu\">\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n    </div>\n  }\n</div>\n\n\n<ng-template #textbox>\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n  <ec-textbox class=\"textbox-group-input mb-0\"\n    #textbox\n    [id]=\"id\"\n    [autofocus]=\"autofocus\"\n    [formModel]=\"textboxFormModel\"\n    [maxlength]=\"maxlength\"\n    [minlength]=\"minlength\"\n    [placeholder]=\"effectivePlaceholder\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n    (input)=\"textboxValueChanged($event)\"\n    (keydown)=\"keyNavigate($event)\"\n    (focusout)=\"onBlur()\"\n    [upperCase]=\"upperCase\"\n    [pending]=\"pending && alwaysOpen\"\n  [autocomplete]=\"'off'\"></ec-textbox>\n\n  @if (!hideToggleButton) {\n    <ec-button class=\"textbox-group-btn-right\"\n      [id]=\"id + '_button'\"\n      [disabled]=\"formModel.disabled\"\n      icon=\"icon-caret-down\"\n      [tabindex]=\"-1\"\n      type=\"secondary\"\n      (click)=\"toggleMenu($event)\"\n      (keydown)=\"keyNavigate($event)\"\n    [class.active]=\"menuStatus === 'visible'\"></ec-button>\n  }\n</ng-template>\n\n<ng-template #dropdownmenu>\n  <div class=\"popup\"\n    ecOverlay\n    [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n    @if (addNew) {\n      <button class=\"add-new {{addNewOptions?.classList}}\"\n        id=\"{{id}}_addNew\"\n        #addNewButton\n        [class.is-selected]=\"addNewSelected\"\n        [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n        (click)=\"onAddNew($event)\">\n        <span class=\"add-new-label ec-util-truncate\">\n          @if (addNew === 'static' || addNew === true) {\n            <span\n              translate>{{addNewOptions?.label}}\n            </span>\n          }\n          @if (addNew === 'dynamic') {\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n          </span>\n        }\n      </span>\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n    </button>\n  }\n\n  <ec-menu id=\"{{id}}_menu\"\n    [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n    [ngClass]=\"menuElementClasses\"\n    [templateType]=\"templateType\"\n    [customMenuTemplate]=\"customMenuTemplate\"\n    [showNoItems]=\"!hideNoMatches\"\n    [noDataText]=\"noMatchesText\"\n    [items]=\"filteredOptions\"\n    [selected]=\"selectedItem\"\n    (selectedChanged)=\"selectedChanged($event)\"\n    [preserveIconSpace]=\"preserveIconSpace\"\n  [truncateItems]=\"truncateItems\"></ec-menu>\n\n  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n    <footer>\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n    </footer>\n  }\n</div>\n</ng-template>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}: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:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-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}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-combobox', standalone: false, 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  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (alwaysOpen) {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\"\r\n      *ecPopup=\"dropdownmenu\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\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  @if (!hideToggleButton) {\r\n    <ec-button class=\"textbox-group-btn-right\"\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  }\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    @if (addNew) {\r\n      <button class=\"add-new {{addNewOptions?.classList}}\"\r\n        id=\"{{id}}_addNew\"\r\n        #addNewButton\r\n        [class.is-selected]=\"addNewSelected\"\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          @if (addNew === 'static' || addNew === true) {\r\n            <span\r\n              translate>{{addNewOptions?.label}}\r\n            </span>\r\n          }\r\n          @if (addNew === 'dynamic') {\r\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n          </span>\r\n        }\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n  }\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  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\r\n    <footer>\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  }\r\n</div>\r\n</ng-template>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}: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:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-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}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}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"] }]
+            args: [{ selector: 'ec-combobox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n     [ngClass]=\"{'open': menuStatus === 'visible',\n                 'invalid': formModel.touched && formModel.invalid,\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled,\n                 'is-always-open': alwaysOpen}\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  @if (alwaysOpen) {\n    <div class=\"textbox-group control-input\"\n      [ngClass]=\"textboxElementClasses\">\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n    </div>\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n    }\n  } @else {\n    <div class=\"textbox-group control-input\"\n      [ngClass]=\"textboxElementClasses\"\n      *ecPopup=\"dropdownmenu\">\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n    </div>\n  }\n</div>\n\n\n<ng-template #textbox>\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n  <ec-textbox class=\"textbox-group-input mb-0\"\n    #textbox\n    [id]=\"id\"\n    [autofocus]=\"autofocus\"\n    [formModel]=\"textboxFormModel\"\n    [maxlength]=\"maxlength\"\n    [minlength]=\"minlength\"\n    [placeholder]=\"effectivePlaceholder\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n    (input)=\"textboxValueChanged($event)\"\n    (keydown)=\"keyNavigate($event)\"\n    (focusout)=\"onBlur()\"\n    [upperCase]=\"upperCase\"\n    [pending]=\"pending && alwaysOpen\"\n  [autocomplete]=\"'off'\"></ec-textbox>\n\n  @if (!hideToggleButton) {\n    <ec-button class=\"textbox-group-btn-right\"\n      [id]=\"id + '_button'\"\n      [disabled]=\"formModel.disabled\"\n      icon=\"icon-caret-down\"\n      [tabindex]=\"-1\"\n      type=\"secondary\"\n      (click)=\"toggleMenu($event)\"\n      (keydown)=\"keyNavigate($event)\"\n    [class.active]=\"menuStatus === 'visible'\"></ec-button>\n  }\n</ng-template>\n\n<ng-template #dropdownmenu>\n  <div class=\"popup\"\n    ecOverlay\n    [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n    @if (addNew) {\n      <button class=\"add-new {{addNewOptions?.classList}}\"\n        id=\"{{id}}_addNew\"\n        #addNewButton\n        [class.is-selected]=\"addNewSelected\"\n        [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n        (click)=\"onAddNew($event)\">\n        <span class=\"add-new-label ec-util-truncate\">\n          @if (addNew === 'static' || addNew === true) {\n            <span\n              translate>{{addNewOptions?.label}}\n            </span>\n          }\n          @if (addNew === 'dynamic') {\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n          </span>\n        }\n      </span>\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n    </button>\n  }\n\n  <ec-menu id=\"{{id}}_menu\"\n    [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n    [ngClass]=\"menuElementClasses\"\n    [templateType]=\"templateType\"\n    [customMenuTemplate]=\"customMenuTemplate\"\n    [showNoItems]=\"!hideNoMatches\"\n    [noDataText]=\"noMatchesText\"\n    [items]=\"filteredOptions\"\n    [selected]=\"selectedItem\"\n    (selectedChanged)=\"selectedChanged($event)\"\n    [preserveIconSpace]=\"preserveIconSpace\"\n  [truncateItems]=\"truncateItems\"></ec-menu>\n\n  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n    <footer>\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n    </footer>\n  }\n</div>\n</ng-template>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}: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:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-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}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}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: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -4924,11 +4924,11 @@ class FormControlComponent {
         this._formModel?.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormControlComponent, isStandalone: false, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", tabindex: "tabindex", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n@if (showClear) {\r\n  <button\r\n    id=\"{{id + '_clear'}}\"\r\n    [attr.disabled]=\"disabled || undefined\"\r\n    class=\"ec-form-control-clear\"\r\n    (click)=\"clear()\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-cancel\"></i>\r\n  </button>\r\n}\r\n@if (actionIcon) {\r\n  <button\r\n    id=\"{{id + '_action'}}\"\r\n    [attr.disabled]=\"disabled || undefined\"\r\n    class=\"ec-form-control-action\"\r\n    (click)=\"actionClicked.emit($event)\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon {{actionIcon}}\"></i>\r\n  </button>\r\n}\r\n<div class=\"ec-focus-ring\"></div>\r\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{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}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormControlComponent, isStandalone: false, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", tabindex: "tabindex", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n  <button\n    id=\"{{id + '_clear'}}\"\n    [attr.disabled]=\"disabled || undefined\"\n    class=\"ec-form-control-clear\"\n    (click)=\"clear()\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-cancel\"></i>\n  </button>\n}\n@if (actionIcon) {\n  <button\n    id=\"{{id + '_action'}}\"\n    [attr.disabled]=\"disabled || undefined\"\n    class=\"ec-form-control-action\"\n    (click)=\"actionClicked.emit($event)\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon {{actionIcon}}\"></i>\n  </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{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}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\r\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\r\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\r\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\r\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\r\n@if (showClear) {\r\n  <button\r\n    id=\"{{id + '_clear'}}\"\r\n    [attr.disabled]=\"disabled || undefined\"\r\n    class=\"ec-form-control-clear\"\r\n    (click)=\"clear()\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon icon-cancel\"></i>\r\n  </button>\r\n}\r\n@if (actionIcon) {\r\n  <button\r\n    id=\"{{id + '_action'}}\"\r\n    [attr.disabled]=\"disabled || undefined\"\r\n    class=\"ec-form-control-action\"\r\n    (click)=\"actionClicked.emit($event)\"\r\n    tabindex=\"{{tabindex}}\">\r\n    <i class=\"ec-icon {{actionIcon}}\"></i>\r\n  </button>\r\n}\r\n<div class=\"ec-focus-ring\"></div>\r\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{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}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"] }]
+            args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n  <button\n    id=\"{{id + '_clear'}}\"\n    [attr.disabled]=\"disabled || undefined\"\n    class=\"ec-form-control-clear\"\n    (click)=\"clear()\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon icon-cancel\"></i>\n  </button>\n}\n@if (actionIcon) {\n  <button\n    id=\"{{id + '_action'}}\"\n    [attr.disabled]=\"disabled || undefined\"\n    class=\"ec-form-control-action\"\n    (click)=\"actionClicked.emit($event)\"\n    tabindex=\"{{tabindex}}\">\n    <i class=\"ec-icon {{actionIcon}}\"></i>\n  </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{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}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action: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}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { formControlDirective: [{
                 type: ContentChild,
                 args: [FormControlDirective]
@@ -5482,11 +5482,11 @@ class DateInputComponent extends FormControlBase {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: i0.ElementRef }, { token: i1$1.Overlay }, { token: DateInput.SelectionStrategies }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\r\n  <label>\r\n    <span>{{label | translate}}</span>\r\n    @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n      <span>&nbsp;{{validationErrors}}</span>\r\n    }\r\n    @if (helpPopover) {\r\n      <ec-help-popover id=\"{{id}}_helpPopover\"\r\n        class=\"d-inline-block my-n3 mx-n1\"\r\n        text=\"{{helpPopover | translate}}\"\r\n        contentPosition=\"{{helpPopoverPosition}}\">\r\n      </ec-help-popover>\r\n    }\r\n  </label>\r\n}\r\n\r\n<div class=\"d-flex align-items-center\"\r\n  [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n  [tabindex]=\"tabindex\"\r\n  #controls=\"ecKeyboardNavContainer\"\r\n  (focusOutEnd)=\"onControlsFocusOutEnd()\">\r\n  <ec-form-control id=\"{{id}}\"\r\n    [required]=\"required\"\r\n    [autofocus]=\"autofocus\"\r\n    [pending]=\"pending\"\r\n    [readonly]=\"readonly\"\r\n    (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n    [showClear]=\"false\"\r\n    [tabindex]=\"tabindex\"\r\n    actionIcon=\"icon-date\"\r\n    cdkOverlayOrigin\r\n    #overlayOrigin=\"cdkOverlayOrigin\"\r\n    class=\"flex-grow\"\r\n    style=\"height: 2rem;\">\r\n    <input id=\"{{id}}_input\"\r\n      type=\"text\"\r\n      placeholder=\"{{placeholder}}\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"textboxGroup.get('textbox')\"\r\n      (blur)=\"onTextboxBlur()\">\r\n    </ec-form-control>\r\n\r\n    @if (selectionStrategy.showSecondaryTextbox) {\r\n      <span class=\"flex-shrink mx-1\">&ndash;</span>\r\n      <ec-form-control id=\"{{id}}_control2\"\r\n        [required]=\"required\"\r\n        [autofocus]=\"autofocus\"\r\n        [pending]=\"pending\"\r\n        [readonly]=\"readonly\"\r\n        (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n        [showClear]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        actionIcon=\"icon-date\"\r\n        class=\"flex-grow\"\r\n        style=\"height: 2rem;\">\r\n        <input id=\"{{id}}_input2\"\r\n          type=\"text\"\r\n          placeholder=\"{{placeholder}}\"\r\n          tabindex=\"{{tabindex}}\"\r\n          [formControl]=\"textboxGroup.get('textbox2')\"\r\n          (blur)=\"onTextbox2Blur()\">\r\n        </ec-form-control>\r\n      }\r\n\r\n      @if (enableSteppers) {\r\n        <div\r\n          class=\"control-group ml-2\">\r\n          <ec-button id=\"{{id}}_previousSelection\"\r\n            type=\"secondary\"\r\n            icon=\"icon-angle-down rotate-90\"\r\n            (clicked)=\"previousSelection()\"\r\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\r\n            [tabindex]=\"tabindex\">\r\n          </ec-button>\r\n          <ec-button id=\"{{id}}_nextSelection\"\r\n            type=\"secondary\"\r\n            icon=\"icon-angle-down rotate-270\"\r\n            (clicked)=\"nextSelection()\"\r\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\r\n            [tabindex]=\"tabindex\">\r\n          </ec-button>\r\n        </div>\r\n      }\r\n\r\n      @if (quickSelectDate) {\r\n        <ec-button\r\n          id=\"{{id}}_quickSelect\"\r\n          icon=\"icon-day\"\r\n          type=\"secondary\"\r\n          title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\r\n          (clicked)=\"goToQuickSelectDate()\"\r\n          [tabindex]=\"tabindex\"\r\n          class=\"ml-2\">\r\n        </ec-button>\r\n      }\r\n    </div>\r\n\r\n    <ng-template cdkConnectedOverlay\r\n      #overlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n      [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n      cdkConnectedOverlayPanelClass=\"my-1\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n      (detach)=\"isCalendarOpen = false\">\r\n      <article id=\"{{id}}_datePicker\"\r\n        class=\"card d-flex\"\r\n        [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n        [tabindex]=\"tabindex\"\r\n        #calendar=\"ecKeyboardNavContainer\"\r\n        (focusOutStart)=\"onCalendarFocusOutStart()\"\r\n        (focusOutEnd)=\"onCalendarFocusOutEnd()\">\r\n        @if (selectionModeOptions.length > 1) {\r\n          <ul\r\n            class=\"selection-mode-menu border-right p-1\">\r\n            @for (option of selectionModeOptions; track option) {\r\n              <li>\r\n                <button id=\"{{id}}_selectionMode_{{option}}\"\r\n                  class=\"text-body-1\"\r\n                  [class.is-selected]=\"option === selectionMode\"\r\n                  (click)=\"onSelectionModeChange(option)\"\r\n                  tabindex=\"{{tabindex}}\">\r\n                  {{'DateInputSelectionMode_' + option | translate}}\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n        <div>\r\n          <div class=\"d-flex\">\r\n            <ec-calendar id=\"{{id}}_calendar\"\r\n              [view]=\"primaryCalendarView\"\r\n              (viewChange)=\"onPrimaryCalendarViewChange($event)\"\r\n              [selectionMode]=\"selectionMode\"\r\n              [selection]=\"calendarSelection\"\r\n              (dateSelected)=\"onCalendarDateSelected($event)\"\r\n              [minDate]=\"minDate\"\r\n              [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\r\n              [tabindex]=\"tabindex\">\r\n            </ec-calendar>\r\n\r\n            @if (selectionStrategy.showSecondaryCalendar) {\r\n              <ec-calendar\r\n                id=\"{{id}}_secondaryCalendar\"\r\n                [view]=\"secondaryCalendarView\"\r\n                (viewChange)=\"onSecondaryCalendarViewChange($event)\"\r\n                [selectionMode]=\"selectionMode\"\r\n                [selection]=\"calendarSelection\"\r\n                (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                [minDate]=\"secondaryCalendarMinDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [tabindex]=\"tabindex\">\r\n              </ec-calendar>\r\n            }\r\n          </div>\r\n\r\n          @if (selectionStrategy.selectionViewMode === 'day') {\r\n            <footer\r\n              class=\"px-2 my-2 d-flex\">\r\n              <ec-button id=\"{{id}}_today_button\"\r\n                label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\r\n                class=\"ml-auto\"\r\n                (clicked)=\"goToToday()\"\r\n                tabindex=\"{{tabindex}}\"\r\n                type=\"text\">\r\n              </ec-button>\r\n              @if (selectionStrategy.showSecondaryTextbox) {\r\n                <ec-button\r\n                  id=\"{{id}}_close_button\"\r\n                  label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\r\n                  class=\"ml-2\"\r\n                  (clicked)=\"closeCalendarAndFocusInput()\"\r\n                  tabindex=\"{{tabindex}}\"\r\n                  type=\"primary\">\r\n                </ec-button>\r\n              }\r\n            </footer>\r\n          }\r\n        </div>\r\n      </article>\r\n    </ng-template>\r\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li 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}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li 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}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n  <label>\n    <span>{{label | translate}}</span>\n    @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n      <span>&nbsp;{{validationErrors}}</span>\n    }\n    @if (helpPopover) {\n      <ec-help-popover id=\"{{id}}_helpPopover\"\n        class=\"d-inline-block my-n3 mx-n1\"\n        text=\"{{helpPopover | translate}}\"\n        contentPosition=\"{{helpPopoverPosition}}\">\n      </ec-help-popover>\n    }\n  </label>\n}\n\n<div class=\"d-flex align-items-center\"\n  [ecKeyboardNavContainer]=\"isCalendarOpen\"\n  [tabindex]=\"tabindex\"\n  #controls=\"ecKeyboardNavContainer\"\n  (focusOutEnd)=\"onControlsFocusOutEnd()\">\n  <ec-form-control id=\"{{id}}\"\n    [required]=\"required\"\n    [autofocus]=\"autofocus\"\n    [pending]=\"pending\"\n    [readonly]=\"readonly\"\n    (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n    [showClear]=\"false\"\n    [tabindex]=\"tabindex\"\n    actionIcon=\"icon-date\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    class=\"flex-grow\"\n    style=\"height: 2rem;\">\n    <input id=\"{{id}}_input\"\n      type=\"text\"\n      placeholder=\"{{placeholder}}\"\n      tabindex=\"{{tabindex}}\"\n      [formControl]=\"textboxGroup.get('textbox')\"\n      (blur)=\"onTextboxBlur()\">\n    </ec-form-control>\n\n    @if (selectionStrategy.showSecondaryTextbox) {\n      <span class=\"flex-shrink mx-1\">&ndash;</span>\n      <ec-form-control id=\"{{id}}_control2\"\n        [required]=\"required\"\n        [autofocus]=\"autofocus\"\n        [pending]=\"pending\"\n        [readonly]=\"readonly\"\n        (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n        [showClear]=\"false\"\n        [tabindex]=\"tabindex\"\n        actionIcon=\"icon-date\"\n        class=\"flex-grow\"\n        style=\"height: 2rem;\">\n        <input id=\"{{id}}_input2\"\n          type=\"text\"\n          placeholder=\"{{placeholder}}\"\n          tabindex=\"{{tabindex}}\"\n          [formControl]=\"textboxGroup.get('textbox2')\"\n          (blur)=\"onTextbox2Blur()\">\n        </ec-form-control>\n      }\n\n      @if (enableSteppers) {\n        <div\n          class=\"control-group ml-2\">\n          <ec-button id=\"{{id}}_previousSelection\"\n            type=\"secondary\"\n            icon=\"icon-angle-down rotate-90\"\n            (clicked)=\"previousSelection()\"\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n            [tabindex]=\"tabindex\">\n          </ec-button>\n          <ec-button id=\"{{id}}_nextSelection\"\n            type=\"secondary\"\n            icon=\"icon-angle-down rotate-270\"\n            (clicked)=\"nextSelection()\"\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n            [tabindex]=\"tabindex\">\n          </ec-button>\n        </div>\n      }\n\n      @if (quickSelectDate) {\n        <ec-button\n          id=\"{{id}}_quickSelect\"\n          icon=\"icon-day\"\n          type=\"secondary\"\n          title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n          (clicked)=\"goToQuickSelectDate()\"\n          [tabindex]=\"tabindex\"\n          class=\"ml-2\">\n        </ec-button>\n      }\n    </div>\n\n    <ng-template cdkConnectedOverlay\n      #overlay=\"cdkConnectedOverlay\"\n      [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n      [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n      [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n      cdkConnectedOverlayPanelClass=\"my-1\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n      (detach)=\"isCalendarOpen = false\">\n      <article id=\"{{id}}_datePicker\"\n        class=\"card d-flex\"\n        [ecKeyboardNavContainer]=\"isCalendarOpen\"\n        [tabindex]=\"tabindex\"\n        #calendar=\"ecKeyboardNavContainer\"\n        (focusOutStart)=\"onCalendarFocusOutStart()\"\n        (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n        @if (selectionModeOptions.length > 1) {\n          <ul\n            class=\"selection-mode-menu border-right p-1\">\n            @for (option of selectionModeOptions; track option) {\n              <li>\n                <button id=\"{{id}}_selectionMode_{{option}}\"\n                  class=\"text-body-1\"\n                  [class.is-selected]=\"option === selectionMode\"\n                  (click)=\"onSelectionModeChange(option)\"\n                  tabindex=\"{{tabindex}}\">\n                  {{'DateInputSelectionMode_' + option | translate}}\n                </button>\n              </li>\n            }\n          </ul>\n        }\n\n        <div>\n          <div class=\"d-flex\">\n            <ec-calendar id=\"{{id}}_calendar\"\n              [view]=\"primaryCalendarView\"\n              (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n              [selectionMode]=\"selectionMode\"\n              [selection]=\"calendarSelection\"\n              (dateSelected)=\"onCalendarDateSelected($event)\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n              [tabindex]=\"tabindex\">\n            </ec-calendar>\n\n            @if (selectionStrategy.showSecondaryCalendar) {\n              <ec-calendar\n                id=\"{{id}}_secondaryCalendar\"\n                [view]=\"secondaryCalendarView\"\n                (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n                [selectionMode]=\"selectionMode\"\n                [selection]=\"calendarSelection\"\n                (dateSelected)=\"onCalendarDateSelected($event)\"\n                [minDate]=\"secondaryCalendarMinDate\"\n                [maxDate]=\"maxDate\"\n                [tabindex]=\"tabindex\">\n              </ec-calendar>\n            }\n          </div>\n\n          @if (selectionStrategy.selectionViewMode === 'day') {\n            <footer\n              class=\"px-2 my-2 d-flex\">\n              <ec-button id=\"{{id}}_today_button\"\n                label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n                class=\"ml-auto\"\n                (clicked)=\"goToToday()\"\n                tabindex=\"{{tabindex}}\"\n                type=\"text\">\n              </ec-button>\n              @if (selectionStrategy.showSecondaryTextbox) {\n                <ec-button\n                  id=\"{{id}}_close_button\"\n                  label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n                  class=\"ml-2\"\n                  (clicked)=\"closeCalendarAndFocusInput()\"\n                  tabindex=\"{{tabindex}}\"\n                  type=\"primary\">\n                </ec-button>\n              }\n            </footer>\n          }\n        </div>\n      </article>\n    </ng-template>\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li 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}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li 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}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-date-input', providers: [DateInput.SelectionStrategies], standalone: false, template: "@if (label) {\r\n  <label>\r\n    <span>{{label | translate}}</span>\r\n    @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n      <span>&nbsp;{{validationErrors}}</span>\r\n    }\r\n    @if (helpPopover) {\r\n      <ec-help-popover id=\"{{id}}_helpPopover\"\r\n        class=\"d-inline-block my-n3 mx-n1\"\r\n        text=\"{{helpPopover | translate}}\"\r\n        contentPosition=\"{{helpPopoverPosition}}\">\r\n      </ec-help-popover>\r\n    }\r\n  </label>\r\n}\r\n\r\n<div class=\"d-flex align-items-center\"\r\n  [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n  [tabindex]=\"tabindex\"\r\n  #controls=\"ecKeyboardNavContainer\"\r\n  (focusOutEnd)=\"onControlsFocusOutEnd()\">\r\n  <ec-form-control id=\"{{id}}\"\r\n    [required]=\"required\"\r\n    [autofocus]=\"autofocus\"\r\n    [pending]=\"pending\"\r\n    [readonly]=\"readonly\"\r\n    (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n    [showClear]=\"false\"\r\n    [tabindex]=\"tabindex\"\r\n    actionIcon=\"icon-date\"\r\n    cdkOverlayOrigin\r\n    #overlayOrigin=\"cdkOverlayOrigin\"\r\n    class=\"flex-grow\"\r\n    style=\"height: 2rem;\">\r\n    <input id=\"{{id}}_input\"\r\n      type=\"text\"\r\n      placeholder=\"{{placeholder}}\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"textboxGroup.get('textbox')\"\r\n      (blur)=\"onTextboxBlur()\">\r\n    </ec-form-control>\r\n\r\n    @if (selectionStrategy.showSecondaryTextbox) {\r\n      <span class=\"flex-shrink mx-1\">&ndash;</span>\r\n      <ec-form-control id=\"{{id}}_control2\"\r\n        [required]=\"required\"\r\n        [autofocus]=\"autofocus\"\r\n        [pending]=\"pending\"\r\n        [readonly]=\"readonly\"\r\n        (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\r\n        [showClear]=\"false\"\r\n        [tabindex]=\"tabindex\"\r\n        actionIcon=\"icon-date\"\r\n        class=\"flex-grow\"\r\n        style=\"height: 2rem;\">\r\n        <input id=\"{{id}}_input2\"\r\n          type=\"text\"\r\n          placeholder=\"{{placeholder}}\"\r\n          tabindex=\"{{tabindex}}\"\r\n          [formControl]=\"textboxGroup.get('textbox2')\"\r\n          (blur)=\"onTextbox2Blur()\">\r\n        </ec-form-control>\r\n      }\r\n\r\n      @if (enableSteppers) {\r\n        <div\r\n          class=\"control-group ml-2\">\r\n          <ec-button id=\"{{id}}_previousSelection\"\r\n            type=\"secondary\"\r\n            icon=\"icon-angle-down rotate-90\"\r\n            (clicked)=\"previousSelection()\"\r\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\r\n            [tabindex]=\"tabindex\">\r\n          </ec-button>\r\n          <ec-button id=\"{{id}}_nextSelection\"\r\n            type=\"secondary\"\r\n            icon=\"icon-angle-down rotate-270\"\r\n            (clicked)=\"nextSelection()\"\r\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\r\n            [tabindex]=\"tabindex\">\r\n          </ec-button>\r\n        </div>\r\n      }\r\n\r\n      @if (quickSelectDate) {\r\n        <ec-button\r\n          id=\"{{id}}_quickSelect\"\r\n          icon=\"icon-day\"\r\n          type=\"secondary\"\r\n          title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\r\n          (clicked)=\"goToQuickSelectDate()\"\r\n          [tabindex]=\"tabindex\"\r\n          class=\"ml-2\">\r\n        </ec-button>\r\n      }\r\n    </div>\r\n\r\n    <ng-template cdkConnectedOverlay\r\n      #overlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\r\n      [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\r\n      cdkConnectedOverlayPanelClass=\"my-1\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\r\n      (detach)=\"isCalendarOpen = false\">\r\n      <article id=\"{{id}}_datePicker\"\r\n        class=\"card d-flex\"\r\n        [ecKeyboardNavContainer]=\"isCalendarOpen\"\r\n        [tabindex]=\"tabindex\"\r\n        #calendar=\"ecKeyboardNavContainer\"\r\n        (focusOutStart)=\"onCalendarFocusOutStart()\"\r\n        (focusOutEnd)=\"onCalendarFocusOutEnd()\">\r\n        @if (selectionModeOptions.length > 1) {\r\n          <ul\r\n            class=\"selection-mode-menu border-right p-1\">\r\n            @for (option of selectionModeOptions; track option) {\r\n              <li>\r\n                <button id=\"{{id}}_selectionMode_{{option}}\"\r\n                  class=\"text-body-1\"\r\n                  [class.is-selected]=\"option === selectionMode\"\r\n                  (click)=\"onSelectionModeChange(option)\"\r\n                  tabindex=\"{{tabindex}}\">\r\n                  {{'DateInputSelectionMode_' + option | translate}}\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n        <div>\r\n          <div class=\"d-flex\">\r\n            <ec-calendar id=\"{{id}}_calendar\"\r\n              [view]=\"primaryCalendarView\"\r\n              (viewChange)=\"onPrimaryCalendarViewChange($event)\"\r\n              [selectionMode]=\"selectionMode\"\r\n              [selection]=\"calendarSelection\"\r\n              (dateSelected)=\"onCalendarDateSelected($event)\"\r\n              [minDate]=\"minDate\"\r\n              [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\r\n              [tabindex]=\"tabindex\">\r\n            </ec-calendar>\r\n\r\n            @if (selectionStrategy.showSecondaryCalendar) {\r\n              <ec-calendar\r\n                id=\"{{id}}_secondaryCalendar\"\r\n                [view]=\"secondaryCalendarView\"\r\n                (viewChange)=\"onSecondaryCalendarViewChange($event)\"\r\n                [selectionMode]=\"selectionMode\"\r\n                [selection]=\"calendarSelection\"\r\n                (dateSelected)=\"onCalendarDateSelected($event)\"\r\n                [minDate]=\"secondaryCalendarMinDate\"\r\n                [maxDate]=\"maxDate\"\r\n                [tabindex]=\"tabindex\">\r\n              </ec-calendar>\r\n            }\r\n          </div>\r\n\r\n          @if (selectionStrategy.selectionViewMode === 'day') {\r\n            <footer\r\n              class=\"px-2 my-2 d-flex\">\r\n              <ec-button id=\"{{id}}_today_button\"\r\n                label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\r\n                class=\"ml-auto\"\r\n                (clicked)=\"goToToday()\"\r\n                tabindex=\"{{tabindex}}\"\r\n                type=\"text\">\r\n              </ec-button>\r\n              @if (selectionStrategy.showSecondaryTextbox) {\r\n                <ec-button\r\n                  id=\"{{id}}_close_button\"\r\n                  label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\r\n                  class=\"ml-2\"\r\n                  (clicked)=\"closeCalendarAndFocusInput()\"\r\n                  tabindex=\"{{tabindex}}\"\r\n                  type=\"primary\">\r\n                </ec-button>\r\n              }\r\n            </footer>\r\n          }\r\n        </div>\r\n      </article>\r\n    </ng-template>\r\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li 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}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li 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}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"] }]
+            args: [{ selector: 'ec-date-input', providers: [DateInput.SelectionStrategies], standalone: false, template: "@if (label) {\n  <label>\n    <span>{{label | translate}}</span>\n    @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n      <span>&nbsp;{{validationErrors}}</span>\n    }\n    @if (helpPopover) {\n      <ec-help-popover id=\"{{id}}_helpPopover\"\n        class=\"d-inline-block my-n3 mx-n1\"\n        text=\"{{helpPopover | translate}}\"\n        contentPosition=\"{{helpPopoverPosition}}\">\n      </ec-help-popover>\n    }\n  </label>\n}\n\n<div class=\"d-flex align-items-center\"\n  [ecKeyboardNavContainer]=\"isCalendarOpen\"\n  [tabindex]=\"tabindex\"\n  #controls=\"ecKeyboardNavContainer\"\n  (focusOutEnd)=\"onControlsFocusOutEnd()\">\n  <ec-form-control id=\"{{id}}\"\n    [required]=\"required\"\n    [autofocus]=\"autofocus\"\n    [pending]=\"pending\"\n    [readonly]=\"readonly\"\n    (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n    [showClear]=\"false\"\n    [tabindex]=\"tabindex\"\n    actionIcon=\"icon-date\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    class=\"flex-grow\"\n    style=\"height: 2rem;\">\n    <input id=\"{{id}}_input\"\n      type=\"text\"\n      placeholder=\"{{placeholder}}\"\n      tabindex=\"{{tabindex}}\"\n      [formControl]=\"textboxGroup.get('textbox')\"\n      (blur)=\"onTextboxBlur()\">\n    </ec-form-control>\n\n    @if (selectionStrategy.showSecondaryTextbox) {\n      <span class=\"flex-shrink mx-1\">&ndash;</span>\n      <ec-form-control id=\"{{id}}_control2\"\n        [required]=\"required\"\n        [autofocus]=\"autofocus\"\n        [pending]=\"pending\"\n        [readonly]=\"readonly\"\n        (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n        [showClear]=\"false\"\n        [tabindex]=\"tabindex\"\n        actionIcon=\"icon-date\"\n        class=\"flex-grow\"\n        style=\"height: 2rem;\">\n        <input id=\"{{id}}_input2\"\n          type=\"text\"\n          placeholder=\"{{placeholder}}\"\n          tabindex=\"{{tabindex}}\"\n          [formControl]=\"textboxGroup.get('textbox2')\"\n          (blur)=\"onTextbox2Blur()\">\n        </ec-form-control>\n      }\n\n      @if (enableSteppers) {\n        <div\n          class=\"control-group ml-2\">\n          <ec-button id=\"{{id}}_previousSelection\"\n            type=\"secondary\"\n            icon=\"icon-angle-down rotate-90\"\n            (clicked)=\"previousSelection()\"\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n            [tabindex]=\"tabindex\">\n          </ec-button>\n          <ec-button id=\"{{id}}_nextSelection\"\n            type=\"secondary\"\n            icon=\"icon-angle-down rotate-270\"\n            (clicked)=\"nextSelection()\"\n            [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n            [tabindex]=\"tabindex\">\n          </ec-button>\n        </div>\n      }\n\n      @if (quickSelectDate) {\n        <ec-button\n          id=\"{{id}}_quickSelect\"\n          icon=\"icon-day\"\n          type=\"secondary\"\n          title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n          (clicked)=\"goToQuickSelectDate()\"\n          [tabindex]=\"tabindex\"\n          class=\"ml-2\">\n        </ec-button>\n      }\n    </div>\n\n    <ng-template cdkConnectedOverlay\n      #overlay=\"cdkConnectedOverlay\"\n      [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n      [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n      [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n      cdkConnectedOverlayPanelClass=\"my-1\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n      (detach)=\"isCalendarOpen = false\">\n      <article id=\"{{id}}_datePicker\"\n        class=\"card d-flex\"\n        [ecKeyboardNavContainer]=\"isCalendarOpen\"\n        [tabindex]=\"tabindex\"\n        #calendar=\"ecKeyboardNavContainer\"\n        (focusOutStart)=\"onCalendarFocusOutStart()\"\n        (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n        @if (selectionModeOptions.length > 1) {\n          <ul\n            class=\"selection-mode-menu border-right p-1\">\n            @for (option of selectionModeOptions; track option) {\n              <li>\n                <button id=\"{{id}}_selectionMode_{{option}}\"\n                  class=\"text-body-1\"\n                  [class.is-selected]=\"option === selectionMode\"\n                  (click)=\"onSelectionModeChange(option)\"\n                  tabindex=\"{{tabindex}}\">\n                  {{'DateInputSelectionMode_' + option | translate}}\n                </button>\n              </li>\n            }\n          </ul>\n        }\n\n        <div>\n          <div class=\"d-flex\">\n            <ec-calendar id=\"{{id}}_calendar\"\n              [view]=\"primaryCalendarView\"\n              (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n              [selectionMode]=\"selectionMode\"\n              [selection]=\"calendarSelection\"\n              (dateSelected)=\"onCalendarDateSelected($event)\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n              [tabindex]=\"tabindex\">\n            </ec-calendar>\n\n            @if (selectionStrategy.showSecondaryCalendar) {\n              <ec-calendar\n                id=\"{{id}}_secondaryCalendar\"\n                [view]=\"secondaryCalendarView\"\n                (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n                [selectionMode]=\"selectionMode\"\n                [selection]=\"calendarSelection\"\n                (dateSelected)=\"onCalendarDateSelected($event)\"\n                [minDate]=\"secondaryCalendarMinDate\"\n                [maxDate]=\"maxDate\"\n                [tabindex]=\"tabindex\">\n              </ec-calendar>\n            }\n          </div>\n\n          @if (selectionStrategy.selectionViewMode === 'day') {\n            <footer\n              class=\"px-2 my-2 d-flex\">\n              <ec-button id=\"{{id}}_today_button\"\n                label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n                class=\"ml-auto\"\n                (clicked)=\"goToToday()\"\n                tabindex=\"{{tabindex}}\"\n                type=\"text\">\n              </ec-button>\n              @if (selectionStrategy.showSecondaryTextbox) {\n                <ec-button\n                  id=\"{{id}}_close_button\"\n                  label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n                  class=\"ml-2\"\n                  (clicked)=\"closeCalendarAndFocusInput()\"\n                  tabindex=\"{{tabindex}}\"\n                  type=\"primary\">\n                </ec-button>\n              }\n            </footer>\n          }\n        </div>\n      </article>\n    </ng-template>\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li 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}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li 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}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: i0.ElementRef }, { type: i1$1.Overlay }, { type: DateInput.SelectionStrategies }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -5682,11 +5682,11 @@ class DropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DropdownComponent, isStandalone: false, 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" }, host: { properties: { "class.is-pending": "this.pending" } }, 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  @if (showArrow) {\r\n    <span class=\"arrow is-{{buttonType}}\"\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  }\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    @if (menuTitle) {\r\n      <header id=\"{{id}}_title\"\r\n        class=\"text-heading-2 px-2 my-2\"\r\n        >{{menuTitle}}\r\n      </header>\r\n    }\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    @if (menuFooter) {\r\n      <footer>{{menuFooter}}</footer>\r\n    }\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(.is-pending) .arrow{opacity:0}: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-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-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-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}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: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DropdownComponent, isStandalone: false, 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" }, host: { properties: { "class.is-pending": "this.pending" } }, 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\">\n  <ec-button [disabled]=\"disabled\"\n    id=\"{{id}}_toggle\"\n    #dropdownToggle\n    [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n    *ecPopup=\"dropdownMenu\"\n    [label]=\"label\"\n    [icon]=\"icon\"\n    [tabindex]=\"tabindex\"\n    [type]=\"buttonType\"\n    [customTemplate]=\"buttonCustomTemplate\"\n    [pending]=\"pending\"\n    title=\"{{buttonTitle}}\"\n    (click)=\"toggleMenu($event)\"\n    (keydown)=\"keyNavigate($event)\"\n    [autofocus]=\"autofocus\">\n  </ec-button>\n  @if (showArrow) {\n    <span class=\"arrow is-{{buttonType}}\"\n      [class.is-disabled]=\"disabled\">\n      <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n    </span>\n  }\n</div>\n\n<ng-template #dropdownMenu>\n  <div id=\"{{id}}_popup\"\n    class=\"popup\"\n    ecOverlay\n    [status]=\"status?.status\"\n    [message]=\"status?.message\"\n    [displayAsMask]=\"true\">\n    <!-- Dropdown Menu Title -->\n    @if (menuTitle) {\n      <header id=\"{{id}}_title\"\n        class=\"text-heading-2 px-2 my-2\"\n        >{{menuTitle}}\n      </header>\n    }\n    <!-- Dropdown Menu -->\n    <ec-menu id=\"{{id}}_menu\"\n      [class.wrap-items]=\"menuWidth\"\n      [templateType]=\"menuTemplateType\"\n      [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n      [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n      [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n      [items]=\"items\"\n      [showNoItems]=\"true\"\n      [enableKeyNav]=\"true\"\n      [highlightedItem]=\"highlightedItem\"\n      [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n      (selectedChanged)=\"selectedChanged($event)\">\n    </ec-menu>\n    @if (menuFooter) {\n      <footer>{{menuFooter}}</footer>\n    }\n  </div>\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(.is-pending) .arrow{opacity:0}: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-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-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-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}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: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: "21.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-dropdown', standalone: false, 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  @if (showArrow) {\r\n    <span class=\"arrow is-{{buttonType}}\"\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  }\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    @if (menuTitle) {\r\n      <header id=\"{{id}}_title\"\r\n        class=\"text-heading-2 px-2 my-2\"\r\n        >{{menuTitle}}\r\n      </header>\r\n    }\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    @if (menuFooter) {\r\n      <footer>{{menuFooter}}</footer>\r\n    }\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(.is-pending) .arrow{opacity:0}: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-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-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-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}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', standalone: false, template: "<div class=\"control\">\n  <ec-button [disabled]=\"disabled\"\n    id=\"{{id}}_toggle\"\n    #dropdownToggle\n    [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n    *ecPopup=\"dropdownMenu\"\n    [label]=\"label\"\n    [icon]=\"icon\"\n    [tabindex]=\"tabindex\"\n    [type]=\"buttonType\"\n    [customTemplate]=\"buttonCustomTemplate\"\n    [pending]=\"pending\"\n    title=\"{{buttonTitle}}\"\n    (click)=\"toggleMenu($event)\"\n    (keydown)=\"keyNavigate($event)\"\n    [autofocus]=\"autofocus\">\n  </ec-button>\n  @if (showArrow) {\n    <span class=\"arrow is-{{buttonType}}\"\n      [class.is-disabled]=\"disabled\">\n      <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n    </span>\n  }\n</div>\n\n<ng-template #dropdownMenu>\n  <div id=\"{{id}}_popup\"\n    class=\"popup\"\n    ecOverlay\n    [status]=\"status?.status\"\n    [message]=\"status?.message\"\n    [displayAsMask]=\"true\">\n    <!-- Dropdown Menu Title -->\n    @if (menuTitle) {\n      <header id=\"{{id}}_title\"\n        class=\"text-heading-2 px-2 my-2\"\n        >{{menuTitle}}\n      </header>\n    }\n    <!-- Dropdown Menu -->\n    <ec-menu id=\"{{id}}_menu\"\n      [class.wrap-items]=\"menuWidth\"\n      [templateType]=\"menuTemplateType\"\n      [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n      [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n      [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n      [items]=\"items\"\n      [showNoItems]=\"true\"\n      [enableKeyNav]=\"true\"\n      [highlightedItem]=\"highlightedItem\"\n      [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n      (selectedChanged)=\"selectedChanged($event)\">\n    </ec-menu>\n    @if (menuFooter) {\n      <footer>{{menuFooter}}</footer>\n    }\n  </div>\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(.is-pending) .arrow{opacity:0}: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-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-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-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}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: () => [], propDecorators: { id: [{
                 type: Input
             }], autofocus: [{
@@ -5974,11 +5974,11 @@ class FormGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormGroupComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormGroupComponent, isStandalone: false, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n  [class.ec-untouched]=\"formGroup?.untouched\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n      @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"], dependencies: [{ kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormGroupComponent, isStandalone: false, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n  [class.ec-untouched]=\"formGroup?.untouched\">\n\n  @if (label) {\n    <label>\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\n      @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <ng-content></ng-content>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"], dependencies: [{ kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-form-group', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n  [class.ec-untouched]=\"formGroup?.untouched\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n      @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <ng-content></ng-content>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"] }]
+            args: [{ selector: 'ec-form-group', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n  [class.ec-untouched]=\"formGroup?.untouched\">\n\n  @if (label) {\n    <label>\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\n      @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <ng-content></ng-content>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: i3.TranslateService }], propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -6213,11 +6213,11 @@ class FileUploadComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n  [formGroup]=\"formModel\"\r\n  [helpPopover]=\"helpPopover\"\r\n  [helpPopoverPosition]=\"helpPopoverPosition\"\r\n  class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n        id=\"{{inputId}}_input\"\r\n        type=\"file\"\r\n        tabindex=\"-1\"\r\n        [attr.accept]=\"fileTypeAccept\"\r\n        (change)=\"fileChange($event.target.files)\"\r\n        [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n        [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n        @if (displayType === 'file') {\r\n          <ec-form-control\r\n            id=\"{{inputId}}_formControl\"\r\n            class=\"text-truncate\"\r\n            [required]=\"required\"\r\n            [pending]=\"pending || formModel?.pending\">\r\n            <input id=\"{{inputId}}_name\"\r\n              [formControl]=\"formModel?.get('name')\"\r\n              type=\"text\"\r\n              [placeholder]=\"placeholder\"\r\n              [tabindex]=\"-1\">\r\n            </ec-form-control>\r\n          }\r\n        </div>\r\n        @if (displayType === 'file') {\r\n          <ec-button\r\n            #browseBtn\r\n            id=\"{{inputId}}_browseBtn\"\r\n            (clicked)=\"fileInput.click()\"\r\n            type=\"secondary\"\r\n            [tabindex]=\"tabindex\"\r\n            [disabled]=\"formModel?.get('name').disabled\"\r\n            label=\"Browse\"\r\n            [autofocus]=\"autofocus\">\r\n          </ec-button>\r\n        }\r\n      </div>\r\n      @if (displayType === 'button') {\r\n        <ec-button\r\n          id=\"{{inputId}}_btn\"\r\n          [pending]=\"pending\"\r\n          [type]=\"buttonType\"\r\n          [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n          (clicked)=\"fileInput.click()\"\r\n          style=\"width: 100%;\">\r\n        </ec-button>\r\n      }\r\n    </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\n  [formGroup]=\"formModel\"\n  [helpPopover]=\"helpPopover\"\n  [helpPopoverPosition]=\"helpPopoverPosition\"\n  class=\"mb-0\">\n  <div class=\"d-flex control-group\">\n    <div class=\"d-flex flex-grow position-relative\">\n      <input #fileInput\n        id=\"{{inputId}}_input\"\n        type=\"file\"\n        tabindex=\"-1\"\n        [attr.accept]=\"fileTypeAccept\"\n        (change)=\"fileChange($event.target.files)\"\n        [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n        [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n        @if (displayType === 'file') {\n          <ec-form-control\n            id=\"{{inputId}}_formControl\"\n            class=\"text-truncate\"\n            [required]=\"required\"\n            [pending]=\"pending || formModel?.pending\">\n            <input id=\"{{inputId}}_name\"\n              [formControl]=\"formModel?.get('name')\"\n              type=\"text\"\n              [placeholder]=\"placeholder\"\n              [tabindex]=\"-1\">\n            </ec-form-control>\n          }\n        </div>\n        @if (displayType === 'file') {\n          <ec-button\n            #browseBtn\n            id=\"{{inputId}}_browseBtn\"\n            (clicked)=\"fileInput.click()\"\n            type=\"secondary\"\n            [tabindex]=\"tabindex\"\n            [disabled]=\"formModel?.get('name').disabled\"\n            label=\"Browse\"\n            [autofocus]=\"autofocus\">\n          </ec-button>\n        }\n      </div>\n      @if (displayType === 'button') {\n        <ec-button\n          id=\"{{inputId}}_btn\"\n          [pending]=\"pending\"\n          [type]=\"buttonType\"\n          [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n          (clicked)=\"fileInput.click()\"\n          style=\"width: 100%;\">\n        </ec-button>\n      }\n    </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ec-file-upload", standalone: false, template: "<ec-form-group [label]=\"label\"\r\n  [formGroup]=\"formModel\"\r\n  [helpPopover]=\"helpPopover\"\r\n  [helpPopoverPosition]=\"helpPopoverPosition\"\r\n  class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n        id=\"{{inputId}}_input\"\r\n        type=\"file\"\r\n        tabindex=\"-1\"\r\n        [attr.accept]=\"fileTypeAccept\"\r\n        (change)=\"fileChange($event.target.files)\"\r\n        [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n        [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n        @if (displayType === 'file') {\r\n          <ec-form-control\r\n            id=\"{{inputId}}_formControl\"\r\n            class=\"text-truncate\"\r\n            [required]=\"required\"\r\n            [pending]=\"pending || formModel?.pending\">\r\n            <input id=\"{{inputId}}_name\"\r\n              [formControl]=\"formModel?.get('name')\"\r\n              type=\"text\"\r\n              [placeholder]=\"placeholder\"\r\n              [tabindex]=\"-1\">\r\n            </ec-form-control>\r\n          }\r\n        </div>\r\n        @if (displayType === 'file') {\r\n          <ec-button\r\n            #browseBtn\r\n            id=\"{{inputId}}_browseBtn\"\r\n            (clicked)=\"fileInput.click()\"\r\n            type=\"secondary\"\r\n            [tabindex]=\"tabindex\"\r\n            [disabled]=\"formModel?.get('name').disabled\"\r\n            label=\"Browse\"\r\n            [autofocus]=\"autofocus\">\r\n          </ec-button>\r\n        }\r\n      </div>\r\n      @if (displayType === 'button') {\r\n        <ec-button\r\n          id=\"{{inputId}}_btn\"\r\n          [pending]=\"pending\"\r\n          [type]=\"buttonType\"\r\n          [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n          (clicked)=\"fileInput.click()\"\r\n          style=\"width: 100%;\">\r\n        </ec-button>\r\n      }\r\n    </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
+            args: [{ selector: "ec-file-upload", standalone: false, template: "<ec-form-group [label]=\"label\"\n  [formGroup]=\"formModel\"\n  [helpPopover]=\"helpPopover\"\n  [helpPopoverPosition]=\"helpPopoverPosition\"\n  class=\"mb-0\">\n  <div class=\"d-flex control-group\">\n    <div class=\"d-flex flex-grow position-relative\">\n      <input #fileInput\n        id=\"{{inputId}}_input\"\n        type=\"file\"\n        tabindex=\"-1\"\n        [attr.accept]=\"fileTypeAccept\"\n        (change)=\"fileChange($event.target.files)\"\n        [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n        [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n        @if (displayType === 'file') {\n          <ec-form-control\n            id=\"{{inputId}}_formControl\"\n            class=\"text-truncate\"\n            [required]=\"required\"\n            [pending]=\"pending || formModel?.pending\">\n            <input id=\"{{inputId}}_name\"\n              [formControl]=\"formModel?.get('name')\"\n              type=\"text\"\n              [placeholder]=\"placeholder\"\n              [tabindex]=\"-1\">\n            </ec-form-control>\n          }\n        </div>\n        @if (displayType === 'file') {\n          <ec-button\n            #browseBtn\n            id=\"{{inputId}}_browseBtn\"\n            (clicked)=\"fileInput.click()\"\n            type=\"secondary\"\n            [tabindex]=\"tabindex\"\n            [disabled]=\"formModel?.get('name').disabled\"\n            label=\"Browse\"\n            [autofocus]=\"autofocus\">\n          </ec-button>\n        }\n      </div>\n      @if (displayType === 'button') {\n        <ec-button\n          id=\"{{inputId}}_btn\"\n          [pending]=\"pending\"\n          [type]=\"buttonType\"\n          [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n          (clicked)=\"fileInput.click()\"\n          style=\"width: 100%;\">\n        </ec-button>\n      }\n    </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { formModel: [{
                 type: Input
             }], placeholder: [{
@@ -6353,11 +6353,11 @@ class FormControlLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormControlLabelComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormControlLabelComponent, isStandalone: false, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n  @if (label) {\r\n    <label ngPreserveWhitespaces>\r\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n      @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\r\n        <span>{{validationErrors | translate}}</span>\r\n      }\r\n    </label>\r\n  }\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormControlLabelComponent, isStandalone: false, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n  @if (label) {\n    <label ngPreserveWhitespaces>\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\n      @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n        <span>{{validationErrors | translate}}</span>\n      }\n    </label>\n  }\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormControlLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-form-control-label', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n  @if (label) {\r\n    <label ngPreserveWhitespaces>\r\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n      @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\r\n        <span>{{validationErrors | translate}}</span>\r\n      }\r\n    </label>\r\n  }\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"] }]
+            args: [{ selector: 'ec-form-control-label', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n  @if (label) {\n    <label ngPreserveWhitespaces>\n      <span id=\"{{id}}_label\">{{label | translate}}</span>\n      @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n        <span>{{validationErrors | translate}}</span>\n      }\n    </label>\n  }\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::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-untouched ::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-label-left{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: i3.TranslateService }], propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -6620,11 +6620,11 @@ class TableSelectableRowComponent {
         this.context.rowCheckboxes.controls.forEach(control => control.setValue(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableSelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n@if (isSelectionEnabled) {\r\n  @if (isHeader) {\r\n    <th\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      @if (context?.selectAllCheckbox) {\r\n        <ec-checkbox id=\"{{id}}_selectAll\"\r\n          class=\"m-0\"\r\n          [formModel]=\"context?.selectAllCheckbox\"\r\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\r\n          [ignoreDisabledDependents]=\"false\">\r\n        </ec-checkbox>\r\n      }\r\n    </th>\r\n  }\r\n  @if (!isHeader && formControl) {\r\n    <td\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\r\n      and allow the value to be visible to other components (for example, when they subscribe\r\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\r\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n        [readonly]=\"isCheckboxDisabled\"\r\n        [attr.id]=\"checkboxAttributeID\"\r\n        class=\"m-0 row-checkbox\"\r\n        [formModel]=\"formControl\">\r\n      </ec-checkbox>\r\n    </td>\r\n  }\r\n}\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n  @if (isHeader) {\n    <th\n      class=\"checkbox\"\n      [ecTableLockedColumn]=\"lockedColOptions\">\n      @if (context?.selectAllCheckbox) {\n        <ec-checkbox id=\"{{id}}_selectAll\"\n          class=\"m-0\"\n          [formModel]=\"context?.selectAllCheckbox\"\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n          [ignoreDisabledDependents]=\"false\">\n        </ec-checkbox>\n      }\n    </th>\n  }\n  @if (!isHeader && formControl) {\n    <td\n      class=\"checkbox\"\n      [ecTableLockedColumn]=\"lockedColOptions\">\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n      and allow the value to be visible to other components (for example, when they subscribe\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n        [readonly]=\"isCheckboxDisabled\"\n        [attr.id]=\"checkboxAttributeID\"\n        class=\"m-0 row-checkbox\"\n        [formModel]=\"formControl\">\n      </ec-checkbox>\n    </td>\n  }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableSelectableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ecTableSelectableRow]', standalone: false, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n@if (isSelectionEnabled) {\r\n  @if (isHeader) {\r\n    <th\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      @if (context?.selectAllCheckbox) {\r\n        <ec-checkbox id=\"{{id}}_selectAll\"\r\n          class=\"m-0\"\r\n          [formModel]=\"context?.selectAllCheckbox\"\r\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\r\n          [ignoreDisabledDependents]=\"false\">\r\n        </ec-checkbox>\r\n      }\r\n    </th>\r\n  }\r\n  @if (!isHeader && formControl) {\r\n    <td\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\r\n      and allow the value to be visible to other components (for example, when they subscribe\r\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\r\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n        [readonly]=\"isCheckboxDisabled\"\r\n        [attr.id]=\"checkboxAttributeID\"\r\n        class=\"m-0 row-checkbox\"\r\n        [formModel]=\"formControl\">\r\n      </ec-checkbox>\r\n    </td>\r\n  }\r\n}\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"] }]
+            args: [{ selector: '[ecTableSelectableRow]', standalone: false, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n  @if (isHeader) {\n    <th\n      class=\"checkbox\"\n      [ecTableLockedColumn]=\"lockedColOptions\">\n      @if (context?.selectAllCheckbox) {\n        <ec-checkbox id=\"{{id}}_selectAll\"\n          class=\"m-0\"\n          [formModel]=\"context?.selectAllCheckbox\"\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n          [ignoreDisabledDependents]=\"false\">\n        </ec-checkbox>\n      }\n    </th>\n  }\n  @if (!isHeader && formControl) {\n    <td\n      class=\"checkbox\"\n      [ecTableLockedColumn]=\"lockedColOptions\">\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n      and allow the value to be visible to other components (for example, when they subscribe\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n        [readonly]=\"isCheckboxDisabled\"\n        [attr.id]=\"checkboxAttributeID\"\n        class=\"m-0 row-checkbox\"\n        [formModel]=\"formControl\">\n      </ec-checkbox>\n    </td>\n  }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -6667,31 +6667,31 @@ class ResizableColumnComponent {
         this.onResize.emit(width);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResizableColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ResizableColumnComponent, isStandalone: false, selector: "th.is-resizable", outputs: { onResize: "onResize" }, ngImport: i0, template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ResizableColumnComponent, isStandalone: false, selector: "th.is-resizable", outputs: { onResize: "onResize" }, ngImport: i0, template: "<div class=\"content-wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"handle\"></div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResizableColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'th.is-resizable', standalone: false, template: "<div class=\"content-wrapper\">\r\n  <div class=\"content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"handle\"></div>\r\n" }]
+            args: [{ selector: 'th.is-resizable', standalone: false, template: "<div class=\"content-wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"handle\"></div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onResize: [{
                 type: Output
             }] } });
 class TableDetailRowComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableDetailRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: TableDetailRowComponent, isStandalone: false, selector: "[ecTableDetailRow]", inputs: { contentClass: "contentClass", contentColSpan: "contentColSpan", maxHeight: "maxHeight" }, ngImport: i0, template: `
-    <td></td>
-    <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
-      <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
-    </td>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: TableDetailRowComponent, isStandalone: false, selector: "[ecTableDetailRow]", inputs: { contentClass: "contentClass", contentColSpan: "contentColSpan", maxHeight: "maxHeight" }, ngImport: i0, template: `
+    <td></td>
+    <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
+      <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
+    </td>
   `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableDetailRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ecTableDetailRow]', template: `
-    <td></td>
-    <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
-      <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
-    </td>
+            args: [{ selector: '[ecTableDetailRow]', template: `
+    <td></td>
+    <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
+      <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
+    </td>
   `, standalone: false, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] }]
         }], propDecorators: { contentClass: [{
                 type: Input
@@ -6825,11 +6825,11 @@ class TableMasterRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableMasterRowComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableMasterRowComponent, isStandalone: false, selector: "[ecTableMasterRow]", inputs: { id: "id", hasDetails: "hasDetails", showDetails: "showDetails", detailTemplate: "detailTemplate", detailContext: "detailContext", detailRowColSpan: "detailRowColSpan", detailRowClass: "detailRowClass", detailRowContentClass: "detailRowContentClass", detailRowMaxHeight: "detailRowMaxHeight", collapsibleToggleCellClass: "collapsibleToggleCellClass", hideTableMaster: "hideTableMaster" }, outputs: { showDetailsChanged: "showDetailsChanged" }, viewQueries: [{ propertyName: "detailRowTemplate", first: true, predicate: ["detailRow"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideTableMaster) {\r\n  <td class=\"{{collapsibleToggleCellClass}}\">\r\n    @if (hasDetails) {\r\n      <ec-collapsible-toggle\r\n        id=\"{{id}}_toggle\"\r\n        [expanded]=\"showDetails\"\r\n      (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\r\n    }\r\n  </td>\r\n}\r\n<ng-content></ng-content>\r\n\r\n<ng-template #detailRow>\r\n  <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\r\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\r\n  </tr>\r\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }, { kind: "component", type: TableDetailRowComponent, selector: "[ecTableDetailRow]", inputs: ["contentClass", "contentColSpan", "maxHeight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableMasterRowComponent, isStandalone: false, selector: "[ecTableMasterRow]", inputs: { id: "id", hasDetails: "hasDetails", showDetails: "showDetails", detailTemplate: "detailTemplate", detailContext: "detailContext", detailRowColSpan: "detailRowColSpan", detailRowClass: "detailRowClass", detailRowContentClass: "detailRowContentClass", detailRowMaxHeight: "detailRowMaxHeight", collapsibleToggleCellClass: "collapsibleToggleCellClass", hideTableMaster: "hideTableMaster" }, outputs: { showDetailsChanged: "showDetailsChanged" }, viewQueries: [{ propertyName: "detailRowTemplate", first: true, predicate: ["detailRow"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideTableMaster) {\n  <td class=\"{{collapsibleToggleCellClass}}\">\n    @if (hasDetails) {\n      <ec-collapsible-toggle\n        id=\"{{id}}_toggle\"\n        [expanded]=\"showDetails\"\n      (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n    }\n  </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n  <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n  </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }, { kind: "component", type: TableDetailRowComponent, selector: "[ecTableDetailRow]", inputs: ["contentClass", "contentColSpan", "maxHeight"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableMasterRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ecTableMasterRow]', standalone: false, template: "@if (!hideTableMaster) {\r\n  <td class=\"{{collapsibleToggleCellClass}}\">\r\n    @if (hasDetails) {\r\n      <ec-collapsible-toggle\r\n        id=\"{{id}}_toggle\"\r\n        [expanded]=\"showDetails\"\r\n      (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\r\n    }\r\n  </td>\r\n}\r\n<ng-content></ng-content>\r\n\r\n<ng-template #detailRow>\r\n  <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\r\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\r\n  </tr>\r\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"] }]
+            args: [{ selector: '[ecTableMasterRow]', standalone: false, template: "@if (!hideTableMaster) {\n  <td class=\"{{collapsibleToggleCellClass}}\">\n    @if (hasDetails) {\n      <ec-collapsible-toggle\n        id=\"{{id}}_toggle\"\n        [expanded]=\"showDetails\"\n      (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n    }\n  </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n  <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n    <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n  </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ApplicationRef }], propDecorators: { id: [{
                 type: Input
             }], hasDetails: [{
@@ -7376,11 +7376,11 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableComponent, isStandalone: false, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.has-title": "this.hasHeaderTitleTemplate", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (headerTitleTemplate) {\r\n  <header class=\"table-title\">\r\n    <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\r\n  </header>\r\n}\r\n\r\n@if (hasSelection && selectionToolbarTemplate) {\r\n  <div class=\"selectable-table-toolbar\"\r\n    >\r\n    <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<div id=\"{{id}}-scroll-container\"\r\n  class=\"table-scroll-container\"\r\n  cdkScrollable>\r\n  <table class=\"main-table\"\r\n    id=\"{{id}}\"\r\n    [ecResizableTable]=\"resizable\"\r\n    [containerEl]=\"el\"\r\n    [sortableTable]=\"sortable\"\r\n    [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </table>\r\n</div>\r\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableComponent, isStandalone: false, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.has-title": "this.hasHeaderTitleTemplate", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (headerTitleTemplate) {\n  <header class=\"table-title\">\n    <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n  </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n  <div class=\"selectable-table-toolbar\"\n    >\n    <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n  </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n  class=\"table-scroll-container\"\n  cdkScrollable>\n  <table class=\"main-table\"\n    id=\"{{id}}\"\n    [ecResizableTable]=\"resizable\"\n    [containerEl]=\"el\"\n    [sortableTable]=\"sortable\"\n    [resizableColumns]=\"resizableColumns\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (headerTitleTemplate) {\r\n  <header class=\"table-title\">\r\n    <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\r\n  </header>\r\n}\r\n\r\n@if (hasSelection && selectionToolbarTemplate) {\r\n  <div class=\"selectable-table-toolbar\"\r\n    >\r\n    <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<div id=\"{{id}}-scroll-container\"\r\n  class=\"table-scroll-container\"\r\n  cdkScrollable>\r\n  <table class=\"main-table\"\r\n    id=\"{{id}}\"\r\n    [ecResizableTable]=\"resizable\"\r\n    [containerEl]=\"el\"\r\n    [sortableTable]=\"sortable\"\r\n    [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </table>\r\n</div>\r\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
+            args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (headerTitleTemplate) {\n  <header class=\"table-title\">\n    <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n  </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n  <div class=\"selectable-table-toolbar\"\n    >\n    <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n  </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n  class=\"table-scroll-container\"\n  cdkScrollable>\n  <table class=\"main-table\"\n    id=\"{{id}}\"\n    [ecResizableTable]=\"resizable\"\n    [containerEl]=\"el\"\n    [sortableTable]=\"sortable\"\n    [resizableColumns]=\"resizableColumns\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -7506,11 +7506,11 @@ class TabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "@if (tabs?.items?.length) {\r\n  <ul\r\n    class=\"{{tabStyle}}\">\r\n    @for (tab of tabs?.items; track tab; let i = $index) {\r\n      <li class=\"{{tab.classlist}}\"\r\n        [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\r\n        >\r\n        @if (tab.url && !tab.disabled) {\r\n          <a\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            [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\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            @if (tab.icon) {\r\n              <i class=\"ec-icon {{tab.icon}}\"\r\n              [class.mr-1]=\"tab.label\"></i>\r\n            }\r\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\r\n              <span\r\n                class=\"badge ml-1\">\r\n                {{ tab.badge}}\r\n              </span>\r\n            }\r\n            @if (tab?.indicator) {\r\n              <span\r\n                class=\"indicator ml-1\"\r\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n            }\r\n          </a>\r\n        }\r\n        @if (!tab.url || tab.disabled) {\r\n          <span\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            @if (tab.icon) {\r\n              <i class=\"ec-icon {{tab.icon}}\"\r\n              [class.mr-1]=\"tab.label\"></i>\r\n            }\r\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\r\n              <span\r\n                class=\"badge ml-1\">\r\n                {{ tab.badge }}\r\n              </span>\r\n            }\r\n            @if (tab?.indicator) {\r\n              <span\r\n                class=\"indicator ml-1\"\r\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n            }\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n}", 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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .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}.tiles .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) .tiles li,: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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "@if (tabs?.items?.length) {\n  <ul\n    class=\"{{tabStyle}}\">\n    @for (tab of tabs?.items; track tab; let i = $index) {\n      <li class=\"{{tab.classlist}}\"\n        [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n        >\n        @if (tab.url && !tab.disabled) {\n          <a\n            tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n            class=\"tab\"\n            id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n            routerLinkActive=\"active\"\n            [routerLink]=\"tab.url\"\n            [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n            [queryParams]=\"tab.queryParams || null\"\n            [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n            (keypress)=\"selectTab($event, tab)\"\n            (click)=\"selectTab($event, tab)\">\n            @if (tab.icon) {\n              <i class=\"ec-icon {{tab.icon}}\"\n              [class.mr-1]=\"tab.label\"></i>\n            }\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n              <span\n                class=\"badge ml-1\">\n                {{ tab.badge}}\n              </span>\n            }\n            @if (tab?.indicator) {\n              <span\n                class=\"indicator ml-1\"\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n            }\n          </a>\n        }\n        @if (!tab.url || tab.disabled) {\n          <span\n            tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n            id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n            class=\"tab\"\n            [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n            (keypress)=\"selectTab($event, tab)\"\n            (click)=\"selectTab($event, tab)\">\n            @if (tab.icon) {\n              <i class=\"ec-icon {{tab.icon}}\"\n              [class.mr-1]=\"tab.label\"></i>\n            }\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n              <span\n                class=\"badge ml-1\">\n                {{ tab.badge }}\n              </span>\n            }\n            @if (tab?.indicator) {\n              <span\n                class=\"indicator ml-1\"\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n            }\n          </span>\n        }\n      </li>\n    }\n  </ul>\n}", 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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .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}.tiles .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) .tiles li,: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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tabs', standalone: false, template: "@if (tabs?.items?.length) {\r\n  <ul\r\n    class=\"{{tabStyle}}\">\r\n    @for (tab of tabs?.items; track tab; let i = $index) {\r\n      <li class=\"{{tab.classlist}}\"\r\n        [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\r\n        >\r\n        @if (tab.url && !tab.disabled) {\r\n          <a\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            [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\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            @if (tab.icon) {\r\n              <i class=\"ec-icon {{tab.icon}}\"\r\n              [class.mr-1]=\"tab.label\"></i>\r\n            }\r\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\r\n              <span\r\n                class=\"badge ml-1\">\r\n                {{ tab.badge}}\r\n              </span>\r\n            }\r\n            @if (tab?.indicator) {\r\n              <span\r\n                class=\"indicator ml-1\"\r\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n            }\r\n          </a>\r\n        }\r\n        @if (!tab.url || tab.disabled) {\r\n          <span\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            @if (tab.icon) {\r\n              <i class=\"ec-icon {{tab.icon}}\"\r\n              [class.mr-1]=\"tab.label\"></i>\r\n            }\r\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\r\n              <span\r\n                class=\"badge ml-1\">\r\n                {{ tab.badge }}\r\n              </span>\r\n            }\r\n            @if (tab?.indicator) {\r\n              <span\r\n                class=\"indicator ml-1\"\r\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n            }\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n}", 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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .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}.tiles .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) .tiles li,: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', standalone: false, template: "@if (tabs?.items?.length) {\n  <ul\n    class=\"{{tabStyle}}\">\n    @for (tab of tabs?.items; track tab; let i = $index) {\n      <li class=\"{{tab.classlist}}\"\n        [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n        >\n        @if (tab.url && !tab.disabled) {\n          <a\n            tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n            class=\"tab\"\n            id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n            routerLinkActive=\"active\"\n            [routerLink]=\"tab.url\"\n            [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n            [queryParams]=\"tab.queryParams || null\"\n            [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n            (keypress)=\"selectTab($event, tab)\"\n            (click)=\"selectTab($event, tab)\">\n            @if (tab.icon) {\n              <i class=\"ec-icon {{tab.icon}}\"\n              [class.mr-1]=\"tab.label\"></i>\n            }\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n              <span\n                class=\"badge ml-1\">\n                {{ tab.badge}}\n              </span>\n            }\n            @if (tab?.indicator) {\n              <span\n                class=\"indicator ml-1\"\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n            }\n          </a>\n        }\n        @if (!tab.url || tab.disabled) {\n          <span\n            tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n            id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n            class=\"tab\"\n            [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n            (keypress)=\"selectTab($event, tab)\"\n            (click)=\"selectTab($event, tab)\">\n            @if (tab.icon) {\n              <i class=\"ec-icon {{tab.icon}}\"\n              [class.mr-1]=\"tab.label\"></i>\n            }\n            <span class=\"text-truncate\">{{tab.label | translate}}</span>\n            @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n              <span\n                class=\"badge ml-1\">\n                {{ tab.badge }}\n              </span>\n            }\n            @if (tab?.indicator) {\n              <span\n                class=\"indicator ml-1\"\n              [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n            }\n          </span>\n        }\n      </li>\n    }\n  </ul>\n}", 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}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;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}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .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}.tiles .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) .tiles li,: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: () => [], propDecorators: { id: [{
                 type: Input
             }], tabindex: [{
@@ -7648,13 +7648,13 @@ class TablePaginationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TablePaginationComponent, isStandalone: false, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\r\n  class=\"my-2 is-condensed\"\r\n  [tabGroup]=\"currentTabs\"\r\n  tabStyle=\"tiles\">\r\n</ec-tabs>\r\n@if (dropdownItems.length > 1) {\r\n  <ec-dropdown id=\"{{id}}_morePages\"\r\n    class=\"my-1 ml-1\"\r\n    menuTemplateType=\"label\"\r\n    icon=\"icon-more\"\r\n    menuPosition=\"left\"\r\n    [menuMinWidth]=\"80\"\r\n    [showArrow]=\"false\"\r\n    [popupFixed]=\"true\"\r\n    [items]=\"dropdownItems\"\r\n    [disabled]=\"disablePaginationControls\"\r\n    (itemSelected)=\"onItemSelected($event)\">\r\n  </ec-dropdown>\r\n}", dependencies: [{ kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TablePaginationComponent, isStandalone: false, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\n  class=\"my-2 is-condensed\"\n  [tabGroup]=\"currentTabs\"\n  tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n  <ec-dropdown id=\"{{id}}_morePages\"\n    class=\"my-1 ml-1\"\n    menuTemplateType=\"label\"\n    icon=\"icon-more\"\n    menuPosition=\"left\"\n    [menuMinWidth]=\"80\"\n    [showArrow]=\"false\"\n    [popupFixed]=\"true\"\n    [items]=\"dropdownItems\"\n    [disabled]=\"disablePaginationControls\"\n    (itemSelected)=\"onItemSelected($event)\">\n  </ec-dropdown>\n}", dependencies: [{ kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TablePaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-table-pagination', host: {
                         class: 'd-flex px-2 align-items-center'
-                    }, standalone: false, template: "<ec-tabs id=\"{{id}}_pages\"\r\n  class=\"my-2 is-condensed\"\r\n  [tabGroup]=\"currentTabs\"\r\n  tabStyle=\"tiles\">\r\n</ec-tabs>\r\n@if (dropdownItems.length > 1) {\r\n  <ec-dropdown id=\"{{id}}_morePages\"\r\n    class=\"my-1 ml-1\"\r\n    menuTemplateType=\"label\"\r\n    icon=\"icon-more\"\r\n    menuPosition=\"left\"\r\n    [menuMinWidth]=\"80\"\r\n    [showArrow]=\"false\"\r\n    [popupFixed]=\"true\"\r\n    [items]=\"dropdownItems\"\r\n    [disabled]=\"disablePaginationControls\"\r\n    (itemSelected)=\"onItemSelected($event)\">\r\n  </ec-dropdown>\r\n}" }]
+                    }, standalone: false, template: "<ec-tabs id=\"{{id}}_pages\"\n  class=\"my-2 is-condensed\"\n  [tabGroup]=\"currentTabs\"\n  tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n  <ec-dropdown id=\"{{id}}_morePages\"\n    class=\"my-1 ml-1\"\n    menuTemplateType=\"label\"\n    icon=\"icon-more\"\n    menuPosition=\"left\"\n    [menuMinWidth]=\"80\"\n    [showArrow]=\"false\"\n    [popupFixed]=\"true\"\n    [items]=\"dropdownItems\"\n    [disabled]=\"disablePaginationControls\"\n    (itemSelected)=\"onItemSelected($event)\">\n  </ec-dropdown>\n}" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], totalItems: [{
@@ -8018,11 +8018,11 @@ class SearchableTableComponent {
         return this.translateService.instant(this.noDataMessage || 'SearchableTable_Default_NoData_SC');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SearchableTableComponent, deps: [{ token: ErrorService }, { token: i3.TranslateService }, { token: RowCountPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SearchableTableComponent, isStandalone: false, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight", disablePaginationControls: "disablePaginationControls" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideHeader) {\r\n  <header\r\n    class=\"d-flex flex-shrink align-items-center mb-3\">\r\n    @if (!hideSearchControl) {\r\n      <ec-textbox id=\"{{id}}_searchbox\"\r\n        class=\"mb-0 flex-grow mr-2\"\r\n        [autofocus]=\"autofocus\"\r\n        [formModel]=\"searchModel\"\r\n        [tabindex]=\"searchboxTabIndex\"\r\n        [placeholder]=\"searchboxPlaceholder\"\r\n      [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n    }\r\n    <div class=\"flex-grow\">\r\n      <ng-content select=\".searchable-table-controls\"></ng-content>\r\n    </div>\r\n  </header>\r\n}\r\n<section id=\"{{id}}_card\"\r\n  class=\"d-flex flex-column {{overlayClasses}}\"\r\n  [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n  ecOverlay\r\n  [status]=\"status.status\"\r\n  [message]=\"status.message\"\r\n  [displayAsMask]=\"true\">\r\n\r\n  @if(!headerTitleTemplate) {\r\n    <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\r\n    <ng-content select=\".card-header\"></ng-content>\r\n  }\r\n\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs.\r\n  If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n  and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n      class=\"{{tableClasses}}\"\r\n      [class.is-fixed]=\"tableLayoutFixed\"\r\n      [sortable]=\"sortable\"\r\n      [sort]=\"sort\"\r\n      (sortChange)=\"onSortChange($event)\"\r\n      [resizable]=\"resizable\"\r\n      [scrollable]=\"true\"\r\n      [selectable]=\"selectable\"\r\n      [selectionContext]=\"selectionContext\"\r\n      [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n      [resizableColumns]=\"resizableColumns\"\r\n      [headerTitleTemplate]=\"headerTitleTemplate\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\r\n    <footer\r\n      class=\"pagination-footer\"\r\n      [class.border-top]=\"!customContentTemplate\">\r\n      <ec-table-pagination id=\"{{id}}_pager\"\r\n        class=\"font-color-primary\"\r\n        [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n        [pageSize]=\"pageSize\"\r\n        [maxTabs]=\"maxTabs\"\r\n        [pageNumber]=\"pageInfo?.pageNumber\"\r\n        [disablePaginationControls]=\"disablePaginationControls\"\r\n        (pageChanged)=\"onPageChange($event)\">\r\n      </ec-table-pagination>\r\n      @if (searchResults?.items?.length) {\r\n        <div id=\"resultsCount\"\r\n          class=\"ml-auto font-color-hint text-truncate\"\r\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n      }\r\n    </footer>\r\n  }\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\r\n    <footer\r\n      class=\"caption-footer\"\r\n      [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n      @if (!tableCaption) {\r\n        <ng-content\r\n        select=\".searchable-table-footer\"></ng-content>\r\n      }\r\n      @if (tableCaption) {\r\n        <div id=\"tableCaption\"\r\n        [innerHTML]=\"tableCaption\"></div>\r\n      }\r\n      @if (searchResults?.items?.length) {\r\n        <div id=\"resultsCount\"\r\n          class=\"ml-auto text-truncate\"\r\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n      }\r\n    </footer>\r\n  }\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SearchableTableComponent, isStandalone: false, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight", disablePaginationControls: "disablePaginationControls" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideHeader) {\n  <header\n    class=\"d-flex flex-shrink align-items-center mb-3\">\n    @if (!hideSearchControl) {\n      <ec-textbox id=\"{{id}}_searchbox\"\n        class=\"mb-0 flex-grow mr-2\"\n        [autofocus]=\"autofocus\"\n        [formModel]=\"searchModel\"\n        [tabindex]=\"searchboxTabIndex\"\n        [placeholder]=\"searchboxPlaceholder\"\n      [readonly]=\"searchboxReadonly\"></ec-textbox>\n    }\n    <div class=\"flex-grow\">\n      <ng-content select=\".searchable-table-controls\"></ng-content>\n    </div>\n  </header>\n}\n<section id=\"{{id}}_card\"\n  class=\"d-flex flex-column {{overlayClasses}}\"\n  [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n  ecOverlay\n  [status]=\"status.status\"\n  [message]=\"status.message\"\n  [displayAsMask]=\"true\">\n\n  @if(!headerTitleTemplate) {\n    <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n    <ng-content select=\".card-header\"></ng-content>\n  }\n\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n  </ng-container>\n\n  <!-- the default template is an ec-table with proxied-over searchable table inputs.\n  If that doesn't work for you then you can specify a customContentTemplate to use instead\n  and still retain all the event handling, header, footer pagination, etc support -->\n  <ng-template #defaultContentTemplate>\n    <ec-table id=\"{{id}}_table\"\n      class=\"{{tableClasses}}\"\n      [class.is-fixed]=\"tableLayoutFixed\"\n      [sortable]=\"sortable\"\n      [sort]=\"sort\"\n      (sortChange)=\"onSortChange($event)\"\n      [resizable]=\"resizable\"\n      [scrollable]=\"true\"\n      [selectable]=\"selectable\"\n      [selectionContext]=\"selectionContext\"\n      [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n      [resizableColumns]=\"resizableColumns\"\n      [headerTitleTemplate]=\"headerTitleTemplate\">\n      <ng-content></ng-content>\n    </ec-table>\n  </ng-template>\n\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n  @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n    <footer\n      class=\"pagination-footer\"\n      [class.border-top]=\"!customContentTemplate\">\n      <ec-table-pagination id=\"{{id}}_pager\"\n        class=\"font-color-primary\"\n        [totalItems]=\"searchResults.totalItemsBeforePaging\"\n        [pageSize]=\"pageSize\"\n        [maxTabs]=\"maxTabs\"\n        [pageNumber]=\"pageInfo?.pageNumber\"\n        [disablePaginationControls]=\"disablePaginationControls\"\n        (pageChanged)=\"onPageChange($event)\">\n      </ec-table-pagination>\n      @if (searchResults?.items?.length) {\n        <div id=\"resultsCount\"\n          class=\"ml-auto font-color-hint text-truncate\"\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n      }\n    </footer>\n  }\n\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\n  @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n    <footer\n      class=\"caption-footer\"\n      [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n      @if (!tableCaption) {\n        <ng-content\n        select=\".searchable-table-footer\"></ng-content>\n      }\n      @if (tableCaption) {\n        <div id=\"tableCaption\"\n        [innerHTML]=\"tableCaption\"></div>\n      }\n      @if (searchResults?.items?.length) {\n        <div id=\"resultsCount\"\n          class=\"ml-auto text-truncate\"\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n      }\n    </footer>\n  }\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SearchableTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-searchable-table', standalone: false, template: "@if (!hideHeader) {\r\n  <header\r\n    class=\"d-flex flex-shrink align-items-center mb-3\">\r\n    @if (!hideSearchControl) {\r\n      <ec-textbox id=\"{{id}}_searchbox\"\r\n        class=\"mb-0 flex-grow mr-2\"\r\n        [autofocus]=\"autofocus\"\r\n        [formModel]=\"searchModel\"\r\n        [tabindex]=\"searchboxTabIndex\"\r\n        [placeholder]=\"searchboxPlaceholder\"\r\n      [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n    }\r\n    <div class=\"flex-grow\">\r\n      <ng-content select=\".searchable-table-controls\"></ng-content>\r\n    </div>\r\n  </header>\r\n}\r\n<section id=\"{{id}}_card\"\r\n  class=\"d-flex flex-column {{overlayClasses}}\"\r\n  [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n  ecOverlay\r\n  [status]=\"status.status\"\r\n  [message]=\"status.message\"\r\n  [displayAsMask]=\"true\">\r\n\r\n  @if(!headerTitleTemplate) {\r\n    <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\r\n    <ng-content select=\".card-header\"></ng-content>\r\n  }\r\n\r\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n  </ng-container>\r\n\r\n  <!-- the default template is an ec-table with proxied-over searchable table inputs.\r\n  If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n  and still retain all the event handling, header, footer pagination, etc support -->\r\n  <ng-template #defaultContentTemplate>\r\n    <ec-table id=\"{{id}}_table\"\r\n      class=\"{{tableClasses}}\"\r\n      [class.is-fixed]=\"tableLayoutFixed\"\r\n      [sortable]=\"sortable\"\r\n      [sort]=\"sort\"\r\n      (sortChange)=\"onSortChange($event)\"\r\n      [resizable]=\"resizable\"\r\n      [scrollable]=\"true\"\r\n      [selectable]=\"selectable\"\r\n      [selectionContext]=\"selectionContext\"\r\n      [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n      [resizableColumns]=\"resizableColumns\"\r\n      [headerTitleTemplate]=\"headerTitleTemplate\">\r\n      <ng-content></ng-content>\r\n    </ec-table>\r\n  </ng-template>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\r\n    <footer\r\n      class=\"pagination-footer\"\r\n      [class.border-top]=\"!customContentTemplate\">\r\n      <ec-table-pagination id=\"{{id}}_pager\"\r\n        class=\"font-color-primary\"\r\n        [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n        [pageSize]=\"pageSize\"\r\n        [maxTabs]=\"maxTabs\"\r\n        [pageNumber]=\"pageInfo?.pageNumber\"\r\n        [disablePaginationControls]=\"disablePaginationControls\"\r\n        (pageChanged)=\"onPageChange($event)\">\r\n      </ec-table-pagination>\r\n      @if (searchResults?.items?.length) {\r\n        <div id=\"resultsCount\"\r\n          class=\"ml-auto font-color-hint text-truncate\"\r\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n      }\r\n    </footer>\r\n  }\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\r\n    <footer\r\n      class=\"caption-footer\"\r\n      [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n      @if (!tableCaption) {\r\n        <ng-content\r\n        select=\".searchable-table-footer\"></ng-content>\r\n      }\r\n      @if (tableCaption) {\r\n        <div id=\"tableCaption\"\r\n        [innerHTML]=\"tableCaption\"></div>\r\n      }\r\n      @if (searchResults?.items?.length) {\r\n        <div id=\"resultsCount\"\r\n          class=\"ml-auto text-truncate\"\r\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n      }\r\n    </footer>\r\n  }\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
+            args: [{ selector: 'ec-searchable-table', standalone: false, template: "@if (!hideHeader) {\n  <header\n    class=\"d-flex flex-shrink align-items-center mb-3\">\n    @if (!hideSearchControl) {\n      <ec-textbox id=\"{{id}}_searchbox\"\n        class=\"mb-0 flex-grow mr-2\"\n        [autofocus]=\"autofocus\"\n        [formModel]=\"searchModel\"\n        [tabindex]=\"searchboxTabIndex\"\n        [placeholder]=\"searchboxPlaceholder\"\n      [readonly]=\"searchboxReadonly\"></ec-textbox>\n    }\n    <div class=\"flex-grow\">\n      <ng-content select=\".searchable-table-controls\"></ng-content>\n    </div>\n  </header>\n}\n<section id=\"{{id}}_card\"\n  class=\"d-flex flex-column {{overlayClasses}}\"\n  [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n  ecOverlay\n  [status]=\"status.status\"\n  [message]=\"status.message\"\n  [displayAsMask]=\"true\">\n\n  @if(!headerTitleTemplate) {\n    <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n    <ng-content select=\".card-header\"></ng-content>\n  }\n\n  <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n  </ng-container>\n\n  <!-- the default template is an ec-table with proxied-over searchable table inputs.\n  If that doesn't work for you then you can specify a customContentTemplate to use instead\n  and still retain all the event handling, header, footer pagination, etc support -->\n  <ng-template #defaultContentTemplate>\n    <ec-table id=\"{{id}}_table\"\n      class=\"{{tableClasses}}\"\n      [class.is-fixed]=\"tableLayoutFixed\"\n      [sortable]=\"sortable\"\n      [sort]=\"sort\"\n      (sortChange)=\"onSortChange($event)\"\n      [resizable]=\"resizable\"\n      [scrollable]=\"true\"\n      [selectable]=\"selectable\"\n      [selectionContext]=\"selectionContext\"\n      [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n      [resizableColumns]=\"resizableColumns\"\n      [headerTitleTemplate]=\"headerTitleTemplate\">\n      <ng-content></ng-content>\n    </ec-table>\n  </ng-template>\n\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n  @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n    <footer\n      class=\"pagination-footer\"\n      [class.border-top]=\"!customContentTemplate\">\n      <ec-table-pagination id=\"{{id}}_pager\"\n        class=\"font-color-primary\"\n        [totalItems]=\"searchResults.totalItemsBeforePaging\"\n        [pageSize]=\"pageSize\"\n        [maxTabs]=\"maxTabs\"\n        [pageNumber]=\"pageInfo?.pageNumber\"\n        [disablePaginationControls]=\"disablePaginationControls\"\n        (pageChanged)=\"onPageChange($event)\">\n      </ec-table-pagination>\n      @if (searchResults?.items?.length) {\n        <div id=\"resultsCount\"\n          class=\"ml-auto font-color-hint text-truncate\"\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n      }\n    </footer>\n  }\n\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\n  @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n    <footer\n      class=\"caption-footer\"\n      [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n      @if (!tableCaption) {\n        <ng-content\n        select=\".searchable-table-footer\"></ng-content>\n      }\n      @if (tableCaption) {\n        <div id=\"tableCaption\"\n        [innerHTML]=\"tableCaption\"></div>\n      }\n      @if (searchResults?.items?.length) {\n        <div id=\"resultsCount\"\n          class=\"ml-auto text-truncate\"\n        title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n      }\n    </footer>\n  }\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
         }], ctorParameters: () => [{ type: ErrorService }, { type: i3.TranslateService }, { type: RowCountPipe }], propDecorators: { id: [{
                 type: Input
             }], resizable: [{
@@ -8380,11 +8380,11 @@ class ItemPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ItemPickerComponent, isStandalone: false, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\r\n  class=\"d-flex flex-grow card\"\r\n  [status]=\"tableStatus?.status\"\r\n  [message]=\"tableStatus?.message\"\r\n  [displayAsMask]=\"true\">\r\n  <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n    class=\"flex-grow\"\r\n    [fillParentHeight]=\"true\"\r\n    [hideHeader]=\"true\"\r\n    [hideSearchControl]=\"true\"\r\n    [removeCard]=\"true\"\r\n    [pageable]=\"true\"\r\n    [pageSize]=\"50\"\r\n    [objectType]=\"itemName\"\r\n    [formModel]=\"formModel\"\r\n    [ready]=\"ready\"\r\n    [getItems]=\"getItems\"\r\n    [selectable]=\"true\"\r\n    [noDataMessage]=\"noDataMessage\"\r\n    [selectionContext]=\"selectionContext\"\r\n    [status]=\"tableStatus\"\r\n    (itemsChange)=\"onItemsChange($event)\"\r\n    [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n    [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n    [tableLayoutFixed]=\"true\"\r\n    [disablePaginationControls]=\"disablePaginationControls\">\r\n    @if (customAvailableHeaderTemplate) {\r\n      <header\r\n        class=\"card-header flex-shrink\"\r\n        style=\"height: 3rem;\">\r\n        <h3 class=\"card-title\">{{availableTitle | translate}}\r\n          @if (availableTitleHelpPopover) {\r\n            <ec-help-popover id=\"availableTitle_helpPopover\"\r\n              class=\"d-inline-block my-n3 mx-n1\"\r\n              text=\"{{availableTitleHelpPopover | translate}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </h3>\r\n      </header>\r\n    }\r\n    <thead>\r\n      <tr ecTableSelectableRow\r\n        [selectionContext]=\"selectionContext\"\r\n        class=\"border-bottom-0\">\r\n        <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\r\n        <tr ecTableSelectableRow\r\n          [selectionContext]=\"selectionContext\"\r\n          [rowIndex]=\"rowIndex\"\r\n          [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n          [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n          [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n          <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n          </ng-container>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </ec-searchable-table>\r\n\r\n  <section id=\"{{id}}_selectedItems\"\r\n    class=\"selected-items flex-grow d-flex flex-column\">\r\n    @if (selectionContext.isSelectingAllItems) {\r\n      <div\r\n        class=\"d-flex flex-column flex-grow\">\r\n        <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n          style=\"height: 3rem;\">\r\n          <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n          @if (selectedItemsClearable) {\r\n            <button\r\n              ecLinkButton\r\n              id=\"{{id}}_clearSelection\"\r\n              class=\"pl-2 ml-auto\"\r\n              (click)=\"onClearSelectionClick()\"\r\n            translate>ClearSelection_TC</button>\r\n          }\r\n        </header>\r\n        <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n          [style.padding-left.rem]=\"4\"\r\n          [style.padding-right.rem]=\"4\"\r\n        [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n      </div>\r\n    }\r\n    @if (!selectionContext.isSelectingAllItems) {\r\n      <ec-table\r\n        [scrollable]=\"true\"\r\n        class=\"d-flex flex-grow is-fixed\">\r\n        <colgroup>\r\n        <col>\r\n          <col style=\"width: 2rem;\">\r\n        </colgroup>\r\n        <thead>\r\n          <tr style=\"height: 3rem;\">\r\n            <th colspan=\"2\"\r\n              class=\"p-2 border-bottom-0\">\r\n              <div class=\"d-flex align-items-center text-heading-2\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                @if (selectedItemsClearable) {\r\n                  <button\r\n                    ecLinkButton\r\n                    id=\"{{id}}_clearSelection\"\r\n                    class=\"pl-2 ml-auto\"\r\n                    (click)=\"onClearSelectionClick()\"\r\n                  translate>ClearSelection_TC</button>\r\n                }\r\n              </div>\r\n            </th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @if (selectedItems.length) {\r\n            @for (item of selectedItems; track item; let isLast = $last) {\r\n              <tr\r\n                id=\"selected_row_{{item.id}}\"\r\n                [class.border-bottom]=\"!isLast\">\r\n                <td class=\"p-2\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n                  </ng-container>\r\n                </td>\r\n                <td class=\"actions-col text-right\"\r\n                  style=\"vertical-align: middle;\">\r\n                  @if (!item.preventRemove) {\r\n                    <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n                      type=\"icon\"\r\n                      icon=\"ec-icon icon-cancel\"\r\n                      (clicked)=\"removeSelectedItem(item)\">\r\n                    </ec-button>\r\n                  }\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (!selectedItems.length) {\r\n            <tr>\r\n              @if (!noSelectedItemsMessage) {\r\n                <td\r\n                  colspan=\"2\"\r\n                  class=\"p-2 no-data-message\"\r\n                  translate\r\n                [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n              }\r\n              @if (noSelectedItemsMessage) {\r\n                <td\r\n                  colspan=\"2\"\r\n                  class=\"p-2 no-data-message\"\r\n                translate>{{noSelectedItemsMessage}}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </ec-table>\r\n    }\r\n\r\n    @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\r\n      <footer id=\"selectedItemsFooter\"\r\n        class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n        <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n          style=\"height: 1.75rem;\">\r\n          <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n        </div>\r\n      </footer>\r\n    }\r\n  </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n  <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n    <div class=\"d-flex align-items-center \">\r\n      @if (!availableCheckboxText) {\r\n        <div>\r\n          <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n          @if (availableTitleHelpPopover) {\r\n            <ec-help-popover id=\"availableTitle_helpPopover\"\r\n              class=\"d-inline-block my-n3 mx-n1\"\r\n              text=\"{{availableTitleHelpPopover | translate}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </div>\r\n      }\r\n      @if (availableCheckboxText) {\r\n        <span\r\n        id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n      }\r\n      @if (showSelectAllItemsButton) {\r\n        <button\r\n          ecLinkButton\r\n          id=\"selectAllItemsButton\"\r\n          (click)=\"selectAllItems()\"\r\n          class=\"ml-2\">\r\n          {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n  let-item>\r\n  <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n  let-item>\r\n  {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ItemPickerComponent, isStandalone: false, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\n  class=\"d-flex flex-grow card\"\n  [status]=\"tableStatus?.status\"\n  [message]=\"tableStatus?.message\"\n  [displayAsMask]=\"true\">\n  <ec-searchable-table id=\"{{id}}_searchableTable\"\n    class=\"flex-grow\"\n    [fillParentHeight]=\"true\"\n    [hideHeader]=\"true\"\n    [hideSearchControl]=\"true\"\n    [removeCard]=\"true\"\n    [pageable]=\"true\"\n    [pageSize]=\"50\"\n    [objectType]=\"itemName\"\n    [formModel]=\"formModel\"\n    [ready]=\"ready\"\n    [getItems]=\"getItems\"\n    [selectable]=\"true\"\n    [noDataMessage]=\"noDataMessage\"\n    [selectionContext]=\"selectionContext\"\n    [status]=\"tableStatus\"\n    (itemsChange)=\"onItemsChange($event)\"\n    [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n    [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n    [tableLayoutFixed]=\"true\"\n    [disablePaginationControls]=\"disablePaginationControls\">\n    @if (customAvailableHeaderTemplate) {\n      <header\n        class=\"card-header flex-shrink\"\n        style=\"height: 3rem;\">\n        <h3 class=\"card-title\">{{availableTitle | translate}}\n          @if (availableTitleHelpPopover) {\n            <ec-help-popover id=\"availableTitle_helpPopover\"\n              class=\"d-inline-block my-n3 mx-n1\"\n              text=\"{{availableTitleHelpPopover | translate}}\">\n            </ec-help-popover>\n          }\n        </h3>\n      </header>\n    }\n    <thead>\n      <tr ecTableSelectableRow\n        [selectionContext]=\"selectionContext\"\n        class=\"border-bottom-0\">\n        <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n        <tr ecTableSelectableRow\n          [selectionContext]=\"selectionContext\"\n          [rowIndex]=\"rowIndex\"\n          [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n          [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n          [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n          <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n          </ng-container>\n        </tr>\n      }\n    </tbody>\n  </ec-searchable-table>\n\n  <section id=\"{{id}}_selectedItems\"\n    class=\"selected-items flex-grow d-flex flex-column\">\n    @if (selectionContext.isSelectingAllItems) {\n      <div\n        class=\"d-flex flex-column flex-grow\">\n        <header class=\"d-flex align-items-center px-2 text-heading-2\"\n          style=\"height: 3rem;\">\n          <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n          @if (selectedItemsClearable) {\n            <button\n              ecLinkButton\n              id=\"{{id}}_clearSelection\"\n              class=\"pl-2 ml-auto\"\n              (click)=\"onClearSelectionClick()\"\n            translate>ClearSelection_TC</button>\n          }\n        </header>\n        <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n          [style.padding-left.rem]=\"4\"\n          [style.padding-right.rem]=\"4\"\n        [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n      </div>\n    }\n    @if (!selectionContext.isSelectingAllItems) {\n      <ec-table\n        [scrollable]=\"true\"\n        class=\"d-flex flex-grow is-fixed\">\n        <colgroup>\n        <col>\n          <col style=\"width: 2rem;\">\n        </colgroup>\n        <thead>\n          <tr style=\"height: 3rem;\">\n            <th colspan=\"2\"\n              class=\"p-2 border-bottom-0\">\n              <div class=\"d-flex align-items-center text-heading-2\">\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n                @if (selectedItemsClearable) {\n                  <button\n                    ecLinkButton\n                    id=\"{{id}}_clearSelection\"\n                    class=\"pl-2 ml-auto\"\n                    (click)=\"onClearSelectionClick()\"\n                  translate>ClearSelection_TC</button>\n                }\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          @if (selectedItems.length) {\n            @for (item of selectedItems; track item; let isLast = $last) {\n              <tr\n                id=\"selected_row_{{item.id}}\"\n                [class.border-bottom]=\"!isLast\">\n                <td class=\"p-2\">\n                  <ng-container\n                    *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n                  </ng-container>\n                </td>\n                <td class=\"actions-col text-right\"\n                  style=\"vertical-align: middle;\">\n                  @if (!item.preventRemove) {\n                    <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n                      type=\"icon\"\n                      icon=\"ec-icon icon-cancel\"\n                      (clicked)=\"removeSelectedItem(item)\">\n                    </ec-button>\n                  }\n                </td>\n              </tr>\n            }\n          }\n          @if (!selectedItems.length) {\n            <tr>\n              @if (!noSelectedItemsMessage) {\n                <td\n                  colspan=\"2\"\n                  class=\"p-2 no-data-message\"\n                  translate\n                [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n              }\n              @if (noSelectedItemsMessage) {\n                <td\n                  colspan=\"2\"\n                  class=\"p-2 no-data-message\"\n                translate>{{noSelectedItemsMessage}}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </ec-table>\n    }\n\n    @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n      <footer id=\"selectedItemsFooter\"\n        class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n        <div class=\"ml-auto my-2 d-flex align-items-center\"\n          style=\"height: 1.75rem;\">\n          <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n        </div>\n      </footer>\n    }\n  </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n  <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n    <div class=\"d-flex align-items-center \">\n      @if (!availableCheckboxText) {\n        <div>\n          <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n          @if (availableTitleHelpPopover) {\n            <ec-help-popover id=\"availableTitle_helpPopover\"\n              class=\"d-inline-block my-n3 mx-n1\"\n              text=\"{{availableTitleHelpPopover | translate}}\">\n            </ec-help-popover>\n          }\n        </div>\n      }\n      @if (availableCheckboxText) {\n        <span\n        id=\"selectedCount\">{{availableCheckboxText}}</span>\n      }\n      @if (showSelectAllItemsButton) {\n        <button\n          ecLinkButton\n          id=\"selectAllItemsButton\"\n          (click)=\"selectAllItems()\"\n          class=\"ml-2\">\n          {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n        </button>\n      }\n    </div>\n  </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n  let-item>\n  <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n  let-item>\n  {{item.label}}\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ItemPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-item-picker', standalone: false, template: "<div ecOverlay\r\n  class=\"d-flex flex-grow card\"\r\n  [status]=\"tableStatus?.status\"\r\n  [message]=\"tableStatus?.message\"\r\n  [displayAsMask]=\"true\">\r\n  <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n    class=\"flex-grow\"\r\n    [fillParentHeight]=\"true\"\r\n    [hideHeader]=\"true\"\r\n    [hideSearchControl]=\"true\"\r\n    [removeCard]=\"true\"\r\n    [pageable]=\"true\"\r\n    [pageSize]=\"50\"\r\n    [objectType]=\"itemName\"\r\n    [formModel]=\"formModel\"\r\n    [ready]=\"ready\"\r\n    [getItems]=\"getItems\"\r\n    [selectable]=\"true\"\r\n    [noDataMessage]=\"noDataMessage\"\r\n    [selectionContext]=\"selectionContext\"\r\n    [status]=\"tableStatus\"\r\n    (itemsChange)=\"onItemsChange($event)\"\r\n    [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n    [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n    [tableLayoutFixed]=\"true\"\r\n    [disablePaginationControls]=\"disablePaginationControls\">\r\n    @if (customAvailableHeaderTemplate) {\r\n      <header\r\n        class=\"card-header flex-shrink\"\r\n        style=\"height: 3rem;\">\r\n        <h3 class=\"card-title\">{{availableTitle | translate}}\r\n          @if (availableTitleHelpPopover) {\r\n            <ec-help-popover id=\"availableTitle_helpPopover\"\r\n              class=\"d-inline-block my-n3 mx-n1\"\r\n              text=\"{{availableTitleHelpPopover | translate}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </h3>\r\n      </header>\r\n    }\r\n    <thead>\r\n      <tr ecTableSelectableRow\r\n        [selectionContext]=\"selectionContext\"\r\n        class=\"border-bottom-0\">\r\n        <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n      @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\r\n        <tr ecTableSelectableRow\r\n          [selectionContext]=\"selectionContext\"\r\n          [rowIndex]=\"rowIndex\"\r\n          [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n          [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n          [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n          <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n          </ng-container>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </ec-searchable-table>\r\n\r\n  <section id=\"{{id}}_selectedItems\"\r\n    class=\"selected-items flex-grow d-flex flex-column\">\r\n    @if (selectionContext.isSelectingAllItems) {\r\n      <div\r\n        class=\"d-flex flex-column flex-grow\">\r\n        <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n          style=\"height: 3rem;\">\r\n          <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n          @if (selectedItemsClearable) {\r\n            <button\r\n              ecLinkButton\r\n              id=\"{{id}}_clearSelection\"\r\n              class=\"pl-2 ml-auto\"\r\n              (click)=\"onClearSelectionClick()\"\r\n            translate>ClearSelection_TC</button>\r\n          }\r\n        </header>\r\n        <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n          [style.padding-left.rem]=\"4\"\r\n          [style.padding-right.rem]=\"4\"\r\n        [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n      </div>\r\n    }\r\n    @if (!selectionContext.isSelectingAllItems) {\r\n      <ec-table\r\n        [scrollable]=\"true\"\r\n        class=\"d-flex flex-grow is-fixed\">\r\n        <colgroup>\r\n        <col>\r\n          <col style=\"width: 2rem;\">\r\n        </colgroup>\r\n        <thead>\r\n          <tr style=\"height: 3rem;\">\r\n            <th colspan=\"2\"\r\n              class=\"p-2 border-bottom-0\">\r\n              <div class=\"d-flex align-items-center text-heading-2\">\r\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n                @if (selectedItemsClearable) {\r\n                  <button\r\n                    ecLinkButton\r\n                    id=\"{{id}}_clearSelection\"\r\n                    class=\"pl-2 ml-auto\"\r\n                    (click)=\"onClearSelectionClick()\"\r\n                  translate>ClearSelection_TC</button>\r\n                }\r\n              </div>\r\n            </th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @if (selectedItems.length) {\r\n            @for (item of selectedItems; track item; let isLast = $last) {\r\n              <tr\r\n                id=\"selected_row_{{item.id}}\"\r\n                [class.border-bottom]=\"!isLast\">\r\n                <td class=\"p-2\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n                  </ng-container>\r\n                </td>\r\n                <td class=\"actions-col text-right\"\r\n                  style=\"vertical-align: middle;\">\r\n                  @if (!item.preventRemove) {\r\n                    <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n                      type=\"icon\"\r\n                      icon=\"ec-icon icon-cancel\"\r\n                      (clicked)=\"removeSelectedItem(item)\">\r\n                    </ec-button>\r\n                  }\r\n                </td>\r\n              </tr>\r\n            }\r\n          }\r\n          @if (!selectedItems.length) {\r\n            <tr>\r\n              @if (!noSelectedItemsMessage) {\r\n                <td\r\n                  colspan=\"2\"\r\n                  class=\"p-2 no-data-message\"\r\n                  translate\r\n                [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n              }\r\n              @if (noSelectedItemsMessage) {\r\n                <td\r\n                  colspan=\"2\"\r\n                  class=\"p-2 no-data-message\"\r\n                translate>{{noSelectedItemsMessage}}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </ec-table>\r\n    }\r\n\r\n    @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\r\n      <footer id=\"selectedItemsFooter\"\r\n        class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n        <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n          style=\"height: 1.75rem;\">\r\n          <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n        </div>\r\n      </footer>\r\n    }\r\n  </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n  <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n    <div class=\"d-flex align-items-center \">\r\n      @if (!availableCheckboxText) {\r\n        <div>\r\n          <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n          @if (availableTitleHelpPopover) {\r\n            <ec-help-popover id=\"availableTitle_helpPopover\"\r\n              class=\"d-inline-block my-n3 mx-n1\"\r\n              text=\"{{availableTitleHelpPopover | translate}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </div>\r\n      }\r\n      @if (availableCheckboxText) {\r\n        <span\r\n        id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n      }\r\n      @if (showSelectAllItemsButton) {\r\n        <button\r\n          ecLinkButton\r\n          id=\"selectAllItemsButton\"\r\n          (click)=\"selectAllItems()\"\r\n          class=\"ml-2\">\r\n          {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n  let-item>\r\n  <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n  let-item>\r\n  {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"] }]
+            args: [{ selector: 'ec-item-picker', standalone: false, template: "<div ecOverlay\n  class=\"d-flex flex-grow card\"\n  [status]=\"tableStatus?.status\"\n  [message]=\"tableStatus?.message\"\n  [displayAsMask]=\"true\">\n  <ec-searchable-table id=\"{{id}}_searchableTable\"\n    class=\"flex-grow\"\n    [fillParentHeight]=\"true\"\n    [hideHeader]=\"true\"\n    [hideSearchControl]=\"true\"\n    [removeCard]=\"true\"\n    [pageable]=\"true\"\n    [pageSize]=\"50\"\n    [objectType]=\"itemName\"\n    [formModel]=\"formModel\"\n    [ready]=\"ready\"\n    [getItems]=\"getItems\"\n    [selectable]=\"true\"\n    [noDataMessage]=\"noDataMessage\"\n    [selectionContext]=\"selectionContext\"\n    [status]=\"tableStatus\"\n    (itemsChange)=\"onItemsChange($event)\"\n    [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n    [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n    [tableLayoutFixed]=\"true\"\n    [disablePaginationControls]=\"disablePaginationControls\">\n    @if (customAvailableHeaderTemplate) {\n      <header\n        class=\"card-header flex-shrink\"\n        style=\"height: 3rem;\">\n        <h3 class=\"card-title\">{{availableTitle | translate}}\n          @if (availableTitleHelpPopover) {\n            <ec-help-popover id=\"availableTitle_helpPopover\"\n              class=\"d-inline-block my-n3 mx-n1\"\n              text=\"{{availableTitleHelpPopover | translate}}\">\n            </ec-help-popover>\n          }\n        </h3>\n      </header>\n    }\n    <thead>\n      <tr ecTableSelectableRow\n        [selectionContext]=\"selectionContext\"\n        class=\"border-bottom-0\">\n        <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n      </tr>\n    </thead>\n\n    <tbody>\n      @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n        <tr ecTableSelectableRow\n          [selectionContext]=\"selectionContext\"\n          [rowIndex]=\"rowIndex\"\n          [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n          [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n          [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n          <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n          </ng-container>\n        </tr>\n      }\n    </tbody>\n  </ec-searchable-table>\n\n  <section id=\"{{id}}_selectedItems\"\n    class=\"selected-items flex-grow d-flex flex-column\">\n    @if (selectionContext.isSelectingAllItems) {\n      <div\n        class=\"d-flex flex-column flex-grow\">\n        <header class=\"d-flex align-items-center px-2 text-heading-2\"\n          style=\"height: 3rem;\">\n          <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n          @if (selectedItemsClearable) {\n            <button\n              ecLinkButton\n              id=\"{{id}}_clearSelection\"\n              class=\"pl-2 ml-auto\"\n              (click)=\"onClearSelectionClick()\"\n            translate>ClearSelection_TC</button>\n          }\n        </header>\n        <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n          [style.padding-left.rem]=\"4\"\n          [style.padding-right.rem]=\"4\"\n        [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n      </div>\n    }\n    @if (!selectionContext.isSelectingAllItems) {\n      <ec-table\n        [scrollable]=\"true\"\n        class=\"d-flex flex-grow is-fixed\">\n        <colgroup>\n        <col>\n          <col style=\"width: 2rem;\">\n        </colgroup>\n        <thead>\n          <tr style=\"height: 3rem;\">\n            <th colspan=\"2\"\n              class=\"p-2 border-bottom-0\">\n              <div class=\"d-flex align-items-center text-heading-2\">\n                <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n                @if (selectedItemsClearable) {\n                  <button\n                    ecLinkButton\n                    id=\"{{id}}_clearSelection\"\n                    class=\"pl-2 ml-auto\"\n                    (click)=\"onClearSelectionClick()\"\n                  translate>ClearSelection_TC</button>\n                }\n              </div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          @if (selectedItems.length) {\n            @for (item of selectedItems; track item; let isLast = $last) {\n              <tr\n                id=\"selected_row_{{item.id}}\"\n                [class.border-bottom]=\"!isLast\">\n                <td class=\"p-2\">\n                  <ng-container\n                    *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n                  </ng-container>\n                </td>\n                <td class=\"actions-col text-right\"\n                  style=\"vertical-align: middle;\">\n                  @if (!item.preventRemove) {\n                    <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n                      type=\"icon\"\n                      icon=\"ec-icon icon-cancel\"\n                      (clicked)=\"removeSelectedItem(item)\">\n                    </ec-button>\n                  }\n                </td>\n              </tr>\n            }\n          }\n          @if (!selectedItems.length) {\n            <tr>\n              @if (!noSelectedItemsMessage) {\n                <td\n                  colspan=\"2\"\n                  class=\"p-2 no-data-message\"\n                  translate\n                [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n              }\n              @if (noSelectedItemsMessage) {\n                <td\n                  colspan=\"2\"\n                  class=\"p-2 no-data-message\"\n                translate>{{noSelectedItemsMessage}}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </ec-table>\n    }\n\n    @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n      <footer id=\"selectedItemsFooter\"\n        class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n        <div class=\"ml-auto my-2 d-flex align-items-center\"\n          style=\"height: 1.75rem;\">\n          <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n        </div>\n      </footer>\n    }\n  </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n  <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n    <div class=\"d-flex align-items-center \">\n      @if (!availableCheckboxText) {\n        <div>\n          <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n          @if (availableTitleHelpPopover) {\n            <ec-help-popover id=\"availableTitle_helpPopover\"\n              class=\"d-inline-block my-n3 mx-n1\"\n              text=\"{{availableTitleHelpPopover | translate}}\">\n            </ec-help-popover>\n          }\n        </div>\n      }\n      @if (availableCheckboxText) {\n        <span\n        id=\"selectedCount\">{{availableCheckboxText}}</span>\n      }\n      @if (showSelectAllItemsButton) {\n        <button\n          ecLinkButton\n          id=\"selectAllItemsButton\"\n          (click)=\"selectAllItems()\"\n          class=\"ml-2\">\n          {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n        </button>\n      }\n    </div>\n  </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n  let-item>\n  <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n  let-item>\n  {{item.label}}\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"] }]
         }], ctorParameters: () => [{ type: i3.TranslateService }], propDecorators: { id: [{
                 type: Input
             }], availableTitle: [{
@@ -9175,11 +9175,11 @@ class MultiselectComponent extends FormControlBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-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:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin: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 ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--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)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--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)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.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 .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"textbox-group control-input\"\n    *ecPopup=\"dropdownmenu\">\n    <div class=\"multiselect-input\"\n      [attr.id]=\"id + '_input_container'\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-owns]=\"id + '_menu_list'\"\n      [class.is-focused]=\"menuStatus === 'visible'\"\n      [class.is-disabled]=\"formModel.disabled\"\n      [class.is-empty]=\"selectedItems.length === 0\"\n      [class.is-required]=\"required\"\n      [class.has-selections]=\"selectedItems.length > 0\"\n      (click)=\"toggleMenu($event)\">\n\n      <!-- Selected tags -->\n      @if (selectedTags.length > 0) {\n        <ec-tags\n          id=\"{{id}}_tags\"\n          [tags]=\"selectedTags\"\n          [wrap]=\"true\"\n          [isCondensed]=\"false\"\n          [isSubtle]=\"true\"\n          (tagClosed)=\"removeTag($event)\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-tags>\n      }\n\n      <!-- Filter input -->\n      <input\n        #filterInput\n        class=\"multiselect-filter-input\"\n        type=\"text\"\n        [id]=\"id + '_filter'\"\n        [formControl]=\"filterFormModel\"\n        [placeholder]=\"effectivePlaceholder\"\n        [tabindex]=\"tabindex\"\n        (input)=\"onFilterInput()\"\n        (keydown)=\"keyNavigate($event)\"\n        (focusout)=\"onBlur()\"\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId\"\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n      <i class=\"ec-icon icon-required\"></i>\n      <i class=\"ec-icon icon-invalid\"></i>\n    </div>\n\n    <!-- Live region for selection announcements -->\n    <span [id]=\"id + '_selection_status'\"\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n    </span>\n\n    <!-- Clear button -->\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n      <ec-button class=\"multiselect-clear-btn\"\n        [id]=\"id + '_clear'\"\n        icon=\"icon-cancel\"\n        type=\"secondary\"\n        [tabindex]=\"0\"\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n        (click)=\"clearAll(); $event.stopPropagation()\">\n      </ec-button>\n    }\n\n    <!-- Toggle button -->\n    <ec-button class=\"textbox-group-btn-right\"\n      [id]=\"id + '_button'\"\n      [disabled]=\"formModel.disabled\"\n      icon=\"icon-caret-down\"\n      [tabindex]=\"0\"\n      type=\"secondary\"\n      [attr.aria-label]=\"'Toggle dropdown'\"\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\n      (click)=\"toggleMenu($event)\"\n      [class.active]=\"menuStatus === 'visible'\">\n    </ec-button>\n  </div>\n</div>\n\n<ng-template #dropdownmenu>\n  <div class=\"popup\"\n    ecOverlay\n    role=\"listbox\"\n    [attr.id]=\"id + '_listbox'\"\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n    aria-multiselectable=\"true\"\n    [status]=\"'hasData'\">\n\n    <ec-menu id=\"{{id}}_menu\"\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n      [templateType]=\"'checkAndLabel'\"\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n      [noDataText]=\"noMatchesText\"\n      [items]=\"filteredOptions\"\n      [selected]=\"highlightedItem\"\n      (selectedChanged)=\"onItemSelected($event)\"\n      [truncateItems]=\"truncateItems\"\n      [maintainSelectedItem]=\"false\">\n    </ec-menu>\n\n    @if (showAddCustomOption) {\n      <div class=\"add-custom-option\"\n        role=\"option\"\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n        tabindex=\"-1\"\n        (click)=\"addCustomItem()\">\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"d-flex\"\n    role=\"option\"\n    [attr.aria-selected]=\"!!item.checked\"\n    [attr.aria-label]=\"item.label\">\n    @if (item === selectAllItem) {\n      <ec-checkbox\n        id=\"{{id}}_selectAll_checkbox\"\n        class=\"m-0 pr-3\"\n        [formModel]=\"selectAllFormControl\"\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n        [label]=\"item.label\"\n        (click)=\"$event.stopPropagation()\">\n      </ec-checkbox>\n    } @else {\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0 pr-3\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"item.label\"\n          [icon]=\"item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n      } @else {\n        <span>{{item.label}}</span>\n      }\n    }\n  </div>\n</ng-template>\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-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:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin: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 ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--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)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--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)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.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 .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-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:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin: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 ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--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)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--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)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.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 .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"textbox-group control-input\"\n    *ecPopup=\"dropdownmenu\">\n    <div class=\"multiselect-input\"\n      [attr.id]=\"id + '_input_container'\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-owns]=\"id + '_menu_list'\"\n      [class.is-focused]=\"menuStatus === 'visible'\"\n      [class.is-disabled]=\"formModel.disabled\"\n      [class.is-empty]=\"selectedItems.length === 0\"\n      [class.is-required]=\"required\"\n      [class.has-selections]=\"selectedItems.length > 0\"\n      (click)=\"toggleMenu($event)\">\n\n      <!-- Selected tags -->\n      @if (selectedTags.length > 0) {\n        <ec-tags\n          id=\"{{id}}_tags\"\n          [tags]=\"selectedTags\"\n          [wrap]=\"true\"\n          [isCondensed]=\"false\"\n          [isSubtle]=\"true\"\n          (tagClosed)=\"removeTag($event)\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-tags>\n      }\n\n      <!-- Filter input -->\n      <input\n        #filterInput\n        class=\"multiselect-filter-input\"\n        type=\"text\"\n        [id]=\"id + '_filter'\"\n        [formControl]=\"filterFormModel\"\n        [placeholder]=\"effectivePlaceholder\"\n        [tabindex]=\"tabindex\"\n        (input)=\"onFilterInput()\"\n        (keydown)=\"keyNavigate($event)\"\n        (focusout)=\"onBlur()\"\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n        [attr.aria-activedescendant]=\"activeDescendantId\"\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n      <i class=\"ec-icon icon-required\"></i>\n      <i class=\"ec-icon icon-invalid\"></i>\n    </div>\n\n    <!-- Live region for selection announcements -->\n    <span [id]=\"id + '_selection_status'\"\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n    </span>\n\n    <!-- Clear button -->\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n      <ec-button class=\"multiselect-clear-btn\"\n        [id]=\"id + '_clear'\"\n        icon=\"icon-cancel\"\n        type=\"secondary\"\n        [tabindex]=\"0\"\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n        (click)=\"clearAll(); $event.stopPropagation()\">\n      </ec-button>\n    }\n\n    <!-- Toggle button -->\n    <ec-button class=\"textbox-group-btn-right\"\n      [id]=\"id + '_button'\"\n      [disabled]=\"formModel.disabled\"\n      icon=\"icon-caret-down\"\n      [tabindex]=\"0\"\n      type=\"secondary\"\n      [attr.aria-label]=\"'Toggle dropdown'\"\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\n      (click)=\"toggleMenu($event)\"\n      [class.active]=\"menuStatus === 'visible'\">\n    </ec-button>\n  </div>\n</div>\n\n<ng-template #dropdownmenu>\n  <div class=\"popup\"\n    ecOverlay\n    role=\"listbox\"\n    [attr.id]=\"id + '_listbox'\"\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n    aria-multiselectable=\"true\"\n    [status]=\"'hasData'\">\n\n    <ec-menu id=\"{{id}}_menu\"\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n      [templateType]=\"'checkAndLabel'\"\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n      [noDataText]=\"noMatchesText\"\n      [items]=\"filteredOptions\"\n      [selected]=\"highlightedItem\"\n      (selectedChanged)=\"onItemSelected($event)\"\n      [truncateItems]=\"truncateItems\"\n      [maintainSelectedItem]=\"false\">\n    </ec-menu>\n\n    @if (showAddCustomOption) {\n      <div class=\"add-custom-option\"\n        role=\"option\"\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n        tabindex=\"-1\"\n        (click)=\"addCustomItem()\">\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"d-flex\"\n    role=\"option\"\n    [attr.aria-selected]=\"!!item.checked\"\n    [attr.aria-label]=\"item.label\">\n    @if (item === selectAllItem) {\n      <ec-checkbox\n        id=\"{{id}}_selectAll_checkbox\"\n        class=\"m-0 pr-3\"\n        [formModel]=\"selectAllFormControl\"\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n        [label]=\"item.label\"\n        (click)=\"$event.stopPropagation()\">\n      </ec-checkbox>\n    } @else {\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0 pr-3\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"item.label\"\n          [icon]=\"item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n      } @else {\n        <span>{{item.label}}</span>\n      }\n    }\n  </div>\n</ng-template>\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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-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:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}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}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin: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 ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--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)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--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)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.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 .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -9577,11 +9577,11 @@ class NumericboxComponent extends FormControlBase {
         return unitsEl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NumericboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NumericboxComponent, isStandalone: false, 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\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\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>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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)}.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:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.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,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.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: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NumericboxComponent, isStandalone: false, 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}}\"\n  [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n  for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n  decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n  as we would push them past the limit -->\n  <ec-textbox [id]=\"id\"\n    #textbox\n    class=\"control-input mb-0\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n    [autofocus]=\"autofocus\"\n    [formModel]=\"textboxFormModel\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n    [tooltip]=\"tooltip\"\n    (focusout)=\"onFocusOut()\">\n  </ec-textbox>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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)}.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:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.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,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.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: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NumericboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-numericbox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n  [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\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>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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)}.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:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.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,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.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', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n  [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n  for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n  decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n  as we would push them past the limit -->\n  <ec-textbox [id]=\"id\"\n    #textbox\n    class=\"control-input mb-0\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n    [autofocus]=\"autofocus\"\n    [formModel]=\"textboxFormModel\"\n    [required]=\"required\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n    [tooltip]=\"tooltip\"\n    (focusout)=\"onFocusOut()\">\n  </ec-textbox>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}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)}.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:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.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,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.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: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
                 type: Input
             }], decimals: [{
@@ -9663,11 +9663,11 @@ class RadioButtonComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RadioButtonComponent, isStandalone: false, 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\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\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    @if (type === 'toggle') {\r\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\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            @if (option.icon) {\r\n              <i class=\"ec-icon {{option.icon}}\"\r\n              ></i>\r\n            }\r\n            @if (option.label) {\r\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n              >{{option.label | translate}}</span>\r\n            }\r\n          </label>\r\n        }\r\n        <a>\r\n          <div class=\"toggle-handle\"></div>\r\n        </a>\r\n        <div class=\"toggle-focused\"></div>\r\n      }\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      @if (type === 'radio') {\r\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\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              @if (option.label) {\r\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                  class=\"label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n              }\r\n            </label>\r\n          }\r\n        }\r\n\r\n      </div>\r\n\r\n    </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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);color:var(--ec-form-control-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: 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RadioButtonComponent, isStandalone: false, 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\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\"\n              ></i>\n            }\n            @if (option.label) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\n    </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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);color:var(--ec-form-control-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: 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-radiobutton', standalone: false, template: "<div class=\"control\"\r\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors | translate}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\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    @if (type === 'toggle') {\r\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\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            @if (option.icon) {\r\n              <i class=\"ec-icon {{option.icon}}\"\r\n              ></i>\r\n            }\r\n            @if (option.label) {\r\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n              >{{option.label | translate}}</span>\r\n            }\r\n          </label>\r\n        }\r\n        <a>\r\n          <div class=\"toggle-handle\"></div>\r\n        </a>\r\n        <div class=\"toggle-focused\"></div>\r\n      }\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      @if (type === 'radio') {\r\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\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              @if (option.label) {\r\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                  class=\"label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n              }\r\n            </label>\r\n          }\r\n        }\r\n\r\n      </div>\r\n\r\n    </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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);color:var(--ec-form-control-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', standalone: false, template: "<div class=\"control\"\n  [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n  @if (label) {\n    <label>\n      <span>{{label | translate}}</span>\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n        <span>&nbsp;{{validationErrors | translate}}</span>\n      }\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n    [ngClass]=\"currentClasses\"\n    [class.is-disabled]=\"formModel.disabled\"\n    [class.is-readonly]=\"readonly\">\n\n    <!-- RadioButton type=\"toggle\"-->\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n    @if (type === 'toggle') {\n      @for (option of options; track option; let i = $index; let isFirst = $first) {\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n        the tabbing did not work, and with the other the controls were all linked together.  They both need set\n        for the best of both worlds -->\n        <input [attr.id]=\"inputId + i.toString()\"\n          [formControl]=\"formModel\"\n          type=\"radio\"\n          tabindex=\"{{tabindex}}\"\n          [value]=\"option.value\"\n          #radioInput\n          name=\"{{name}}\"\n          attr.name=\"{{name}}\"\n          [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n          <label [attr.for]=\"inputId + i.toString()\"\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            @if (option.icon) {\n              <i class=\"ec-icon {{option.icon}}\"\n              ></i>\n            }\n            @if (option.label) {\n              <span id=\"{{inputId}}_label{{i.toString()}}\"\n              >{{option.label | translate}}</span>\n            }\n          </label>\n        }\n        <a>\n          <div class=\"toggle-handle\"></div>\n        </a>\n        <div class=\"toggle-focused\"></div>\n      }\n\n      <!-- RadioButton type=\"radio\"-->\n      <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n      @if (type === 'radio') {\n        @for (option of options; track option; let i = $index; let isFirst = $first) {\n          <label class='radio-button'\n            title=\"{{ (option.tooltip ?? '') | translate}}\">\n            <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\n            the tabbing did not work, and with the other the controls were all linked together.  They both need set\n            for the best of both worlds -->\n            <input [attr.id]=\"inputId + i.toString()\"\n              class=\"input\"\n              [formControl]=\"formModel\"\n              type=\"radio\"\n              value=\"{{option.value}}\"\n              #radioInput\n              tabindex=\"{{tabindex}}\"\n              name=\"{{name}}\"\n              attr.name=\"{{name}}\"\n              [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n              <span class=\"indicator\"></span>\n              @if (option.label) {\n                <span id=\"{{inputId}}_label{{i.toString()}}\"\n                  class=\"label\"\n                [innerHtml]=\"option.label | translate\"></span>\n              }\n            </label>\n          }\n        }\n\n      </div>\n\n    </div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}: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)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.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);color:var(--ec-form-control-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: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { type: [{
                 type: Input
             }], options: [{
@@ -9747,11 +9747,11 @@ class SelectComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label\r\n      for=\"{{id}}_select\">\r\n      <span>{{label | translate}}</span>\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <select [attr.id]=\"inputId\"\r\n    tabindex=\"{{tabindex}}\"\r\n    [formControl]=\"formModel\"\r\n    [attr.required]=\"required\"\r\n    [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    @if (!required) {\r\n      <option\r\n      [ngValue]=\"null\">{{placeholder}}</option>\r\n    }\r\n    @for (option of options; track option) {\r\n      <option\r\n      [ngValue]=\"option.value\">{{option.label}}</option>\r\n    }\r\n  </select>\r\n  <i class=\"ec-icon icon-caret-down\"></i>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host 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}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\"></i>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host 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}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-select', standalone: false, template: "<div class=\"control\"\r\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label\r\n      for=\"{{id}}_select\">\r\n      <span>{{label | translate}}</span>\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <select [attr.id]=\"inputId\"\r\n    tabindex=\"{{tabindex}}\"\r\n    [formControl]=\"formModel\"\r\n    [attr.required]=\"required\"\r\n    [attr.cdkFocusInitial]=\"autofocus || null\">\r\n    @if (!required) {\r\n      <option\r\n      [ngValue]=\"null\">{{placeholder}}</option>\r\n    }\r\n    @for (option of options; track option) {\r\n      <option\r\n      [ngValue]=\"option.value\">{{option.label}}</option>\r\n    }\r\n  </select>\r\n  <i class=\"ec-icon icon-caret-down\"></i>\r\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host 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}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
+            args: [{ selector: 'ec-select', standalone: false, template: "<div class=\"control\"\n  [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n  @if (label) {\n    <label\n      for=\"{{id}}_select\">\n      <span>{{label | translate}}</span>\n      @if (helpPopover) {\n        <ec-help-popover id=\"{{id}}_helpPopover\"\n          class=\"d-inline-block my-n3 mx-n1\"\n          text=\"{{helpPopover | translate}}\"\n          contentPosition=\"{{helpPopoverPosition}}\">\n        </ec-help-popover>\n      }\n    </label>\n  }\n\n  <select [attr.id]=\"inputId\"\n    tabindex=\"{{tabindex}}\"\n    [formControl]=\"formModel\"\n    [attr.required]=\"required\"\n    [attr.cdkFocusInitial]=\"autofocus || null\">\n    @if (!required) {\n      <option\n      [ngValue]=\"null\">{{placeholder}}</option>\n    }\n    @for (option of options; track option) {\n      <option\n      [ngValue]=\"option.value\">{{option.label}}</option>\n    }\n  </select>\n  <i class=\"ec-icon icon-caret-down\"></i>\n</div>", 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)}: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:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}: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-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~.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:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host 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}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], options: [{
@@ -9908,11 +9908,11 @@ class AppBarComponent {
         this.menuItems = [...this.userItem, ...this.userMenuItems];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\r\n  @if(!hideAppIcon) {\r\n    <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\r\n  }\r\n  <ng-content select=\".app-bar-logo\"></ng-content>\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ng-template #avatar>\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </ng-template>\r\n  @if (userMenuItems.length) {\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               [items]=\"menuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n  } @else {\r\n  <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\r\n  }\r\n</section>\r\n\r\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n  @if(!hideAppIcon) {\n    <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n  }\n  <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n  <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n  <ng-content select=\".app-bar-actions\"></ng-content>\n  <ng-template #avatar>\n    <ec-avatar [user]=\"user\"></ec-avatar>\n  </ng-template>\n  @if (userMenuItems.length) {\n  <ec-dropdown id=\"AppBarUserMenu\"\n               [items]=\"menuItems\"\n               [buttonCustomTemplate]=\"avatar\"\n               [showArrow]=\"false\"\n               [menuWidth]=\"userMenuWidth\"\n               [menuMinWidth]=\"userMenuMinWidth\"\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n  }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-app-bar', standalone: false, template: "<section class=\"logo-container\">\r\n  @if(!hideAppIcon) {\r\n    <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\r\n  }\r\n  <ng-content select=\".app-bar-logo\"></ng-content>\r\n</section>\r\n\r\n<section class=\"title-container\">\r\n  <ng-content select=\".app-bar-title\"></ng-content>\r\n</section>\r\n\r\n<section class=\"actions-container\">\r\n  <ng-content select=\".app-bar-actions\"></ng-content>\r\n  <ng-template #avatar>\r\n    <ec-avatar [user]=\"user\"></ec-avatar>\r\n  </ng-template>\r\n  @if (userMenuItems.length) {\r\n  <ec-dropdown id=\"AppBarUserMenu\"\r\n               [items]=\"menuItems\"\r\n               [buttonCustomTemplate]=\"avatar\"\r\n               [showArrow]=\"false\"\r\n               [menuWidth]=\"userMenuWidth\"\r\n               [menuMinWidth]=\"userMenuMinWidth\"\r\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\r\n  } @else {\r\n  <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\r\n  }\r\n</section>\r\n\r\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
+            args: [{ selector: 'ec-app-bar', standalone: false, template: "<section class=\"logo-container\">\n  @if(!hideAppIcon) {\n    <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n  }\n  <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n  <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n  <ng-content select=\".app-bar-actions\"></ng-content>\n  <ng-template #avatar>\n    <ec-avatar [user]=\"user\"></ec-avatar>\n  </ng-template>\n  @if (userMenuItems.length) {\n  <ec-dropdown id=\"AppBarUserMenu\"\n               [items]=\"menuItems\"\n               [buttonCustomTemplate]=\"avatar\"\n               [showArrow]=\"false\"\n               [menuWidth]=\"userMenuWidth\"\n               [menuMinWidth]=\"userMenuMinWidth\"\n               [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n  }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
         }], ctorParameters: () => [{ type: AvatarService }], propDecorators: { user: [{
                 type: Input
             }], userMenuItems: [{
@@ -10070,11 +10070,11 @@ class ConfirmComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [action]=\"status?.action\"\r\n  [noDataTemplate]=\"inlineConfirmResult\"\r\n  overlayClassList=\"p-0\"\r\n  class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      @if (context?.title) {\r\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\r\n      }\r\n      @if (error) {\r\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      }\r\n      @if (context?.message) {\r\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      }\r\n\r\n      @if (context?.checkConfirm) {\r\n        <ec-checkbox\r\n          [formModel]=\"formGroup.get('checkbox')\"\r\n          name=\"confirmCheckbox\"\r\n          [label]=\"context?.checkboxText\"\r\n          [autofocus]=\"true\"\r\n        ></ec-checkbox>\r\n      }\r\n      @if (showTextBox) {\r\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      }\r\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\r\n        <ec-textbox id=\"confirmTextbox\"\r\n          [autofocus]=\"true\"\r\n          [formModel]=\"formGroup.get('textbox')\"\r\n          [required]=\"context?.textboxRequired\"\r\n          [label]=\"context?.textboxLabel\"\r\n          [type]=\"context?.textboxType\"\r\n          [rows]=\"context?.textareaRows\"\r\n          [placeholder]=\"context?.textboxPlaceholder\"\r\n          [upperCase]=\"context?.textboxUppercase\">\r\n        </ec-textbox>\r\n      }\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n        class=\"ml-2\"\r\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n        [autofocus]=\"!context?.textboxType\"\r\n        [isSubmit]=\"context?.saveOnEnter\"\r\n        (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      @if (context?.alternateSaveLabel) {\r\n        <ec-button id=\"alternateSaveConfirmButton\"\r\n          class=\"ml-2\"\r\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n          [label]=\"context?.alternateSaveLabel\"\r\n          (clicked)=\"onSave('alternate')\">\r\n        </ec-button>\r\n      }\r\n      @if (!context?.hideCancel) {\r\n        <ec-button\r\n          id=\"cancelConfirmButton\"\r\n          class=\"ml-auto\"\r\n          type=\"secondary\"\r\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n          (clicked)=\"onCancel()\">\r\n        </ec-button>\r\n      }\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n        label=\"Close\"\r\n        type=\"secondary\"\r\n        class=\"ml-auto\"\r\n        (clicked)=\"status?.action?.onClick!()\"\r\n        [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-confirm', standalone: false, template: "<section ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [action]=\"status?.action\"\r\n  [noDataTemplate]=\"inlineConfirmResult\"\r\n  overlayClassList=\"p-0\"\r\n  class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      @if (context?.title) {\r\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\r\n      }\r\n      @if (error) {\r\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      }\r\n      @if (context?.message) {\r\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      }\r\n\r\n      @if (context?.checkConfirm) {\r\n        <ec-checkbox\r\n          [formModel]=\"formGroup.get('checkbox')\"\r\n          name=\"confirmCheckbox\"\r\n          [label]=\"context?.checkboxText\"\r\n          [autofocus]=\"true\"\r\n        ></ec-checkbox>\r\n      }\r\n      @if (showTextBox) {\r\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      }\r\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\r\n        <ec-textbox id=\"confirmTextbox\"\r\n          [autofocus]=\"true\"\r\n          [formModel]=\"formGroup.get('textbox')\"\r\n          [required]=\"context?.textboxRequired\"\r\n          [label]=\"context?.textboxLabel\"\r\n          [type]=\"context?.textboxType\"\r\n          [rows]=\"context?.textareaRows\"\r\n          [placeholder]=\"context?.textboxPlaceholder\"\r\n          [upperCase]=\"context?.textboxUppercase\">\r\n        </ec-textbox>\r\n      }\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n        class=\"ml-2\"\r\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n        [autofocus]=\"!context?.textboxType\"\r\n        [isSubmit]=\"context?.saveOnEnter\"\r\n        (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      @if (context?.alternateSaveLabel) {\r\n        <ec-button id=\"alternateSaveConfirmButton\"\r\n          class=\"ml-2\"\r\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n          [label]=\"context?.alternateSaveLabel\"\r\n          (clicked)=\"onSave('alternate')\">\r\n        </ec-button>\r\n      }\r\n      @if (!context?.hideCancel) {\r\n        <ec-button\r\n          id=\"cancelConfirmButton\"\r\n          class=\"ml-auto\"\r\n          type=\"secondary\"\r\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n          (clicked)=\"onCancel()\">\r\n        </ec-button>\r\n      }\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n        label=\"Close\"\r\n        type=\"secondary\"\r\n        class=\"ml-auto\"\r\n        (clicked)=\"status?.action?.onClick!()\"\r\n        [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
+            args: [{ selector: 'ec-confirm', standalone: false, template: "<section ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [action]=\"status?.action\"\n  [noDataTemplate]=\"inlineConfirmResult\"\n  overlayClassList=\"p-0\"\n  class=\"bg-body flex-grow d-flex\">\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n    <section class=\"flex-grow\">\n      @if (context?.title) {\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n      }\n      @if (error) {\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n      }\n      @if (context?.message) {\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n      }\n\n      @if (context?.checkConfirm) {\n        <ec-checkbox\n          [formModel]=\"formGroup.get('checkbox')\"\n          name=\"confirmCheckbox\"\n          [label]=\"context?.checkboxText\"\n          [autofocus]=\"true\"\n        ></ec-checkbox>\n      }\n      @if (showTextBox) {\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n      }\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n        <ec-textbox id=\"confirmTextbox\"\n          [autofocus]=\"true\"\n          [formModel]=\"formGroup.get('textbox')\"\n          [required]=\"context?.textboxRequired\"\n          [label]=\"context?.textboxLabel\"\n          [type]=\"context?.textboxType\"\n          [rows]=\"context?.textareaRows\"\n          [placeholder]=\"context?.textboxPlaceholder\"\n          [upperCase]=\"context?.textboxUppercase\">\n        </ec-textbox>\n      }\n    </section>\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n      <ec-button id=\"saveConfirmButton\"\n        class=\"ml-2\"\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n        [autofocus]=\"!context?.textboxType\"\n        [isSubmit]=\"context?.saveOnEnter\"\n        (clicked)=\"onSave('primary')\">\n      </ec-button>\n      @if (context?.alternateSaveLabel) {\n        <ec-button id=\"alternateSaveConfirmButton\"\n          class=\"ml-2\"\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n          [label]=\"context?.alternateSaveLabel\"\n          (clicked)=\"onSave('alternate')\">\n        </ec-button>\n      }\n      @if (!context?.hideCancel) {\n        <ec-button\n          id=\"cancelConfirmButton\"\n          class=\"ml-auto\"\n          type=\"secondary\"\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n          (clicked)=\"onCancel()\">\n        </ec-button>\n      }\n    </footer>\n  </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n    <div class=\"d-flex\">\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n      <div [innerHTML]=\"status?.message | translate\"></div>\n    </div>\n    <div class=\"d-flex pt-2 mt-auto\">\n      <ec-button id=\"inlineConfirmClose\"\n        label=\"Close\"\n        type=\"secondary\"\n        class=\"ml-auto\"\n        (clicked)=\"status?.action?.onClick!()\"\n        [autofocus]=\"true\">\n      </ec-button>\n    </div>\n  </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }], onDialogSave: [{
@@ -10550,11 +10550,11 @@ class DialogGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DialogGroupComponent, isStandalone: false, selector: "ec-dialog-group", ngImport: i0, template: "@for (dialog of activeDialogEvents; track dialog) {\r\n  <ec-dialog\r\n    [dialogOpenStartEventId]=\"dialog.eventId\"\r\n    [size]=\"dialog.options?.size\"\r\n    [content]=\"dialog.content\"\r\n    [context]=\"dialog.context\"\r\n    [options]=\"dialog.options\"\r\n    (opened)=\"dialogOpened(dialog, $event)\"\r\n    (closed)=\"dialogClosed(dialog)\">\r\n  </ec-dialog>\r\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ec-dialog", inputs: ["size", "content", "context", "options", "dialogOpenStartEventId"], outputs: ["opened", "closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DialogGroupComponent, isStandalone: false, selector: "ec-dialog-group", ngImport: i0, template: "@for (dialog of activeDialogEvents; track dialog) {\n  <ec-dialog\n    [dialogOpenStartEventId]=\"dialog.eventId\"\n    [size]=\"dialog.options?.size\"\n    [content]=\"dialog.content\"\n    [context]=\"dialog.context\"\n    [options]=\"dialog.options\"\n    (opened)=\"dialogOpened(dialog, $event)\"\n    (closed)=\"dialogClosed(dialog)\">\n  </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ec-dialog", inputs: ["size", "content", "context", "options", "dialogOpenStartEventId"], outputs: ["opened", "closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-dialog-group', standalone: false, template: "@for (dialog of activeDialogEvents; track dialog) {\r\n  <ec-dialog\r\n    [dialogOpenStartEventId]=\"dialog.eventId\"\r\n    [size]=\"dialog.options?.size\"\r\n    [content]=\"dialog.content\"\r\n    [context]=\"dialog.context\"\r\n    [options]=\"dialog.options\"\r\n    (opened)=\"dialogOpened(dialog, $event)\"\r\n    (closed)=\"dialogClosed(dialog)\">\r\n  </ec-dialog>\r\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"] }]
+            args: [{ selector: 'ec-dialog-group', standalone: false, template: "@for (dialog of activeDialogEvents; track dialog) {\n  <ec-dialog\n    [dialogOpenStartEventId]=\"dialog.eventId\"\n    [size]=\"dialog.options?.size\"\n    [content]=\"dialog.content\"\n    [context]=\"dialog.context\"\n    [options]=\"dialog.options\"\n    (opened)=\"dialogOpened(dialog, $event)\"\n    (closed)=\"dialogClosed(dialog)\">\n  </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"] }]
         }], ctorParameters: () => [{ type: DialogService }] });
 /** Default No-op telemetry implementation */
@@ -10752,11 +10752,11 @@ class HierarchyTreeComponent extends HierarchyBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: HierarchyTreeComponent, isStandalone: false, selector: "ec-hierarchy-tree", inputs: { collapsibleRootNode: "collapsibleRootNode", id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n  class=\"flex-grow scroll-y py-1\">\r\n\r\n  @if (!hideRootNode && rootNode) {\r\n    <li>\r\n      <div class=\"item-wrapper\"\r\n        title=\"{{rootNode?.tooltip ?? 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        @if (rootNode.hasChildren && collapsibleRootNode) {\r\n          <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\r\n            class=\"flex-shrink\"\r\n            [style.width.px]=\"indent\"\r\n            [expanded]=\"rootNode.expanded\"\r\n            (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\r\n          </ec-collapsible-toggle>\r\n        }\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          <ng-container\r\n          *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n        </a>\r\n      </div>\r\n    </li>\r\n  }\r\n\r\n  <ng-template #hierarchyView\r\n    let-items>\r\n\r\n    @for(item of items; let index = $index; let first = $first; track item) {\r\n      @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\r\n        <li [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n          id=\"treeItem_{{item.id}}\">\r\n          <div class=\"item-wrapper\"\r\n            title=\"{{item.tooltip ?? 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            @if (!item.noIndent) {\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\r\n            <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n            @if (item.hasChildren && !item.hideToggle) {\r\n              <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                class=\"flex-shrink\"\r\n                [style.width.px]=\"indent\"\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\r\n            <i class=\"ec-icon icon-loading my-1\"\r\n            [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n            @if (item.url) {\r\n              <a id=\"treeItem_{{item.id}}_link\"\r\n                class=\"item\"\r\n                (click)=\"selectItem(item)\"\r\n                [routerLink]=\"item.url\"\r\n                [queryParams]=\"item.queryParams\"\r\n                [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n                <ng-container\r\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n              </a>\r\n            }\r\n            @if (!item.url) {\r\n              <div id=\"treeItem_{{item.id}}_heading\"\r\n                class=\"item\"\r\n                (click)=\"selectItem(item)\">\r\n                <ng-container\r\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n\r\n          @if (item.children.length > 0 && item.expanded) {\r\n            <ul>\r\n              <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n            </ul>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n  let-item>\r\n  @if (item.icon) {\r\n    <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n      [attr.title]=\"item.iconTooltip\"\r\n    ></i>\r\n  }\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", 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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: HierarchyTreeComponent, isStandalone: false, selector: "ec-hierarchy-tree", inputs: { collapsibleRootNode: "collapsibleRootNode", id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\n  class=\"flex-grow scroll-y py-1\">\n\n  @if (!hideRootNode && rootNode) {\n    <li>\n      <div class=\"item-wrapper\"\n        title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n        [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n        ecNavItemActive=\"is-selected\"\n        [ecNavItemActiveUrl]=\"rootNode?.url\"\n        [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\n        @if (rootNode.hasChildren && collapsibleRootNode) {\n          <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n            class=\"flex-shrink\"\n            [style.width.px]=\"indent\"\n            [expanded]=\"rootNode.expanded\"\n            (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n          </ec-collapsible-toggle>\n        }\n        <a id=\"rootNode_{{rootNode?.id}}_link\"\n          class=\"item flex-grow d-flex align-items-center\"\n          routerLink=\"{{rootNode?.url}}\"\n          [queryParams]=\"rootNode?.queryParams\">\n          <ng-container\n          *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n        </a>\n      </div>\n    </li>\n  }\n\n  <ng-template #hierarchyView\n    let-items>\n\n    @for(item of items; let index = $index; let first = $first; track item) {\n      @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n        <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n          id=\"treeItem_{{item.id}}\">\n          <div class=\"item-wrapper\"\n            title=\"{{item.tooltip ?? item.label}}\"\n            [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n            ecNavItemActive=\"is-selected\"\n            [ecNavItemActiveUrl]=\"item.url\"\n            [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n            [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n            <!-- This element provides the indentation for each level -->\n            @if (!item.noIndent) {\n              <span id=\"indent_{{item.id}}\"\n                class=\"d-block h-100\"\n                [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n              </span>\n            }\n\n            <!-- Toggle the button icon to be a spinner when item.status is pending -->\n            @if (item.hasChildren && !item.hideToggle) {\n              <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n                class=\"flex-shrink\"\n                [style.width.px]=\"indent\"\n                [hidden]=\"item.status === 'pending'\"\n                [expanded]=\"item.expanded\"\n                (expandedChange)=\"toggleItemClicked(item, $event)\">\n              </ec-collapsible-toggle>\n            }\n\n            <i class=\"ec-icon icon-loading my-1\"\n            [hidden]=\"item.status !== 'pending'\"></i>\n\n            @if (item.url) {\n              <a id=\"treeItem_{{item.id}}_link\"\n                class=\"item\"\n                (click)=\"selectItem(item)\"\n                [routerLink]=\"item.url\"\n                [queryParams]=\"item.queryParams\"\n                [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n                <ng-container\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n              </a>\n            }\n            @if (!item.url) {\n              <div id=\"treeItem_{{item.id}}_heading\"\n                class=\"item\"\n                (click)=\"selectItem(item)\">\n                <ng-container\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n              </div>\n            }\n          </div>\n\n\n          @if (item.children.length > 0 && item.expanded) {\n            <ul>\n              <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n            </ul>\n          }\n        </li>\n      }\n    }\n\n  </ng-template>\n\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n  let-item>\n  @if (item.icon) {\n    <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n      [attr.title]=\"item.iconTooltip\"\n    ></i>\n  }\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", 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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "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: "21.1.5", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-hierarchy-tree', standalone: false, template: "<ul id=\"{{scrollContainerId}}\"\r\n  class=\"flex-grow scroll-y py-1\">\r\n\r\n  @if (!hideRootNode && rootNode) {\r\n    <li>\r\n      <div class=\"item-wrapper\"\r\n        title=\"{{rootNode?.tooltip ?? 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        @if (rootNode.hasChildren && collapsibleRootNode) {\r\n          <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\r\n            class=\"flex-shrink\"\r\n            [style.width.px]=\"indent\"\r\n            [expanded]=\"rootNode.expanded\"\r\n            (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\r\n          </ec-collapsible-toggle>\r\n        }\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          <ng-container\r\n          *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n        </a>\r\n      </div>\r\n    </li>\r\n  }\r\n\r\n  <ng-template #hierarchyView\r\n    let-items>\r\n\r\n    @for(item of items; let index = $index; let first = $first; track item) {\r\n      @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\r\n        <li [ngClass]=\"{'divider': item.display === 'divider'}\"\r\n          id=\"treeItem_{{item.id}}\">\r\n          <div class=\"item-wrapper\"\r\n            title=\"{{item.tooltip ?? 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            @if (!item.noIndent) {\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\r\n            <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n            @if (item.hasChildren && !item.hideToggle) {\r\n              <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n                class=\"flex-shrink\"\r\n                [style.width.px]=\"indent\"\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\r\n            <i class=\"ec-icon icon-loading my-1\"\r\n            [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n            @if (item.url) {\r\n              <a id=\"treeItem_{{item.id}}_link\"\r\n                class=\"item\"\r\n                (click)=\"selectItem(item)\"\r\n                [routerLink]=\"item.url\"\r\n                [queryParams]=\"item.queryParams\"\r\n                [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n                <ng-container\r\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n              </a>\r\n            }\r\n            @if (!item.url) {\r\n              <div id=\"treeItem_{{item.id}}_heading\"\r\n                class=\"item\"\r\n                (click)=\"selectItem(item)\">\r\n                <ng-container\r\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n\r\n          @if (item.children.length > 0 && item.expanded) {\r\n            <ul>\r\n              <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n            </ul>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n\r\n  </ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n  let-item>\r\n  @if (item.icon) {\r\n    <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n      [attr.title]=\"item.iconTooltip\"\r\n    ></i>\r\n  }\r\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", 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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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"] }]
+            args: [{ selector: 'ec-hierarchy-tree', standalone: false, template: "<ul id=\"{{scrollContainerId}}\"\n  class=\"flex-grow scroll-y py-1\">\n\n  @if (!hideRootNode && rootNode) {\n    <li>\n      <div class=\"item-wrapper\"\n        title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n        [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n        ecNavItemActive=\"is-selected\"\n        [ecNavItemActiveUrl]=\"rootNode?.url\"\n        [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\n        @if (rootNode.hasChildren && collapsibleRootNode) {\n          <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n            class=\"flex-shrink\"\n            [style.width.px]=\"indent\"\n            [expanded]=\"rootNode.expanded\"\n            (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n          </ec-collapsible-toggle>\n        }\n        <a id=\"rootNode_{{rootNode?.id}}_link\"\n          class=\"item flex-grow d-flex align-items-center\"\n          routerLink=\"{{rootNode?.url}}\"\n          [queryParams]=\"rootNode?.queryParams\">\n          <ng-container\n          *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n        </a>\n      </div>\n    </li>\n  }\n\n  <ng-template #hierarchyView\n    let-items>\n\n    @for(item of items; let index = $index; let first = $first; track item) {\n      @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n        <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n          id=\"treeItem_{{item.id}}\">\n          <div class=\"item-wrapper\"\n            title=\"{{item.tooltip ?? item.label}}\"\n            [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n            ecNavItemActive=\"is-selected\"\n            [ecNavItemActiveUrl]=\"item.url\"\n            [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n            [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n            <!-- This element provides the indentation for each level -->\n            @if (!item.noIndent) {\n              <span id=\"indent_{{item.id}}\"\n                class=\"d-block h-100\"\n                [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n              </span>\n            }\n\n            <!-- Toggle the button icon to be a spinner when item.status is pending -->\n            @if (item.hasChildren && !item.hideToggle) {\n              <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n                class=\"flex-shrink\"\n                [style.width.px]=\"indent\"\n                [hidden]=\"item.status === 'pending'\"\n                [expanded]=\"item.expanded\"\n                (expandedChange)=\"toggleItemClicked(item, $event)\">\n              </ec-collapsible-toggle>\n            }\n\n            <i class=\"ec-icon icon-loading my-1\"\n            [hidden]=\"item.status !== 'pending'\"></i>\n\n            @if (item.url) {\n              <a id=\"treeItem_{{item.id}}_link\"\n                class=\"item\"\n                (click)=\"selectItem(item)\"\n                [routerLink]=\"item.url\"\n                [queryParams]=\"item.queryParams\"\n                [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n                <ng-container\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n              </a>\n            }\n            @if (!item.url) {\n              <div id=\"treeItem_{{item.id}}_heading\"\n                class=\"item\"\n                (click)=\"selectItem(item)\">\n                <ng-container\n                *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n              </div>\n            }\n          </div>\n\n\n          @if (item.children.length > 0 && item.expanded) {\n            <ul>\n              <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n            </ul>\n          }\n        </li>\n      }\n    }\n\n  </ng-template>\n\n  <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n  let-item>\n  @if (item.icon) {\n    <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n      [attr.title]=\"item.iconTooltip\"\n    ></i>\n  }\n  <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", 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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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: () => [{ type: ScrollService }, { type: i0.Injector }], propDecorators: { collapsibleRootNode: [{
                 type: Input
             }], id: [{
@@ -10820,11 +10820,11 @@ class ItemDisplayComponent {
         return this._url;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ItemDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ItemDisplayComponent, isStandalone: false, selector: "ec-item-display", inputs: { id: "id", label: "label", labelHelpPopover: "labelHelpPopover", value: "value", url: "url", queryParams: "queryParams", condensed: "condensed", target: "target" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div id=\"{{id}}_label_0\"\r\n  class=\"text-caption-1 d-flex align-items-center\">\r\n  <span>{{label | translate}}</span>\r\n  @if (labelHelpPopover) {\r\n    <ec-help-popover\r\n      class=\"mx-n1 my-n2\"\r\n      [text]=\"labelHelpPopover.text\"\r\n      [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\r\n      [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\r\n    </ec-help-popover>\r\n  }\r\n</div>\r\n\r\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\r\n  [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\r\n  title=\"{{internalValue.tooltip}}\">\r\n\r\n  @if (url) {\r\n    @if (!externalLink) {\r\n      <a\r\n        id=\"{{id}}_link\"\r\n        [routerLink]=\"url\"\r\n        [queryParams]=\"queryParams\"\r\n        target=\"{{target}}\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    }\r\n    @if (externalLink) {\r\n      <a\r\n        id=\"{{id}}_link\"\r\n        href=\"{{url}}\"\r\n        target=\"{{target}}\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #content>\r\n  @if (internalValue?.icon) {\r\n    <i class=\"ec-icon {{internalValue?.icon}}\"></i>\r\n  }\r\n  <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ItemDisplayComponent, isStandalone: false, selector: "ec-item-display", inputs: { id: "id", label: "label", labelHelpPopover: "labelHelpPopover", value: "value", url: "url", queryParams: "queryParams", condensed: "condensed", target: "target" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div id=\"{{id}}_label_0\"\n  class=\"text-caption-1 d-flex align-items-center\">\n  <span>{{label | translate}}</span>\n  @if (labelHelpPopover) {\n    <ec-help-popover\n      class=\"mx-n1 my-n2\"\n      [text]=\"labelHelpPopover.text\"\n      [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n      [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n    </ec-help-popover>\n  }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n  [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n  title=\"{{internalValue.tooltip}}\">\n\n  @if (url) {\n    @if (!externalLink) {\n      <a\n        id=\"{{id}}_link\"\n        [routerLink]=\"url\"\n        [queryParams]=\"queryParams\"\n        target=\"{{target}}\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </a>\n    }\n    @if (externalLink) {\n      <a\n        id=\"{{id}}_link\"\n        href=\"{{url}}\"\n        target=\"{{target}}\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </a>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n\n<ng-template #content>\n  @if (internalValue?.icon) {\n    <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n  }\n  <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ItemDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-item-display', standalone: false, template: "<div id=\"{{id}}_label_0\"\r\n  class=\"text-caption-1 d-flex align-items-center\">\r\n  <span>{{label | translate}}</span>\r\n  @if (labelHelpPopover) {\r\n    <ec-help-popover\r\n      class=\"mx-n1 my-n2\"\r\n      [text]=\"labelHelpPopover.text\"\r\n      [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\r\n      [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\r\n    </ec-help-popover>\r\n  }\r\n</div>\r\n\r\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\r\n  [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\r\n  title=\"{{internalValue.tooltip}}\">\r\n\r\n  @if (url) {\r\n    @if (!externalLink) {\r\n      <a\r\n        id=\"{{id}}_link\"\r\n        [routerLink]=\"url\"\r\n        [queryParams]=\"queryParams\"\r\n        target=\"{{target}}\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    }\r\n    @if (externalLink) {\r\n      <a\r\n        id=\"{{id}}_link\"\r\n        href=\"{{url}}\"\r\n        target=\"{{target}}\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    }\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #content>\r\n  @if (internalValue?.icon) {\r\n    <i class=\"ec-icon {{internalValue?.icon}}\"></i>\r\n  }\r\n  <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"] }]
+            args: [{ selector: 'ec-item-display', standalone: false, template: "<div id=\"{{id}}_label_0\"\n  class=\"text-caption-1 d-flex align-items-center\">\n  <span>{{label | translate}}</span>\n  @if (labelHelpPopover) {\n    <ec-help-popover\n      class=\"mx-n1 my-n2\"\n      [text]=\"labelHelpPopover.text\"\n      [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n      [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n    </ec-help-popover>\n  }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n  [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n  title=\"{{internalValue.tooltip}}\">\n\n  @if (url) {\n    @if (!externalLink) {\n      <a\n        id=\"{{id}}_link\"\n        [routerLink]=\"url\"\n        [queryParams]=\"queryParams\"\n        target=\"{{target}}\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </a>\n    }\n    @if (externalLink) {\n      <a\n        id=\"{{id}}_link\"\n        href=\"{{url}}\"\n        target=\"{{target}}\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </a>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n\n<ng-template #content>\n  @if (internalValue?.icon) {\n    <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n  }\n  <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -10888,11 +10888,11 @@ class JsonDisplayComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonDisplayComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\r\n  <ec-button id=\"{{id}}_copy\"\r\n    class=\"copy-button\"\r\n    type=\"icon\"\r\n    icon=\"icon-copy\"\r\n    [ecCopyButton]=\"jsonDisplay\">\r\n  </ec-button>\r\n}\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\n  <ec-button id=\"{{id}}_copy\"\n    class=\"copy-button\"\n    type=\"icon\"\n    icon=\"icon-copy\"\n    [ecCopyButton]=\"jsonDisplay\">\n  </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-json-display', standalone: false, template: "@if (jsonDisplay.value) {\r\n  <ec-button id=\"{{id}}_copy\"\r\n    class=\"copy-button\"\r\n    type=\"icon\"\r\n    icon=\"icon-copy\"\r\n    [ecCopyButton]=\"jsonDisplay\">\r\n  </ec-button>\r\n}\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
+            args: [{ selector: 'ec-json-display', standalone: false, template: "@if (jsonDisplay.value) {\n  <ec-button id=\"{{id}}_copy\"\n    class=\"copy-button\"\n    type=\"icon\"\n    icon=\"icon-copy\"\n    [ecCopyButton]=\"jsonDisplay\">\n  </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
         }], ctorParameters: () => [{ type: i3.TranslateService }], propDecorators: { id: [{
                 type: Input
             }], attrId: [{
@@ -10940,16 +10940,16 @@ class ResizableComponent extends ResizableBase {
         this.setWidth(widths[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResizableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ResizableComponent, isStandalone: false, selector: "ec-resizable", usesInheritance: true, ngImport: i0, template: `<div class="content">
-              <ng-content></ng-content>
-            </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ResizableComponent, isStandalone: false, selector: "ec-resizable", usesInheritance: true, ngImport: i0, template: `<div class="content">
+              <ng-content></ng-content>
+            </div>
             <div class="handle" (mousedown)="startDrag($event)"></div>`, isInline: true, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ResizableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-resizable', template: `<div class="content">
-              <ng-content></ng-content>
-            </div>
+            args: [{ selector: 'ec-resizable', template: `<div class="content">
+              <ng-content></ng-content>
+            </div>
             <div class="handle" (mousedown)="startDrag($event)"></div>`, standalone: false, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: CacheService }, { type: Document, decorators: [{
                     type: Inject,
@@ -11037,11 +11037,11 @@ class SplashComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SplashComponent, deps: [{ token: SplashService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SplashComponent, isStandalone: false, selector: "ec-splash", ngImport: i0, template: "<div class=\"app-splash\"\r\n     [class.app-loaded]=\"!isVisible\">\r\n  <div class=\"splash-loader\"\r\n       role=\"status\"\r\n       aria-live=\"polite\">\r\n    <div class=\"splash-icon-wrapper\">\r\n      <img src=\"/assets/images/splash-electric.svg\"\r\n           alt=\"Electricity Icon\" />\r\n      <img src=\"/assets/images/splash-water.svg\"\r\n           alt=\"Water Icon\" />\r\n      <img src=\"/assets/images/splash-interval.svg\"\r\n           alt=\"Interval Data Icon\" />\r\n      <img src=\"/assets/images/splash-seedling.svg\"\r\n           alt=\"Seedling Icon\" />\r\n    </div>\r\n  </div>\r\n\r\n  @if ((messages && messages.length > 0) || title) {\r\n  <div class=\"splash-message-container\">\r\n    @if (title) {\r\n    <h1 class=\"splash-title\">{{title}}</h1>\r\n    }\r\n    @if (messages && messages.length > 0) {\r\n    @for (message of messages; track $index; let i = $index) {\r\n    <p class=\"splash-message\"\r\n       [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\r\n    } }\r\n  </div>\r\n  }\r\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SplashComponent, isStandalone: false, selector: "ec-splash", ngImport: i0, template: "<div class=\"app-splash\"\n     [class.app-loaded]=\"!isVisible\">\n  <div class=\"splash-loader\"\n       role=\"status\"\n       aria-live=\"polite\">\n    <div class=\"splash-icon-wrapper\">\n      <img src=\"/assets/images/splash-electric.svg\"\n           alt=\"Electricity Icon\" />\n      <img src=\"/assets/images/splash-water.svg\"\n           alt=\"Water Icon\" />\n      <img src=\"/assets/images/splash-interval.svg\"\n           alt=\"Interval Data Icon\" />\n      <img src=\"/assets/images/splash-seedling.svg\"\n           alt=\"Seedling Icon\" />\n    </div>\n  </div>\n\n  @if ((messages && messages.length > 0) || title) {\n  <div class=\"splash-message-container\">\n    @if (title) {\n    <h1 class=\"splash-title\">{{title}}</h1>\n    }\n    @if (messages && messages.length > 0) {\n    @for (message of messages; track $index; let i = $index) {\n    <p class=\"splash-message\"\n       [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n    } }\n  </div>\n  }\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SplashComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-splash', standalone: false, template: "<div class=\"app-splash\"\r\n     [class.app-loaded]=\"!isVisible\">\r\n  <div class=\"splash-loader\"\r\n       role=\"status\"\r\n       aria-live=\"polite\">\r\n    <div class=\"splash-icon-wrapper\">\r\n      <img src=\"/assets/images/splash-electric.svg\"\r\n           alt=\"Electricity Icon\" />\r\n      <img src=\"/assets/images/splash-water.svg\"\r\n           alt=\"Water Icon\" />\r\n      <img src=\"/assets/images/splash-interval.svg\"\r\n           alt=\"Interval Data Icon\" />\r\n      <img src=\"/assets/images/splash-seedling.svg\"\r\n           alt=\"Seedling Icon\" />\r\n    </div>\r\n  </div>\r\n\r\n  @if ((messages && messages.length > 0) || title) {\r\n  <div class=\"splash-message-container\">\r\n    @if (title) {\r\n    <h1 class=\"splash-title\">{{title}}</h1>\r\n    }\r\n    @if (messages && messages.length > 0) {\r\n    @for (message of messages; track $index; let i = $index) {\r\n    <p class=\"splash-message\"\r\n       [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\r\n    } }\r\n  </div>\r\n  }\r\n</div>" }]
+            args: [{ selector: 'ec-splash', standalone: false, template: "<div class=\"app-splash\"\n     [class.app-loaded]=\"!isVisible\">\n  <div class=\"splash-loader\"\n       role=\"status\"\n       aria-live=\"polite\">\n    <div class=\"splash-icon-wrapper\">\n      <img src=\"/assets/images/splash-electric.svg\"\n           alt=\"Electricity Icon\" />\n      <img src=\"/assets/images/splash-water.svg\"\n           alt=\"Water Icon\" />\n      <img src=\"/assets/images/splash-interval.svg\"\n           alt=\"Interval Data Icon\" />\n      <img src=\"/assets/images/splash-seedling.svg\"\n           alt=\"Seedling Icon\" />\n    </div>\n  </div>\n\n  @if ((messages && messages.length > 0) || title) {\n  <div class=\"splash-message-container\">\n    @if (title) {\n    <h1 class=\"splash-title\">{{title}}</h1>\n    }\n    @if (messages && messages.length > 0) {\n    @for (message of messages; track $index; let i = $index) {\n    <p class=\"splash-message\"\n       [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n    } }\n  </div>\n  }\n</div>" }]
         }], ctorParameters: () => [{ type: SplashService }] });
 class TableMasterHeaderRowComponent {
@@ -11142,11 +11142,11 @@ class ToastComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ToastComponent, isStandalone: false, selector: "ec-toast", inputs: { toastItem: "toastItem" }, outputs: { closed: "closed" }, host: { properties: { "attr.id": "this.id", "class.is-open": "this.open", "style.--toast-animation-duration.ms": "this.TOAST_ANIMATION_DURATION" } }, usesOnChanges: true, ngImport: i0, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\r\n  [type]=\"toastItem?.type\"\r\n  bannerStyle=\"toast\"\r\n  [customIcon]=\"toastItem?.icon\"\r\n  [showCloseBtn]=\"toastItem?.dismissible\"\r\n  [autoHideOnClose]=\"false\"\r\n  (closed)=\"closeClicked()\">\r\n  <div class=\"d-flex\">\r\n    <div id=\"{{toastItem?.id}}_message\"\r\n    [innerHTML]=\"toastItem?.message | translate\"></div>\r\n    @if (toastItem?.action && toastItem?.actionLabel) {\r\n      <button id=\"{{toastItem?.id}}_action\"\r\n        ecLinkButton\r\n        class=\"font-weight-bold ml-2\"\r\n      (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\r\n    }\r\n  </div>\r\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ToastComponent, isStandalone: false, selector: "ec-toast", inputs: { toastItem: "toastItem" }, outputs: { closed: "closed" }, host: { properties: { "attr.id": "this.id", "class.is-open": "this.open", "style.--toast-animation-duration.ms": "this.TOAST_ANIMATION_DURATION" } }, usesOnChanges: true, ngImport: i0, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n  [type]=\"toastItem?.type\"\n  bannerStyle=\"toast\"\n  [customIcon]=\"toastItem?.icon\"\n  [showCloseBtn]=\"toastItem?.dismissible\"\n  [autoHideOnClose]=\"false\"\n  (closed)=\"closeClicked()\">\n  <div class=\"d-flex\">\n    <div id=\"{{toastItem?.id}}_message\"\n    [innerHTML]=\"toastItem?.message | translate\"></div>\n    @if (toastItem?.action && toastItem?.actionLabel) {\n      <button id=\"{{toastItem?.id}}_action\"\n        ecLinkButton\n        class=\"font-weight-bold ml-2\"\n      (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\n    }\n  </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-toast', standalone: false, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\r\n  [type]=\"toastItem?.type\"\r\n  bannerStyle=\"toast\"\r\n  [customIcon]=\"toastItem?.icon\"\r\n  [showCloseBtn]=\"toastItem?.dismissible\"\r\n  [autoHideOnClose]=\"false\"\r\n  (closed)=\"closeClicked()\">\r\n  <div class=\"d-flex\">\r\n    <div id=\"{{toastItem?.id}}_message\"\r\n    [innerHTML]=\"toastItem?.message | translate\"></div>\r\n    @if (toastItem?.action && toastItem?.actionLabel) {\r\n      <button id=\"{{toastItem?.id}}_action\"\r\n        ecLinkButton\r\n        class=\"font-weight-bold ml-2\"\r\n      (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\r\n    }\r\n  </div>\r\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"] }]
+            args: [{ selector: 'ec-toast', standalone: false, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n  [type]=\"toastItem?.type\"\n  bannerStyle=\"toast\"\n  [customIcon]=\"toastItem?.icon\"\n  [showCloseBtn]=\"toastItem?.dismissible\"\n  [autoHideOnClose]=\"false\"\n  (closed)=\"closeClicked()\">\n  <div class=\"d-flex\">\n    <div id=\"{{toastItem?.id}}_message\"\n    [innerHTML]=\"toastItem?.message | translate\"></div>\n    @if (toastItem?.action && toastItem?.actionLabel) {\n      <button id=\"{{toastItem?.id}}_action\"\n        ecLinkButton\n        class=\"font-weight-bold ml-2\"\n      (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\n    }\n  </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"] }]
         }], ctorParameters: () => [{ type: ToastService }], propDecorators: { toastItem: [{
                 type: Input
             }], id: [{
@@ -11259,11 +11259,11 @@ class ToasterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: TelemetryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ToasterComponent, isStandalone: false, selector: "ec-toaster", viewQueries: [{ propertyName: "timedToastEl", first: true, predicate: ["timedToast"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\r\n          [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>\r\n\r\n<ec-toast #timedToast\r\n          [toastItem]=\"currentTimedToast\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>", dependencies: [{ kind: "component", type: ToastComponent, selector: "ec-toast", inputs: ["toastItem"], outputs: ["closed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ToasterComponent, isStandalone: false, selector: "ec-toaster", viewQueries: [{ propertyName: "timedToastEl", first: true, predicate: ["timedToast"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n          [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n          (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n          [toastItem]=\"currentTimedToast\"\n          (closed)=\"updateVisibleToast($event)\">\n</ec-toast>", dependencies: [{ kind: "component", type: ToastComponent, selector: "ec-toast", inputs: ["toastItem"], outputs: ["closed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToasterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-toaster', standalone: false, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\r\n          [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>\r\n\r\n<ec-toast #timedToast\r\n          [toastItem]=\"currentTimedToast\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>" }]
+            args: [{ selector: 'ec-toaster', standalone: false, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n          [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n          (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n          [toastItem]=\"currentTimedToast\"\n          (closed)=\"updateVisibleToast($event)\">\n</ec-toast>" }]
         }], ctorParameters: () => [{ type: ToastService }, { type: TelemetryService }], propDecorators: { timedToastEl: [{
                 type: ViewChild,
                 args: ['timedToast', { static: false, read: ElementRef }]
@@ -11510,11 +11510,11 @@ class TreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\r\n  <header\r\n    class=\"flex-shrink d-flex align-items-center\">\r\n    <h2 id=\"{{id}}_title\"\r\n    class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n    @if (menuItems?.length) {\r\n      <ec-dropdown\r\n        id=\"{{id}}_dropdown\"\r\n        class=\"flex-shrink\"\r\n        icon=\"icon-menu\"\r\n        [menuTemplateType]=\"menuTemplateType\"\r\n        menuPosition=\"left\"\r\n        [status]=\"menuStatus\"\r\n        [popupFixed]=\"true\"\r\n        [showArrow]=\"false\"\r\n        [menuMinWidth]=\"240\"\r\n        [items]=\"menuItems\">\r\n      </ec-dropdown>\r\n    }\r\n  </header>\r\n}\r\n\r\n<div class=\"flex-grow d-flex\"\r\n  ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [displayAsMask]=\"true\">\r\n  @if (type === 'menu') {\r\n    <ec-menu [id]=\"id\"\r\n      [items]=\"treeItems\"\r\n      [templateType]=\"templateType\"\r\n      [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n      [truncateItems]=\"true\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n      [preserveIconSpace]=\"preserveIconSpace\"\r\n      class=\"flex-grow\">\r\n    </ec-menu>\r\n  }\r\n\r\n  @if (type === 'hierarchy') {\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n      [rootNode]=\"treeHierarchy\"\r\n      [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n      [collapsibleRootNode]=\"collapsibleRootNode\"\r\n      (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n      (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n      (itemSelected)=\"onItemSelected($event)\"\r\n      [customItemTemplate]=\"customHierarchyItemTemplate\"\r\n      class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  }\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\n  <header\n    class=\"flex-shrink d-flex align-items-center\">\n    <h2 id=\"{{id}}_title\"\n    class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n    @if (menuItems?.length) {\n      <ec-dropdown\n        id=\"{{id}}_dropdown\"\n        class=\"flex-shrink\"\n        icon=\"icon-menu\"\n        [menuTemplateType]=\"menuTemplateType\"\n        menuPosition=\"left\"\n        [status]=\"menuStatus\"\n        [popupFixed]=\"true\"\n        [showArrow]=\"false\"\n        [menuMinWidth]=\"240\"\n        [items]=\"menuItems\">\n      </ec-dropdown>\n    }\n  </header>\n}\n\n<div class=\"flex-grow d-flex\"\n  ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [displayAsMask]=\"true\">\n  @if (type === 'menu') {\n    <ec-menu [id]=\"id\"\n      [items]=\"treeItems\"\n      [templateType]=\"templateType\"\n      [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n      [truncateItems]=\"true\"\n      (selectedChanged)=\"onItemSelected($event)\"\n      [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n      [preserveIconSpace]=\"preserveIconSpace\"\n      class=\"flex-grow\">\n    </ec-menu>\n  }\n\n  @if (type === 'hierarchy') {\n    <ec-hierarchy-tree [id]=\"id\"\n      [rootNode]=\"treeHierarchy\"\n      [hideRootNode]=\"treeHierarchyHideRootNode\"\n      [collapsibleRootNode]=\"collapsibleRootNode\"\n      (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n      (itemToggled)=\"onHierarchyItemToggled($event)\"\n      (itemSelected)=\"onItemSelected($event)\"\n      [customItemTemplate]=\"customHierarchyItemTemplate\"\n      class=\"flex-grow d-flex\">\n    </ec-hierarchy-tree>\n  }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tree', standalone: false, template: "@if (!hideTreeHeader) {\r\n  <header\r\n    class=\"flex-shrink d-flex align-items-center\">\r\n    <h2 id=\"{{id}}_title\"\r\n    class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n    @if (menuItems?.length) {\r\n      <ec-dropdown\r\n        id=\"{{id}}_dropdown\"\r\n        class=\"flex-shrink\"\r\n        icon=\"icon-menu\"\r\n        [menuTemplateType]=\"menuTemplateType\"\r\n        menuPosition=\"left\"\r\n        [status]=\"menuStatus\"\r\n        [popupFixed]=\"true\"\r\n        [showArrow]=\"false\"\r\n        [menuMinWidth]=\"240\"\r\n        [items]=\"menuItems\">\r\n      </ec-dropdown>\r\n    }\r\n  </header>\r\n}\r\n\r\n<div class=\"flex-grow d-flex\"\r\n  ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [displayAsMask]=\"true\">\r\n  @if (type === 'menu') {\r\n    <ec-menu [id]=\"id\"\r\n      [items]=\"treeItems\"\r\n      [templateType]=\"templateType\"\r\n      [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n      [truncateItems]=\"true\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n      [preserveIconSpace]=\"preserveIconSpace\"\r\n      class=\"flex-grow\">\r\n    </ec-menu>\r\n  }\r\n\r\n  @if (type === 'hierarchy') {\r\n    <ec-hierarchy-tree [id]=\"id\"\r\n      [rootNode]=\"treeHierarchy\"\r\n      [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n      [collapsibleRootNode]=\"collapsibleRootNode\"\r\n      (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n      (itemToggled)=\"onHierarchyItemToggled($event)\"\r\n      (itemSelected)=\"onItemSelected($event)\"\r\n      [customItemTemplate]=\"customHierarchyItemTemplate\"\r\n      class=\"flex-grow d-flex\">\r\n    </ec-hierarchy-tree>\r\n  }\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
+            args: [{ selector: 'ec-tree', standalone: false, template: "@if (!hideTreeHeader) {\n  <header\n    class=\"flex-shrink d-flex align-items-center\">\n    <h2 id=\"{{id}}_title\"\n    class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n    @if (menuItems?.length) {\n      <ec-dropdown\n        id=\"{{id}}_dropdown\"\n        class=\"flex-shrink\"\n        icon=\"icon-menu\"\n        [menuTemplateType]=\"menuTemplateType\"\n        menuPosition=\"left\"\n        [status]=\"menuStatus\"\n        [popupFixed]=\"true\"\n        [showArrow]=\"false\"\n        [menuMinWidth]=\"240\"\n        [items]=\"menuItems\">\n      </ec-dropdown>\n    }\n  </header>\n}\n\n<div class=\"flex-grow d-flex\"\n  ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [displayAsMask]=\"true\">\n  @if (type === 'menu') {\n    <ec-menu [id]=\"id\"\n      [items]=\"treeItems\"\n      [templateType]=\"templateType\"\n      [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n      [truncateItems]=\"true\"\n      (selectedChanged)=\"onItemSelected($event)\"\n      [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n      [preserveIconSpace]=\"preserveIconSpace\"\n      class=\"flex-grow\">\n    </ec-menu>\n  }\n\n  @if (type === 'hierarchy') {\n    <ec-hierarchy-tree [id]=\"id\"\n      [rootNode]=\"treeHierarchy\"\n      [hideRootNode]=\"treeHierarchyHideRootNode\"\n      [collapsibleRootNode]=\"collapsibleRootNode\"\n      (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n      (itemToggled)=\"onHierarchyItemToggled($event)\"\n      (itemSelected)=\"onItemSelected($event)\"\n      [customItemTemplate]=\"customHierarchyItemTemplate\"\n      class=\"flex-grow d-flex\">\n    </ec-hierarchy-tree>\n  }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { attrId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -11839,13 +11839,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class PageTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\r\n  <i\r\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\r\n}\r\n<div class=\"text-truncate\">\r\n  @if (title) {\r\n    <h1\r\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\r\n    title=\"{{title}}\">{{title}}</h1>\r\n  }\r\n  @if (subTitle && !subTitleUrl) {\r\n    <p\r\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\r\n  }\r\n  @if (subTitle && subTitleUrl) {\r\n    <a\r\n      id=\"subTitle_link\"\r\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\r\n      routerLink=\"{{subTitleUrl}}\"\r\n      target=\"_self\">\r\n      {{subTitle}}\r\n    </a>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\n  <i\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-page-title', host: {
                         class: 'd-flex'
-                    }, standalone: false, template: "@if (titleIcon) {\r\n  <i\r\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\r\n}\r\n<div class=\"text-truncate\">\r\n  @if (title) {\r\n    <h1\r\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\r\n    title=\"{{title}}\">{{title}}</h1>\r\n  }\r\n  @if (subTitle && !subTitleUrl) {\r\n    <p\r\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\r\n  }\r\n  @if (subTitle && subTitleUrl) {\r\n    <a\r\n      id=\"subTitle_link\"\r\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\r\n      routerLink=\"{{subTitleUrl}}\"\r\n      target=\"_self\">\r\n      {{subTitle}}\r\n    </a>\r\n  }\r\n</div>" }]
+                    }, standalone: false, template: "@if (titleIcon) {\n  <i\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></i>\n}\n<div class=\"text-truncate\">\n  @if (title) {\n    <h1\n      class=\"text-title-1 mb-0 py-1 text-truncate\"\n    title=\"{{title}}\">{{title}}</h1>\n  }\n  @if (subTitle && !subTitleUrl) {\n    <p\n    class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n  }\n  @if (subTitle && subTitleUrl) {\n    <a\n      id=\"subTitle_link\"\n      class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n      routerLink=\"{{subTitleUrl}}\"\n      target=\"_self\">\n      {{subTitle}}\n    </a>\n  }\n</div>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], titleIcon: [{
@@ -11922,13 +11922,13 @@ class PageViewComponent {
         this.dialogService.closeLatestDialog(new DialogResult(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [displayAsMask]=\"true\"\r\n  class=\"flex-grow d-flex\"\r\n  [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n  <div id=\"PageViewScrollContainer\"\r\n    class=\"d-flex flex-column flex-grow scroll-y\"\r\n    [class.is-dialog]=\"isDialog\"\r\n    [class.fit-content]=\"fitContent\"\r\n    [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n    [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n    [class.footer-visible]=\"!!footerTemplate\"\r\n    cdkScrollable>\r\n    <section>\r\n      <ng-content></ng-content>\r\n    </section>\r\n\r\n    @if (footerTemplate) {\r\n      <footer>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </footer>\r\n    }\r\n\r\n    @if (showHeader) {\r\n      <header>\r\n        @if (breadcrumbs?.length && !isDialog) {\r\n          <ol id=\"breadcrumbs\"\r\n            >\r\n            @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\r\n              <li>\r\n                @if (crumb.url) {\r\n                  <a\r\n                    [routerLink]=\"crumb.url\">\r\n                    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                  </a>\r\n                } @else {\r\n                  {{crumb.label}}\r\n                }\r\n                <ng-template #label>{{crumb.label}}</ng-template>\r\n              </li>\r\n            }\r\n          </ol>\r\n        }\r\n        <div class=\"titlebar\">\r\n          @if (!customTitleTemplate) {\r\n            <app-page-title\r\n              [title]=\"title\"\r\n              [subTitle]=\"subTitle\"\r\n              [subTitleUrl]=\"subTitleUrl\"\r\n              [titleIcon]=\"titleIcon\"\r\n              class=\"title text-truncate\">\r\n            </app-page-title>\r\n          } @else {\r\n            <div class=\"title\">\r\n              <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n            </div>\r\n          }\r\n          <div class=\"actions\">\r\n            @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\r\n              <ec-button id=\"primaryAction\"\r\n                class=\"ml-2\"\r\n                [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\r\n                type=\"primary\"\r\n                [label]=\"primaryActionLabel\"\r\n                (clicked)=\"primaryAction($event)\">\r\n              </ec-button>\r\n            }\r\n            @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\r\n              <ec-button id=\"secondaryAction\"\r\n                class=\"ml-2\"\r\n                type=\"secondary\"\r\n                [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                (clicked)=\"secondaryAction($event)\">\r\n              </ec-button>\r\n            }\r\n            @if (moreActions?.length && !readonly) {\r\n              <ec-dropdown id=\"moreActions\"\r\n                [disabled]=\"status?.status === 'pending'\"\r\n                class=\"ml-2\"\r\n                buttonType=\"text\"\r\n                [label]=\"moreActionsLabel\"\r\n                [items]=\"moreActions\">\r\n              </ec-dropdown>\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n        @if (customHeaderTemplate) {\r\n          <div\r\n            class=\"page-header\">\r\n            <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (!customErrorBannerTemplate && errors) {\r\n          <ec-banner\r\n            id=\"pageViewErrors\"\r\n            [class.border-bottom-0]=\"!isDialog\">\r\n            <div [innerHtml]=\"errors\"></div>\r\n          </ec-banner>\r\n        } @else {\r\n          @if (errors) {\r\n            <ec-banner\r\n              id=\"pageViewErrors\"\r\n              [class.border-bottom-0]=\"!isDialog\">\r\n              <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n            </ec-banner>\r\n          }\r\n        }\r\n      </header>\r\n    }\r\n  </div>\r\n\r\n  @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\r\n    <ec-button\r\n      id=\"pageViewDialogClose\"\r\n      type=\"icon\"\r\n      icon=\"icon-cancel\"\r\n      (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n  }\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [displayAsMask]=\"true\"\n  class=\"flex-grow d-flex\"\n  [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n  <div id=\"PageViewScrollContainer\"\n    class=\"d-flex flex-column flex-grow scroll-y\"\n    [class.is-dialog]=\"isDialog\"\n    [class.fit-content]=\"fitContent\"\n    [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n    [class.overlay-visible]=\"status?.status !== 'hasData'\"\n    [class.footer-visible]=\"!!footerTemplate\"\n    cdkScrollable>\n    <section>\n      <ng-content></ng-content>\n    </section>\n\n    @if (footerTemplate) {\n      <footer>\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </footer>\n    }\n\n    @if (showHeader) {\n      <header>\n        @if (breadcrumbs?.length && !isDialog) {\n          <ol id=\"breadcrumbs\"\n            >\n            @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n              <li>\n                @if (crumb.url) {\n                  <a\n                    [routerLink]=\"crumb.url\">\n                    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n                  </a>\n                } @else {\n                  {{crumb.label}}\n                }\n                <ng-template #label>{{crumb.label}}</ng-template>\n              </li>\n            }\n          </ol>\n        }\n        <div class=\"titlebar\">\n          @if (!customTitleTemplate) {\n            <app-page-title\n              [title]=\"title\"\n              [subTitle]=\"subTitle\"\n              [subTitleUrl]=\"subTitleUrl\"\n              [titleIcon]=\"titleIcon\"\n              class=\"title text-truncate\">\n            </app-page-title>\n          } @else {\n            <div class=\"title\">\n              <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n            </div>\n          }\n          <div class=\"actions\">\n            @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n              <ec-button id=\"primaryAction\"\n                class=\"ml-2\"\n                [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n                type=\"primary\"\n                [label]=\"primaryActionLabel\"\n                (clicked)=\"primaryAction($event)\">\n              </ec-button>\n            }\n            @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n              <ec-button id=\"secondaryAction\"\n                class=\"ml-2\"\n                type=\"secondary\"\n                [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n                (clicked)=\"secondaryAction($event)\">\n              </ec-button>\n            }\n            @if (moreActions?.length && !readonly) {\n              <ec-dropdown id=\"moreActions\"\n                [disabled]=\"status?.status === 'pending'\"\n                class=\"ml-2\"\n                buttonType=\"text\"\n                [label]=\"moreActionsLabel\"\n                [items]=\"moreActions\">\n              </ec-dropdown>\n            }\n            <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n          </div>\n        </div>\n        @if (customHeaderTemplate) {\n          <div\n            class=\"page-header\">\n            <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n          </div>\n        }\n        @if (!customErrorBannerTemplate && errors) {\n          <ec-banner\n            id=\"pageViewErrors\"\n            [class.border-bottom-0]=\"!isDialog\">\n            <div [innerHtml]=\"errors\"></div>\n          </ec-banner>\n        } @else {\n          @if (errors) {\n            <ec-banner\n              id=\"pageViewErrors\"\n              [class.border-bottom-0]=\"!isDialog\">\n              <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n            </ec-banner>\n          }\n        }\n      </header>\n    }\n  </div>\n\n  @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n    <ec-button\n      id=\"pageViewDialogClose\"\n      type=\"icon\"\n      icon=\"icon-cancel\"\n      (clicked)=\"closeDialog()\">\n    </ec-button>\n  }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-page-view', host: {
                         class: "flex-grow"
-                    }, standalone: false, template: "<div ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [displayAsMask]=\"true\"\r\n  class=\"flex-grow d-flex\"\r\n  [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n  <div id=\"PageViewScrollContainer\"\r\n    class=\"d-flex flex-column flex-grow scroll-y\"\r\n    [class.is-dialog]=\"isDialog\"\r\n    [class.fit-content]=\"fitContent\"\r\n    [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n    [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n    [class.footer-visible]=\"!!footerTemplate\"\r\n    cdkScrollable>\r\n    <section>\r\n      <ng-content></ng-content>\r\n    </section>\r\n\r\n    @if (footerTemplate) {\r\n      <footer>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n      </footer>\r\n    }\r\n\r\n    @if (showHeader) {\r\n      <header>\r\n        @if (breadcrumbs?.length && !isDialog) {\r\n          <ol id=\"breadcrumbs\"\r\n            >\r\n            @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\r\n              <li>\r\n                @if (crumb.url) {\r\n                  <a\r\n                    [routerLink]=\"crumb.url\">\r\n                    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n                  </a>\r\n                } @else {\r\n                  {{crumb.label}}\r\n                }\r\n                <ng-template #label>{{crumb.label}}</ng-template>\r\n              </li>\r\n            }\r\n          </ol>\r\n        }\r\n        <div class=\"titlebar\">\r\n          @if (!customTitleTemplate) {\r\n            <app-page-title\r\n              [title]=\"title\"\r\n              [subTitle]=\"subTitle\"\r\n              [subTitleUrl]=\"subTitleUrl\"\r\n              [titleIcon]=\"titleIcon\"\r\n              class=\"title text-truncate\">\r\n            </app-page-title>\r\n          } @else {\r\n            <div class=\"title\">\r\n              <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n            </div>\r\n          }\r\n          <div class=\"actions\">\r\n            @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\r\n              <ec-button id=\"primaryAction\"\r\n                class=\"ml-2\"\r\n                [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\r\n                type=\"primary\"\r\n                [label]=\"primaryActionLabel\"\r\n                (clicked)=\"primaryAction($event)\">\r\n              </ec-button>\r\n            }\r\n            @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\r\n              <ec-button id=\"secondaryAction\"\r\n                class=\"ml-2\"\r\n                type=\"secondary\"\r\n                [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n                (clicked)=\"secondaryAction($event)\">\r\n              </ec-button>\r\n            }\r\n            @if (moreActions?.length && !readonly) {\r\n              <ec-dropdown id=\"moreActions\"\r\n                [disabled]=\"status?.status === 'pending'\"\r\n                class=\"ml-2\"\r\n                buttonType=\"text\"\r\n                [label]=\"moreActionsLabel\"\r\n                [items]=\"moreActions\">\r\n              </ec-dropdown>\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n        @if (customHeaderTemplate) {\r\n          <div\r\n            class=\"page-header\">\r\n            <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n          </div>\r\n        }\r\n        @if (!customErrorBannerTemplate && errors) {\r\n          <ec-banner\r\n            id=\"pageViewErrors\"\r\n            [class.border-bottom-0]=\"!isDialog\">\r\n            <div [innerHtml]=\"errors\"></div>\r\n          </ec-banner>\r\n        } @else {\r\n          @if (errors) {\r\n            <ec-banner\r\n              id=\"pageViewErrors\"\r\n              [class.border-bottom-0]=\"!isDialog\">\r\n              <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n            </ec-banner>\r\n          }\r\n        }\r\n      </header>\r\n    }\r\n  </div>\r\n\r\n  @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\r\n    <ec-button\r\n      id=\"pageViewDialogClose\"\r\n      type=\"icon\"\r\n      icon=\"icon-cancel\"\r\n      (clicked)=\"closeDialog()\">\r\n    </ec-button>\r\n  }\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
+                    }, standalone: false, template: "<div ecOverlay\n  [status]=\"status?.status\"\n  [message]=\"status?.message\"\n  [displayAsMask]=\"true\"\n  class=\"flex-grow d-flex\"\n  [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n  <div id=\"PageViewScrollContainer\"\n    class=\"d-flex flex-column flex-grow scroll-y\"\n    [class.is-dialog]=\"isDialog\"\n    [class.fit-content]=\"fitContent\"\n    [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n    [class.overlay-visible]=\"status?.status !== 'hasData'\"\n    [class.footer-visible]=\"!!footerTemplate\"\n    cdkScrollable>\n    <section>\n      <ng-content></ng-content>\n    </section>\n\n    @if (footerTemplate) {\n      <footer>\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </footer>\n    }\n\n    @if (showHeader) {\n      <header>\n        @if (breadcrumbs?.length && !isDialog) {\n          <ol id=\"breadcrumbs\"\n            >\n            @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n              <li>\n                @if (crumb.url) {\n                  <a\n                    [routerLink]=\"crumb.url\">\n                    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n                  </a>\n                } @else {\n                  {{crumb.label}}\n                }\n                <ng-template #label>{{crumb.label}}</ng-template>\n              </li>\n            }\n          </ol>\n        }\n        <div class=\"titlebar\">\n          @if (!customTitleTemplate) {\n            <app-page-title\n              [title]=\"title\"\n              [subTitle]=\"subTitle\"\n              [subTitleUrl]=\"subTitleUrl\"\n              [titleIcon]=\"titleIcon\"\n              class=\"title text-truncate\">\n            </app-page-title>\n          } @else {\n            <div class=\"title\">\n              <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n            </div>\n          }\n          <div class=\"actions\">\n            @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n              <ec-button id=\"primaryAction\"\n                class=\"ml-2\"\n                [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n                type=\"primary\"\n                [label]=\"primaryActionLabel\"\n                (clicked)=\"primaryAction($event)\">\n              </ec-button>\n            }\n            @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n              <ec-button id=\"secondaryAction\"\n                class=\"ml-2\"\n                type=\"secondary\"\n                [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n                (clicked)=\"secondaryAction($event)\">\n              </ec-button>\n            }\n            @if (moreActions?.length && !readonly) {\n              <ec-dropdown id=\"moreActions\"\n                [disabled]=\"status?.status === 'pending'\"\n                class=\"ml-2\"\n                buttonType=\"text\"\n                [label]=\"moreActionsLabel\"\n                [items]=\"moreActions\">\n              </ec-dropdown>\n            }\n            <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n          </div>\n        </div>\n        @if (customHeaderTemplate) {\n          <div\n            class=\"page-header\">\n            <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n          </div>\n        }\n        @if (!customErrorBannerTemplate && errors) {\n          <ec-banner\n            id=\"pageViewErrors\"\n            [class.border-bottom-0]=\"!isDialog\">\n            <div [innerHtml]=\"errors\"></div>\n          </ec-banner>\n        } @else {\n          @if (errors) {\n            <ec-banner\n              id=\"pageViewErrors\"\n              [class.border-bottom-0]=\"!isDialog\">\n              <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n            </ec-banner>\n          }\n        }\n      </header>\n    }\n  </div>\n\n  @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n    <ec-button\n      id=\"pageViewDialogClose\"\n      type=\"icon\"\n      icon=\"icon-cancel\"\n      (clicked)=\"closeDialog()\">\n    </ec-button>\n  }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
         }], ctorParameters: () => [{ type: DialogService }], propDecorators: { isDialog: [{
                 type: Input
             }], readonly: [{
@@ -12309,11 +12309,11 @@ class WizardButtonsComponent {
         this.nextTab.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\r\n  <ec-button id=\"{{saveId}}\"\r\n    class=\"ml-2\"\r\n    type=\"primary\"\r\n    [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n    [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n    (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n    [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n  </ec-button>\r\n}\r\n@if (showBack) {\r\n  <ec-button id=\"previousTab\"\r\n    class=\"ml-2\"\r\n    type=\"secondary\"\r\n    [label]=\"backLabel\"\r\n    [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n    (clicked)=\"onPreviousTab()\">\r\n  </ec-button>\r\n}\r\n<ec-button id=\"{{cancelId}}\"\r\n  type=\"secondary\"\r\n  [label]=\"cancelLabel\"\r\n  [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n  (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\n  <ec-button id=\"{{saveId}}\"\n    class=\"ml-2\"\n    type=\"primary\"\n    [label]=\"(!showSave ? nextLabel : saveLabel)\"\n    [tabindex]=\"!tabindex ? 0 : tabindex\"\n    (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n    [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n  </ec-button>\n}\n@if (showBack) {\n  <ec-button id=\"previousTab\"\n    class=\"ml-2\"\n    type=\"secondary\"\n    [label]=\"backLabel\"\n    [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n    (clicked)=\"onPreviousTab()\">\n  </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n  type=\"secondary\"\n  [label]=\"cancelLabel\"\n  [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n  (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WizardButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-wizard-buttons', standalone: false, template: "@if (!hideNextSaveButton) {\r\n  <ec-button id=\"{{saveId}}\"\r\n    class=\"ml-2\"\r\n    type=\"primary\"\r\n    [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n    [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n    (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n    [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n  </ec-button>\r\n}\r\n@if (showBack) {\r\n  <ec-button id=\"previousTab\"\r\n    class=\"ml-2\"\r\n    type=\"secondary\"\r\n    [label]=\"backLabel\"\r\n    [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n    (clicked)=\"onPreviousTab()\">\r\n  </ec-button>\r\n}\r\n<ec-button id=\"{{cancelId}}\"\r\n  type=\"secondary\"\r\n  [label]=\"cancelLabel\"\r\n  [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n  (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'ec-wizard-buttons', standalone: false, template: "@if (!hideNextSaveButton) {\n  <ec-button id=\"{{saveId}}\"\n    class=\"ml-2\"\n    type=\"primary\"\n    [label]=\"(!showSave ? nextLabel : saveLabel)\"\n    [tabindex]=\"!tabindex ? 0 : tabindex\"\n    (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n    [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n  </ec-button>\n}\n@if (showBack) {\n  <ec-button id=\"previousTab\"\n    class=\"ml-2\"\n    type=\"secondary\"\n    [label]=\"backLabel\"\n    [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n    (clicked)=\"onPreviousTab()\">\n  </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n  type=\"secondary\"\n  [label]=\"cancelLabel\"\n  [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n  (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"] }]
         }], ctorParameters: () => [], propDecorators: { nextLabel: [{
                 type: Input
             }], backLabel: [{
@@ -12349,11 +12349,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class WizardProgressComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WizardProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WizardProgressComponent, isStandalone: false, selector: "ec-wizard-progress", inputs: { tabGroup: "tabGroup", currentTab: "currentTab" }, ngImport: i0, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\r\n  <div\r\n    class=\"progress-tab\"\r\n    [class.ml-2]=\"!isFirst\"\r\n    [class.is-active]=\"currentTab?.id === tab.id\">\r\n    @if (tab.completed) {\r\n      <i\r\n      class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\r\n    }\r\n    @if (!tab.completed) {\r\n      <span>{{index+1}}.&nbsp;</span>\r\n    }\r\n    <span>{{tab.label | translate}}</span>\r\n    @if (!isLast) {\r\n      <i\r\n      class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\r\n    }\r\n  </div>\r\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WizardProgressComponent, isStandalone: false, selector: "ec-wizard-progress", inputs: { tabGroup: "tabGroup", currentTab: "currentTab" }, ngImport: i0, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n  <div\n    class=\"progress-tab\"\n    [class.ml-2]=\"!isFirst\"\n    [class.is-active]=\"currentTab?.id === tab.id\">\n    @if (tab.completed) {\n      <i\n      class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n    }\n    @if (!tab.completed) {\n      <span>{{index+1}}.&nbsp;</span>\n    }\n    <span>{{tab.label | translate}}</span>\n    @if (!isLast) {\n      <i\n      class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n    }\n  </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WizardProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-wizard-progress', standalone: false, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\r\n  <div\r\n    class=\"progress-tab\"\r\n    [class.ml-2]=\"!isFirst\"\r\n    [class.is-active]=\"currentTab?.id === tab.id\">\r\n    @if (tab.completed) {\r\n      <i\r\n      class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\r\n    }\r\n    @if (!tab.completed) {\r\n      <span>{{index+1}}.&nbsp;</span>\r\n    }\r\n    <span>{{tab.label | translate}}</span>\r\n    @if (!isLast) {\r\n      <i\r\n      class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\r\n    }\r\n  </div>\r\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"] }]
+            args: [{ selector: 'ec-wizard-progress', standalone: false, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n  <div\n    class=\"progress-tab\"\n    [class.ml-2]=\"!isFirst\"\n    [class.is-active]=\"currentTab?.id === tab.id\">\n    @if (tab.completed) {\n      <i\n      class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n    }\n    @if (!tab.completed) {\n      <span>{{index+1}}.&nbsp;</span>\n    }\n    <span>{{tab.label | translate}}</span>\n    @if (!isLast) {\n      <i\n      class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n    }\n  </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabGroup: [{
                 type: Input
             }], currentTab: [{