@acorex/components 18.12.1 → 18.12.3

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -10,6 +10,7 @@ import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AXWysiwyg } from '@acorex/cdk/wysiwyg';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
+import { isBrowser } from '@acorex/core/platform';
 import { classes } from 'polytype';
 import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
 import * as i4 from '@acorex/components/color-palette';
@@ -39,51 +40,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
-    /** @ignore */
     constructor() {
         super();
         /** @ignore */
-        this.zone = inject(NgZone);
-        this.wysiwyg = signal(null);
-        /** @ignore */
-        this.view = signal(null);
-        /** @ignore */
         this.service = inject(AXWysiwygService);
+        /** @ignore */
+        this.zone = inject(NgZone);
         /**
          * Specifies the placeholder text.
          *
          */
         this.placeHolder = input();
-        afterNextRender(() => {
-            this.view.set(this.getHostElement().querySelector('ax-wysiwyg-view'));
-            this.zone.runOutsideAngular(() => {
-                this.wysiwyg.set(new AXWysiwyg(this.view(), {
-                    readOnly: true,
-                }));
-                this.wysiwyg().wysiwygObj.on('text-change', this.changeHandler.bind(this));
+        this.#init = afterNextRender(() => {
+            const view = this.getHostElement().querySelector('ax-wysiwyg-view');
+            this.zone.runOutsideAngular(async () => {
+                if (isBrowser()) {
+                    const newWysiwyg = new AXWysiwyg();
+                    await newWysiwyg.init(view, {
+                        readOnly: true,
+                    });
+                    this.service.wysiwyg.set(newWysiwyg);
+                }
             });
-            this.service.wysiwyg.set(this.wysiwyg());
-            this.setTimeOut = setTimeout(() => {
-                this.wysiwyg().wysiwygObj.enable();
-            }, 1000);
         });
-        effect(() => {
-            if (this.placeHolder() && this.wysiwyg()) {
-                this.wysiwyg().wysiwygObj.root.setAttribute('data-placeholder', this.placeHolder());
+        this.#effect1 = effect(() => {
+            if (this.placeHolder() && this.service.wysiwyg()?.quillObj()) {
+                this.service.wysiwyg().quillObj().root.setAttribute('data-placeholder', this.placeHolder());
             }
-            else {
-                this.wysiwyg().wysiwygObj.root.setAttribute('data-placeholder', 'Write Your Message ...');
+            else if (this.service.wysiwyg()?.quillObj()) {
+                this.service.wysiwyg().quillObj().root.setAttribute('data-placeholder', 'Write Your Message ...');
             }
         });
-        effect(() => {
-            if (this.value) {
-                this.wysiwyg().wysiwygObj.root.innerHTML = this.value;
+        this.#effect2 = effect(() => {
+            if (this.value && this.service.wysiwyg()?.quillObj()) {
+                this.service.wysiwyg().quillObj().root.innerHTML = this.value;
             }
-        }, { allowSignalWrites: true });
+        });
+        this.#effect3 = effect(() => {
+            if (this.service.wysiwyg()?.quillObj()) {
+                this.service.wysiwyg().quillObj().on('text-change', this.changeHandler.bind(this));
+                this.setTimeOut = setTimeout(() => {
+                    this.service.wysiwyg()?.quillObj().enable();
+                }, 1000);
+            }
+        });
+        this.onValueChanged.subscribe((v) => {
+            this.service.wysiwyg()?.setContent(v.value);
+        });
     }
+    #init;
+    #effect1;
+    #effect2;
+    #effect3;
     /** @ignore */
     changeHandler() {
-        const value = this.wysiwyg().wysiwygObj.root.innerHTML;
+        const value = this.service.wysiwyg()?.quillObj().root.innerHTML;
         if (value === '<p><br></p>' || !value) {
             this.commitValue(null);
             if (this.service.isEditorClean())
@@ -91,7 +102,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
             this.service.isEditorClean.set(true);
         }
         else {
-            const delta = this.wysiwyg().wysiwygObj.editor.delta.ops;
+            const delta = this.service.wysiwyg()?.quillObj().editor.delta.ops;
             const cfg = { inlineStyles: true };
             const converter = new QuillDeltaToHtmlConverter(delta, cfg);
             const html = converter.convert();
@@ -103,8 +114,9 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
     }
     /** @ignore */
     ngOnDestroy() {
-        this.wysiwyg().wysiwygObj.off('text-change', this.changeHandler);
+        this.service.wysiwyg()?.quillObj().off('text-change', this.changeHandler);
         clearTimeout(this.setTimeOut);
+        this.onValueChanged.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, providers: [
@@ -139,13 +151,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXWysiwygToolbarComponent {
+    get __hostClass() {
+        return `ax-sm`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar", ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-container ax-sm\">\r\n  <ng-content select=\"ax-prefix\"></ng-content>\r\n  <ng-content></ng-content>\r\n  <ng-content select=\"ax-suffix\"></ng-content>\r\n</div>\r\n", styles: ["ax-wysiwyg-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container{padding-block:.5rem;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container ax-select-box{margin-inline:.5rem}ax-wysiwyg-toolbar ax-select-box{width:auto!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar", host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-wysiwyg-tools\"><ng-content></ng-content></div>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n", styles: ["ax-wysiwyg-toolbar{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;padding:.5rem}ax-wysiwyg-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-wysiwyg-toolbar ax-button{margin-inline:.1rem}ax-wysiwyg-toolbar ax-select-box{margin-inline:.5rem}ax-wysiwyg-toolbar .ax-wysiwyg-tools{display:flex;flex-wrap:wrap}ax-wysiwyg-toolbar ax-select-box{width:auto!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-wysiwyg-tool-container ax-sm\">\r\n  <ng-content select=\"ax-prefix\"></ng-content>\r\n  <ng-content></ng-content>\r\n  <ng-content select=\"ax-suffix\"></ng-content>\r\n</div>\r\n", styles: ["ax-wysiwyg-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container{padding-block:.5rem;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}ax-wysiwyg-toolbar .ax-wysiwyg-tool-container ax-select-box{margin-inline:.5rem}ax-wysiwyg-toolbar ax-select-box{width:auto!important}\n"] }]
-        }] });
+            args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-wysiwyg-tools\"><ng-content></ng-content></div>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n", styles: ["ax-wysiwyg-toolbar{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;padding:.5rem}ax-wysiwyg-toolbar .ax-icon{font-weight:900;font-size:1rem}ax-wysiwyg-toolbar ax-button{margin-inline:.1rem}ax-wysiwyg-toolbar ax-select-box{margin-inline:.5rem}ax-wysiwyg-toolbar .ax-wysiwyg-tools{display:flex;flex-wrap:wrap}ax-wysiwyg-toolbar ax-select-box{width:auto!important}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 /**
  * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
@@ -159,8 +177,6 @@ class AXWysiwygAlignmentComponent {
         /** @ignore */
         this.alignState = signal('');
         /** @ignore */
-        this.wysiwyg = signal(null);
-        /** @ignore */
         this.popoverOption = {
             openOn: 'click',
             closeOn: 'clickOut',
@@ -169,30 +185,27 @@ class AXWysiwygAlignmentComponent {
             offsetY: 0,
         };
         effect(() => {
-            if (!this.wysiwyg())
+            if (!this.service.wysiwyg())
                 return;
             switch (this.service.currentSelectedElemAlign()) {
                 case 'ql-align-center':
                     this.alignState.set('center');
-                    this.wysiwyg().align('center');
+                    this.service.wysiwyg().align('center');
                     break;
                 case 'ql-align-right':
                     this.alignState.set('right');
-                    this.wysiwyg().align('right');
+                    this.service.wysiwyg().align('right');
                     break;
                 default:
                     this.alignState.set('left');
-                    this.wysiwyg().align('left');
+                    this.service.wysiwyg().align('left');
             }
         }, { allowSignalWrites: true });
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
     }
     /** @ignore */
     alignStateHandler(e) {
         this.alignState.set(e);
-        this.wysiwyg().align(e);
+        this.service.wysiwyg().align(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygAlignmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygAlignmentComponent, selector: "ax-wysiwyg-alignment", ngImport: i0, template: "<ax-button look=\"blank\" #alignPop>\n  <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n</ax-button>\n<ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"alignPop\" [placement]=\"popoverOption.placement\">\n  <div class=\"ax-overlay-pane ax-alignment-cotainer ax-sm\">\n    <ax-button (click)=\"alignStateHandler('left')\" look=\"blank\" [selected]=\"alignState() === 'left' ? true : false\">\n      <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"alignStateHandler('center')\" look=\"blank\" [selected]=\"alignState() === 'center' ? true : false\">\n      <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"alignStateHandler('right')\" look=\"blank\" [selected]=\"alignState() === 'right' ? true : false\">\n      <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n    </ax-button>\n  </div>\n</ax-popover>\n", styles: [".ax-alignment-cotainer{padding:.5rem}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
@@ -212,8 +225,6 @@ class AXWysiwygColorsComponent {
         /** @ignore */
         this.service = inject(AXWysiwygService);
         /** @ignore */
-        this.wysiwyg = signal(null);
-        /** @ignore */
         this.selectedColor = signal('rgb(151, 148, 148)');
         /** @ignore */
         this.selectedHighlightColor = signal('rgba(223, 223, 24, 0.5)');
@@ -229,9 +240,6 @@ class AXWysiwygColorsComponent {
             offsetX: 0,
             offsetY: 0,
         };
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
         effect(() => {
             if (this.service.isEditorClean()) {
                 this.selectedHighlightColor.set('rgba(223, 223, 24, 0.5)');
@@ -244,28 +252,28 @@ class AXWysiwygColorsComponent {
         if (!this.userInteractColor())
             return;
         this.selectedColor.set(e);
-        this.wysiwyg().color(e);
+        this.service.wysiwyg().color(e);
     }
     /** @ignore */
     changeHighlightColorHandler(e) {
         if (!this.userInteractHighligh())
             return;
         this.selectedHighlightColor.set(e);
-        this.wysiwyg().background(e);
+        this.service.wysiwyg().background(e);
     }
     /** @ignore */
     initialHighlightHandler() {
         if (this.userInteractHighligh())
             return;
         this.userInteractHighligh.set(true);
-        this.wysiwyg().background('rgba(223, 223, 24, 0.5)');
+        this.service.wysiwyg().background('rgba(223, 223, 24, 0.5)');
     }
     /** @ignore */
     initialColorHandler() {
         if (this.userInteractColor())
             return;
         this.userInteractColor.set(true);
-        this.wysiwyg().color('rgb(151, 148, 148)');
+        this.service.wysiwyg().color('rgb(151, 148, 148)');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygColorsComponent, selector: "ax-wysiwyg-colors", ngImport: i0, template: "<div class=\"ax-color-picker-wysiwyg-container\">\n  <div (click)=\"initialColorHandler()\" class=\"ax-color-flex-wysiwyg-container\">\n    <div [style]=\"{ backgroundColor: selectedColor() }\" class=\"ax-submit-color\"></div>\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <div (click)=\"initialHighlightHandler()\" class=\"ax-color-flex-wysiwyg-container\">\n    <div [style]=\"{ backgroundColor: selectedHighlightColor() }\" class=\"ax-submit-color\"></div>\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n  </div>\n</div>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"colorBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeColorHandler($event)\" [ngModel]=\"selectedColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"highlightBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette\n      (ngModelChange)=\"changeHighlightColorHandler($event)\"\n      [ngModel]=\"selectedHighlightColor()\"\n    >\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n", styles: [".ax-color-picker-wysiwyg-container{display:flex;align-items:center}.ax-color-picker-wysiwyg-container .ax-color-flex-wysiwyg-container{display:flex;align-items:center;cursor:pointer}.ax-color-picker-wysiwyg-container .ax-submit-color{border:1px solid rgb(var(--ax-color-text-default));width:.6rem;height:.6rem;border-radius:1000vmax}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i4.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i4.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i4.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -285,8 +293,6 @@ class AXWysiwygFontStyleComponent {
         /** @ignore */
         this.parent = inject(AXWysiwygContainerComponent);
         /** @ignore */
-        this.wysiwyg = signal(null);
-        /** @ignore */
         this.boldState = signal(false);
         /** @ignore */
         this.italicState = signal(false);
@@ -299,97 +305,94 @@ class AXWysiwygFontStyleComponent {
         /** @ignore */
         this.service = inject(AXWysiwygService);
         effect(() => {
-            if (!this.wysiwyg())
+            if (!this.service.wysiwyg())
                 return;
             this.service.currentSelectedElemArray().forEach((item) => {
                 switch (item) {
                     case 'U':
-                        this.wysiwyg().underLine(true);
+                        this.service.wysiwyg().underLine(true);
                         this.underLineState.set(true);
                         break;
                     case 'S':
-                        this.wysiwyg().strike(true);
+                        this.service.wysiwyg().strike(true);
                         this.strikeLineState.set(true);
                         break;
                     case 'EM':
-                        this.wysiwyg().italic(true);
+                        this.service.wysiwyg().italic(true);
                         this.italicState.set(true);
                         break;
                     case 'STRONG':
-                        this.wysiwyg().bold(true);
+                        this.service.wysiwyg().bold(true);
                         this.boldState.set(true);
                         break;
                     default:
                         if (this.boldState())
-                            this.wysiwyg().bold(true);
+                            this.service.wysiwyg().bold(true);
                         if (this.italicState())
-                            this.wysiwyg().italic(true);
+                            this.service.wysiwyg().italic(true);
                         if (this.strikeLineState())
-                            this.wysiwyg().strike(true);
+                            this.service.wysiwyg().strike(true);
                         if (this.underLineState())
-                            this.wysiwyg().underLine(true);
+                            this.service.wysiwyg().underLine(true);
                 }
             });
         }, { allowSignalWrites: true });
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
     }
     /** @ignore */
     bold() {
         if (this.boldState()) {
-            this.wysiwyg().bold(false);
+            this.service.wysiwyg().bold(false);
             this.boldState.set(false);
         }
         else {
-            this.wysiwyg().bold(true);
+            this.service.wysiwyg().bold(true);
             this.boldState.set(true);
         }
     }
     /** @ignore */
     italic() {
         if (this.italicState()) {
-            this.wysiwyg().italic(false);
+            this.service.wysiwyg().italic(false);
             this.italicState.set(false);
         }
         else {
-            this.wysiwyg().italic(true);
+            this.service.wysiwyg().italic(true);
             this.italicState.set(true);
         }
     }
     /** @ignore */
     underLine() {
         if (this.underLineState()) {
-            this.wysiwyg().underLine(false);
+            this.service.wysiwyg().underLine(false);
             this.underLineState.set(false);
         }
         else {
-            this.wysiwyg().underLine(true);
+            this.service.wysiwyg().underLine(true);
             this.underLineState.set(true);
         }
     }
     /** @ignore */
     strike() {
         if (this.strikeLineState()) {
-            this.wysiwyg().strike(false);
+            this.service.wysiwyg().strike(false);
             this.strikeLineState.set(false);
         }
         else {
-            this.wysiwyg().strike(true);
+            this.service.wysiwyg().strike(true);
             this.strikeLineState.set(true);
         }
     }
     /** @ignore */
     fontSizeHandler(e) {
-        const range = this.wysiwyg().wysiwygObj.getSelection();
-        if (!range.length)
+        const range = this.service.wysiwyg()?.quillObj().getSelection();
+        if (!range?.length)
             return;
         if (e === 'medium') {
-            this.wysiwyg().fontSize(false, range);
+            this.service.wysiwyg().fontSize(false, range);
             this.selectedFont.set('medium');
         }
         else {
-            this.wysiwyg().fontSize(e, range);
+            this.service.wysiwyg().fontSize(e, range);
             this.selectedFont.set(e);
         }
     }
@@ -406,23 +409,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @category Components
  */
 class AXWysiwygHistoryComponent {
-    /** @ignore */
     constructor() {
         /** @ignore */
         this.service = inject(AXWysiwygService);
-        /** @ignore */
-        this.wysiwyg = signal(null);
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
     }
     /** @ignore */
     undo() {
-        this.wysiwyg().undo();
+        this.service.wysiwyg().undo();
     }
     /** @ignore */
     redo() {
-        this.wysiwyg().redo();
+        this.service.wysiwyg().redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history", ngImport: i0, template: "<ax-button class=\"\" (click)=\"undo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button class=\"\" (click)=\"redo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", styles: [""], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -430,20 +427,17 @@ class AXWysiwygHistoryComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-history', encapsulation: ViewEncapsulation.None, template: "<ax-button class=\"\" (click)=\"undo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button class=\"\" (click)=\"redo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
  * @category Components
  */
 class AXWysiwygInsertComponent {
-    /** @ignore */
     constructor() {
         /** @ignore */
         this.service = inject(AXWysiwygService);
         /** @ignore */
-        this.wysiwyg = signal(null);
-        /** @ignore */
         this.textBoxOptions = {
             text: '',
             placeholder: 'Enter yor url ...',
@@ -457,13 +451,10 @@ class AXWysiwygInsertComponent {
             offsetX: 0,
             offsetY: 0,
         };
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
     }
     /** @ignore */
     submitLink() {
-        this.wysiwyg().addImage(this.textBoxOptions.text);
+        this.service.wysiwyg().addImage(this.textBoxOptions.text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygInsertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXWysiwygInsertComponent, selector: "ax-wysiwyg-insert", ngImport: i0, template: "<ax-button #linkBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"linkBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-insert-container\">\n    <ax-text-box\n      class=\"{{ textBoxOptions.size }}\"\n      [(ngModel)]=\"textBoxOptions.text\"\n      [placeholder]=\"textBoxOptions.placeholder\"\n    >\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-text-box>\n  </div>\n</ax-popover>\n", styles: [".ax-insert-container{display:flex;padding:.5rem}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -471,7 +462,7 @@ class AXWysiwygInsertComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXWysiwygInsertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-insert', encapsulation: ViewEncapsulation.None, template: "<ax-button #linkBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"linkBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-insert-container\">\n    <ax-text-box\n      class=\"{{ textBoxOptions.size }}\"\n      [(ngModel)]=\"textBoxOptions.text\"\n      [placeholder]=\"textBoxOptions.placeholder\"\n    >\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-text-box>\n  </div>\n</ax-popover>\n", styles: [".ax-insert-container{display:flex;padding:.5rem}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
@@ -483,49 +474,44 @@ class AXWysiwygListComponent {
         /** @ignore */
         this.service = inject(AXWysiwygService);
         /** @ignore */
-        this.wysiwyg = signal(null);
-        /** @ignore */
         this.listState = signal('');
         effect(() => {
-            if (!this.wysiwyg())
+            if (!this.service.wysiwyg())
                 return;
             switch (this.service.currentSelectedElemList()) {
                 case 'ordered':
-                    this.wysiwyg().list('ordered');
+                    this.service.wysiwyg().list('ordered');
                     this.listState.set('ordered');
                     break;
                 case 'bullet':
-                    this.wysiwyg().list('bullet');
+                    this.service.wysiwyg().list('bullet');
                     this.listState.set('bullet');
                     break;
                 default:
-                    this.wysiwyg().list('');
+                    this.service.wysiwyg().list('');
                     this.listState.set('');
             }
         }, { allowSignalWrites: true });
-        afterNextRender(() => {
-            this.wysiwyg.set(this.service.wysiwyg());
-        });
     }
     /** @ignore */
     orderList() {
         if (!this.listState() || this.listState() === 'bullet') {
-            this.wysiwyg().list('ordered');
+            this.service.wysiwyg().list('ordered');
             this.listState.set('ordered');
         }
         else {
-            this.wysiwyg().list('');
+            this.service.wysiwyg().list('');
             this.listState.set('');
         }
     }
     /** @ignore */
     unOrderList() {
         if (!this.listState() || this.listState() === 'ordered') {
-            this.wysiwyg().list('bullet');
+            this.service.wysiwyg().list('bullet');
             this.listState.set('bullet');
         }
         else {
-            this.wysiwyg().list('');
+            this.service.wysiwyg().list('');
             this.listState.set('');
         }
     }