@entake/particle 19.1.0 → 19.1.2

package/app/shared/components/dropdown/dropdown.component.d.ts

@@ -73,6 +73,9 @@ export declare class DropdownComponent implements ControlValueAccessor {
      */
     readonly classList: import("@angular/core").InputSignal<string>;
     readonly buttonClassList: import("@angular/core").InputSignal<string>;
+    readonly collapsedButtonTemplate: import("@angular/core").InputSignal<TemplateRef<any>>;
+    readonly collapsedButtonTooltipEnabled: import("@angular/core").InputSignal<boolean>;
+    readonly dropdownBoxMinWidth: import("@angular/core").InputSignal<number>;
     /**
      * Event emitted on value change, emits the new value
      */
@@ -108,6 +111,7 @@ export declare class DropdownComponent implements ControlValueAccessor {
      * The data context of the selected option as an Observable
      */
     readonly selectedDataContext$: Observable<Record<string, unknown>>;
+    tooltipData$: Observable<unknown>;
     private static getAllOptions;
     /**
      * Unique ID to assign to the dropdown
@@ -281,6 +285,6 @@ export declare class DropdownComponent implements ControlValueAccessor {
      */
     private getPreviousOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "particle-dropdown", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; "buttonClassList": { "alias": "buttonClassList"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "changed": "changed"; }, ["template"], ["template"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "particle-dropdown", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; "buttonClassList": { "alias": "buttonClassList"; "required": false; "isSignal": true; }; "collapsedButtonTemplate": { "alias": "collapsedButtonTemplate"; "required": false; "isSignal": true; }; "collapsedButtonTooltipEnabled": { "alias": "collapsedButtonTooltipEnabled"; "required": false; "isSignal": true; }; "dropdownBoxMinWidth": { "alias": "dropdownBoxMinWidth"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "changed": "changed"; }, ["template"], ["template"], true, never>;
 }
 export {};

package/app/shared/components/paginator/paginator.component.d.ts

@@ -24,6 +24,7 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
     readonly showFirstLast: import("@angular/core").InputSignal<boolean>;
     readonly showButtonLabels: import("@angular/core").InputSignal<boolean>;
     readonly showResultsPanel: import("@angular/core").InputSignal<boolean>;
+    readonly startingPage: import("@angular/core").InputSignalWithTransform<any, number>;
     readonly text: import("@angular/core").InputSignal<PaginatorText>;
     /**
      * Event Emitter for pagination or page size change.
@@ -62,6 +63,7 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
      * Calculates the number of pages
      */
     getNumberOfPages(): number;
+    private _goToPage;
     /**
      * Goes to a given page and emits a pagination event
      *
@@ -69,6 +71,12 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
      * @param inputFocus
      */
     goToPage(pageNumber: number, inputFocus?: boolean): void;
+    /**
+     * Goes to a given page, but does not emit a pagination event
+     * @param pageNumber
+     * @param inputFocus
+     */
+    setActivePage(pageNumber: number, inputFocus?: boolean): void;
     /**
      * Emits a pagination event with the current paginator data
      */
@@ -100,5 +108,5 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
      */
     jumpPage(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorComponent, "particle-paginator", never, { "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalLength": { "alias": "totalLength"; "required": false; "isSignal": true; }; "showPages": { "alias": "showPages"; "required": false; "isSignal": true; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; "isSignal": true; }; "showButtonLabels": { "alias": "showButtonLabels"; "required": false; "isSignal": true; }; "showResultsPanel": { "alias": "showResultsPanel"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "paginate": "paginate"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorComponent, "particle-paginator", never, { "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalLength": { "alias": "totalLength"; "required": false; "isSignal": true; }; "showPages": { "alias": "showPages"; "required": false; "isSignal": true; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; "isSignal": true; }; "showButtonLabels": { "alias": "showButtonLabels"; "required": false; "isSignal": true; }; "showResultsPanel": { "alias": "showResultsPanel"; "required": false; "isSignal": true; }; "startingPage": { "alias": "startingPage"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "paginate": "paginate"; }, never, never, true, never>;
 }

package/fesm2022/entake-particle.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { NgModule, inject, ElementRef, Renderer2, input, Directive, Input, HostListener, TemplateRef, ContentChild, Injectable, output, Component, ViewChild, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ChangeDetectionStrategy, ContentChildren, signal } from '@angular/core';
-import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, shareReplay, withLatestFrom as withLatestFrom$1, catchError, of, throwError, mergeMap } from 'rxjs';
+import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, withLatestFrom as withLatestFrom$1, of, shareReplay, catchError, throwError, mergeMap } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { startWith, map, withLatestFrom, tap } from 'rxjs/operators';
@@ -3512,6 +3512,11 @@ class PaginatorComponent {
     showFirstLast = input(false);
     showButtonLabels = input(true);
     showResultsPanel = input(true);
+    startingPage = input(0, {
+        transform: (page) => {
+            setTimeout(() => this.setActivePage(page, false), 0);
+        }
+    });
     text = input({
         itemsPerPage: 'Items Per Page',
         choosePageSize: 'Choose Page Size',
@@ -3577,13 +3582,7 @@ class PaginatorComponent {
     getNumberOfPages() {
         return Math.ceil(this.totalLength() / this.pageSize);
     }
-    /**
-     * Goes to a given page and emits a pagination event
-     *
-     * @param pageNumber
-     * @param inputFocus
-     */
-    goToPage(pageNumber, inputFocus) {
+    _goToPage(pageNumber, emit, inputFocus) {
         this.activePage = pageNumber;
         this.pageStartingValue = this.getStartingValueForPage(this.activePage);
         this.pageEndingValue = this.getEndingValueForPage(this.activePage);
@@ -3593,7 +3592,26 @@ class PaginatorComponent {
                 element.focus();
             }
         }
-        this.emitEvent();
+        if (emit) {
+            this.emitEvent();
+        }
+    }
+    /**
+     * Goes to a given page and emits a pagination event
+     *
+     * @param pageNumber
+     * @param inputFocus
+     */
+    goToPage(pageNumber, inputFocus) {
+        this._goToPage(pageNumber, true, inputFocus);
+    }
+    /**
+     * Goes to a given page, but does not emit a pagination event
+     * @param pageNumber
+     * @param inputFocus
+     */
+    setActivePage(pageNumber, inputFocus) {
+        this._goToPage(pageNumber, false, inputFocus);
     }
     /**
      * Emits a pagination event with the current paginator data
@@ -3665,7 +3683,7 @@ class PaginatorComponent {
         this.pageJumpInput = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -5257,16 +5275,15 @@ class DropdownComponent {
     disabled = model(false);
     text = input({
         placeholder: 'Make a selection'
-    }
-    /**
-     * Class list to assign to the dropdown
-     */
-    );
+    });
     /**
      * Class list to assign to the dropdown
      */
     classList = input(null);
     buttonClassList = input(null);
+    collapsedButtonTemplate = input(null);
+    collapsedButtonTooltipEnabled = input(true);
+    dropdownBoxMinWidth = input(200);
     /**
      * Event emitted on value change, emits the new value
      */
@@ -5297,7 +5314,7 @@ class DropdownComponent {
     /**
      * Observable map of option value (stringified if a number) to data context
      */
-    dataContextMap$ = this._options.pipe(map(options => {
+    dataContextMap$ = this._options.pipe(map$1(options => {
         let dataContextMap = null;
         if (options?.length) {
             dataContextMap = {};
@@ -5317,7 +5334,7 @@ class DropdownComponent {
     /**
      * The data context of the selected option as an Observable
      */
-    selectedDataContext$ = this._internalValue.pipe(withLatestFrom(this.dataContextMap$), map(([value, dataContextMap]) => {
+    selectedDataContext$ = this._internalValue.pipe(withLatestFrom$1(this.dataContextMap$), map$1(([value, dataContextMap]) => {
         let dataContext = null;
         if (value !== null && dataContextMap !== null) {
             const entry = dataContextMap[String(value)];
@@ -5327,6 +5344,20 @@ class DropdownComponent {
         }
         return dataContext;
     }));
+    tooltipData$ = combineLatest([
+        of(this.text().placeholder),
+        this._internalValue.asObservable(),
+        this.dataContextMap$
+    ]).pipe(map$1(results => {
+        const placeholder = results[0];
+        const value = results[1];
+        const optionMap = results[2];
+        if (!value) {
+            return placeholder;
+        }
+        const option = optionMap[String(value)];
+        return option ? option.$implicit : value;
+    }));
     static getAllOptions(options) {
         const allOptions = [];
         for (const option of options) {
@@ -5668,7 +5699,10 @@ class DropdownComponent {
      * @private
      */
     positionDropdownList() {
-        const { left, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
+        let { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
+        if (right - left < this.dropdownBoxMinWidth()) {
+            left = left - (this.dropdownBoxMinWidth() - (right - left));
+        }
         const { offsetHeight } = this.dropdownList.nativeElement;
         const datePickerBottomLeftAnchor = bottom;
         const availableBottomSpace = window.innerHeight - datePickerBottomLeftAnchor;
@@ -5703,7 +5737,8 @@ class DropdownComponent {
      */
     resizeDropdownList() {
         const { left, right } = this.dropdown.nativeElement.getBoundingClientRect();
-        const width = right - left;
+        let width = right - left;
+        width = width < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : width;
         this.renderer.setStyle(this.dropdownList.nativeElement, 'width', `${width}px`);
     }
     /**
@@ -5776,13 +5811,13 @@ class DropdownComponent {
         return previousOption;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  <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\"\r\n         [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n      <div class=\"center_center height100 width100\">\r\n        <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </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 ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -5814,7 +5849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe], 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\"\r\n         [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n      <div class=\"center_center height100 width100\">\r\n        <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </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 ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{