@entake/particle 20.0.2 → 20.0.3

package/fesm2022/entake-particle.mjs

@@ -5308,6 +5308,7 @@ class DropdownComponent {
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
     collapsedButtonTooltipEnabled = input(true, ...(ngDevMode ? [{ debugName: "collapsedButtonTooltipEnabled" }] : []));
     dropdownBoxMinWidth = input(200, ...(ngDevMode ? [{ debugName: "dropdownBoxMinWidth" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -5540,7 +5541,7 @@ class DropdownComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -5552,7 +5553,7 @@ class DropdownComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -5840,13 +5841,13 @@ class DropdownComponent {
         return previousOption;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"inputId() ?? dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -5878,7 +5879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"inputId() ?? dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -5898,7 +5899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], collapsedButtonTooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTooltipEnabled", required: false }] }], dropdownBoxMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownBoxMinWidth", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], collapsedButtonTooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTooltipEnabled", required: false }] }], dropdownBoxMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownBoxMinWidth", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }], onKeyDown: [{
@@ -6014,6 +6015,7 @@ class MultiSelectComponent {
     maxExpandedEntries = input(0, ...(ngDevMode ? [{ debugName: "maxExpandedEntries" }] : []));
     expandedAsGrid = input(false, ...(ngDevMode ? [{ debugName: "expandedAsGrid" }] : []));
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -6213,7 +6215,7 @@ class MultiSelectComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -6225,7 +6227,7 @@ class MultiSelectComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -6478,13 +6480,13 @@ class MultiSelectComponent {
         return previousOption;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -6516,7 +6518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, AsyncPipe], template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, AsyncPipe], template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -6536,7 +6538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], entryClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxExpandedEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExpandedEntries", required: false }] }], expandedAsGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAsGrid", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], entryClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxExpandedEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExpandedEntries", required: false }] }], expandedAsGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAsGrid", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onKeyDown: [{
@@ -9037,6 +9039,7 @@ class RadioButtonsComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     colorClass = input('ok_button_color', ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
     isDisplayColumn = input(true, ...(ngDevMode ? [{ debugName: "isDisplayColumn" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange = () => {
     };
@@ -9078,13 +9081,13 @@ class RadioButtonsComponent {
         this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonsComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
@@ -9096,8 +9099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => RadioButtonsComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }] } });
+                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 /**
  * This interceptor will force the Content-Type header to application/json so that each http call doesn't have to.