@acorex/components 18.5.12 → 18.5.14

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -5,7 +5,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, afterNextRender, Component, ViewEncapsulation, output, NgModule } from '@angular/core';
+import { signal, Injectable, inject, afterNextRender, Component, ViewEncapsulation, output, input, effect, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXWysiwyg } from '@acorex/cdk/wysiwyg';
@@ -20,6 +20,7 @@ import { AXTextBoxModule } from '@acorex/components/text-box';
 class AXWysiwygService {
     constructor() {
         this.wysiwyg = signal(null);
+        this.currentSelectedElemArray = signal([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygService }); }
@@ -35,7 +36,7 @@ class AXWysiwygContainerComponent extends MXBaseComponent {
         this.view = signal(null);
         this.service = inject(AXWysiwygService);
         afterNextRender(() => {
-            this.view.set(this.getHostElement().querySelector('ax-wysiwyg-view'));
+            this.view.set(this.getHostElement().querySelector('.ax-editor-wrapper'));
             this.wysiwyg.set(new AXWysiwyg(this.view(), {
                 placeholder: 'Write Your Message ...',
             }));
@@ -51,19 +52,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class AXWysiwygToolbarComponent {
-    submitLink() {
-        this.wysiwyg().addImage(this.textBoxOptions.text);
-    }
     constructor() {
         this.outputHTML = output();
         this.service = inject(AXWysiwygService);
+        this.config = input({
+            bold: true,
+            undo: true,
+            redo: true,
+            italic: true,
+            underLine: true,
+            strike: true,
+            color: true,
+            highlight: true,
+            fontSize: true,
+            list: true,
+            alignment: true,
+            image: true,
+        });
         this.wysiwyg = signal(null);
         this.boldState = signal(false);
         this.italicState = signal(false);
         this.underLineState = signal(false);
         this.strikeLineState = signal(false);
-        this.orderListState = signal('');
-        this.unOrderListState = signal('');
+        this.listState = signal('');
         this.alignState = signal('');
         this.selectedFont = 'medium';
         this.selectedColor = '';
@@ -98,10 +109,43 @@ class AXWysiwygToolbarComponent {
             placeholder: 'Enter yor url ...',
             size: 'ax-sm',
         };
+        effect(() => {
+            this.wysiwyg().bold(false);
+            this.boldState.set(false);
+            this.wysiwyg().italic(false);
+            this.italicState.set(false);
+            this.wysiwyg().strike(false);
+            this.strikeLineState.set(false);
+            this.wysiwyg().underLine(false);
+            this.underLineState.set(false);
+            this.service.currentSelectedElemArray().forEach((item) => {
+                switch (item) {
+                    case 'U':
+                        this.wysiwyg().underLine(true);
+                        this.underLineState.set(true);
+                        break;
+                    case 'S':
+                        this.wysiwyg().strike(true);
+                        this.strikeLineState.set(true);
+                        break;
+                    case 'EM':
+                        this.wysiwyg().italic(true);
+                        this.italicState.set(true);
+                        break;
+                    case 'STRONG':
+                        this.wysiwyg().bold(true);
+                        this.boldState.set(true);
+                        break;
+                }
+            });
+        }, { allowSignalWrites: true });
         afterNextRender(() => {
             this.wysiwyg.set(this.service.wysiwyg());
         });
     }
+    submitLink() {
+        this.wysiwyg().addImage(this.textBoxOptions.text);
+    }
     changeColorHandler(e) {
         this.selectedColor = e;
         this.wysiwyg().color(e);
@@ -151,23 +195,23 @@ class AXWysiwygToolbarComponent {
         }
     }
     orderList() {
-        if (this.orderListState()) {
-            this.wysiwyg().list('');
-            this.orderListState.set('');
+        if (!this.listState() || this.listState() === 'bullet') {
+            this.wysiwyg().list('ordered');
+            this.listState.set('ordered');
         }
         else {
-            this.wysiwyg().list('ordered');
-            this.orderListState.set('ordered');
+            this.wysiwyg().list('');
+            this.listState.set('');
         }
     }
     unOrderList() {
-        if (this.unOrderListState()) {
-            this.wysiwyg().list('');
-            this.unOrderListState.set('');
+        if (!this.listState() || this.listState() === 'ordered') {
+            this.wysiwyg().list('bullet');
+            this.listState.set('bullet');
         }
         else {
-            this.wysiwyg().list('bullet');
-            this.unOrderListState.set('bullet');
+            this.wysiwyg().list('');
+            this.listState.set('');
         }
     }
     alignStateHandler(e) {
@@ -194,21 +238,39 @@ class AXWysiwygToolbarComponent {
         this.wysiwyg().background('red');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar", outputs: { outputHTML: "outputHTML" }, ngImport: i0, template: "<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    <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\n    <ax-button class=\"\" (click)=\"bold()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"italic()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"underLine()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"strike()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n    </ax-button>\n\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"colorBtn\" [placement]=\"popoverOption.placement\">\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 (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\n    <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n    </ax-select-box>\n\n    <ax-button (click)=\"orderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"unOrderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button look=\"blank\" #alignPop>\n      <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"alignPop\" [placement]=\"popoverOption.placement\">\n      <div class=\"ax-overlay-pane\">\n        <ax-button\n          (click)=\"alignStateHandler('left')\"\n          [look]=\"alignState() !== 'left' && 'blank'\"\n          [color]=\"alignState() === 'left' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('center')\"\n          [look]=\"alignState() !== 'center' && 'blank'\"\n          [color]=\"alignState() === 'center' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('right')\"\n          [look]=\"alignState() !== 'right' && 'blank'\"\n          [color]=\"alignState() === 'right' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n        </ax-button>\n      </div>\n    </ax-popover>\n\n    <ax-button #linkBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"linkBtn\" [placement]=\"popoverOption.placement\">\n      <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n      </ax-text-box>\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-popover>\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{display:flex}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-select-box{margin-inline:1rem}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i5.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i5.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outputHTML: "outputHTML" }, ngImport: i0, template: "<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    @if (config().undo) {\n      <ax-button class=\"\" (click)=\"undo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n      </ax-button>\n    }\n\n    @if (config().redo) {\n      <ax-button class=\"\" (click)=\"redo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().bold) {\n      <ax-button (click)=\"bold()\" [look]=\"boldState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().italic) {\n      <ax-button (click)=\"italic()\" [look]=\"italicState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().underLine) {\n      <ax-button (click)=\"underLine()\" [look]=\"underLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().strike) {\n      <ax-button (click)=\"strike()\" [look]=\"strikeLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().color) {\n      <ax-button #colorBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n      </ax-button>\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    @if (config().highlight) {\n      <ax-button #highlightBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      </ax-button>\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 (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    }\n    @if (config().fontSize) {\n      <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n      </ax-select-box>\n    }\n    @if (config().list) {\n      <ax-button (click)=\"orderList()\" [look]=\"listState() === 'ordered' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" [look]=\"listState() === 'bullet' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().alignment) {\n      <ax-button look=\"blank\" #alignPop>\n        <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n      </ax-button>\n      <ax-popover\n        [openOn]=\"popoverOption.openOn\"\n        [closeOn]=\"popoverOption.closeOn\"\n        [target]=\"alignPop\"\n        [placement]=\"popoverOption.placement\"\n      >\n        <div class=\"ax-overlay-pane\">\n          <ax-button (click)=\"alignStateHandler('left')\" [look]=\"alignState() === 'left' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('center')\" [look]=\"alignState() === 'center' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('right')\" [look]=\"alignState() === 'right' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n          </ax-button>\n        </div>\n      </ax-popover>\n    }\n    @if (config().image) {\n      <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        <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n        </ax-text-box>\n        <ax-suffix>\n          <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n        </ax-suffix>\n      </ax-popover>\n    }\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{display:flex}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-select-box{margin-inline:1rem}\n"], dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i5.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i5.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i7.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    <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\n    <ax-button class=\"\" (click)=\"bold()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"italic()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"underLine()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"strike()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n    </ax-button>\n\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"colorBtn\" [placement]=\"popoverOption.placement\">\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 (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\n    <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n    </ax-select-box>\n\n    <ax-button (click)=\"orderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"unOrderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button look=\"blank\" #alignPop>\n      <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"alignPop\" [placement]=\"popoverOption.placement\">\n      <div class=\"ax-overlay-pane\">\n        <ax-button\n          (click)=\"alignStateHandler('left')\"\n          [look]=\"alignState() !== 'left' && 'blank'\"\n          [color]=\"alignState() === 'left' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('center')\"\n          [look]=\"alignState() !== 'center' && 'blank'\"\n          [color]=\"alignState() === 'center' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('right')\"\n          [look]=\"alignState() !== 'right' && 'blank'\"\n          [color]=\"alignState() === 'right' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n        </ax-button>\n      </div>\n    </ax-popover>\n\n    <ax-button #linkBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"linkBtn\" [placement]=\"popoverOption.placement\">\n      <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n      </ax-text-box>\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-popover>\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{display:flex}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-select-box{margin-inline:1rem}\n"] }]
+            args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    @if (config().undo) {\n      <ax-button class=\"\" (click)=\"undo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n      </ax-button>\n    }\n\n    @if (config().redo) {\n      <ax-button class=\"\" (click)=\"redo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().bold) {\n      <ax-button (click)=\"bold()\" [look]=\"boldState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().italic) {\n      <ax-button (click)=\"italic()\" [look]=\"italicState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().underLine) {\n      <ax-button (click)=\"underLine()\" [look]=\"underLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().strike) {\n      <ax-button (click)=\"strike()\" [look]=\"strikeLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().color) {\n      <ax-button #colorBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n      </ax-button>\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    @if (config().highlight) {\n      <ax-button #highlightBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      </ax-button>\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 (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    }\n    @if (config().fontSize) {\n      <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n      </ax-select-box>\n    }\n    @if (config().list) {\n      <ax-button (click)=\"orderList()\" [look]=\"listState() === 'ordered' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" [look]=\"listState() === 'bullet' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().alignment) {\n      <ax-button look=\"blank\" #alignPop>\n        <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n      </ax-button>\n      <ax-popover\n        [openOn]=\"popoverOption.openOn\"\n        [closeOn]=\"popoverOption.closeOn\"\n        [target]=\"alignPop\"\n        [placement]=\"popoverOption.placement\"\n      >\n        <div class=\"ax-overlay-pane\">\n          <ax-button (click)=\"alignStateHandler('left')\" [look]=\"alignState() === 'left' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('center')\" [look]=\"alignState() === 'center' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('right')\" [look]=\"alignState() === 'right' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n          </ax-button>\n        </div>\n      </ax-popover>\n    }\n    @if (config().image) {\n      <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        <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n        </ax-text-box>\n        <ax-suffix>\n          <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n        </ax-suffix>\n      </ax-popover>\n    }\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{display:flex}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-button{margin-inline:.1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-select-box{margin-inline:1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class AXWysiwygViewComponent {
+    constructor() {
+        this.classes = input('', { alias: 'class' });
+        this.wysiwygService = inject(AXWysiwygService);
+    }
+    get __hostClass() {
+        return `${this.classes()}`;
+    }
+    editorStateHandler(e) {
+        this.wysiwygService.currentSelectedElemArray.set([
+            e.target.nodeName,
+            e.target.parentElement.nodeName,
+            e.target.parentElement.parentElement.nodeName,
+            e.target.parentElement.parentElement.parentElement.nodeName,
+        ]);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXWysiwygViewComponent, selector: "ax-wysiwyg-view", ngImport: i0, template: "<!-- wysiwyg editor render here -->\n", styles: ["ax-wysiwyg-view{display:block;width:100%;border-bottom:1px solid rgb(var(--ax-color-border-default))}.ql-container{font-family:inherit}.ql-editor.ql-blank:before{color:rgb(var(--ax-color-neutral-400));font-weight:600;font-style:normal}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: AXWysiwygViewComponent, selector: "ax-wysiwyg-view", inputs: { classes: { classPropertyName: "classes", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<div class=\"ax-editor-wrapper\" (click)=\"editorStateHandler($event)\">\n  <!-- wysiwyg editor render here -->\n</div>\n", styles: ["ax-wysiwyg-view{display:block;width:100%;border-bottom:1px solid rgb(var(--ax-color-border-default))}.ql-container{font-family:inherit}.ql-editor.ql-blank:before{color:rgb(var(--ax-color-neutral-400));font-weight:600;font-style:normal}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-wysiwyg-view', encapsulation: ViewEncapsulation.None, template: "<!-- wysiwyg editor render here -->\n", styles: ["ax-wysiwyg-view{display:block;width:100%;border-bottom:1px solid rgb(var(--ax-color-border-default))}.ql-container{font-family:inherit}.ql-editor.ql-blank:before{color:rgb(var(--ax-color-neutral-400));font-weight:600;font-style:normal}\n"] }]
-        }] });
+            args: [{ selector: 'ax-wysiwyg-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-editor-wrapper\" (click)=\"editorStateHandler($event)\">\n  <!-- wysiwyg editor render here -->\n</div>\n", styles: ["ax-wysiwyg-view{display:block;width:100%;border-bottom:1px solid rgb(var(--ax-color-border-default))}.ql-container{font-family:inherit}.ql-editor.ql-blank:before{color:rgb(var(--ax-color-neutral-400));font-weight:600;font-style:normal}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 const COMPONENT = [AXWysiwygContainerComponent, AXWysiwygViewComponent, AXWysiwygToolbarComponent];
 const MODULES = [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule];

package/fesm2022/acorex-components-wysiwyg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-wysiwyg.mjs","sources":["../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg.service.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-view/wysiwyg-view.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-view/wysiwyg-view.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg.module.ts","../../../../libs/components/wysiwyg/src/acorex-components-wysiwyg.ts"],"sourcesContent":["import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXWysiwygService {\n  wysiwyg = signal<AXWysiwyg | null>(null);\n}\n","import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation, afterNextRender, inject, signal } from '@angular/core';\nimport { AXWysiwygService } from '../wysiwyg.service';\n\n@Component({\n  selector: 'ax-wysiwyg-container',\n  templateUrl: './wysiwyg-container.component.html',\n  styleUrl: './wysiwyg-container.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygContainerComponent extends MXBaseComponent {\n  wysiwyg = signal<AXWysiwyg>(null);\n  view = signal<HTMLElement | null>(null);\n  service = inject(AXWysiwygService);\n\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.view.set(this.getHostElement().querySelector('ax-wysiwyg-view') as HTMLElement);\n\n      this.wysiwyg.set(\n        new AXWysiwyg(this.view(), {\n          placeholder: 'Write Your Message ...',\n        }),\n      );\n\n      this.service.wysiwyg.set(this.wysiwyg());\n    });\n  }\n}\n","<ng-content></ng-content>\n","import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { AXClickEvent, AXDataSource, AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport { Component, ViewEncapsulation, afterNextRender, inject, output, signal } from '@angular/core';\nimport { AXWysiwygService } from '../wysiwyg.service';\n\n@Component({\n  selector: 'ax-wysiwyg-toolbar',\n  templateUrl: './wysiwyg-toolbar.component.html',\n  styleUrl: './wysiwyg-toolbar.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygToolbarComponent {\n  outputHTML = output<AXClickEvent>();\n  service = inject(AXWysiwygService);\n\n  protected wysiwyg = signal<AXWysiwyg | null>(null);\n  protected boldState = signal(false);\n  protected italicState = signal(false);\n  protected underLineState = signal(false);\n  protected strikeLineState = signal(false);\n  protected orderListState = signal('');\n  protected unOrderListState = signal('');\n  protected alignState = signal('');\n  protected selectedFont = 'medium';\n  protected selectedColor = '';\n  protected selectedHighlightColor = '';\n  protected linkAddress = '';\n\n  protected fontSize = new AXDataSource<string>({\n    pageSize: 10,\n    key: 'id',\n    load: (e) => {\n      return new Promise((resolve) => {\n        resolve({\n          items: ['small', 'medium', 'large', 'huge'],\n          total: 4,\n        });\n      });\n    },\n    byKey: (key) => {\n      return new Promise((resolve) => {\n        resolve('medium');\n      });\n    },\n  });\n\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  textBoxOptions = {\n    text: '',\n    placeholder: 'Enter yor url ...',\n    size: 'ax-sm',\n  };\n\n  submitLink() {\n    this.wysiwyg().addImage(this.textBoxOptions.text);\n  }\n\n  constructor() {\n    afterNextRender(() => {\n      this.wysiwyg.set(this.service.wysiwyg());\n    });\n  }\n\n  changeColorHandler(e: string) {\n    this.selectedColor = e;\n    this.wysiwyg().color(e);\n  }\n\n  changeHighlightColorHandler(e: string) {\n    this.selectedHighlightColor = e;\n    this.wysiwyg().background(e);\n  }\n\n  fontHandler(e: any) {\n    this.wysiwyg().fontSize(e);\n  }\n\n  bold() {\n    if (this.boldState()) {\n      this.wysiwyg().bold(false);\n      this.boldState.set(false);\n    } else {\n      this.wysiwyg().bold(true);\n      this.boldState.set(true);\n    }\n  }\n\n  out() {\n    this.outputHTML.emit({\n      component: this,\n      data: { value: this.wysiwyg().HTMLoutput },\n      isUserInteraction: true,\n    });\n  }\n\n  italic() {\n    if (this.italicState()) {\n      this.wysiwyg().italic(false);\n      this.italicState.set(false);\n    } else {\n      this.wysiwyg().italic(true);\n      this.italicState.set(true);\n    }\n  }\n\n  underLine() {\n    if (this.underLineState()) {\n      this.wysiwyg().underLine(false);\n      this.underLineState.set(false);\n    } else {\n      this.wysiwyg().underLine(true);\n      this.underLineState.set(true);\n    }\n  }\n\n  orderList() {\n    if (this.orderListState()) {\n      this.wysiwyg().list('');\n      this.orderListState.set('');\n    } else {\n      this.wysiwyg().list('ordered');\n      this.orderListState.set('ordered');\n    }\n  }\n\n  unOrderList() {\n    if (this.unOrderListState()) {\n      this.wysiwyg().list('');\n      this.unOrderListState.set('');\n    } else {\n      this.wysiwyg().list('bullet');\n      this.unOrderListState.set('bullet');\n    }\n  }\n\n  alignStateHandler(e: any) {\n    this.alignState.set(e);\n    this.wysiwyg().align(e);\n  }\n\n  undo() {\n    this.wysiwyg().undo();\n  }\n\n  redo() {\n    this.wysiwyg().redo();\n  }\n\n  strike() {\n    if (this.strikeLineState()) {\n      this.wysiwyg().strike(false);\n      this.strikeLineState.set(false);\n    } else {\n      this.wysiwyg().strike(true);\n      this.strikeLineState.set(true);\n    }\n  }\n\n  background() {\n    this.wysiwyg().background('red');\n  }\n}\n","<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    <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\n    <ax-button class=\"\" (click)=\"bold()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"italic()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"underLine()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"strike()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n    </ax-button>\n\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"colorBtn\" [placement]=\"popoverOption.placement\">\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 (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\n    <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n    </ax-select-box>\n\n    <ax-button (click)=\"orderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button (click)=\"unOrderList()\" look=\"blank\" [toggleable]=\"true\">\n      <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n    </ax-button>\n\n    <ax-button look=\"blank\" #alignPop>\n      <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"alignPop\" [placement]=\"popoverOption.placement\">\n      <div class=\"ax-overlay-pane\">\n        <ax-button\n          (click)=\"alignStateHandler('left')\"\n          [look]=\"alignState() !== 'left' && 'blank'\"\n          [color]=\"alignState() === 'left' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('center')\"\n          [look]=\"alignState() !== 'center' && 'blank'\"\n          [color]=\"alignState() === 'center' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n        </ax-button>\n\n        <ax-button\n          (click)=\"alignStateHandler('right')\"\n          [look]=\"alignState() !== 'right' && 'blank'\"\n          [color]=\"alignState() === 'right' && 'primary'\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n        </ax-button>\n      </div>\n    </ax-popover>\n\n    <ax-button #linkBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n    </ax-button>\n\n    <ax-popover [openOn]=\"popoverOption.openOn\" [closeOn]=\"popoverOption.closeOn\" [target]=\"linkBtn\" [placement]=\"popoverOption.placement\">\n      <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n      </ax-text-box>\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-popover>\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-wysiwyg-view',\n  templateUrl: './wysiwyg-view.component.html',\n  styleUrl: './wysiwyg-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygViewComponent {}\n","<!-- wysiwyg editor render here -->\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXWysiwygContainerComponent } from './wysiwyg/wysiwyg-container/wysiwyg-container.component';\n\nimport { AXColorPaletteModule } from '@acorex/components/color-palette';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXWysiwygToolbarComponent } from './wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component';\nimport { AXWysiwygViewComponent } from './wysiwyg/wysiwyg-view/wysiwyg-view.component';\nimport { AXWysiwygService } from './wysiwyg/wysiwyg.service';\n\nconst COMPONENT = [AXWysiwygContainerComponent, AXWysiwygViewComponent, AXWysiwygToolbarComponent];\n\nconst MODULES = [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [AXWysiwygService],\n})\nexport class AXWysiwygModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-wysiwyg.mjs","sources":["../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg.service.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-container/wysiwyg-container.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-view/wysiwyg-view.component.ts","../../../../libs/components/wysiwyg/src/lib/wysiwyg/wysiwyg-view/wysiwyg-view.component.html","../../../../libs/components/wysiwyg/src/lib/wysiwyg.module.ts","../../../../libs/components/wysiwyg/src/acorex-components-wysiwyg.ts"],"sourcesContent":["import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXWysiwygService {\n  wysiwyg = signal<AXWysiwyg | null>(null);\n\n  currentSelectedElemArray = signal<string[]>([]);\n}\n","import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { MXBaseComponent } from '@acorex/components/common';\nimport { Component, ViewEncapsulation, afterNextRender, inject, signal } from '@angular/core';\nimport { AXWysiwygService } from '../wysiwyg.service';\n\n@Component({\n  selector: 'ax-wysiwyg-container',\n  templateUrl: './wysiwyg-container.component.html',\n  styleUrl: './wysiwyg-container.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygContainerComponent extends MXBaseComponent {\n  wysiwyg = signal<AXWysiwyg>(null);\n  view = signal<HTMLElement | null>(null);\n  service = inject(AXWysiwygService);\n\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.view.set(this.getHostElement().querySelector('.ax-editor-wrapper') as HTMLElement);\n\n      this.wysiwyg.set(\n        new AXWysiwyg(this.view(), {\n          placeholder: 'Write Your Message ...',\n        }),\n      );\n\n      this.service.wysiwyg.set(this.wysiwyg());\n    });\n  }\n}\n","<ng-content></ng-content>\n","import { AXWysiwyg } from '@acorex/cdk/wysiwyg';\nimport { AXClickEvent, AXDataSource, AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport { Component, ViewEncapsulation, afterNextRender, effect, inject, input, output, signal } from '@angular/core';\nimport { AXWysiwygService } from '../wysiwyg.service';\n\ntype ConfigType = {\n  bold: boolean;\n  undo: boolean;\n  redo: boolean;\n  italic: boolean;\n  underLine: boolean;\n  strike: boolean;\n  color: boolean;\n  highlight: boolean;\n  fontSize: boolean;\n  list: boolean;\n  alignment: boolean;\n  image: boolean;\n};\n\n@Component({\n  selector: 'ax-wysiwyg-toolbar',\n  templateUrl: './wysiwyg-toolbar.component.html',\n  styleUrl: './wysiwyg-toolbar.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygToolbarComponent {\n  outputHTML = output<AXClickEvent>();\n  service = inject(AXWysiwygService);\n\n  config = input<ConfigType>({\n    bold: true,\n    undo: true,\n    redo: true,\n    italic: true,\n    underLine: true,\n    strike: true,\n    color: true,\n    highlight: true,\n    fontSize: true,\n    list: true,\n    alignment: true,\n    image: true,\n  });\n\n  protected wysiwyg = signal<AXWysiwyg | null>(null);\n  protected boldState = signal(false);\n  protected italicState = signal(false);\n  protected underLineState = signal(false);\n  protected strikeLineState = signal(false);\n  protected listState = signal('');\n  protected alignState = signal('');\n  protected selectedFont = 'medium';\n  protected selectedColor = '';\n  protected selectedHighlightColor = '';\n  protected linkAddress = '';\n\n  constructor() {\n    effect(\n      () => {\n        this.wysiwyg().bold(false);\n        this.boldState.set(false);\n        this.wysiwyg().italic(false);\n        this.italicState.set(false);\n        this.wysiwyg().strike(false);\n        this.strikeLineState.set(false);\n        this.wysiwyg().underLine(false);\n        this.underLineState.set(false);\n\n        this.service.currentSelectedElemArray().forEach((item) => {\n          switch (item) {\n            case 'U':\n              this.wysiwyg().underLine(true);\n              this.underLineState.set(true);\n              break;\n            case 'S':\n              this.wysiwyg().strike(true);\n              this.strikeLineState.set(true);\n              break;\n            case 'EM':\n              this.wysiwyg().italic(true);\n              this.italicState.set(true);\n              break;\n            case 'STRONG':\n              this.wysiwyg().bold(true);\n              this.boldState.set(true);\n              break;\n          }\n        });\n      },\n      { allowSignalWrites: true },\n    );\n    afterNextRender(() => {\n      this.wysiwyg.set(this.service.wysiwyg());\n    });\n  }\n\n  protected fontSize = new AXDataSource<string>({\n    pageSize: 10,\n    key: 'id',\n    load: (e) => {\n      return new Promise((resolve) => {\n        resolve({\n          items: ['small', 'medium', 'large', 'huge'],\n          total: 4,\n        });\n      });\n    },\n    byKey: (key) => {\n      return new Promise((resolve) => {\n        resolve('medium');\n      });\n    },\n  });\n\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  textBoxOptions = {\n    text: '',\n    placeholder: 'Enter yor url ...',\n    size: 'ax-sm',\n  };\n\n  submitLink() {\n    this.wysiwyg().addImage(this.textBoxOptions.text);\n  }\n\n  changeColorHandler(e: string) {\n    this.selectedColor = e;\n    this.wysiwyg().color(e);\n  }\n\n  changeHighlightColorHandler(e: string) {\n    this.selectedHighlightColor = e;\n    this.wysiwyg().background(e);\n  }\n\n  fontHandler(e: any) {\n    this.wysiwyg().fontSize(e);\n  }\n\n  bold() {\n    if (this.boldState()) {\n      this.wysiwyg().bold(false);\n      this.boldState.set(false);\n    } else {\n      this.wysiwyg().bold(true);\n      this.boldState.set(true);\n    }\n  }\n\n  out() {\n    this.outputHTML.emit({\n      component: this,\n      data: { value: this.wysiwyg().HTMLoutput },\n      isUserInteraction: true,\n    });\n  }\n\n  italic() {\n    if (this.italicState()) {\n      this.wysiwyg().italic(false);\n      this.italicState.set(false);\n    } else {\n      this.wysiwyg().italic(true);\n      this.italicState.set(true);\n    }\n  }\n\n  underLine() {\n    if (this.underLineState()) {\n      this.wysiwyg().underLine(false);\n      this.underLineState.set(false);\n    } else {\n      this.wysiwyg().underLine(true);\n      this.underLineState.set(true);\n    }\n  }\n\n  orderList() {\n    if (!this.listState() || this.listState() === 'bullet') {\n      this.wysiwyg().list('ordered');\n      this.listState.set('ordered');\n    } else {\n      this.wysiwyg().list('');\n      this.listState.set('');\n    }\n  }\n\n  unOrderList() {\n    if (!this.listState() || this.listState() === 'ordered') {\n      this.wysiwyg().list('bullet');\n      this.listState.set('bullet');\n    } else {\n      this.wysiwyg().list('');\n      this.listState.set('');\n    }\n  }\n\n  alignStateHandler(e: any) {\n    this.alignState.set(e);\n    this.wysiwyg().align(e);\n  }\n\n  undo() {\n    this.wysiwyg().undo();\n  }\n\n  redo() {\n    this.wysiwyg().redo();\n  }\n\n  strike() {\n    if (this.strikeLineState()) {\n      this.wysiwyg().strike(false);\n      this.strikeLineState.set(false);\n    } else {\n      this.wysiwyg().strike(true);\n      this.strikeLineState.set(true);\n    }\n  }\n\n  background() {\n    this.wysiwyg().background('red');\n  }\n}\n","<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-wysiwyg-tool-container\">\n    @if (config().undo) {\n      <ax-button class=\"\" (click)=\"undo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n      </ax-button>\n    }\n\n    @if (config().redo) {\n      <ax-button class=\"\" (click)=\"redo()\" look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().bold) {\n      <ax-button (click)=\"bold()\" [look]=\"boldState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-bold\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().italic) {\n      <ax-button (click)=\"italic()\" [look]=\"italicState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-italic\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().underLine) {\n      <ax-button (click)=\"underLine()\" [look]=\"underLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-under-line\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().strike) {\n      <ax-button (click)=\"strike()\" [look]=\"strikeLineState() ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-strike\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().color) {\n      <ax-button #colorBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n      </ax-button>\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    @if (config().highlight) {\n      <ax-button #highlightBtn look=\"blank\">\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      </ax-button>\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 (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    }\n    @if (config().fontSize) {\n      <ax-select-box (ngModelChange)=\"fontHandler($event)\" [ngModel]=\"selectedFont\" [dataSource]=\"fontSize\" placeholder=\"Choose...\">\n      </ax-select-box>\n    }\n    @if (config().list) {\n      <ax-button (click)=\"orderList()\" [look]=\"listState() === 'ordered' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" [look]=\"listState() === 'bullet' ? 'solid' : 'blank'\">\n        <ax-icon class=\"ax-icon ax-icon-un-order-list\"></ax-icon>\n      </ax-button>\n    }\n    @if (config().alignment) {\n      <ax-button look=\"blank\" #alignPop>\n        <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n      </ax-button>\n      <ax-popover\n        [openOn]=\"popoverOption.openOn\"\n        [closeOn]=\"popoverOption.closeOn\"\n        [target]=\"alignPop\"\n        [placement]=\"popoverOption.placement\"\n      >\n        <div class=\"ax-overlay-pane\">\n          <ax-button (click)=\"alignStateHandler('left')\" [look]=\"alignState() === 'left' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('center')\" [look]=\"alignState() === 'center' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-center\"></ax-icon>\n          </ax-button>\n\n          <ax-button (click)=\"alignStateHandler('right')\" [look]=\"alignState() === 'right' ? 'solid' : 'blank'\">\n            <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n          </ax-button>\n        </div>\n      </ax-popover>\n    }\n    @if (config().image) {\n      <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        <ax-text-box class=\"{{ textBoxOptions.size }}\" [(ngModel)]=\"textBoxOptions.text\" [placeholder]=\"textBoxOptions.placeholder\">\n        </ax-text-box>\n        <ax-suffix>\n          <ax-button (click)=\"submitLink()\" class=\"ax-sm\" color=\"secondary\" text=\"Add\"> </ax-button>\n        </ax-suffix>\n      </ax-popover>\n    }\n  </div>\n\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n","import { Component, HostBinding, inject, input, ViewEncapsulation } from '@angular/core';\nimport { AXWysiwygService } from '../wysiwyg.service';\n\n@Component({\n  selector: 'ax-wysiwyg-view',\n  templateUrl: './wysiwyg-view.component.html',\n  styleUrl: './wysiwyg-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXWysiwygViewComponent {\n  classes = input<string>('', { alias: 'class' });\n\n  wysiwygService = inject(AXWysiwygService);\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.classes()}`;\n  }\n\n  editorStateHandler(e: any) {\n    this.wysiwygService.currentSelectedElemArray.set([\n      e.target.nodeName,\n      e.target.parentElement.nodeName,\n      e.target.parentElement.parentElement.nodeName,\n      e.target.parentElement.parentElement.parentElement.nodeName,\n    ]);\n  }\n}\n","<div class=\"ax-editor-wrapper\" (click)=\"editorStateHandler($event)\">\n  <!-- wysiwyg editor render here -->\n</div>\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXWysiwygContainerComponent } from './wysiwyg/wysiwyg-container/wysiwyg-container.component';\n\nimport { AXColorPaletteModule } from '@acorex/components/color-palette';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXWysiwygToolbarComponent } from './wysiwyg/wysiwyg-toolbar/wysiwyg-toolbar.component';\nimport { AXWysiwygViewComponent } from './wysiwyg/wysiwyg-view/wysiwyg-view.component';\nimport { AXWysiwygService } from './wysiwyg/wysiwyg.service';\n\nconst COMPONENT = [AXWysiwygContainerComponent, AXWysiwygViewComponent, AXWysiwygToolbarComponent];\n\nconst MODULES = [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [AXWysiwygService],\n})\nexport class AXWysiwygModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/number-box/lib/number-box.component.d.ts

@@ -69,7 +69,7 @@ export declare class AXNumberBoxComponent extends AXNumberBoxComponent_base impl
     private _updateMask;
     _handleModelChange(value: number): void;
     _handleOnKeydownEvent(e: KeyboardEvent): void;
-    _handleUpDownClick(v: -1 | 1): void;
+    protected _handleUpDownClick(v: -1 | 1): void;
     stepUp(u?: boolean): void;
     stepDown(u?: boolean): void;
     decimalStepUp(u?: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "18.5.12",
+  "version": "18.5.14",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
@@ -31,18 +31,24 @@
       "esm": "./esm2022/action-sheet/acorex-components-action-sheet.mjs",
       "default": "./fesm2022/acorex-components-action-sheet.mjs"
     },
-    "./audio-wave": {
-      "types": "./audio-wave/index.d.ts",
-      "esm2022": "./esm2022/audio-wave/acorex-components-audio-wave.mjs",
-      "esm": "./esm2022/audio-wave/acorex-components-audio-wave.mjs",
-      "default": "./fesm2022/acorex-components-audio-wave.mjs"
-    },
     "./alert": {
       "types": "./alert/index.d.ts",
       "esm2022": "./esm2022/alert/acorex-components-alert.mjs",
       "esm": "./esm2022/alert/acorex-components-alert.mjs",
       "default": "./fesm2022/acorex-components-alert.mjs"
     },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "esm2022": "./esm2022/avatar/acorex-components-avatar.mjs",
+      "esm": "./esm2022/avatar/acorex-components-avatar.mjs",
+      "default": "./fesm2022/acorex-components-avatar.mjs"
+    },
+    "./audio-wave": {
+      "types": "./audio-wave/index.d.ts",
+      "esm2022": "./esm2022/audio-wave/acorex-components-audio-wave.mjs",
+      "esm": "./esm2022/audio-wave/acorex-components-audio-wave.mjs",
+      "default": "./fesm2022/acorex-components-audio-wave.mjs"
+    },
     "./badge": {
       "types": "./badge/index.d.ts",
       "esm2022": "./esm2022/badge/acorex-components-badge.mjs",
@@ -55,12 +61,6 @@
       "esm": "./esm2022/bottom-navigation/acorex-components-bottom-navigation.mjs",
       "default": "./fesm2022/acorex-components-bottom-navigation.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "esm2022": "./esm2022/avatar/acorex-components-avatar.mjs",
-      "esm": "./esm2022/avatar/acorex-components-avatar.mjs",
-      "default": "./fesm2022/acorex-components-avatar.mjs"
-    },
     "./breadcrumbs": {
       "types": "./breadcrumbs/index.d.ts",
       "esm2022": "./esm2022/breadcrumbs/acorex-components-breadcrumbs.mjs",
@@ -169,18 +169,18 @@
       "esm": "./esm2022/datetime-picker/acorex-components-datetime-picker.mjs",
       "default": "./fesm2022/acorex-components-datetime-picker.mjs"
     },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "esm2022": "./esm2022/dialog/acorex-components-dialog.mjs",
-      "esm": "./esm2022/dialog/acorex-components-dialog.mjs",
-      "default": "./fesm2022/acorex-components-dialog.mjs"
-    },
     "./decorators": {
       "types": "./decorators/index.d.ts",
       "esm2022": "./esm2022/decorators/acorex-components-decorators.mjs",
       "esm": "./esm2022/decorators/acorex-components-decorators.mjs",
       "default": "./fesm2022/acorex-components-decorators.mjs"
     },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "esm2022": "./esm2022/dialog/acorex-components-dialog.mjs",
+      "esm": "./esm2022/dialog/acorex-components-dialog.mjs",
+      "default": "./fesm2022/acorex-components-dialog.mjs"
+    },
     "./drawer": {
       "types": "./drawer/index.d.ts",
       "esm2022": "./esm2022/drawer/acorex-components-drawer.mjs",
@@ -193,6 +193,12 @@
       "esm": "./esm2022/dropdown/acorex-components-dropdown.mjs",
       "default": "./fesm2022/acorex-components-dropdown.mjs"
     },
+    "./form": {
+      "types": "./form/index.d.ts",
+      "esm2022": "./esm2022/form/acorex-components-form.mjs",
+      "esm": "./esm2022/form/acorex-components-form.mjs",
+      "default": "./fesm2022/acorex-components-form.mjs"
+    },
     "./dropdown-button": {
       "types": "./dropdown-button/index.d.ts",
       "esm2022": "./esm2022/dropdown-button/acorex-components-dropdown-button.mjs",
@@ -205,12 +211,6 @@
       "esm": "./esm2022/image/acorex-components-image.mjs",
       "default": "./fesm2022/acorex-components-image.mjs"
     },
-    "./form": {
-      "types": "./form/index.d.ts",
-      "esm2022": "./esm2022/form/acorex-components-form.mjs",
-      "esm": "./esm2022/form/acorex-components-form.mjs",
-      "default": "./fesm2022/acorex-components-form.mjs"
-    },
     "./label": {
       "types": "./label/index.d.ts",
       "esm2022": "./esm2022/label/acorex-components-label.mjs",
@@ -319,18 +319,18 @@
       "esm": "./esm2022/radio/acorex-components-radio.mjs",
       "default": "./fesm2022/acorex-components-radio.mjs"
     },
-    "./range-slider": {
-      "types": "./range-slider/index.d.ts",
-      "esm2022": "./esm2022/range-slider/acorex-components-range-slider.mjs",
-      "esm": "./esm2022/range-slider/acorex-components-range-slider.mjs",
-      "default": "./fesm2022/acorex-components-range-slider.mjs"
-    },
     "./result": {
       "types": "./result/index.d.ts",
       "esm2022": "./esm2022/result/acorex-components-result.mjs",
       "esm": "./esm2022/result/acorex-components-result.mjs",
       "default": "./fesm2022/acorex-components-result.mjs"
     },
+    "./range-slider": {
+      "types": "./range-slider/index.d.ts",
+      "esm2022": "./esm2022/range-slider/acorex-components-range-slider.mjs",
+      "esm": "./esm2022/range-slider/acorex-components-range-slider.mjs",
+      "default": "./fesm2022/acorex-components-range-slider.mjs"
+    },
     "./routing-progress": {
       "types": "./routing-progress/index.d.ts",
       "esm2022": "./esm2022/routing-progress/acorex-components-routing-progress.mjs",
@@ -367,18 +367,18 @@
       "esm": "./esm2022/selection-list/acorex-components-selection-list.mjs",
       "default": "./fesm2022/acorex-components-selection-list.mjs"
     },
-    "./skeleton": {
-      "types": "./skeleton/index.d.ts",
-      "esm2022": "./esm2022/skeleton/acorex-components-skeleton.mjs",
-      "esm": "./esm2022/skeleton/acorex-components-skeleton.mjs",
-      "default": "./fesm2022/acorex-components-skeleton.mjs"
-    },
     "./side-menu": {
       "types": "./side-menu/index.d.ts",
       "esm2022": "./esm2022/side-menu/acorex-components-side-menu.mjs",
       "esm": "./esm2022/side-menu/acorex-components-side-menu.mjs",
       "default": "./fesm2022/acorex-components-side-menu.mjs"
     },
+    "./skeleton": {
+      "types": "./skeleton/index.d.ts",
+      "esm2022": "./esm2022/skeleton/acorex-components-skeleton.mjs",
+      "esm": "./esm2022/skeleton/acorex-components-skeleton.mjs",
+      "default": "./fesm2022/acorex-components-skeleton.mjs"
+    },
     "./slider": {
       "types": "./slider/index.d.ts",
       "esm2022": "./esm2022/slider/acorex-components-slider.mjs",
@@ -403,18 +403,18 @@
       "esm": "./esm2022/tabs/acorex-components-tabs.mjs",
       "default": "./fesm2022/acorex-components-tabs.mjs"
     },
-    "./text-area": {
-      "types": "./text-area/index.d.ts",
-      "esm2022": "./esm2022/text-area/acorex-components-text-area.mjs",
-      "esm": "./esm2022/text-area/acorex-components-text-area.mjs",
-      "default": "./fesm2022/acorex-components-text-area.mjs"
-    },
     "./tag": {
       "types": "./tag/index.d.ts",
       "esm2022": "./esm2022/tag/acorex-components-tag.mjs",
       "esm": "./esm2022/tag/acorex-components-tag.mjs",
       "default": "./fesm2022/acorex-components-tag.mjs"
     },
+    "./text-area": {
+      "types": "./text-area/index.d.ts",
+      "esm2022": "./esm2022/text-area/acorex-components-text-area.mjs",
+      "esm": "./esm2022/text-area/acorex-components-text-area.mjs",
+      "default": "./fesm2022/acorex-components-text-area.mjs"
+    },
     "./text-box": {
       "types": "./text-box/index.d.ts",
       "esm2022": "./esm2022/text-box/acorex-components-text-box.mjs",

package/uploader/index.d.ts

@@ -5,3 +5,4 @@ export * from './lib/uploader-list.component';
 export * from './lib/uploader-zone.directive';
 export * from './lib/uploader.module';
 export * from './lib/uploader.service';
+export * from './lib/uploader.models';