@acorex/components 20.1.25 → 20.1.27

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -10,7 +10,7 @@ import { AXWysiwyg } from '@acorex/cdk/wysiwyg';
 import { isBrowser } from '@acorex/core/platform';
 import { classes } from 'polytype';
 import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
-import { AXColorPalleteComponent, AXColorPalettePreviewComponent, AXColorPalettePickerComponent, AXColorPaletteInputComponent, AXColorPaletteModule } from '@acorex/components/color-palette';
+import { AXColorPaletteComponent, AXColorPalettePreviewComponent, AXColorPalettePickerComponent, AXColorPaletteInputComponent, AXColorPaletteModule } from '@acorex/components/color-palette';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
 import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
 
@@ -40,10 +40,6 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         this.service = inject(AXWysiwygService);
         /** @ignore */
         this.zone = inject(NgZone);
-        /** @ignore */
-        this.quillChangeTriggered = signal(false, ...(ngDevMode ? [{ debugName: "quillChangeTriggered" }] : []));
-        /** @ignore */
-        this.ngModelChangeTriggered = signal(false, ...(ngDevMode ? [{ debugName: "ngModelChangeTriggered" }] : []));
         /**
          * Specifies the placeholder text.
          *
@@ -51,11 +47,20 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         this.placeHolder = input(...(ngDevMode ? [undefined, { debugName: "placeHolder" }] : []));
         this.isQuillLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isQuillLoaded" }] : []));
         this.#init = afterNextRender(() => {
+            this.disabledChange.subscribe((disabled) => {
+                if (disabled) {
+                    this.service.wysiwyg().quillObj().disable();
+                }
+                else {
+                    this.service.wysiwyg().quillObj().enable();
+                }
+            });
             const view = this.getHostElement().querySelector('ax-wysiwyg-view');
             this.zone.runOutsideAngular(async () => {
                 if (isBrowser()) {
                     const newWysiwyg = new AXWysiwyg();
                     await newWysiwyg.init(view);
+                    newWysiwyg.quillObj().disable();
                     this.service.wysiwyg.set(newWysiwyg);
                     this.isQuillLoaded.set(true);
                 }
@@ -73,7 +78,9 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
         }, ...(ngDevMode ? [{ debugName: "#effect1" }] : []));
         this.#effect2 = effect(() => {
             if (this.isQuillLoaded() && this.value) {
-                this.service.wysiwyg().quillObj().root.innerHTML = this.value;
+                const quill = this.service.wysiwyg().quillObj();
+                const delta = quill.clipboard.convert({ html: this.value });
+                quill.setContents(delta);
             }
         }, ...(ngDevMode ? [{ debugName: "#effect2" }] : []));
         this.#effect3 = effect(() => {
@@ -90,7 +97,9 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
                         this.emitOnBlurEvent();
                     }
                 });
-                this.service.wysiwyg()?.quillObj().enable();
+                setTimeout(() => {
+                    this.service.wysiwyg()?.quillObj().enable();
+                });
             }
         }, ...(ngDevMode ? [{ debugName: "#effect3" }] : []));
     }
@@ -100,41 +109,30 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
     #effect3;
     /** @ignore */
     changeHandler() {
-        if (this.ngModelChangeTriggered())
-            return;
-        this.quillChangeTriggered.set(true);
         const value = this.service.wysiwyg()?.quillObj().root.innerHTML;
         if (value === '<p><br></p>' || !value) {
             this.commitValue(null);
-            this.quillChangeTriggered.set(false);
             if (this.service.isEditorClean())
                 return;
             this.service.isEditorClean.set(true);
         }
         else {
-            const delta = this.service.wysiwyg()?.quillObj().editor.delta.ops;
-            const cfg = { inlineStyles: true };
-            const converter = new QuillDeltaToHtmlConverter(delta, cfg);
+            const delta = this.service.wysiwyg()?.quillObj().getContents().ops;
+            const converter = new QuillDeltaToHtmlConverter(delta, {
+                inlineStyles: true,
+                allowBackgroundClasses: true,
+            });
             const html = converter.convert();
             this.commitValue(html, true);
-            this.quillChangeTriggered.set(false);
             if (!this.service.isEditorClean())
                 return;
             this.service.isEditorClean.set(false);
         }
     }
-    internalValueChanged(value) {
-        if (!this.isQuillLoaded())
-            return;
-        if (this.quillChangeTriggered())
-            return;
-        this.ngModelChangeTriggered.set(true);
-        this.service.wysiwyg().quillObj().root.innerHTML = value;
-        this.ngModelChangeTriggered.set(false);
-    }
     /** @ignore */
     ngOnDestroy() {
         this.service.wysiwyg()?.quillObj().off('text-change', this.changeHandler);
+        this.disabledChange.unsubscribe();
     }
     focus() {
         this.service.wysiwyg().focus();
@@ -238,7 +236,7 @@ class AXWysiwygColorsComponent {
         /** @ignore */
         this.selectedColor = signal('rgb(151, 148, 148)', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
         /** @ignore */
-        this.selectedHighlightColor = signal('rgba(223, 223, 24, 0.5)', ...(ngDevMode ? [{ debugName: "selectedHighlightColor" }] : []));
+        this.selectedHighlightColor = signal('rgba(223, 223, 24)', ...(ngDevMode ? [{ debugName: "selectedHighlightColor" }] : []));
         /** @ignore */
         this.userInteractColor = signal(false, ...(ngDevMode ? [{ debugName: "userInteractColor" }] : []));
         /** @ignore */
@@ -253,7 +251,7 @@ class AXWysiwygColorsComponent {
         };
         effect(() => {
             if (this.service.isEditorClean()) {
-                this.selectedHighlightColor.set('rgba(223, 223, 24, 0.5)');
+                this.selectedHighlightColor.set('rgba(223, 223, 24)');
                 this.selectedColor.set('rgb(151, 148, 148)');
             }
         });
@@ -277,7 +275,7 @@ class AXWysiwygColorsComponent {
         if (this.userInteractHighligh())
             return;
         this.userInteractHighligh.set(true);
-        this.service.wysiwyg().background('rgba(223, 223, 24, 0.5)');
+        this.service.wysiwyg().background('rgba(223, 223, 24)');
     }
     /** @ignore */
     initialColorHandler() {
@@ -287,7 +285,7 @@ class AXWysiwygColorsComponent {
         this.service.wysiwyg().color('rgb(151, 148, 148)');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXWysiwygColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXWysiwygColorsComponent, isStandalone: true, selector: "ax-wysiwyg-colors", providers: [{ provide: AXComponent, useExisting: AXWysiwygColorsComponent }], ngImport: i0, template: "<div class=\"ax-color-picker-wysiwyg-container\">\n  <div (click)=\"initialColorHandler()\">\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedColor()\"></ax-color-indicator>\n  </div>\n\n  <div (click)=\"initialHighlightHandler()\">\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedHighlightColor()\"></ax-color-indicator>\n  </div>\n</div>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\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  [adaptivityEnabled]=\"true\"\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 (ngModelChange)=\"changeHighlightColorHandler($event)\" [ngModel]=\"selectedHighlightColor()\">\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-prefix{padding:0}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorColorIndicatorComponent, selector: "ax-color-indicator", inputs: ["previewColor"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXWysiwygColorsComponent, isStandalone: true, selector: "ax-wysiwyg-colors", providers: [{ provide: AXComponent, useExisting: AXWysiwygColorsComponent }], ngImport: i0, template: "<div class=\"ax-color-picker-wysiwyg-container\">\n  <div (click)=\"initialColorHandler()\">\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedColor()\"></ax-color-indicator>\n  </div>\n\n  <div (click)=\"initialHighlightHandler()\">\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedHighlightColor()\"></ax-color-indicator>\n  </div>\n</div>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\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  [adaptivityEnabled]=\"true\"\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 (ngModelChange)=\"changeHighlightColorHandler($event)\" [ngModel]=\"selectedHighlightColor()\">\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-prefix{padding:0}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorColorIndicatorComponent, selector: "ax-color-indicator", inputs: ["previewColor"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXWysiwygColorsComponent, decorators: [{
             type: Component,
@@ -296,7 +294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXDecoratorIconComponent,
                         AXDecoratorColorIndicatorComponent,
                         AXPopoverComponent,
-                        AXColorPalleteComponent,
+                        AXColorPaletteComponent,
                         FormsModule,
                         AXColorPalettePreviewComponent,
                         AXColorPalettePickerComponent,