@acorex/components 18.5.16 → 18.6.0

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -5,11 +5,12 @@ 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, input, effect, HostBinding, NgModule } from '@angular/core';
+import { signal, Injectable, inject, NgZone, afterNextRender, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, output, input, effect, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AXWysiwyg } from '@acorex/cdk/wysiwyg';
-import { MXBaseComponent, AXDataSource } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
+import { classes } from 'polytype';
 import * as i5 from '@acorex/components/color-palette';
 import { AXColorPaletteModule } from '@acorex/components/color-palette';
 import * as i6 from '@acorex/components/popover';
@@ -21,6 +22,9 @@ class AXWysiwygService {
     constructor() {
         this.wysiwyg = signal(null);
         this.currentSelectedElemArray = signal([]);
+        this.currentSelectedElemClass = signal('');
+        this.currentSelectedElemList = signal('');
+        this.currentSelectedElemAlign = 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 }); }
@@ -29,32 +33,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }] });
 
-class AXWysiwygContainerComponent extends MXBaseComponent {
+/**
+ * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * @category Components
+ */
+class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+    /**
+     *  @ignore
+     */
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        this.zone = inject(NgZone);
+        /**
+         *  @ignore
+         */
         this.wysiwyg = signal(null);
+        /**
+         *  @ignore
+         */
         this.view = signal(null);
+        /**
+         *  @ignore
+         */
         this.service = inject(AXWysiwygService);
         afterNextRender(() => {
             this.view.set(this.getHostElement().querySelector('.ax-editor-wrapper'));
-            this.wysiwyg.set(new AXWysiwyg(this.view(), {
-                placeholder: 'Write Your Message ...',
-            }));
+            this.zone.runOutsideAngular(() => {
+                this.wysiwyg.set(new AXWysiwyg(this.view(), {
+                    placeholder: 'Write Your Message ...',
+                }));
+                this.wysiwyg().wysiwygObj.on('text-change', this.changeHandler.bind(this));
+            });
             this.service.wysiwyg.set(this.wysiwyg());
         });
     }
+    changeHandler() {
+        const value = this.wysiwyg().wysiwygObj.root.innerHTML;
+        if (value === '<p><br></p>' || !value) {
+            this.commitValue(null);
+        }
+        else {
+            this.commitValue(value);
+        }
+    }
+    ngOnDestroy() {
+        this.wysiwyg().wysiwygObj.off('text-change', this.changeHandler);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}ax-wysiwyg-container{border:1px solid rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:100%;display:block;overflow-x:auto}\n/*! Bundled license information:\n\nquill/dist/quill.core.css:\n  (*!\n   * Quill Editor v2.0.2\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: { look: "look" }, providers: [
+            { provide: AXComponent, useExisting: AXWysiwygContainerComponent },
+            { provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
+            { provide: AXClearableComponent, useExisting: AXWysiwygContainerComponent },
+            { provide: AXValuableComponent, useExisting: AXWysiwygContainerComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXWysiwygContainerComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}ax-wysiwyg-container{width:100%;display:block}ax-wysiwyg-container>.ax-editor-container{display:block;height:auto!important}\n/*! Bundled license information:\n\nquill/dist/quill.core.css:\n  (*!\n   * Quill Editor v2.0.2\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-wysiwyg-container', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}ax-wysiwyg-container{border:1px solid rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:100%;display:block;overflow-x:auto}\n/*! Bundled license information:\n\nquill/dist/quill.core.css:\n  (*!\n   * Quill Editor v2.0.2\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"] }]
+            args: [{ selector: 'ax-wysiwyg-container', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXWysiwygContainerComponent },
+                        { provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
+                        { provide: AXClearableComponent, useExisting: AXWysiwygContainerComponent },
+                        { provide: AXValuableComponent, useExisting: AXWysiwygContainerComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXWysiwygContainerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ax-editor-container ax-look-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}ax-wysiwyg-container{width:100%;display:block}ax-wysiwyg-container>.ax-editor-container{display:block;height:auto!important}\n/*! Bundled license information:\n\nquill/dist/quill.core.css:\n  (*!\n   * Quill Editor v2.0.2\n   * https://quilljs.com\n   * Copyright (c) 2017-2024, Slab\n   * Copyright (c) 2014, Jason Chen\n   * Copyright (c) 2013, salesforce.com\n   *)\n*/\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * A toolbar component for the WYSIWYG editor, providing various formatting options.
+ * @category Components
+ */
 class AXWysiwygToolbarComponent {
+    /** @ignore */
     constructor() {
+        this.parent = inject(AXWysiwygContainerComponent);
+        /**
+         *  Return user input as HTML.
+         *  @event
+         */
         this.outputHTML = output();
+        /** @ignore */
         this.service = inject(AXWysiwygService);
+        /**
+         * config wysiwyg toolbar.
+         *
+         * @defaultValue 'button'
+         */
         this.config = input({
             bold: true,
             undo: true,
@@ -69,34 +144,27 @@ class AXWysiwygToolbarComponent {
             alignment: true,
             image: true,
         });
+        /** @ignore */
         this.wysiwyg = signal(null);
+        /** @ignore */
         this.boldState = signal(false);
+        /** @ignore */
         this.italicState = signal(false);
+        /** @ignore */
         this.underLineState = signal(false);
+        /** @ignore */
         this.strikeLineState = signal(false);
+        /** @ignore */
         this.listState = signal('');
+        /** @ignore */
         this.alignState = signal('');
-        this.selectedFont = 'medium';
-        this.selectedColor = '';
-        this.selectedHighlightColor = '';
-        this.linkAddress = '';
-        this.fontSize = new AXDataSource({
-            pageSize: 10,
-            key: 'id',
-            load: (e) => {
-                return new Promise((resolve) => {
-                    resolve({
-                        items: ['small', 'medium', 'large', 'huge'],
-                        total: 4,
-                    });
-                });
-            },
-            byKey: (key) => {
-                return new Promise((resolve) => {
-                    resolve('medium');
-                });
-            },
-        });
+        /** @ignore */
+        this.selectedFont = signal('medium');
+        /** @ignore */
+        this.selectedColor = signal('rgb(151, 148, 148)');
+        /** @ignore */
+        this.selectedHighlightColor = signal('rgba(243, 238, 238,0)');
+        /** @ignore */
         this.popoverOption = {
             openOn: 'click',
             closeOn: 'clickOut',
@@ -104,20 +172,52 @@ class AXWysiwygToolbarComponent {
             offsetX: 0,
             offsetY: 0,
         };
+        /** @ignore */
         this.textBoxOptions = {
             text: '',
             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);
+            switch (this.service.currentSelectedElemList()) {
+                case 'ordered':
+                    this.wysiwyg().list('ordered');
+                    this.listState.set('ordered');
+                    break;
+                case 'bullet':
+                    this.wysiwyg().list('bullet');
+                    this.listState.set('bullet');
+                    break;
+                default:
+                    this.wysiwyg().list('');
+                    this.listState.set('');
+            }
+            switch (this.service.currentSelectedElemClass()) {
+                case 'ql-size-huge':
+                    this.selectedFont.set('huge');
+                    break;
+                case 'ql-size-large':
+                    this.selectedFont.set('large');
+                    break;
+                case 'ql-size-small':
+                    this.selectedFont.set('small');
+                    break;
+                default:
+                    this.selectedFont.set('medium');
+            }
+            switch (this.service.currentSelectedElemAlign()) {
+                case 'ql-align-center':
+                    this.alignState.set('center');
+                    this.wysiwyg().align('center');
+                    break;
+                case 'ql-align-right':
+                    this.alignState.set('right');
+                    this.wysiwyg().align('right');
+                    break;
+                default:
+                    this.alignState.set('left');
+                    this.wysiwyg().align('left');
+            }
             this.service.currentSelectedElemArray().forEach((item) => {
                 switch (item) {
                     case 'U':
@@ -136,6 +236,15 @@ class AXWysiwygToolbarComponent {
                         this.wysiwyg().bold(true);
                         this.boldState.set(true);
                         break;
+                    default:
+                        if (this.boldState())
+                            this.wysiwyg().bold(true);
+                        if (this.italicState())
+                            this.wysiwyg().italic(true);
+                        if (this.strikeLineState())
+                            this.wysiwyg().strike(true);
+                        if (this.underLineState())
+                            this.wysiwyg().underLine(true);
                 }
             });
         }, { allowSignalWrites: true });
@@ -143,20 +252,30 @@ class AXWysiwygToolbarComponent {
             this.wysiwyg.set(this.service.wysiwyg());
         });
     }
+    /** @ignore */
     submitLink() {
         this.wysiwyg().addImage(this.textBoxOptions.text);
     }
+    /** @ignore */
     changeColorHandler(e) {
-        this.selectedColor = e;
+        this.selectedColor.set(e);
         this.wysiwyg().color(e);
     }
+    /** @ignore */
     changeHighlightColorHandler(e) {
-        this.selectedHighlightColor = e;
+        this.selectedHighlightColor.set(e);
         this.wysiwyg().background(e);
     }
+    /** @ignore */
     fontHandler(e) {
-        this.wysiwyg().fontSize(e);
+        if (e === 'medium') {
+            this.wysiwyg().fontSize(false);
+        }
+        else {
+            this.wysiwyg().fontSize(e);
+        }
     }
+    /** @ignore */
     bold() {
         if (this.boldState()) {
             this.wysiwyg().bold(false);
@@ -167,13 +286,7 @@ class AXWysiwygToolbarComponent {
             this.boldState.set(true);
         }
     }
-    out() {
-        this.outputHTML.emit({
-            component: this,
-            data: { value: this.wysiwyg().HTMLoutput },
-            isUserInteraction: true,
-        });
-    }
+    /** @ignore */
     italic() {
         if (this.italicState()) {
             this.wysiwyg().italic(false);
@@ -184,6 +297,7 @@ class AXWysiwygToolbarComponent {
             this.italicState.set(true);
         }
     }
+    /** @ignore */
     underLine() {
         if (this.underLineState()) {
             this.wysiwyg().underLine(false);
@@ -194,6 +308,7 @@ class AXWysiwygToolbarComponent {
             this.underLineState.set(true);
         }
     }
+    /** @ignore */
     orderList() {
         if (!this.listState() || this.listState() === 'bullet') {
             this.wysiwyg().list('ordered');
@@ -204,6 +319,7 @@ class AXWysiwygToolbarComponent {
             this.listState.set('');
         }
     }
+    /** @ignore */
     unOrderList() {
         if (!this.listState() || this.listState() === 'ordered') {
             this.wysiwyg().list('bullet');
@@ -214,16 +330,20 @@ class AXWysiwygToolbarComponent {
             this.listState.set('');
         }
     }
+    /** @ignore */
     alignStateHandler(e) {
         this.alignState.set(e);
         this.wysiwyg().align(e);
     }
+    /** @ignore */
     undo() {
         this.wysiwyg().undo();
     }
+    /** @ignore */
     redo() {
         this.wysiwyg().redo();
     }
+    /** @ignore */
     strike() {
         if (this.strikeLineState()) {
             this.wysiwyg().strike(false);
@@ -234,17 +354,22 @@ class AXWysiwygToolbarComponent {
             this.strikeLineState.set(true);
         }
     }
+    /** @ignore */
     background() {
         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: "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=\"blank\" [selected]=\"boldState() ? true : false\">\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=\"blank\" [selected]=\"italicState() ? true : false\">\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=\"blank\" [selected]=\"underLineState() ? true : false\">\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=\"blank\" [selected]=\"strikeLineState() ? true : false\">\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=\"blank\" [selected]=\"listState() === 'ordered' ? true : false\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" look=\"blank\" [selected]=\"listState() === 'bullet' ? true : false\">\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=\"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    }\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", "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: "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  <div class=\"ax-wysiwyg-tool-container\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n\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=\"blank\" [selected]=\"boldState() ? true : false\">\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=\"blank\" [selected]=\"italicState() ? true : false\">\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=\"blank\" [selected]=\"underLineState() ? true : false\">\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=\"blank\" [selected]=\"strikeLineState() ? true : false\">\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\n        [look]=\"parent.look\"\n        (ngModelChange)=\"fontHandler($event)\"\n        [ngModel]=\"selectedFont()\"\n        [dataSource]=\"['small', 'medium', 'large', 'huge']\"\n        placeholder=\"Choose...\"\n      >\n      </ax-select-box>\n    }\n    @if (config().list) {\n      <ax-button (click)=\"orderList()\" look=\"blank\" [selected]=\"listState() === 'ordered' ? true : false\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" look=\"blank\" [selected]=\"listState() === 'bullet' ? true : false\">\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=\"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    }\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\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start}.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:.5rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-prefix,.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-suffix{margin-inline:.5rem}.ax-wysiwyg-toolbar-container ax-select-box{width:auto!important}\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: "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    @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=\"blank\" [selected]=\"boldState() ? true : false\">\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=\"blank\" [selected]=\"italicState() ? true : false\">\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=\"blank\" [selected]=\"underLineState() ? true : false\">\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=\"blank\" [selected]=\"strikeLineState() ? true : false\">\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=\"blank\" [selected]=\"listState() === 'ordered' ? true : false\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" look=\"blank\" [selected]=\"listState() === 'bullet' ? true : false\">\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=\"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    }\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"] }]
+            args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-wysiwyg-toolbar-container ax-sm\">\n  <div class=\"ax-wysiwyg-tool-container\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n\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=\"blank\" [selected]=\"boldState() ? true : false\">\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=\"blank\" [selected]=\"italicState() ? true : false\">\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=\"blank\" [selected]=\"underLineState() ? true : false\">\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=\"blank\" [selected]=\"strikeLineState() ? true : false\">\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\n        [look]=\"parent.look\"\n        (ngModelChange)=\"fontHandler($event)\"\n        [ngModel]=\"selectedFont()\"\n        [dataSource]=\"['small', 'medium', 'large', 'huge']\"\n        placeholder=\"Choose...\"\n      >\n      </ax-select-box>\n    }\n    @if (config().list) {\n      <ax-button (click)=\"orderList()\" look=\"blank\" [selected]=\"listState() === 'ordered' ? true : false\">\n        <ax-icon class=\"ax-icon ax-icon-order-list\"></ax-icon>\n      </ax-button>\n\n      <ax-button (click)=\"unOrderList()\" look=\"blank\" [selected]=\"listState() === 'bullet' ? true : false\">\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=\"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    }\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\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n</div>\n", styles: [".ax-wysiwyg-toolbar-container{padding:.5rem 1rem}.ax-wysiwyg-toolbar-container .ax-icon{font-weight:900;font-size:1rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start}.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:.5rem}.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-prefix,.ax-wysiwyg-toolbar-container .ax-wysiwyg-tool-container ax-suffix{margin-inline:.5rem}.ax-wysiwyg-toolbar-container ax-select-box{width:auto!important}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * @category Components
+ * A component for viewing WYSIWYG content.
+ */
 class AXWysiwygViewComponent {
     constructor() {
         this.classes = input('', { alias: 'class' });
@@ -254,11 +379,15 @@ class AXWysiwygViewComponent {
         return `${this.classes()}`;
     }
     editorStateHandler(e) {
+        this.wysiwygService.currentSelectedElemAlign.set(e.target.classList.value);
+        this.wysiwygService.currentSelectedElemList.set(e.target.dataset.list);
+        this.wysiwygService.currentSelectedElemClass.set(e.target.classList.value);
         this.wysiwygService.currentSelectedElemArray.set([
             e.target.nodeName,
             e.target.parentElement.nodeName,
             e.target.parentElement.parentElement.nodeName,
             e.target.parentElement.parentElement.parentElement.nodeName,
+            e.target.classList.value,
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXWysiwygViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }