@entake/particle 20.0.2 → 20.0.4

package/fesm2022/entake-particle.mjs

@@ -3777,6 +3777,7 @@ class RichTextComponent {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hideControls = input(false, ...(ngDevMode ? [{ debugName: "hideControls" }] : []));
     height = input('100px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    editorClass = input(...(ngDevMode ? [undefined, { debugName: "editorClass" }] : []));
     get readonly() {
         return this._editable;
     }
@@ -3804,7 +3805,8 @@ class RichTextComponent {
         update: 'Update',
         url: 'URL',
         addImage: 'Add Image',
-        modifyImage: 'Modify Image'
+        modifyImage: 'Modify Image',
+        divider: 'Divider'
     }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     capabilities = input({
         heading: true,
@@ -3812,6 +3814,7 @@ class RichTextComponent {
         list: true,
         alignment: true,
         link: true,
+        divider: true,
         images: false
     }, ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
     textChanged = output();
@@ -3830,20 +3833,19 @@ class RichTextComponent {
     _editable = true;
     window = window;
     CustomLink = Link.extend({
-        name: 'customLink',
-        renderHTML(HTMLAttributes) {
-            const href = HTMLAttributes.href;
+        renderHTML(data) {
+            const href = data.HTMLAttributes.href;
             if (href) {
                 try {
                     const linkUrl = new URL(href, window.location.origin);
                     const currentHost = window.location.hostname;
                     if (linkUrl.hostname !== currentHost) {
-                        HTMLAttributes.target = '_blank';
-                        HTMLAttributes.rel = 'noopener noreferrer nofollow';
+                        data.HTMLAttributes.target = '_blank';
+                        data.HTMLAttributes.rel = 'noopener noreferrer nofollow';
                     }
                     else {
-                        HTMLAttributes.target = '_self';
-                        HTMLAttributes.rel = undefined;
+                        data.HTMLAttributes.target = '_self';
+                        data.HTMLAttributes.rel = undefined;
                     }
                 }
                 catch (e) {
@@ -3851,12 +3853,12 @@ class RichTextComponent {
                     console.warn(e);
                 }
             }
-            return ['a', HTMLAttributes, 0];
+            return ['a', data.HTMLAttributes, 0];
         }
     });
     editor = new Editor({
         extensions: [
-            StarterKit,
+            StarterKit.configure({ link: false }),
             this.CustomLink.configure({
                 openOnClick: false
             }),
@@ -3955,12 +3957,12 @@ class RichTextComponent {
         this.editor.commands.focus(position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().divider) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().divider\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n          >\r\n            <i class=\"fas fa-divide fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RichTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideControls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], readonly: [{
+            args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().divider) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().divider\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n          >\r\n            <i class=\"fas fa-divide fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideControls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], editorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorClass", required: false }] }], readonly: [{
                 type: Input
             }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }], textChanged: [{ type: i0.Output, args: ["textChanged"] }] } });
 
@@ -5308,6 +5310,7 @@ class DropdownComponent {
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
     collapsedButtonTooltipEnabled = input(true, ...(ngDevMode ? [{ debugName: "collapsedButtonTooltipEnabled" }] : []));
     dropdownBoxMinWidth = input(200, ...(ngDevMode ? [{ debugName: "dropdownBoxMinWidth" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -5540,7 +5543,7 @@ class DropdownComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -5552,7 +5555,7 @@ class DropdownComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -5840,13 +5843,13 @@ class DropdownComponent {
         return previousOption;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"inputId() ?? dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -5878,7 +5881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"dropdownId + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n     class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n     [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n     style=\"cursor:default;overflow:hidden;\"\r\n     [ngClass]=\"classList() ? classList() : ''\">\r\n  @if (tooltipData$ | async; as tooltipData) {\r\n  <button #dropdownButton\r\n          role=\"combobox\"\r\n          [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n          aria-haspopup=\"listbox\"\r\n          type=\"button\"\r\n          (click)=\"openDropdown($event)\"\r\n          (focus)=\"setSelectionIndex()\"\r\n          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n          [id]=\"inputId() ?? dropdownId\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"text().placeholder\"\r\n          [attr.aria-expanded]=\"opened\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btnset clear center_center height100 width100\"\r\n          style=\"outline-offset: -2px;\"\r\n          [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n          [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n  >\r\n    <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n      <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n      <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n          <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n            <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n              <div class=\"row v_center text_ellipsis min_w0\">\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #noCustomTemplate>\r\n              <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n          </ng-template>\r\n      </div>\r\n      <div class=\"col min_w50 height100 center_center\"\r\n           [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n        <div class=\"center_center height100 width100\">\r\n          <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_dropdown_overlay\">\r\n  <div #dropdownList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n      <ng-container *ngIf=\"_options | async as options\">\r\n        <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n          <!-- CUSTOM TEMPLATE -->\r\n          <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          <!-- NO CUSTOM TEMPLATE -->\r\n          <ng-template #defaultOptionTemplate>\r\n            <ng-container *ngFor=\"let option of options; index as i\">\r\n              <!-- OPTION GROUP -->\r\n              <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n                <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                          [attr.aria-label]=\"groupOption.label\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                          [attr.data-value]=\"groupOption.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"groupOption.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{groupOption.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-container>\r\n              <!-- SINGULAR OPTION -->\r\n              <ng-template #nonGroupOption>\r\n                <ng-container *ngIf=\"option.type === 'option'\">\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\" tabindex=\"0\">\r\n                    {{option.label}}\r\n                  </button>\r\n                </ng-container>\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\">\r\n    <ng-container *ngIf=\"_options | async as options\">\r\n      <ng-container *ngFor=\"let option of options\">\r\n        <ng-container *ngIf=\"option.type === 'group'\">\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            <ng-container *ngFor=\"let groupOption of option.options\">\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            </ng-container>\r\n          </optgroup>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"option.type === 'option'\">\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -5898,7 +5901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], collapsedButtonTooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTooltipEnabled", required: false }] }], dropdownBoxMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownBoxMinWidth", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], collapsedButtonTooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTooltipEnabled", required: false }] }], dropdownBoxMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownBoxMinWidth", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }], onKeyDown: [{
@@ -6014,6 +6017,7 @@ class MultiSelectComponent {
     maxExpandedEntries = input(0, ...(ngDevMode ? [{ debugName: "maxExpandedEntries" }] : []));
     expandedAsGrid = input(false, ...(ngDevMode ? [{ debugName: "expandedAsGrid" }] : []));
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -6213,7 +6217,7 @@ class MultiSelectComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -6225,7 +6229,7 @@ class MultiSelectComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -6478,13 +6482,13 @@ class MultiSelectComponent {
         return previousOption;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -6516,7 +6520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, AsyncPipe], template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"multiSelectId + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, AsyncPipe], template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n            <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-template #singleEntry>\r\n              <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n                <div class=\"col overflow_hide\">\r\n                  <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n                    <div class=\"mar_tb5 pad_tb2\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                        <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #noCustomTemplate>\r\n                    <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n                         *ngFor=\"let value of _internalValue | async\">\r\n                      {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                    </div>\r\n                  </ng-template>\r\n                </div>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n          <ng-template #placeholderTemplate>\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          </ng-template>\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div #multiSelectList\r\n       [@openClose]=\"opened ? 'open' : 'close'\"\r\n       (@openClose.start)=\"onAnimationStart($event)\"\r\n       (@openClose.done)=\"onAnimationDone($event)\"\r\n       class=\"position_absolute\">\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  <ng-container *ngIf=\"_options | async as options\">\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        role=\"option\" type=\"button\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <!-- NO CUSTOM TEMPLATE -->\r\n      <ng-template #defaultOptionTemplate>\r\n        <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n          <ng-container *ngFor=\"let option of options; index as i\">\r\n            <!-- OPTION GROUP -->\r\n            <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-container>\r\n            <!-- SINGULAR OPTION -->\r\n            <ng-template #nonGroupOption>\r\n              <ng-container *ngIf=\"option.type === 'option'\">\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                        [attr.data-value]=\"option.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"option.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n                </button>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -6536,7 +6540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], entryClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxExpandedEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExpandedEntries", required: false }] }], expandedAsGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAsGrid", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], entryClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxExpandedEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExpandedEntries", required: false }] }], expandedAsGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAsGrid", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onKeyDown: [{
@@ -9037,6 +9041,7 @@ class RadioButtonsComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     colorClass = input('ok_button_color', ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
     isDisplayColumn = input(true, ...(ngDevMode ? [{ debugName: "isDisplayColumn" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange = () => {
     };
@@ -9078,13 +9083,13 @@ class RadioButtonsComponent {
         this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonsComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
@@ -9096,8 +9101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => RadioButtonsComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }] } });
+                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 /**
  * This interceptor will force the Content-Type header to application/json so that each http call doesn't have to.