@energycap/components 0.45.2-multi-select-component.20260303-1239 → 0.45.2-multi-select-component.20260304-0740

package/fesm2022/energycap-components.mjs

@@ -2597,6 +2597,10 @@ class CheckboxComponent extends FormControlBase {
          * The name of the checkbox input element
          */
         this.name = '';
+        /**
+         * Optional icon that can show to the left side of the label
+         */
+        this.icon = undefined;
         /**
          * Determines whether to ignore or include disabled dependent checkboxes in the check to determine the checkbox state.
          */
@@ -2701,13 +2705,15 @@ class CheckboxComponent extends FormControlBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      @if (label) {\r\n        <span id=\"{{id}}_label\"\r\n          class=\"label\">\r\n          <span [innerHtml]=\"label | translate\"></span>\r\n          @if (helpPopover) {\r\n            <ec-help-popover id=\"{{id}}_helpPopover\"\r\n              class=\"d-inline-block my-n2 mx-n1\"\r\n              text=\"{{helpPopover | translate}}\"\r\n              contentPosition=\"{{helpPopoverPosition}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", icon: "icon", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\r\n        }\r\n\r\n        @if (label) {\r\n          <span id=\"{{id}}_label\"\r\n            class=\"label\">\r\n            <span [innerHtml]=\"label | translate\"></span>\r\n            @if (helpPopover) {\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                class=\"d-inline-block my-n2 mx-n1\"\r\n                text=\"{{helpPopover | translate}}\"\r\n                contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n      \r\n    </label>\r\n  </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-checkbox', standalone: false, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      @if (label) {\r\n        <span id=\"{{id}}_label\"\r\n          class=\"label\">\r\n          <span [innerHtml]=\"label | translate\"></span>\r\n          @if (helpPopover) {\r\n            <ec-help-popover id=\"{{id}}_helpPopover\"\r\n              class=\"d-inline-block my-n2 mx-n1\"\r\n              text=\"{{helpPopover | translate}}\"\r\n              contentPosition=\"{{helpPopoverPosition}}\">\r\n            </ec-help-popover>\r\n          }\r\n        </span>\r\n      }\r\n    </label>\r\n  </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
+            args: [{ selector: 'ec-checkbox', standalone: false, template: "<div class=\"control\">\r\n  <label class=\"checkbox\"\r\n    [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n    <input id=\"{{id}}_input\"\r\n      #checkboxInput\r\n      class='input'\r\n      [class.indeterminate]=\"indeterminate\"\r\n      [attr.id]=\"inputId\"\r\n      [attr.name]=\"name\"\r\n      type=\"checkbox\"\r\n      tabindex=\"{{tabindex}}\"\r\n      [formControl]=\"formModel\"\r\n      [attr.cdkFocusInitial]=\"autofocus || null\">\r\n      <i class=\"ec-icon icon-check\"></i>\r\n\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\r\n        }\r\n\r\n        @if (label) {\r\n          <span id=\"{{id}}_label\"\r\n            class=\"label\">\r\n            <span [innerHtml]=\"label | translate\"></span>\r\n            @if (helpPopover) {\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                class=\"d-inline-block my-n2 mx-n1\"\r\n                text=\"{{helpPopover | translate}}\"\r\n                contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n            }\r\n          </span>\r\n        }\r\n      </div>\r\n      \r\n    </label>\r\n  </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { name: [{
                 type: Input
+            }], icon: [{
+                type: Input
             }], dependentCheckboxesGroup: [{
                 type: Input
             }], ignoreDisabledDependents: [{
@@ -6599,7 +6605,7 @@ class TableSelectableRowComponent {
         this.context.rowCheckboxes.controls.forEach(control => control.setValue(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableSelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n@if (isSelectionEnabled) {\r\n  @if (isHeader) {\r\n    <th\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      @if (context?.selectAllCheckbox) {\r\n        <ec-checkbox id=\"{{id}}_selectAll\"\r\n          class=\"m-0\"\r\n          [formModel]=\"context?.selectAllCheckbox\"\r\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\r\n          [ignoreDisabledDependents]=\"false\">\r\n        </ec-checkbox>\r\n      }\r\n    </th>\r\n  }\r\n  @if (!isHeader && formControl) {\r\n    <td\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\r\n      and allow the value to be visible to other components (for example, when they subscribe\r\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\r\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n        [readonly]=\"isCheckboxDisabled\"\r\n        [attr.id]=\"checkboxAttributeID\"\r\n        class=\"m-0 row-checkbox\"\r\n        [formModel]=\"formControl\">\r\n      </ec-checkbox>\r\n    </td>\r\n  }\r\n}\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\r\n<ng-content select=\".before-checkbox\"></ng-content>\r\n@if (isSelectionEnabled) {\r\n  @if (isHeader) {\r\n    <th\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      @if (context?.selectAllCheckbox) {\r\n        <ec-checkbox id=\"{{id}}_selectAll\"\r\n          class=\"m-0\"\r\n          [formModel]=\"context?.selectAllCheckbox\"\r\n          [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\r\n          [ignoreDisabledDependents]=\"false\">\r\n        </ec-checkbox>\r\n      }\r\n    </th>\r\n  }\r\n  @if (!isHeader && formControl) {\r\n    <td\r\n      class=\"checkbox\"\r\n      [ecTableLockedColumn]=\"lockedColOptions\">\r\n      <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\r\n      and allow the value to be visible to other components (for example, when they subscribe\r\n      to valueChanges on the FormArray that contains all the checkbox FormControls). -->\r\n      <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\r\n        [readonly]=\"isCheckboxDisabled\"\r\n        [attr.id]=\"checkboxAttributeID\"\r\n        class=\"m-0 row-checkbox\"\r\n        [formModel]=\"formControl\">\r\n      </ec-checkbox>\r\n    </td>\r\n  }\r\n}\r\n<!-- The rest of the table row -->\r\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TableSelectableRowComponent, decorators: [{
             type: Component,
@@ -9084,11 +9090,11 @@ class MultiselectComponent extends FormControlBase {
         this.syncCheckboxFormControls();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          class=\"multiselect-tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"selectedItems.length === 0 ? effectivePlaceholder : ''\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ selectedItems.length }} {{ selectedItems.length === 1 ? 'item' : 'items' }} selected\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"-1\"\r\n        [attr.aria-label]=\"'Clear all selections'\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        [attr.aria-label]=\"'Add ' + filterFormModel.value\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">Add \"{{filterFormModel.value}}\"</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n      <span class=\"label text-heading-3\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      }\r\n      @if (item.icon) {\r\n        <i class=\"ec-icon {{item.icon}} pr-2\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"label\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.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) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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) .multiselect-clear-btn ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:2rem;max-height:6rem;overflow-y:auto;padding:.125rem .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.multiselect-tags{display:inline-flex}.multiselect-tags ::ng-deep .tags{flex-wrap:wrap;gap:.125rem;margin:0;padding:0}.multiselect-tags ::ng-deep .tag{margin:0}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 4rem;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}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder)}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          class=\"multiselect-tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"selectedItems.length === 0 ? effectivePlaceholder : ''\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ selectedItems.length }} {{ selectedItems.length === 1 ? 'item' : 'items' }} selected\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"-1\"\r\n        [attr.aria-label]=\"'Clear all selections'\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        [attr.aria-label]=\"'Add ' + filterFormModel.value\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">Add \"{{filterFormModel.value}}\"</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n      <!-- <span class=\"label text-heading-3\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span> -->\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      }\r\n      <!-- @if (item.icon) {\r\n        <i class=\"ec-icon {{item.icon}} pr-2\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"label\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span> -->\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.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) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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) .multiselect-clear-btn ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:2rem;max-height:6rem;overflow-y:auto;padding:.125rem .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.multiselect-tags{display:inline-flex}.multiselect-tags ::ng-deep .tags{flex-wrap:wrap;gap:.125rem;margin:0;padding:0}.multiselect-tags ::ng-deep .tag{margin:0}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 4rem;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}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder)}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          class=\"multiselect-tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"selectedItems.length === 0 ? effectivePlaceholder : ''\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ selectedItems.length }} {{ selectedItems.length === 1 ? 'item' : 'items' }} selected\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"-1\"\r\n        [attr.aria-label]=\"'Clear all selections'\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        [attr.aria-label]=\"'Add ' + filterFormModel.value\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">Add \"{{filterFormModel.value}}\"</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n      <span class=\"label text-heading-3\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      }\r\n      @if (item.icon) {\r\n        <i class=\"ec-icon {{item.icon}} pr-2\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"label\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.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) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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) .multiselect-clear-btn ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:2rem;max-height:6rem;overflow-y:auto;padding:.125rem .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.multiselect-tags{display:inline-flex}.multiselect-tags ::ng-deep .tags{flex-wrap:wrap;gap:.125rem;margin:0;padding:0}.multiselect-tags ::ng-deep .tag{margin:0}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 4rem;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}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder)}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          class=\"multiselect-tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"selectedItems.length === 0 ? effectivePlaceholder : ''\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ selectedItems.length }} {{ selectedItems.length === 1 ? 'item' : 'items' }} selected\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"-1\"\r\n        [attr.aria-label]=\"'Clear all selections'\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        [attr.aria-label]=\"'Add ' + filterFormModel.value\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">Add \"{{filterFormModel.value}}\"</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n      <!-- <span class=\"label text-heading-3\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span> -->\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      }\r\n      <!-- @if (item.icon) {\r\n        <i class=\"ec-icon {{item.icon}} pr-2\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"label\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n      </span> -->\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.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) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.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) .multiselect-clear-btn ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:2rem;max-height:6rem;overflow-y:auto;padding:.125rem .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-input:hover:not(.is-disabled):not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.multiselect-tags{display:inline-flex}.multiselect-tags ::ng-deep .tags{flex-wrap:wrap;gap:.125rem;margin:0;padding:0}.multiselect-tags ::ng-deep .tag{margin:0}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 4rem;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}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder)}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -9979,7 +9985,7 @@ class ConfirmComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [action]=\"status?.action\"\r\n  [noDataTemplate]=\"inlineConfirmResult\"\r\n  overlayClassList=\"p-0\"\r\n  class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      @if (context?.title) {\r\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\r\n      }\r\n      @if (error) {\r\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      }\r\n      @if (context?.message) {\r\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      }\r\n\r\n      @if (context?.checkConfirm) {\r\n        <ec-checkbox\r\n          [formModel]=\"formGroup.get('checkbox')\"\r\n          name=\"confirmCheckbox\"\r\n          [label]=\"context?.checkboxText\"\r\n          [autofocus]=\"true\"\r\n        ></ec-checkbox>\r\n      }\r\n      @if (showTextBox) {\r\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      }\r\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\r\n        <ec-textbox id=\"confirmTextbox\"\r\n          [autofocus]=\"true\"\r\n          [formModel]=\"formGroup.get('textbox')\"\r\n          [required]=\"context?.textboxRequired\"\r\n          [label]=\"context?.textboxLabel\"\r\n          [type]=\"context?.textboxType\"\r\n          [rows]=\"context?.textareaRows\"\r\n          [placeholder]=\"context?.textboxPlaceholder\"\r\n          [upperCase]=\"context?.textboxUppercase\">\r\n        </ec-textbox>\r\n      }\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n        class=\"ml-2\"\r\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n        [autofocus]=\"!context?.textboxType\"\r\n        [isSubmit]=\"context?.saveOnEnter\"\r\n        (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      @if (context?.alternateSaveLabel) {\r\n        <ec-button id=\"alternateSaveConfirmButton\"\r\n          class=\"ml-2\"\r\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n          [label]=\"context?.alternateSaveLabel\"\r\n          (clicked)=\"onSave('alternate')\">\r\n        </ec-button>\r\n      }\r\n      @if (!context?.hideCancel) {\r\n        <ec-button\r\n          id=\"cancelConfirmButton\"\r\n          class=\"ml-auto\"\r\n          type=\"secondary\"\r\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n          (clicked)=\"onCancel()\">\r\n        </ec-button>\r\n      }\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n        label=\"Close\"\r\n        type=\"secondary\"\r\n        class=\"ml-auto\"\r\n        (clicked)=\"status?.action?.onClick!()\"\r\n        [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n  [status]=\"status?.status\"\r\n  [message]=\"status?.message\"\r\n  [action]=\"status?.action\"\r\n  [noDataTemplate]=\"inlineConfirmResult\"\r\n  overlayClassList=\"p-0\"\r\n  class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      @if (context?.title) {\r\n        <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\r\n      }\r\n      @if (error) {\r\n        <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      }\r\n      @if (context?.message) {\r\n        <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      }\r\n\r\n      @if (context?.checkConfirm) {\r\n        <ec-checkbox\r\n          [formModel]=\"formGroup.get('checkbox')\"\r\n          name=\"confirmCheckbox\"\r\n          [label]=\"context?.checkboxText\"\r\n          [autofocus]=\"true\"\r\n        ></ec-checkbox>\r\n      }\r\n      @if (showTextBox) {\r\n        <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      }\r\n      @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\r\n        <ec-textbox id=\"confirmTextbox\"\r\n          [autofocus]=\"true\"\r\n          [formModel]=\"formGroup.get('textbox')\"\r\n          [required]=\"context?.textboxRequired\"\r\n          [label]=\"context?.textboxLabel\"\r\n          [type]=\"context?.textboxType\"\r\n          [rows]=\"context?.textareaRows\"\r\n          [placeholder]=\"context?.textboxPlaceholder\"\r\n          [upperCase]=\"context?.textboxUppercase\">\r\n        </ec-textbox>\r\n      }\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n        class=\"ml-2\"\r\n        [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n        [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n        [autofocus]=\"!context?.textboxType\"\r\n        [isSubmit]=\"context?.saveOnEnter\"\r\n        (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      @if (context?.alternateSaveLabel) {\r\n        <ec-button id=\"alternateSaveConfirmButton\"\r\n          class=\"ml-2\"\r\n          [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n          [label]=\"context?.alternateSaveLabel\"\r\n          (clicked)=\"onSave('alternate')\">\r\n        </ec-button>\r\n      }\r\n      @if (!context?.hideCancel) {\r\n        <ec-button\r\n          id=\"cancelConfirmButton\"\r\n          class=\"ml-auto\"\r\n          type=\"secondary\"\r\n          [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n          (clicked)=\"onCancel()\">\r\n        </ec-button>\r\n      }\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n        label=\"Close\"\r\n        type=\"secondary\"\r\n        class=\"ml-auto\"\r\n        (clicked)=\"status?.action?.onClick!()\"\r\n        [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,