@acorex/components 19.11.0-next.1 → 19.11.0-next.3

package/fesm2022/acorex-components-wysiwyg.mjs

@@ -2,7 +2,7 @@ import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorIconComponent, AXDecoratorColorIndicatorComponent, AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, NgZone, input, afterNextRender, effect, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, HostListener, NgModule } from '@angular/core';
+import { signal, Injectable, inject, NgZone, input, afterNextRender, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AXWysiwyg } from '@acorex/cdk/wysiwyg';
@@ -22,10 +22,10 @@ class AXWysiwygService {
         this.currentSelectedElemList = signal('');
         this.currentSelectedElemAlign = signal('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygService, decorators: [{
             type: Injectable
         }] });
 
@@ -127,8 +127,8 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
     ngOnDestroy() {
         this.service.wysiwyg()?.quillObj().off('text-change', this.changeHandler);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXWysiwygContainerComponent, isStandalone: true, selector: "ax-wysiwyg-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXWysiwygContainerComponent, isStandalone: true, selector: "ax-wysiwyg-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, providers: [
             AXWysiwygService,
             { provide: AXComponent, useExisting: AXWysiwygContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
@@ -141,7 +141,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-{{ 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:100%!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}\n/*! Bundled license information:\n\nquill/dist/quill.core.css:\n  (*!\n   * Quill Editor v2.0.3\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: "19.1.7", ngImport: i0, type: AXWysiwygContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-container', inputs: ['look'], outputs: ['onValueChanged'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXWysiwygService,
@@ -199,10 +199,10 @@ class AXWysiwygAlignmentComponent {
         this.alignState.set(e);
         this.service.wysiwyg().align(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygAlignmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygAlignmentComponent, isStandalone: true, selector: "ax-wysiwyg-alignment", ngImport: i0, template: "<ax-button look=\"blank\" #alignPop>\n  <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n</ax-button>\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-alignment-container\">\n    <ax-button\n      (click)=\"alignStateHandler('left')\"\n      look=\"blank\"\n      [selected]=\"alignState() === 'left' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'center' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'right' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n    </ax-button>\n  </div>\n</ax-popover>\n", styles: [".ax-alignment-container{padding:.5rem}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygAlignmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygAlignmentComponent, isStandalone: true, selector: "ax-wysiwyg-alignment", ngImport: i0, template: "<ax-button look=\"blank\" #alignPop>\n  <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n</ax-button>\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-alignment-container\">\n    <ax-button\n      (click)=\"alignStateHandler('left')\"\n      look=\"blank\"\n      [selected]=\"alignState() === 'left' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'center' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'right' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n    </ax-button>\n  </div>\n</ax-popover>\n", styles: [".ax-alignment-container{padding:.5rem}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygAlignmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygAlignmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-alignment', imports: [AXButtonComponent, AXDecoratorIconComponent, AXPopoverComponent], template: "<ax-button look=\"blank\" #alignPop>\n  <ax-icon class=\"ax-icon ax-icon-align-left\"></ax-icon>\n</ax-button>\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-alignment-container\">\n    <ax-button\n      (click)=\"alignStateHandler('left')\"\n      look=\"blank\"\n      [selected]=\"alignState() === 'left' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'center' ? true : false\"\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=\"blank\"\n      [selected]=\"alignState() === 'right' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-align-right\"></ax-icon>\n    </ax-button>\n  </div>\n</ax-popover>\n", styles: [".ax-alignment-container{padding:.5rem}\n"] }]
         }], ctorParameters: () => [] });
@@ -267,10 +267,10 @@ class AXWysiwygColorsComponent {
         this.userInteractColor.set(true);
         this.service.wysiwyg().color('rgb(151, 148, 148)');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygColorsComponent, isStandalone: true, selector: "ax-wysiwyg-colors", ngImport: i0, template: "<div class=\"ax-color-picker-wysiwyg-container\">\n  <div (click)=\"initialColorHandler()\">\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedColor()\"></ax-color-indicator>\n  </div>\n\n  <div (click)=\"initialHighlightHandler()\">\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedHighlightColor()\"></ax-color-indicator>\n  </div>\n</div>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"colorBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeColorHandler($event)\" [ngModel]=\"selectedColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"highlightBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeHighlightColorHandler($event)\" [ngModel]=\"selectedHighlightColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n", styles: [".ax-color-picker-wysiwyg-container{display:flex;align-items:center}.ax-color-picker-wysiwyg-container ax-prefix{padding:0}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorColorIndicatorComponent, selector: "ax-color-indicator", inputs: ["previewColor"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygColorsComponent, isStandalone: true, selector: "ax-wysiwyg-colors", ngImport: i0, template: "<div class=\"ax-color-picker-wysiwyg-container\">\n  <div (click)=\"initialColorHandler()\">\n    <ax-button #colorBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-color-palette\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedColor()\"></ax-color-indicator>\n  </div>\n\n  <div (click)=\"initialHighlightHandler()\">\n    <ax-button #highlightBtn look=\"blank\">\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n    <ax-color-indicator [previewColor]=\"selectedHighlightColor()\"></ax-color-indicator>\n  </div>\n</div>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"colorBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeColorHandler($event)\" [ngModel]=\"selectedColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"highlightBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-color-palette (ngModelChange)=\"changeHighlightColorHandler($event)\" [ngModel]=\"selectedHighlightColor()\">\n      <ax-color-palette-preview></ax-color-palette-preview>\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </div>\n</ax-popover>\n", styles: [".ax-color-picker-wysiwyg-container{display:flex;align-items:center}.ax-color-picker-wysiwyg-container ax-prefix{padding:0}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorColorIndicatorComponent, selector: "ax-color-indicator", inputs: ["previewColor"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygColorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygColorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-colors', encapsulation: ViewEncapsulation.None, imports: [
                         AXButtonComponent,
@@ -398,10 +398,10 @@ class AXWysiwygFontStyleComponent {
             this.selectedFont.set(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygFontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygFontStyleComponent, isStandalone: true, selector: "ax-wysiwyg-font-style", ngImport: i0, template: "<div class=\"ax-wysiwyg-font-style-container\">\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  <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  <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  <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  <ax-select-box\n    [look]=\"this.parent.look\"\n    (ngModelChange)=\"fontSizeHandler($event)\"\n    [ngModel]=\"selectedFont()\"\n    [dataSource]=\"['small', 'medium', 'large', 'huge']\"\n    placeholder=\"Choose...\"\n  >\n  </ax-select-box>\n</div>\n", styles: [".ax-wysiwyg-font-style-container{display:flex;justify-content:flex-start;align-items:center}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygFontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygFontStyleComponent, isStandalone: true, selector: "ax-wysiwyg-font-style", ngImport: i0, template: "<div class=\"ax-wysiwyg-font-style-container\">\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  <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  <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  <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  <ax-select-box\n    [look]=\"this.parent.look\"\n    (ngModelChange)=\"fontSizeHandler($event)\"\n    [ngModel]=\"selectedFont()\"\n    [dataSource]=\"['small', 'medium', 'large', 'huge']\"\n    placeholder=\"Choose...\"\n  >\n  </ax-select-box>\n</div>\n", styles: [".ax-wysiwyg-font-style-container{display:flex;justify-content:flex-start;align-items:center}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygFontStyleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygFontStyleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-font-style', imports: [AXButtonComponent, AXDecoratorIconComponent, AXSelectBoxComponent, FormsModule], template: "<div class=\"ax-wysiwyg-font-style-container\">\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  <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  <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  <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  <ax-select-box\n    [look]=\"this.parent.look\"\n    (ngModelChange)=\"fontSizeHandler($event)\"\n    [ngModel]=\"selectedFont()\"\n    [dataSource]=\"['small', 'medium', 'large', 'huge']\"\n    placeholder=\"Choose...\"\n  >\n  </ax-select-box>\n</div>\n", styles: [".ax-wysiwyg-font-style-container{display:flex;justify-content:flex-start;align-items:center}\n"] }]
         }], ctorParameters: () => [] });
@@ -423,10 +423,10 @@ class AXWysiwygHistoryComponent {
     redo() {
         this.service.wysiwyg().redo();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygHistoryComponent, isStandalone: true, selector: "ax-wysiwyg-history", ngImport: i0, template: "<ax-button (click)=\"undo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"redo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", styles: ["ax-wysiwyg-history{display:flex}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygHistoryComponent, isStandalone: true, selector: "ax-wysiwyg-history", ngImport: i0, template: "<ax-button (click)=\"undo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"redo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", styles: ["ax-wysiwyg-history{display:flex}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorIconComponent], template: "<ax-button (click)=\"undo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button (click)=\"redo()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", styles: ["ax-wysiwyg-history{display:flex}\n"] }]
         }] });
@@ -458,10 +458,10 @@ class AXWysiwygInsertComponent {
     submitLink() {
         this.service.wysiwyg().addImage(this.textBoxOptions.text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygInsertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygInsertComponent, isStandalone: true, selector: "ax-wysiwyg-insert", ngImport: i0, template: "<ax-button #linkBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"linkBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-insert-container\">\n    <ax-text-box\n      class=\"{{ textBoxOptions.size }}\"\n      [(ngModel)]=\"textBoxOptions.text\"\n      [placeholder]=\"textBoxOptions.placeholder\"\n    >\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-text-box>\n  </div>\n</ax-popover>\n", styles: [".ax-insert-container{display:flex;padding:.5rem}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygInsertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygInsertComponent, isStandalone: true, selector: "ax-wysiwyg-insert", ngImport: i0, template: "<ax-button #linkBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"linkBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-insert-container\">\n    <ax-text-box\n      class=\"{{ textBoxOptions.size }}\"\n      [(ngModel)]=\"textBoxOptions.text\"\n      [placeholder]=\"textBoxOptions.placeholder\"\n    >\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-text-box>\n  </div>\n</ax-popover>\n", styles: [".ax-insert-container{display:flex;padding:.5rem}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygInsertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygInsertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-insert', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorIconComponent, AXPopoverComponent, AXTextBoxComponent, FormsModule, AXDecoratorGenericComponent], template: "<ax-button #linkBtn look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-image\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [adaptivityEnabled]=\"true\"\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"linkBtn\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane ax-insert-container\">\n    <ax-text-box\n      class=\"{{ textBoxOptions.size }}\"\n      [(ngModel)]=\"textBoxOptions.text\"\n      [placeholder]=\"textBoxOptions.placeholder\"\n    >\n      <ax-suffix>\n        <ax-button (click)=\"submitLink()\" color=\"secondary\" text=\"Add\"> </ax-button>\n      </ax-suffix>\n    </ax-text-box>\n  </div>\n</ax-popover>\n", styles: [".ax-insert-container{display:flex;padding:.5rem}\n"] }]
         }] });
@@ -517,10 +517,10 @@ class AXWysiwygListComponent {
             this.listState.set('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXWysiwygListComponent, isStandalone: true, selector: "ax-wysiwyg-list", ngImport: i0, template: "<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", styles: ["ax-wysiwyg-list{display:flex}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXWysiwygListComponent, isStandalone: true, selector: "ax-wysiwyg-list", ngImport: i0, template: "<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", styles: ["ax-wysiwyg-list{display:flex}\n"], dependencies: [{ kind: "component", type: 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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-list', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorIconComponent], template: "<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", styles: ["ax-wysiwyg-list{display:flex}\n"] }]
         }], ctorParameters: () => [] });
@@ -554,10 +554,10 @@ class AXWysiwygViewComponent {
             e.target.classList.value,
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXWysiwygViewComponent, isStandalone: true, selector: "ax-wysiwyg-view", inputs: { classes: { classPropertyName: "classes", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.Backspace": "onKeydownHandler($event)", "click": "editorStateHandler($event)" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "\n", styles: ["ax-wysiwyg-view{display:flex;flex-direction:column;width:100%;border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface))}.ql-container{flex-grow:1;height:0;font-family:inherit}.ql-editor.ql-blank:before{color:rgba(var(--ax-sys-color-on-lightest-surface));font-weight:600;font-style:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXWysiwygViewComponent, isStandalone: true, selector: "ax-wysiwyg-view", inputs: { classes: { classPropertyName: "classes", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.Backspace": "onKeydownHandler($event)", "click": "editorStateHandler($event)" }, properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "\n", styles: ["ax-wysiwyg-view{display:flex;flex-direction:column;width:100%;border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface))}.ql-container{flex-grow:1;height:0;font-family:inherit}.ql-editor.ql-blank:before{color:rgba(var(--ax-sys-color-on-lightest-surface));font-weight:600;font-style:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-wysiwyg-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n", styles: ["ax-wysiwyg-view{display:flex;flex-direction:column;width:100%;border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface))}.ql-container{flex-grow:1;height:0;font-family:inherit}.ql-editor.ql-blank:before{color:rgba(var(--ax-sys-color-on-lightest-surface));font-weight:600;font-style:normal}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -583,8 +583,8 @@ const COMPONENT = [
 ];
 const MODULES = [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule];
 class AXWysiwygModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygModule, imports: [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule, AXWysiwygContainerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygModule, imports: [AXButtonModule, AXDecoratorModule, AXSelectBoxModule, FormsModule, AXColorPaletteModule, AXPopoverModule, AXTextBoxModule, AXWysiwygContainerComponent,
             AXWysiwygViewComponent,
             AXWysiwygAlignmentComponent,
             AXWysiwygColorsComponent,
@@ -599,14 +599,14 @@ class AXWysiwygModule {
             AXWysiwygHistoryComponent,
             AXWysiwygInsertComponent,
             AXWysiwygListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygModule, imports: [MODULES, AXWysiwygAlignmentComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygModule, imports: [MODULES, AXWysiwygAlignmentComponent,
             AXWysiwygColorsComponent,
             AXWysiwygFontStyleComponent,
             AXWysiwygHistoryComponent,
             AXWysiwygInsertComponent,
             AXWysiwygListComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXWysiwygModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXWysiwygModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/grid-layout-builder/index.d.ts

@@ -1,5 +1,4 @@
 export * from './lib/grid-layout-builder.module';
 export * from './lib/grid-layout-container.component';
 export * from './lib/grid-layout-widget.component';
-export * from './lib/grid-layout-widget.directive';
 export * from './lib/types';

package/grid-layout-builder/lib/grid-layout-builder.module.d.ts

@@ -2,9 +2,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./grid-layout-container.component";
 import * as i3 from "./grid-layout-widget.component";
-import * as i4 from "./grid-layout-widget.directive";
 export declare class AXGridLayoutBuilderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXGridLayoutBuilderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXGridLayoutBuilderModule, never, [typeof i1.CommonModule, typeof i2.AXGridLayoutContainerComponent, typeof i3.AXGridLayoutWidgetComponent, typeof i4.AXGridLayoutWidgetDirective], [typeof i2.AXGridLayoutContainerComponent, typeof i3.AXGridLayoutWidgetComponent, typeof i4.AXGridLayoutWidgetDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXGridLayoutBuilderModule, never, [typeof i1.CommonModule, typeof i2.AXGridLayoutContainerComponent, typeof i3.AXGridLayoutWidgetComponent], [typeof i2.AXGridLayoutContainerComponent, typeof i3.AXGridLayoutWidgetComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXGridLayoutBuilderModule>;
 }

package/grid-layout-builder/lib/grid-layout-container.component.d.ts

@@ -1,265 +1,67 @@
-import { OnDestroy, OnInit } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { AXGridLayout, AXGridLayoutDroppedEvent, AXGridLayoutElementEvent, AXGridLayoutEventEvent, AXGridLayoutNode, AXGridLayoutNodesEvent, AXGridLayoutOptions, AXGridLayoutWidget, AXGridLayoutWidgetCompElement, AXGridLayoutWidgetElement, AXSaveCallback } from './types';
+import { NXComponent } from '@acorex/components/common';
+import { OnDestroy, QueryList } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';
+import { AXGridLayout, AXGridLayoutChangedEvent, AXGridLayoutDroppedEvent, AXGridLayoutElementEvent, AXGridLayoutEventEvent, AXGridLayoutNode, AXGridLayoutNodesEvent, AXGridLayoutOptions, AXGridLayoutWidget, AXGridLayoutWidgetElement, AXSaveCallback } from './types';
 import * as i0 from "@angular/core";
-/**
- * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.
- * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js
- * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.
- *
- * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.
- */
-export declare class AXGridLayoutContainerComponent implements OnInit, OnDestroy {
-    private serializedData?;
-    /**
-     * Content children elements of type `AXGridLayoutWidgetComponent` that are dynamically managed within the grid.
-     */
-    private compItems;
-    private dirItems;
-    /**
-     * Input that holds options for configuring the GridStack grid layout.
-     */
+export declare class AXGridLayoutContainerComponent extends NXComponent implements OnDestroy {
+    #private;
     options: import("@angular/core").InputSignal<import("gridstack").GridStackOptions>;
-    /**
-     * A computed signal that merges the provided `options` with the grid's existing configuration (if any).
-     */
-    private calcOptions;
-    /**
-     * A reference to the native element of the container component.
-     */
-    private readonly elementRef;
-    /**
-     * Angular's NgZone for running code outside Angular's change detection.
-     */
-    private ngZone;
-    /**
-     * A writable signal representing the current state of the grid.
-     */
-    private grid;
-    /**
-     * Flag indicating whether the grid has been loaded with content.
-     */
-    private loaded?;
-    /**
-     * A reference to the native element representing the grid container.
-     */
-    private el;
-    /**
-     * Output event emitted when a widget is added to the grid.
-     */
     protected onAdded: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when a widget or layout is changed.
-     */
-    protected onChange: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when the grid is disabled.
-     */
-    protected onDisable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
-    /**
-     * Output event emitted during a drag operation on a widget.
-     */
-    protected onDrag: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when drag starts on a widget.
-     */
-    protected onDragStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when drag stops on a widget.
-     */
-    protected onDragStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when a widget is dropped on the grid.
-     */
-    protected onDropped: import("@angular/core").OutputEmitterRef<AXGridLayoutDroppedEvent>;
-    /**
-     * Output event emitted when the grid is enabled.
-     */
-    protected onEnable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
-    /**
-     * Output event emitted when a widget is removed from the grid.
-     */
     protected onRemoved: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when a widget is resized.
-     */
-    protected onResize: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when resizing starts on a widget.
-     */
-    protected onResizeStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when resizing stops on a widget.
-     */
-    protected onResizeStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when the grid is rendered.
-     */
-    protected isRendered: import("@angular/core").OutputEmitterRef<boolean>;
-    /**
-     * Model that tracks whether the grid container is empty.
-     */
+    protected onWidgetChange: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
+    protected onChange: import("@angular/core").OutputEmitterRef<AXGridLayoutChangedEvent>;
+    protected _onEnable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
+    protected _onDisable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
+    protected _onWidgetDrag: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDragStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDragStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDropped: import("@angular/core").OutputEmitterRef<AXGridLayoutDroppedEvent>;
+    protected _onWidgetResized: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetResizeStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetResizeStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected isLayoutRendered: import("@angular/core").OutputEmitterRef<boolean>;
     protected isEmpty: import("@angular/core").ModelSignal<boolean>;
-    /**
-     * Initializes the grid layout component and sets up the GridStack grid.
-     */
-    constructor();
-    /**
-     * Angular lifecycle hook that initializes the grid once the component is created.
-     * It sets up GridStack and loads any initial layout configuration.
-     */
-    ngOnInit(): Promise<void>;
-    /**
-     * Angular lifecycle hook that cleans up resources when the component is destroyed.
-     * It removes event listeners and destroys the GridStack instance.
-     */
+    private readonly elementRef;
+    private readonly ngZone;
+    private readonly domSanitizer;
+    private widgets;
+    gridstackItems?: QueryList<AXGridLayoutWidgetComponent>;
+    private el;
+    private serializedData?;
+    private grid?;
+    protected _sub: Subscription | undefined;
     ngOnDestroy(): void;
-    /**
-     * Effect that reacts to changes in the grid layout and updates the DOM accordingly.
-     */
-    private gridChange;
-    /**
-     * Effect that reacts to changes in child widgets and updates the grid layout.
-     */
-    private childChange;
-    /**
-     * Updates the grid layout with the current set of widgets, clearing previous options.
-     */
     private updateAll;
-    /**
-     * Checks whether the grid is empty and updates the `isEmpty` model accordingly.
-     */
     private checkEmpty;
-    /**
-     * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).
-     */
     private hookEvents;
-    /**
-     * Removes all event listeners from the grid.
-     */
     private unhookEvents;
-    /**
-     * Creates a new widget and returns it.
-     * @param w - Widget position/size options.
-     * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.
-     */
     addWidget(w: AXGridLayoutWidget, withAutoArrange?: boolean): AXGridLayoutWidgetElement | undefined;
-    /**
-     * Re-layout grid items to reclaim any empty space.
-     * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.
-     * @param doSort - Whether to sort items automatically. Default is `true`.
-     */
     compact(layout?: 'list' | 'compact', doSort?: boolean): void;
-    /**
-     * Updates the current cell height.
-     * @param val - The new cell height value.
-     * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.
-     */
     setCellHeight(val: number, update?: boolean): void;
-    /**
-     * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.
-     * @param column - Number of columns (must be > 0). Default is 12.
-     * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.
-     *                Default is 'moveScale'.
-     */
     setColumn(column: number, layout?: 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none'): void;
-    /**
-     * Destroys the grid instance.
-     * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.
-     */
     destroy(removeDOM?: boolean): void;
-    /**
-     * Sets whether widgets in the grid can be moved (dragged).
-     *
-     * @param state If true, widgets are movable; otherwise, they are locked.
-     * @param recurse If true, the setting is applied to nested widgets as well.
-     */
     setMovable(state: boolean, recurse?: boolean): void;
-    /**
-     * Sets whether widgets in the grid can be resized.
-     *
-     * @param state If true, widgets are resizable; otherwise, they are fixed.
-     * @param recurse If true, the setting is applied to nested widgets as well.
-     */
     setResizable(state: boolean, recurse?: boolean): void;
-    /**
-     * Sets or gets the floating behavior of widgets.
-     * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.
-     * @returns The current floating behavior if `val` is not provided.
-     */
     setFloat(val: boolean): void;
-    /**
-     * Sets the margin (gap) between grid items and their content.
-     * @param value - The margin value (number or string).
-     */
     setMargin(value: number | string): void;
-    /**
-     * Removes a widget from the grid.
-     * @param el - The widget to remove.
-     * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.
-     * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.
-     */
     removeWidget(el: AXGridLayoutWidgetElement, removeDOM?: boolean, triggerEvent?: boolean): void;
-    /**
-     * Removes all widgets from the grid.
-     * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.
-     */
     removeAll(removeDOM?: boolean): void;
-    /**
-     * Rotates a widget by swapping its width and height.
-     * @param els - The widget or selector of widgets to rotate.
-     * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).
-     */
-    setRotate(element: AXGridLayoutWidgetCompElement): void;
-    /**
-     * Toggles the grid animation state.
-     * @param doAnimate - If `true`, the grid will animate.
-     */
     setAnimation(doAnimate: boolean): void;
-    domSanitizer: DomSanitizer;
-    /**
-     * Saves the current grid layout configuration.
-     *
-     * @param saveContent Whether to save the content of the grid items.
-     * @param saveGridOpt Whether to save the grid options.
-     * @param saveCallback Optional callback for custom save logic.
-     * @returns The serialized grid layout options.
-     */
     save(saveContent?: boolean, saveGridOpt?: boolean, saveCallback?: AXSaveCallback): AXGridLayoutOptions;
-    /**
-     * Loads a serialized grid layout configuration into the grid.
-     *
-     * @param serializedData The serialized grid options to load.
-     * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.
-     * @returns A promise that resolves to the loaded grid instance.
-     */
     load(serializedData?: AXGridLayoutOptions, cleanBeforeLoad?: boolean): Promise<AXGridLayout>;
-    /**
-     * Sets up draggable functionality for external elements to be added to the grid.
-     *
-     * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.
-     * @param widgets An optional set of widgets that are draggable into the grid.
-     */
     setupDraggable(dragIn?: string | HTMLElement[], widgets?: AXGridLayoutWidget): Promise<void>;
-    /**
-     * Sets grid layout options.
-     * @param options The new grid layout options to apply.
-     *
-     * `Experimental`
-     */
     setOption(options: AXGridLayoutOptions): void;
-    /**
-     * Retrieves the current grid layout options.
-     *
-     * @returns The current grid options.
-     */
     getOptions(): AXGridLayoutOptions;
-    /**
-     * Retrieves all the child nodes (widgets) in the grid layout.
-     *
-     * @returns An array of grid layout nodes representing the widgets.
-     */
     getChildren(): AXGridLayoutNode[];
+    findEmptySpace(input: {
+        h: number;
+        w: number;
+    }): {
+        x?: number;
+        y?: number;
+    };
+    private _dispatchChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXGridLayoutContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXGridLayoutContainerComponent, "ax-grid-layout-container", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "isEmpty": { "alias": "isEmpty"; "required": false; "isSignal": true; }; }, { "onAdded": "onAdded"; "onChange": "onChange"; "onDisable": "onDisable"; "onDrag": "onDrag"; "onDragStart": "onDragStart"; "onDragStop": "onDragStop"; "onDropped": "onDropped"; "onEnable": "onEnable"; "onRemoved": "onRemoved"; "onResize": "onResize"; "onResizeStart": "onResizeStart"; "onResizeStop": "onResizeStop"; "isRendered": "isRendered"; "isEmpty": "isEmptyChange"; }, ["compItems", "dirItems"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXGridLayoutContainerComponent, "ax-grid-layout-container", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "isEmpty": { "alias": "isEmpty"; "required": false; "isSignal": true; }; }, { "onAdded": "onAdded"; "onRemoved": "onRemoved"; "onWidgetChange": "onWidgetChange"; "onChange": "onChange"; "_onEnable": "_onEnable"; "_onDisable": "_onDisable"; "_onWidgetDrag": "_onWidgetDrag"; "_onWidgetDragStart": "_onWidgetDragStart"; "_onWidgetDragStop": "_onWidgetDragStop"; "_onWidgetDropped": "_onWidgetDropped"; "_onWidgetResized": "_onWidgetResized"; "_onWidgetResizeStart": "_onWidgetResizeStart"; "_onWidgetResizeStop": "_onWidgetResizeStop"; "isLayoutRendered": "isLayoutRendered"; "isEmpty": "isEmptyChange"; }, ["widgets", "gridstackItems"], ["*"], true, never>;
 }