@energycap/components 0.47.2 → 0.47.4-ECAP-35552-PresentationModeUpdate.20261023-1554

package/fesm2022/energycap-components.mjs

@@ -4329,7 +4329,7 @@ var TextboxComponent = class TextboxComponent extends FormControlBase {
 			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>",
+			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\" aria-hidden=\"true\"></i>\n    <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></i>\n    <i class=\"ec-icon icon-loading\" aria-hidden=\"true\"></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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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);outline:2px solid transparent;outline-offset:2px;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);outline:2px solid transparent;outline-offset:2px;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: [
 				{
@@ -4404,7 +4404,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ec-textbox",
 			changeDetection: ChangeDetectionStrategy.Eager,
 			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>",
+			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\" aria-hidden=\"true\"></i>\n    <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></i>\n    <i class=\"ec-icon icon-loading\" aria-hidden=\"true\"></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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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);outline:2px solid transparent;outline-offset:2px;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);outline:2px solid transparent;outline-offset:2px;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"]
 		}]
 	}],
@@ -5284,7 +5284,7 @@ var FormControlComponent = class FormControlComponent {
 			}],
 			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",
+			template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\" aria-hidden=\"true\"></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:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ec-form-control .ec-form-control-clear:focus-visible,ec-form-control .ec-form-control-action:focus-visible{outline-color:var(--ec-border-color-focus)}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"],
 			changeDetection: i0.ChangeDetectionStrategy.Eager,
 			encapsulation: i0.ViewEncapsulation.None
@@ -5303,7 +5303,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.Eager,
 			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",
+			template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\" aria-hidden=\"true\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\" aria-hidden=\"true\"></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:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ec-form-control .ec-form-control-clear:focus-visible,ec-form-control .ec-form-control-action:focus-visible{outline-color:var(--ec-border-color-focus)}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"]
 		}]
 	}],
@@ -9380,6 +9380,7 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
 		this.allowCustom = false;
 		this.maxSelections = 0;
 		this.showSelectAll = true;
+		this.showClearAll = true;
 		this.search = new EventEmitter();
 		this.selectionChanged = new EventEmitter();
 		this.filteredOptions = [];
@@ -9815,6 +9816,7 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
 				maxSelections: "maxSelections",
 				totalRecords: "totalRecords",
 				showSelectAll: "showSelectAll",
+				showClearAll: "showClearAll",
 				customMenuTemplate: "customMenuTemplate"
 			},
 			outputs: {
@@ -9846,7 +9848,7 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
 			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                 'open': menuStatus === 'visible'}\">\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        [attr.cdkFocusInitial]=\"autofocus || null\"\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]=\"-1\"\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]=\"pending ? 'pending' : '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\n    @if (showTotalRecordsFooter) {\n      <footer [attr.id]=\"id + '_footer'\">\n        <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"multiselect-item-row 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        <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0\"\n          [class.pr-3]=\"!customMenuTemplate\"\n          [class.w-auto]=\"!!customMenuTemplate\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"customMenuTemplate ? undefined : item.label\"\n          [icon]=\"customMenuTemplate ? undefined : item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n        @if (customMenuTemplate) {\n          <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n          <div class=\"multiselect-item-content\"\n            [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n            <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n          </div>\n        }\n      } @else {\n        <span>{{item.label}}</span>\n      }\n    }\n  </div>\n</ng-template>\n",
+			template: "<div class=\"control control-label-{{labelPosition}}\"\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled,\n                 'open': menuStatus === 'visible'}\">\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        [attr.cdkFocusInitial]=\"autofocus || null\"\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\" aria-hidden=\"true\"></i>\n      <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></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 (showClearAll && 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]=\"-1\"\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]=\"pending ? 'pending' : '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\n    @if (showTotalRecordsFooter) {\n      <footer [attr.id]=\"id + '_footer'\">\n        <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"multiselect-item-row 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        <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0\"\n          [class.pr-3]=\"!customMenuTemplate\"\n          [class.w-auto]=\"!!customMenuTemplate\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"customMenuTemplate ? undefined : item.label\"\n          [icon]=\"customMenuTemplate ? undefined : item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n        @if (customMenuTemplate) {\n          <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n          <div class=\"multiselect-item-content\"\n            [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n            <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n          </div>\n        }\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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}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}\n"],
 			dependencies: [
 				{
@@ -10019,7 +10021,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ec-multiselect",
 			changeDetection: ChangeDetectionStrategy.Eager,
 			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                 'open': menuStatus === 'visible'}\">\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        [attr.cdkFocusInitial]=\"autofocus || null\"\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]=\"-1\"\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]=\"pending ? 'pending' : '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\n    @if (showTotalRecordsFooter) {\n      <footer [attr.id]=\"id + '_footer'\">\n        <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"multiselect-item-row 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        <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0\"\n          [class.pr-3]=\"!customMenuTemplate\"\n          [class.w-auto]=\"!!customMenuTemplate\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"customMenuTemplate ? undefined : item.label\"\n          [icon]=\"customMenuTemplate ? undefined : item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n        @if (customMenuTemplate) {\n          <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n          <div class=\"multiselect-item-content\"\n            [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n            <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n          </div>\n        }\n      } @else {\n        <span>{{item.label}}</span>\n      }\n    }\n  </div>\n</ng-template>\n",
+			template: "<div class=\"control control-label-{{labelPosition}}\"\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n                 'is-readonly': readonly,\n                 'is-disabled': formModel.disabled,\n                 'open': menuStatus === 'visible'}\">\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        [attr.cdkFocusInitial]=\"autofocus || null\"\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\" aria-hidden=\"true\"></i>\n      <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></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 (showClearAll && 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]=\"-1\"\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]=\"pending ? 'pending' : '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\n    @if (showTotalRecordsFooter) {\n      <footer [attr.id]=\"id + '_footer'\">\n        <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n      </footer>\n    }\n  </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n  <div class=\"multiselect-item-row 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        <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n        <ec-checkbox\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n          class=\"m-0\"\n          [class.pr-3]=\"!customMenuTemplate\"\n          [class.w-auto]=\"!!customMenuTemplate\"\n          [formModel]=\"getCheckboxFormControl(item)\"\n          [attr.aria-label]=\"item.label\"\n          [label]=\"customMenuTemplate ? undefined : item.label\"\n          [icon]=\"customMenuTemplate ? undefined : item.icon\"\n          (click)=\"$event.stopPropagation()\">\n        </ec-checkbox>\n        @if (customMenuTemplate) {\n          <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n          <div class=\"multiselect-item-content\"\n            [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n            <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n          </div>\n        }\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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}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}\n"]
 		}]
 	}],
@@ -10046,6 +10048,7 @@ i0.ɵɵngDeclareClassMetadata({
 		maxSelections: [{ type: Input }],
 		totalRecords: [{ type: Input }],
 		showSelectAll: [{ type: Input }],
+		showClearAll: [{ type: Input }],
 		customMenuTemplate: [{ type: Input }],
 		search: [{ type: Output }],
 		selectionChanged: [{ type: Output }],
@@ -11869,7 +11872,7 @@ var HierarchyTreeComponent = class HierarchyTreeComponent extends HierarchyBase
 			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]=\"$safeNavigationMigration(rootNode?.url)\"\n        [ecNavItemActiveExactMatch]='$safeNavigationMigration(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]=\"$safeNavigationMigration(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: $safeNavigationMigration(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>",
+			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]=\"$safeNavigationMigration(rootNode?.url)\"\n        [ecNavItemActiveExactMatch]='$safeNavigationMigration(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]=\"$safeNavigationMigration(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            aria-hidden=\"true\"\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: $safeNavigationMigration(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: [
 				{
@@ -11946,7 +11949,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ec-hierarchy-tree",
 			changeDetection: ChangeDetectionStrategy.Eager,
 			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]=\"$safeNavigationMigration(rootNode?.url)\"\n        [ecNavItemActiveExactMatch]='$safeNavigationMigration(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]=\"$safeNavigationMigration(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: $safeNavigationMigration(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>",
+			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]=\"$safeNavigationMigration(rootNode?.url)\"\n        [ecNavItemActiveExactMatch]='$safeNavigationMigration(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]=\"$safeNavigationMigration(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            aria-hidden=\"true\"\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: $safeNavigationMigration(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"]
 		}]
 	}],