@entake/particle 20.0.3 → 20.0.5

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"] }] } });
 
@@ -4455,11 +4457,11 @@ class CalendarComponent {
         this.selectedDate = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
                 type: ViewChild,
                 args: ['calendarWidgetDiv']
@@ -7709,7 +7711,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "sliderInput", first: true, predicate: ["sliderInput"], descendants: true }], ngImport: i0, template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "sliderInput", first: true, predicate: ["sliderInput"], descendants: true }], ngImport: i0, template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -7719,7 +7721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true
                         }
-                    ], imports: [FormsModule, NgClass], template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"] }]
+                    ], imports: [FormsModule, NgClass], template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"] }]
         }], propDecorators: { sliderInput: [{
                 type: ViewChild,
                 args: ['sliderInput']
@@ -9653,6 +9655,7 @@ class ThemingService {
             }
             if (theme.stylingVariables.inputBgColor) {
                 styleSheet.insertRule(`.${prefix}ptl_input_bg_color{background-color: ${this.addHashmark(theme.stylingVariables.inputBgColor)};color: ${this.getTextColor(theme.stylingVariables.inputBgColor)}}`);
+                styleSheet.insertRule(`:autofill {box-shadow: 0 0 0 40px ${this.addHashmark(theme.stylingVariables.inputBgColor)} inset !important;-webkit-text-fill-color: ${this.getTextColor(theme.stylingVariables.inputBgColor)} !important;}`);
             }
             if (theme.stylingVariables.borderColor) {
                 styleSheet.insertRule(`.${prefix}ptl_brdr_color{border-color: ${this.addHashmark(theme.stylingVariables.borderColor)};}`);