@entake/particle 17.0.0 → 17.0.2

package/app/modules/profile-pic/profile-pic.component.d.ts

@@ -11,22 +11,23 @@ export declare class ProfilePicComponent {
      * Configurable CSS Margin
      */
     margin: string;
-    /**
-     * Image URL of the profile pic
-     */
-    imageUrl: string;
     /**
      * Tooltip to explain what the picture is
      */
     toolTip: string;
+    /**
+     * Disable the tooltip
+     */
+    tooltipDisabled: boolean;
     /**
      * Use gravatar instead of a custom image
      */
-    gravatarEmail: string;
+    set gravatarEmail(gravatarEmail: string);
     /**
-     * Returns a CSS URL of the Image URL.
+     * Image URL of the profile pic
      */
-    getUrl(): string;
+    set imageUrl(imageUrl: string);
+    url: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProfilePicComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProfilePicComponent, "particle-profile-pic", never, { "size": { "alias": "size"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "toolTip": { "alias": "toolTip"; "required": false; }; "gravatarEmail": { "alias": "gravatarEmail"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProfilePicComponent, "particle-profile-pic", never, { "size": { "alias": "size"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "toolTip": { "alias": "toolTip"; "required": false; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; }; "gravatarEmail": { "alias": "gravatarEmail"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; }, {}, never, never, false, never>;
 }

package/app/modules/rich-text/rich-text-capabilities.model.d.ts

@@ -4,4 +4,5 @@ export interface RichTextCapabilities {
     list: boolean;
     alignment: boolean;
     link: boolean;
+    images: boolean;
 }

package/app/modules/rich-text/rich-text.component.d.ts

@@ -20,6 +20,7 @@ export declare class RichTextComponent implements ControlValueAccessor, AfterVie
     }>;
     showDialog: any;
     dialogLink: string;
+    dialogType: string;
     /**
      * Function called on change
      */
@@ -41,6 +42,7 @@ export declare class RichTextComponent implements ControlValueAccessor, AfterVie
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     openLinkDialog(): void;
+    openImageDialog(): void;
     changeEditorLink(action: string): void;
     focus(position?: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RichTextComponent, never>;

package/app/shared/models/particle-component-text.model.d.ts

@@ -162,6 +162,8 @@ export interface RichTextEditorText {
     removeLink: string;
     clearFormat: string;
     modifyLink: string;
+    addImage: string;
+    modifyImage: string;
     cancel: string;
     update: string;
     url: string;

package/esm2022/app/modules/dropdown/dropdown.component.mjs

@@ -602,7 +602,7 @@ export class DropdownComponent {
                 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  <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  >\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 border_left\"\r\n         [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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  </button>\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 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 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 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 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 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 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-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.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  <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  >\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 border_left\"\r\n         [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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  </button>\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 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 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 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 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 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 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-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -634,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], 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  <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  >\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 border_left\"\r\n         [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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  </button>\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 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 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 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 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 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 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-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;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"] }]
+                    ], 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  <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  >\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 border_left\"\r\n         [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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  </button>\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 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 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 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 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 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 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-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;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: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], options: [{

package/esm2022/app/modules/multi-select/multi-select.component.mjs

@@ -575,7 +575,7 @@ export class MultiSelectComponent {
                 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 border_left\"\r\n             [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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 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                        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                        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 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                        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                        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-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.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            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 border_left\"\r\n             [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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 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                        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                        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 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                        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                        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-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -607,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], 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 border_left\"\r\n             [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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 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                        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                        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 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                        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                        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-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;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"] }]
+                    ], 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 border_left\"\r\n             [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\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 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                        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                        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 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                        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                        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-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;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: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], options: [{