@acorex/layout 6.5.71 → 6.5.73

package/{fesm2020 → fesm2022}/acorex-layout.mjs

@@ -1,11 +1,11 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Input, Output, HostBinding, ViewChildren, NgModule } from '@angular/core';
-import * as i1 from '@acorex/components';
+import * as i2 from '@acorex/components';
 import { propertyEditor, AXBasePopupPageComponent, AXValidationFormComponent, AXPropertyDecorators, AXProperyEditorComponent, AXSearchBoxModule, AXLoadingModule, AXProppertyEditorModule, AXPageModule, AXToolbarModule, AXLabelModule, AXTextAreaModule, AXFieldsetModule, AXTextBoxModule, AXFormGroupModule, AXTabStripModule, AXCheckBoxModule, AXMenuModule, AXValidationModule, AXNumberBoxModule } from '@acorex/components';
 import * as i1$1 from '@acorex/core';
 import { AXHtmlUtil, AXTranslator, AXObjectUtil, AXClientRec, AXTranslatorModule } from '@acorex/core';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -16,24 +16,10 @@ import { FormsModule } from '@angular/forms';
 // @dynamic
 // TODO: Add Angular decorator.
 class AXWidgetComponent {
-    constructor() {
-        this.uid = AXHtmlUtil.getUID();
-        this.onBusyChanged = new EventEmitter();
-        this._isBusy = true;
-        this.refreshRate = [{
-                id: 60000 * 5,
-                text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', '5')
-            }];
-        this.onConfiguredChanged = new EventEmitter();
-        this.onConfiguredChanged.subscribe(() => {
-            if (this.isConfigured === true && this.getRefreshRate()) {
-                this.restartRefreshTimer();
-            }
-            else {
-                this.stopRefreshTimer();
-            }
-        });
-    }
+    uid = AXHtmlUtil.getUID();
+    provideValue;
+    onBusyChanged = new EventEmitter();
+    _isBusy = true;
     get isBusy() {
         return this._isBusy;
     }
@@ -48,10 +34,26 @@ class AXWidgetComponent {
             this.onBusyChanged.emit(eventData);
         }
     }
+    widgetSize;
+    refreshRate = [{
+            id: 60000 * 5,
+            text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', '5')
+        }];
     // ???
     getRefreshRate() {
         return Array.isArray(this.refreshRate) && this.refreshRate.length ? this.refreshRate[0].id : this.refreshRate;
     }
+    intervalId;
+    constructor() {
+        this.onConfiguredChanged.subscribe(() => {
+            if (this.isConfigured === true && this.getRefreshRate()) {
+                this.restartRefreshTimer();
+            }
+            else {
+                this.stopRefreshTimer();
+            }
+        });
+    }
     startRefreshTimer() {
         this.intervalId = window.setInterval(this.refresh.bind(this), this.getRefreshRate());
     }
@@ -70,6 +72,7 @@ class AXWidgetComponent {
     refresh() {
         this.restartRefreshTimer();
     }
+    onConfiguredChanged = new EventEmitter();
     get isConfigured() {
         return true;
     }
@@ -97,9 +100,9 @@ class AXWidgetComponent {
         }
         return Promise.resolve(val);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetComponent });
 }
-AXWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AXWidgetComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetComponent });
 __decorate([
     propertyEditor({
         editorClass: 'ax/editors/widget-size',
@@ -131,19 +134,22 @@ __decorate([
     }),
     __metadata("design:type", Object)
 ], AXWidgetComponent.prototype, "refreshRate", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; }, propDecorators: { widgetSize: [], refreshRate: [] } });
 
 class AXWidgetConfigComponent extends AXBasePopupPageComponent {
+    cdr;
+    form;
     constructor(cdr) {
         super();
         this.cdr = cdr;
-        this.props = [];
-        this.displayProps = [];
-        this.changes = [];
-        this.context = {};
     }
+    widget;
+    props = [];
+    displayProps = [];
+    changes = [];
+    context = {};
     getFooterButtons() {
         return [
             {
@@ -199,10 +205,10 @@ class AXWidgetConfigComponent extends AXBasePopupPageComponent {
     identify(index, item) {
         return item.property.name;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetConfigComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXWidgetConfigComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <ax-validation-form #form>\n                <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\n                    <div class=\"col-12\">\n                        <ax-label>{{p.property.title | trans}}</ax-label>\n                        <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\"  [validationForm]=\"form\"\n                            (onValueChange)=\"handleValueChange($event)\">\n                        </ng-container>\n                    </div>\n                </div>\n            </ax-validation-form>\n        </div>\n    </ax-page-content>\n</ax-page>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i2.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i2.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i2.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-AXWidgetConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetConfigComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXWidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetConfigComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <ax-validation-form #form>\n                <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\n                    <div class=\"col-12\">\n                        <ax-label>{{p.property.title | trans}}</ax-label>\n                        <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\"  [validationForm]=\"form\"\n                            (onValueChange)=\"handleValueChange($event)\">\n                        </ng-container>\n                    </div>\n                </div>\n            </ax-validation-form>\n        </div>\n    </ax-page-content>\n</ax-page>", components: [{ type: i1.AXPageComponent, selector: "ax-page" }, { type: i1.AXPageContentComponent, selector: "ax-page-content" }, { type: i1.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <ax-validation-form #form>\n                <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\n                    <div class=\"col-12\">\n                        <ax-label>{{p.property.title | trans}}</ax-label>\n                        <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\"  [validationForm]=\"form\"\n                            (onValueChange)=\"handleValueChange($event)\">\n                        </ng-container>\n                    </div>\n                </div>\n            </ax-validation-form>\n        </div>\n    </ax-page-content>\n</ax-page>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
@@ -211,10 +217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class AXWidgetSaveComponent extends AXBasePopupPageComponent {
-    constructor() {
-        super(...arguments);
-        this.props = [];
-    }
+    config;
+    props = [];
+    displayProps;
+    data;
     getFooterButtons() {
         return [
             {
@@ -274,47 +280,51 @@ class AXWidgetSaveComponent extends AXBasePopupPageComponent {
             this.close(this.data);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSaveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXWidgetSaveComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.title' | trans}}</ax-label>\n                        <ax-text-box [(value)]=\"data.title\"></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.description' | trans}}</ax-label>\n                        <ax-text-area [(value)]=\"data.description\"></ax-text-area>\n                    </ax-form-group>\n                </div>\n            </div>\n            <!-- <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.uniquename' | trans}}</ax-label>\n                        <ax-text-box></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div> -->\n            <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\n                <div class=\"col-12\">\n                    <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\n                        <div class=\"row\" *ngFor=\"let prop of displayProps\">\n                            <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\n                                <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\n\n                                </ax-check-box>\n                            </div>\n                        </div>\n                    </ax-fieldset>\n                </div>\n            </div>\n        </div>\n    </ax-page-content>\n</ax-page>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i2.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i2.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { kind: "component", type: i2.AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "component", type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i2.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: i2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-AXWidgetSaveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSaveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AXWidgetSaveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetSaveComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.title' | trans}}</ax-label>\n                        <ax-text-box [(value)]=\"data.title\"></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.description' | trans}}</ax-label>\n                        <ax-text-area [(value)]=\"data.description\"></ax-text-area>\n                    </ax-form-group>\n                </div>\n            </div>\n            <!-- <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.uniquename' | trans}}</ax-label>\n                        <ax-text-box></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div> -->\n            <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\n                <div class=\"col-12\">\n                    <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\n                        <div class=\"row\" *ngFor=\"let prop of displayProps\">\n                            <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\n                                <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\n\n                                </ax-check-box>\n                            </div>\n                        </div>\n                    </ax-fieldset>\n                </div>\n            </div>\n        </div>\n    </ax-page-content>\n</ax-page>", components: [{ type: i1.AXPageComponent, selector: "ax-page" }, { type: i1.AXPageContentComponent, selector: "ax-page-content" }, { type: i1.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: i1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: i1.AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSaveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSaveComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-page>\n    <ax-page-content>\n        <div class=\"container\">\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.title' | trans}}</ax-label>\n                        <ax-text-box [(value)]=\"data.title\"></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.description' | trans}}</ax-label>\n                        <ax-text-area [(value)]=\"data.description\"></ax-text-area>\n                    </ax-form-group>\n                </div>\n            </div>\n            <!-- <div class=\"row\">\n                <div class=\"col-12\">\n                    <ax-form-group>\n                        <ax-label>{{'common.uniquename' | trans}}</ax-label>\n                        <ax-text-box></ax-text-box>\n                    </ax-form-group>\n                </div>\n            </div> -->\n            <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\n                <div class=\"col-12\">\n                    <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\n                        <div class=\"row\" *ngFor=\"let prop of displayProps\">\n                            <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\n                                <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\n\n                                </ax-check-box>\n                            </div>\n                        </div>\n                    </ax-fieldset>\n                </div>\n            </div>\n        </div>\n    </ax-page-content>\n</ax-page>" }]
         }] });
 
 class AXWidgetHostComponent {
-    constructor(ref, componentFactoryResolver, rendererService, cdr, popup, loadingService) {
-        this.ref = ref;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.rendererService = rendererService;
-        this.cdr = cdr;
-        this.popup = popup;
-        this.loadingService = loadingService;
-        this._hasProps = false;
-        this._hasMenu = false;
-        this.configMenuItem = [
-            {
-                icon: 'far fa-ellipsis-h',
-                items: []
-            }
-        ];
-        this.onRemove = new EventEmitter();
-        this.onConfigChanged = new EventEmitter();
-        this.onResized = new EventEmitter();
-        this.onSave = new EventEmitter();
-        this.readonly = false;
-        this._isLoading = false;
-        this.sizeX = 1;
-        this.sizeY = 1;
-        this.col = 1;
-        this.row = 1;
-    }
+    ref;
+    componentFactoryResolver;
+    rendererService;
+    cdr;
+    popup;
+    loadingService;
+    _widget;
     get widget() {
         return this._widget;
     }
+    _hasProps = false;
+    _hasMenu = false;
+    provideValue;
     get element() {
         return this.ref.nativeElement;
     }
+    configMenuItem = [
+        {
+            icon: 'far fa-ellipsis-h',
+            items: []
+        }
+    ];
+    onRemove = new EventEmitter();
+    onConfigChanged = new EventEmitter();
+    onResized = new EventEmitter();
+    onSave = new EventEmitter();
+    config;
+    vc;
+    readonly = false;
+    componentRef;
+    //private isLoading: boolean = true;
+    // get isBusy() {
+    //     return this._widget?.isBusy || this.isLoading;
+    // }
+    _loadingId;
+    _isLoading = false;
     get isLoading() {
         return this._isLoading;
     }
@@ -331,6 +341,14 @@ class AXWidgetHostComponent {
     get isConfigured() {
         return this._widget?.isConfigured || false;
     }
+    constructor(ref, componentFactoryResolver, rendererService, cdr, popup, loadingService) {
+        this.ref = ref;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.rendererService = rendererService;
+        this.cdr = cdr;
+        this.popup = popup;
+        this.loadingService = loadingService;
+    }
     ngOnInit() {
         this.isLoading = true;
     }
@@ -420,6 +438,10 @@ class AXWidgetHostComponent {
         this._hasMenu = this.configMenuItem[0].items.length > 0;
         this.cdr.detectChanges();
     }
+    sizeX = 1;
+    sizeY = 1;
+    col = 1;
+    row = 1;
     setSizeFromOptions() {
         this._widget.getValue('widgetSize').then(c => {
             const oldSizeX = this.sizeX;
@@ -522,13 +544,13 @@ class AXWidgetHostComponent {
             config: this.config
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetHostComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.AXRenderService }, { token: i0.ChangeDetectorRef }, { token: i2.AXPopupService }, { token: i2.AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: { provideValue: "provideValue", config: "config", readonly: "readonly", sizeX: "sizeX", sizeY: "sizeY", col: "col", row: "row" }, outputs: { onRemove: "onRemove", onConfigChanged: "onConfigChanged", onResized: "onResized", onSave: "onSave" }, host: { attributes: { "tabindex": "0" }, properties: { "attr.data-size-x": "this.sizeX", "attr.data-size-y": "this.sizeY", "attr.data-col": "this.col", "attr.data-row": "this.row" }, classAttribute: "ax widget-host" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class='widget-container'>\n    <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\n        <div class=\"widget-title\">{{config.title}}</div>\n        <div class=\"widget-config-box\">\n            <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\n            <div class=\"config-icon\" *ngIf=\"!readonly\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\n        </div>\n    </div>\n    <div class='widget-edit-overlay' >\n        <div class='widget-edit-menu'>\n            <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\n                (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\n            </button>\n            <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-times\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n\n    </div>\n    <div class=\"widget-options-menu\"  *ngIf=\"_hasMenu && !readonly\">\n        <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\n    </div>\n    <!-- <ax-loading-panel [visible]=\"isBusy\">\n    </ax-loading-panel> -->\n    <div class=\"widget-content\">\n        <ng-container #vc></ng-container>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-AXWidgetHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.AXRenderService }, { token: i0.ChangeDetectorRef }, { token: i1.AXPopupService }, { token: i1.AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-AXWidgetHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: { provideValue: "provideValue", config: "config", readonly: "readonly", sizeX: "sizeX", sizeY: "sizeY", col: "col", row: "row" }, outputs: { onRemove: "onRemove", onConfigChanged: "onConfigChanged", onResized: "onResized", onSave: "onSave" }, host: { attributes: { "tabindex": "0" }, properties: { "attr.data-size-x": "this.sizeX", "attr.data-size-y": "this.sizeY", "attr.data-col": "this.col", "attr.data-row": "this.row" }, classAttribute: "ax widget-host" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class='widget-container'>\n    <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\n        <div class=\"widget-title\">{{config.title}}</div>\n        <div class=\"widget-config-box\">\n            <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\n            <div class=\"config-icon\" *ngIf=\"!readonly\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\n        </div>\n    </div>\n    <div class='widget-edit-overlay' >\n        <div class='widget-edit-menu'>\n            <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\n                (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\n            </button>\n            <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-times\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n\n    </div>\n    <div class=\"widget-options-menu\"  *ngIf=\"_hasMenu && !readonly\">\n        <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\n    </div>\n    <!-- <ax-loading-panel [visible]=\"isBusy\">\n    </ax-loading-panel> -->\n    <div class=\"widget-content\">\n        <ng-container #vc></ng-container>\n    </div>\n</div>", components: [{ type: i1.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-widget-host', host: { class: 'ax widget-host', tabindex: '0' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='widget-container'>\n    <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\n        <div class=\"widget-title\">{{config.title}}</div>\n        <div class=\"widget-config-box\">\n            <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\n            <div class=\"config-icon\" *ngIf=\"!readonly\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\n        </div>\n    </div>\n    <div class='widget-edit-overlay' >\n        <div class='widget-edit-menu'>\n            <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\n                (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\n            </button>\n            <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\">\n                <i class=\"far fa-times\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n\n    </div>\n    <div class=\"widget-options-menu\"  *ngIf=\"_hasMenu && !readonly\">\n        <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\n    </div>\n    <!-- <ax-loading-panel [visible]=\"isBusy\">\n    </ax-loading-panel> -->\n    <div class=\"widget-content\">\n        <ng-container #vc></ng-container>\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i1.AXPopupService }, { type: i1.AXLoadingService }]; }, propDecorators: { provideValue: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i2.AXPopupService }, { type: i2.AXLoadingService }]; }, propDecorators: { provideValue: [{
                 type: Input
             }], onRemove: [{
                 type: Output
@@ -568,30 +590,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class AXWidgetBoardComponent {
+    ref;
+    zone;
+    cdr;
+    container;
+    widgetHosts;
+    widgets = [];
+    galleryItems = [];
+    tileSize = 80;
+    gapSize = 5;
+    readonly = false;
+    newWidget = null;
+    rtl;
+    _isInEditing = false;
+    isInEditing() {
+        return this._isInEditing;
+    }
+    isDragging = false;
+    dragItem;
+    saveSubject = new Subject();
+    provideValue;
+    DATA_COL = 'data-col';
+    DATA_ROW = 'data-row';
+    DATA_SIZE_X = 'data-size-x';
+    DATA_SIZE_Y = 'data-size-y';
+    DATA_OLD_COL = 'data-old-col';
+    DATA_OLD_ROW = 'data-old-row';
+    onConfigChanged = new EventEmitter();
+    onWidgetSave = new EventEmitter();
     constructor(ref, zone, cdr) {
         this.ref = ref;
         this.zone = zone;
         this.cdr = cdr;
-        this.widgets = [];
-        this.galleryItems = [];
-        this.tileSize = 80;
-        this.gapSize = 5;
-        this.readonly = false;
-        this.newWidget = null;
-        this._isInEditing = false;
-        this.isDragging = false;
-        this.saveSubject = new Subject();
-        this.DATA_COL = 'data-col';
-        this.DATA_ROW = 'data-row';
-        this.DATA_SIZE_X = 'data-size-x';
-        this.DATA_SIZE_Y = 'data-size-y';
-        this.DATA_OLD_COL = 'data-old-col';
-        this.DATA_OLD_ROW = 'data-old-row';
-        this.onConfigChanged = new EventEmitter();
-        this.onWidgetSave = new EventEmitter();
-    }
-    isInEditing() {
-        return this._isInEditing;
     }
     ngOnInit() {
         if (this.rtl == null) {
@@ -975,12 +1005,12 @@ class AXWidgetBoardComponent {
             mode: mode
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXWidgetBoardComponent, selector: "ax-widget-board", inputs: { galleryItems: "galleryItems", tileSize: "tileSize", gapSize: "gapSize", readonly: "readonly", provideValue: "provideValue" }, outputs: { onConfigChanged: "onConfigChanged", onWidgetSave: "onWidgetSave" }, host: { classAttribute: "ax widget-board" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "widgetHosts", predicate: AXWidgetHostComponent, descendants: true }], ngImport: i0, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\n        [provideValue]=\"provideValue\">\n    </ax-widget-host>\n</div>\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada;z-index:0}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:rgb(255,255,255);width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: ["provideValue", "config", "readonly", "sizeX", "sizeY", "col", "row"], outputs: ["onRemove", "onConfigChanged", "onResized", "onSave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-AXWidgetBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXWidgetBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetBoardComponent, selector: "ax-widget-board", inputs: { galleryItems: "galleryItems", tileSize: "tileSize", gapSize: "gapSize", readonly: "readonly", provideValue: "provideValue" }, outputs: { onConfigChanged: "onConfigChanged", onWidgetSave: "onWidgetSave" }, host: { classAttribute: "ax widget-board" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "widgetHosts", predicate: AXWidgetHostComponent, descendants: true }], ngImport: i0, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\n        [provideValue]=\"provideValue\">\n    </ax-widget-host>\n</div>\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada;z-index:0}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:white;width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"], components: [{ type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: ["provideValue", "config", "readonly", "sizeX", "sizeY", "col", "row"], outputs: ["onRemove", "onConfigChanged", "onResized", "onSave"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\n        [provideValue]=\"provideValue\">\n    </ax-widget-host>\n</div>\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada;z-index:0}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:white;width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"] }]
+            args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\n        [provideValue]=\"provideValue\">\n    </ax-widget-host>\n</div>\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada;z-index:0}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:rgb(255,255,255);width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -1004,13 +1034,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent {
+    cdr;
+    sizeX;
+    sizeY;
+    minX = 1;
+    maxX = 10;
+    minY = 1;
+    maxY = 10;
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
-        this.minX = 1;
-        this.maxX = 10;
-        this.minY = 1;
-        this.maxY = 10;
     }
     ngOnInit() {
         if (Array.isArray(this.value)) {
@@ -1037,10 +1070,10 @@ class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent {
     ngAfterViewInit() {
         this.onRenderCompleted.emit();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXWidgetSizePropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div style=\"display: grid;grid-gap: 2%; grid-template-columns: 49% 49%;\">\n    <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\n    </ax-number-box>\n    <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\n    </ax-number-box>\n</div>", dependencies: [{ kind: "component", type: i2.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }] });
 }
-AXWidgetSizePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXWidgetSizePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetSizePropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div style=\"display: grid;grid-gap: 2%; grid-template-columns: 49% 49%;\">\n    <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\n    </ax-number-box>\n    <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\n    </ax-number-box>\n</div>", components: [{ type: i1.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<div style=\"display: grid;grid-gap: 2%; grid-template-columns: 49% 49%;\">\n    <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\n    </ax-number-box>\n    <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\n    </ax-number-box>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
@@ -1063,28 +1096,26 @@ class AXWidgetBoardModule {
             }
         });
     }
-}
-AXWidgetBoardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXWidgetBoardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, declarations: [AXWidgetBoardComponent, AXWidgetHostComponent, AXWidgetConfigComponent, AXWidgetSaveComponent], imports: [CommonModule,
-        AXSearchBoxModule,
-        AXLoadingModule,
-        RouterModule,
-        AXProppertyEditorModule,
-        AXPageModule,
-        AXToolbarModule,
-        AXTranslatorModule,
-        AXLabelModule,
-        AXTextAreaModule,
-        AXFieldsetModule,
-        AXTextBoxModule,
-        AXFormGroupModule,
-        AXTabStripModule,
-        AXCheckBoxModule,
-        AXMenuModule,
-        AXTranslatorModule,
-        AXValidationModule, i1$2.RouterModule], exports: [AXWidgetBoardComponent, AXProppertyEditorModule] });
-AXWidgetBoardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, providers: [], imports: [[
-            CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardModule, declarations: [AXWidgetBoardComponent, AXWidgetHostComponent, AXWidgetConfigComponent, AXWidgetSaveComponent], imports: [CommonModule,
+            AXSearchBoxModule,
+            AXLoadingModule,
+            RouterModule,
+            AXProppertyEditorModule,
+            AXPageModule,
+            AXToolbarModule,
+            AXTranslatorModule,
+            AXLabelModule,
+            AXTextAreaModule,
+            AXFieldsetModule,
+            AXTextBoxModule,
+            AXFormGroupModule,
+            AXTabStripModule,
+            AXCheckBoxModule,
+            AXMenuModule,
+            AXTranslatorModule,
+            AXValidationModule, i1$2.RouterModule], exports: [AXWidgetBoardComponent, AXProppertyEditorModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardModule, imports: [CommonModule,
             AXSearchBoxModule,
             AXLoadingModule,
             RouterModule,
@@ -1107,9 +1138,9 @@ AXWidgetBoardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
                     component: AXWidgetSizePropertyEditorComponent,
                     path: 'ax/editors/widget-size'
                 },
-            ])
-        ], AXProppertyEditorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, decorators: [{
+            ]), AXProppertyEditorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetBoardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1145,11 +1176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return []; } });
 
 class AXWidgetSizePropertyEditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorModule, declarations: [AXWidgetSizePropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule], exports: [AXWidgetSizePropertyEditorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorModule, imports: [CommonModule, FormsModule, AXNumberBoxModule] });
 }
-AXWidgetSizePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXWidgetSizePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, declarations: [AXWidgetSizePropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule], exports: [AXWidgetSizePropertyEditorComponent] });
-AXWidgetSizePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXWidgetSizePropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXWidgetSizePropertyEditorComponent],