@entake/particle 21.0.0 → 21.0.2

package/fesm2022/entake-particle.mjs

@@ -3139,6 +3139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  */
 class PopoverComponent {
     renderer = inject(Renderer2);
+    changeDetectorRef = inject(ChangeDetectorRef);
     window = window;
     /**
      * The offset of the popover from its target (in pixels)
@@ -3212,7 +3213,10 @@ class PopoverComponent {
                 this.onAnimationStart();
             }
             else {
-                setTimeout(() => this.onAnimationDone(), 300);
+                setTimeout(() => {
+                    this.onAnimationDone();
+                    this.changeDetectorRef.markForCheck();
+                }, 300);
             }
         });
     }
@@ -3681,7 +3685,9 @@ class ProfilePicComponent {
      * Image URL of the profile pic
      */
     set imageUrl(imageUrl) {
-        this.url = `url(${imageUrl})`;
+        if (imageUrl) {
+            this.url = `url(${imageUrl})`;
+        }
     }
     url = null;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3911,11 +3917,11 @@ class RichTextComponent {
         this.editor.commands.focus(position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 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]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_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 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]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\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 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\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: "21.1.5", 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().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"] }]
+            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 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]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_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 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]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\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 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\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 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]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\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"] }] } });
@@ -5192,7 +5198,10 @@ class DropdownComponent {
                 this.onAnimationStart();
             }
             else {
-                setTimeout(() => this.render = false, 300);
+                setTimeout(() => {
+                    this.render = false;
+                    this.changeDetectorRef.markForCheck();
+                }, 300);
             }
         });
         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -6076,7 +6085,10 @@ class MultiSelectComponent {
                 this.onAnimationStart();
             }
             else {
-                setTimeout(() => this.render = false, 300);
+                setTimeout(() => {
+                    this.render = false;
+                    this.changeDetectorRef.markForCheck();
+                }, 300);
             }
         });
         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';