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

package/fesm2022/energycap-components.mjs

@@ -3238,11 +3238,14 @@ class MenuComponent {
      * @param filterText The search text to filter by
      * @returns The filtered list of MenuItems
      */
-    static filterOptions(options, filterText) {
-        const searchText = filterText.toLowerCase();
+    static filterOptions(options, filterText, caseSensitive = false) {
+        let searchText = caseSensitive ? filterText : filterText.toLowerCase();
         if (filterText && filterText !== '') {
-            const matchesSearch = (item) => item.label.toLowerCase().indexOf(searchText) >= 0 ||
-                (item.caption && item.caption.toLowerCase().indexOf(searchText) >= 0);
+            const matchesSearch = (item) => {
+                const itemLabel = caseSensitive ? item.label : item.label.toLowerCase();
+                const itemCaption = item.caption ? (caseSensitive ? item.caption : item.caption.toLowerCase()) : '';
+                return itemLabel.indexOf(searchText) >= 0 || (item.caption && itemCaption.indexOf(searchText) >= 0);
+            };
             return options.reduce((filteredItems, item) => {
                 // Match the item itself if it doesn't have any children
                 if (!item.items?.length && matchesSearch(item)) {
@@ -4185,6 +4188,7 @@ class ComboboxComponent extends FormControlBase {
          * Truncate menu items when true
          */
         this.truncateItems = false;
+        this.caseSensitive = false;
         /**
          * Notify the parent that the add new button was clicked
          * @todo discuss if we need to send along the value or should
@@ -4638,7 +4642,7 @@ class ComboboxComponent extends FormControlBase {
         this.search.emit(searchText);
         // do internal filtering if no one's subscribed to our search emitter
         if (this.search.observers.length === 0 && searchText !== undefined) {
-            this.resetOptions(MenuComponent.filterOptions(this.options, searchText));
+            this.resetOptions(MenuComponent.filterOptions(this.options, searchText, this.caseSensitive));
             if (this.addNewSelected && !this.addNewButton) {
                 this.addNewSelected = false;
             }
@@ -4751,6 +4755,9 @@ class ComboboxComponent extends FormControlBase {
         }
         if (this.addNew) {
             let match = this.filteredOptions.find((option) => {
+                if (this.caseSensitive) {
+                    return option.label === this.textboxFormModel.value;
+                }
                 return option.label.toLowerCase() === this.textboxFormModel.value.toLowerCase();
             });
             this.foundMatch = match ? true : false;
@@ -4795,7 +4802,7 @@ class ComboboxComponent extends FormControlBase {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (alwaysOpen) {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\"\r\n      *ecPopup=\"dropdownmenu\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n  <ec-textbox class=\"textbox-group-input mb-0\"\r\n    #textbox\r\n    [id]=\"id\"\r\n    [autofocus]=\"autofocus\"\r\n    [formModel]=\"textboxFormModel\"\r\n    [maxlength]=\"maxlength\"\r\n    [minlength]=\"minlength\"\r\n    [placeholder]=\"effectivePlaceholder\"\r\n    [required]=\"required\"\r\n    [tabindex]=\"tabindex\"\r\n    [readonly]=\"readonly\"\r\n    (input)=\"textboxValueChanged($event)\"\r\n    (keydown)=\"keyNavigate($event)\"\r\n    (focusout)=\"onBlur()\"\r\n    [upperCase]=\"upperCase\"\r\n    [pending]=\"pending && alwaysOpen\"\r\n  [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n  @if (!hideToggleButton) {\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      (click)=\"toggleMenu($event)\"\r\n      (keydown)=\"keyNavigate($event)\"\r\n    [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    @if (addNew) {\r\n      <button class=\"add-new {{addNewOptions?.classList}}\"\r\n        id=\"{{id}}_addNew\"\r\n        #addNewButton\r\n        [class.is-selected]=\"addNewSelected\"\r\n        [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n        (click)=\"onAddNew($event)\">\r\n        <span class=\"add-new-label ec-util-truncate\">\r\n          @if (addNew === 'static' || addNew === true) {\r\n            <span\r\n              translate>{{addNewOptions?.label}}\r\n            </span>\r\n          }\r\n          @if (addNew === 'dynamic') {\r\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n          </span>\r\n        }\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n  }\r\n\r\n  <ec-menu id=\"{{id}}_menu\"\r\n    [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n    [ngClass]=\"menuElementClasses\"\r\n    [templateType]=\"templateType\"\r\n    [customMenuTemplate]=\"customMenuTemplate\"\r\n    [showNoItems]=\"!hideNoMatches\"\r\n    [noDataText]=\"noMatchesText\"\r\n    [items]=\"filteredOptions\"\r\n    [selected]=\"selectedItem\"\r\n    (selectedChanged)=\"selectedChanged($event)\"\r\n    [preserveIconSpace]=\"preserveIconSpace\"\r\n  [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\r\n    <footer>\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  }\r\n</div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", caseSensitive: "caseSensitive" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'open': menuStatus === 'visible',\r\n                 'invalid': formModel.touched && formModel.invalid,\r\n                 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled,\r\n                 'is-always-open': alwaysOpen}\">\r\n\r\n  @if (label) {\r\n    <label>\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  @if (alwaysOpen) {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n    @if (filteredOptions.length > 0 || textboxFormModel.value) {\r\n      <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"textbox-group control-input\"\r\n      [ngClass]=\"textboxElementClasses\"\r\n      *ecPopup=\"dropdownmenu\">\r\n      <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n\r\n<ng-template #textbox>\r\n  <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n  <ec-textbox class=\"textbox-group-input mb-0\"\r\n    #textbox\r\n    [id]=\"id\"\r\n    [autofocus]=\"autofocus\"\r\n    [formModel]=\"textboxFormModel\"\r\n    [maxlength]=\"maxlength\"\r\n    [minlength]=\"minlength\"\r\n    [placeholder]=\"effectivePlaceholder\"\r\n    [required]=\"required\"\r\n    [tabindex]=\"tabindex\"\r\n    [readonly]=\"readonly\"\r\n    (input)=\"textboxValueChanged($event)\"\r\n    (keydown)=\"keyNavigate($event)\"\r\n    (focusout)=\"onBlur()\"\r\n    [upperCase]=\"upperCase\"\r\n    [pending]=\"pending && alwaysOpen\"\r\n  [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n  @if (!hideToggleButton) {\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"-1\"\r\n      type=\"secondary\"\r\n      (click)=\"toggleMenu($event)\"\r\n      (keydown)=\"keyNavigate($event)\"\r\n    [class.active]=\"menuStatus === 'visible'\"></ec-button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n    @if (addNew) {\r\n      <button class=\"add-new {{addNewOptions?.classList}}\"\r\n        id=\"{{id}}_addNew\"\r\n        #addNewButton\r\n        [class.is-selected]=\"addNewSelected\"\r\n        [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n        (click)=\"onAddNew($event)\">\r\n        <span class=\"add-new-label ec-util-truncate\">\r\n          @if (addNew === 'static' || addNew === true) {\r\n            <span\r\n              translate>{{addNewOptions?.label}}\r\n            </span>\r\n          }\r\n          @if (addNew === 'dynamic') {\r\n            <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\r\n            [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n          </span>\r\n        }\r\n      </span>\r\n      <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\r\n    </button>\r\n  }\r\n\r\n  <ec-menu id=\"{{id}}_menu\"\r\n    [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n    [ngClass]=\"menuElementClasses\"\r\n    [templateType]=\"templateType\"\r\n    [customMenuTemplate]=\"customMenuTemplate\"\r\n    [showNoItems]=\"!hideNoMatches\"\r\n    [noDataText]=\"noMatchesText\"\r\n    [items]=\"filteredOptions\"\r\n    [selected]=\"selectedItem\"\r\n    (selectedChanged)=\"selectedChanged($event)\"\r\n    [preserveIconSpace]=\"preserveIconSpace\"\r\n  [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n  @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\r\n    <footer>\r\n      <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n    </footer>\r\n  }\r\n</div>\r\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -4845,6 +4852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 type: Input
             }], truncateItems: [{
                 type: Input
+            }], caseSensitive: [{
+                type: Input
             }], addNewClick: [{
                 type: Output
             }], search: [{
@@ -8489,7 +8498,7 @@ class MultiselectComponent extends FormControlBase {
         if (!filterText)
             return false;
         const lowerFilter = filterText.toLowerCase();
-        const existsInOptions = MenuComponent.getSelectableItems(this.options)
+        const existsInOptions = MenuComponent.getSelectableItems(this.getAllOptions())
             .some(item => item.label.toLowerCase() === lowerFilter);
         if (existsInOptions)
             return false;
@@ -8778,13 +8787,14 @@ class MultiselectComponent extends FormControlBase {
         const filterText = (this.filterFormModel.value || '').trim();
         if (!filterText)
             return;
-        // Guard: don't add if it matches an existing option or is already selected
+        // Guard: don't add if it matches an existing option (including previous custom items)
+        // or is already selected.
         const lowerFilter = filterText.toLowerCase();
-        const existsInOptions = MenuComponent.getSelectableItems(this.options)
+        const existsInAllOptions = MenuComponent.getSelectableItems(this.getAllOptions())
             .some(item => item.label.toLowerCase() === lowerFilter);
         const alreadySelected = this.selectedItems
             .some(item => item.label.toLowerCase() === lowerFilter);
-        if (existsInOptions || alreadySelected)
+        if (existsInAllOptions || alreadySelected)
             return;
         if (this.maxSelections > 0 && this.selectedItems.length >= this.maxSelections)
             return;
@@ -8911,9 +8921,9 @@ class MultiselectComponent extends FormControlBase {
      */
     resetOptions(options) {
         const baseOptions = options || this.getAllOptions();
-        this.selectAllItem.checked = this.allSelected;
         this.filteredOptions = baseOptions.length > 0 ? [this.selectAllItem, ...baseOptions] : [];
         this.selectableItems = MenuComponent.getSelectableItems(this.filteredOptions);
+        this.selectAllItem.checked = this.allSelected;
         this.highlightedItemIndex = -1;
         this.highlightedItem = null;
         // Keep selectAllDependentGroup in sync with the visible items so that the
@@ -9165,11 +9175,11 @@ class MultiselectComponent extends FormControlBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\r\n                 'is-readonly': readonly,\r\n                 'is-disabled': formModel.disabled}\">\r\n\r\n  @if (label) {\r\n    <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\r\n      <span>{{label | translate}}</span>\r\n      @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\r\n        <span>&nbsp;{{validationErrors}}</span>\r\n      }\r\n      @if (helpPopover) {\r\n        <ec-help-popover id=\"{{id}}_helpPopover\"\r\n          class=\"d-inline-block my-n3 mx-n1\"\r\n          text=\"{{helpPopover | translate}}\"\r\n          contentPosition=\"{{helpPopoverPosition}}\">\r\n        </ec-help-popover>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"textbox-group control-input\"\r\n    *ecPopup=\"dropdownmenu\">\r\n    <div class=\"multiselect-input\"\r\n      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button .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      [attr.id]=\"id + '_input_container'\"\r\n      role=\"combobox\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-owns]=\"id + '_menu_list'\"\r\n      [class.is-focused]=\"menuStatus === 'visible'\"\r\n      [class.is-disabled]=\"formModel.disabled\"\r\n      [class.is-empty]=\"selectedItems.length === 0\"\r\n      [class.is-required]=\"required\"\r\n      [class.has-selections]=\"selectedItems.length > 0\"\r\n      (click)=\"toggleMenu($event)\">\r\n\r\n      <!-- Selected tags -->\r\n      @if (selectedTags.length > 0) {\r\n        <ec-tags\r\n          id=\"{{id}}_tags\"\r\n          [tags]=\"selectedTags\"\r\n          [wrap]=\"true\"\r\n          [isCondensed]=\"false\"\r\n          [isSubtle]=\"true\"\r\n          (tagClosed)=\"removeTag($event)\">\r\n        </ec-tags>\r\n      }\r\n\r\n      <!-- Filter input -->\r\n      <input\r\n        #filterInput\r\n        class=\"multiselect-filter-input\"\r\n        type=\"text\"\r\n        [id]=\"id + '_filter'\"\r\n        [formControl]=\"filterFormModel\"\r\n        [placeholder]=\"effectivePlaceholder\"\r\n        [tabindex]=\"tabindex\"\r\n        (input)=\"onFilterInput()\"\r\n        (keydown)=\"keyNavigate($event)\"\r\n        (focusout)=\"onBlur()\"\r\n        (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\r\n        autocomplete=\"off\"\r\n        aria-autocomplete=\"list\"\r\n        [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendantId\"\r\n        [attr.aria-labelledby]=\"label ? id + '_label' : null\"\r\n        [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\r\n        [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\r\n\r\n      <i class=\"ec-icon icon-required\"></i>\r\n      <i class=\"ec-icon icon-invalid\"></i>\r\n    </div>\r\n\r\n    <!-- Live region for selection announcements -->\r\n    <span [id]=\"id + '_selection_status'\"\r\n      class=\"sr-only\"\r\n      aria-live=\"polite\"\r\n      aria-atomic=\"true\">\r\n      {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\r\n    </span>\r\n\r\n    <!-- Clear button -->\r\n    @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\r\n      <ec-button class=\"multiselect-clear-btn\"\r\n        [id]=\"id + '_clear'\"\r\n        icon=\"icon-cancel\"\r\n        type=\"secondary\"\r\n        [tabindex]=\"0\"\r\n        attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\r\n        (click)=\"clearAll(); $event.stopPropagation()\">\r\n      </ec-button>\r\n    }\r\n\r\n    <!-- Toggle button -->\r\n    <ec-button class=\"textbox-group-btn-right\"\r\n      [id]=\"id + '_button'\"\r\n      [disabled]=\"formModel.disabled\"\r\n      icon=\"icon-caret-down\"\r\n      [tabindex]=\"0\"\r\n      type=\"secondary\"\r\n      [attr.aria-label]=\"'Toggle dropdown'\"\r\n      [attr.aria-expanded]=\"menuStatus === 'visible'\"\r\n      (click)=\"toggleMenu($event)\"\r\n      [class.active]=\"menuStatus === 'visible'\">\r\n    </ec-button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownmenu>\r\n  <div class=\"popup\"\r\n    ecOverlay\r\n    role=\"listbox\"\r\n    [attr.id]=\"id + '_listbox'\"\r\n    [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\r\n    aria-multiselectable=\"true\"\r\n    [status]=\"'hasData'\">\r\n\r\n    <ec-menu id=\"{{id}}_menu\"\r\n      [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\r\n      [templateType]=\"'checkAndLabel'\"\r\n      [customMenuTemplate]=\"checkboxMenuTemplate\"\r\n      [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\r\n      [noDataText]=\"noMatchesText\"\r\n      [items]=\"filteredOptions\"\r\n      [selected]=\"highlightedItem\"\r\n      (selectedChanged)=\"onItemSelected($event)\"\r\n      [truncateItems]=\"truncateItems\"\r\n      [maintainSelectedItem]=\"false\">\r\n    </ec-menu>\r\n\r\n    @if (showAddCustomOption) {\r\n      <div class=\"add-custom-option\"\r\n        role=\"option\"\r\n        attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\r\n        tabindex=\"-1\"\r\n        (click)=\"addCustomItem()\">\r\n        <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\r\n        <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Custom checkbox menu item template -->\r\n<ng-template #checkboxMenuTemplate let-item>\r\n  <div class=\"d-flex\"\r\n    role=\"option\"\r\n    [attr.aria-selected]=\"!!item.checked\"\r\n    [attr.aria-label]=\"item.label\">\r\n    @if (item === selectAllItem) {\r\n      <ec-checkbox\r\n        id=\"{{id}}_selectAll_checkbox\"\r\n        class=\"m-0 pr-3\"\r\n        [formModel]=\"selectAllFormControl\"\r\n        [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\r\n        [label]=\"item.label\"\r\n        (click)=\"$event.stopPropagation()\">\r\n      </ec-checkbox>\r\n    } @else {\r\n      @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\r\n        <ec-checkbox\r\n          id=\"{{item.id || id + '_checkbox_' + item.label}}\"\r\n          class=\"m-0 pr-3\"\r\n          [formModel]=\"getCheckboxFormControl(item)\"\r\n          [attr.aria-label]=\"item.label\"\r\n          [label]=\"item.label\"\r\n          [icon]=\"item.icon\"\r\n          (click)=\"$event.stopPropagation()\">\r\n        </ec-checkbox>\r\n      } @else {\r\n        <span>{{item.label}}</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']