@acorex/layout 16.20.0 → 16.20.1

package/fesm2022/acorex-layout.mjs

@@ -1,14 +1,13 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, HostBinding, Input, Output, ViewChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
-import * as i2 from '@acorex/components';
+import * as i1 from '@acorex/components';
 import { propertyEditor, AXBasePopupPageComponent, AXValidationFormComponent, AXPropertyDecorators, AXProperyEditorComponent, AXProppertyEditorModule, AXSearchBoxModule, AXLoadingModule, 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 i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
@@ -206,11 +205,11 @@ class AXWidgetConfigComponent extends AXBasePopupPageComponent {
         return item.property.name;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetConfigComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXWidgetConfigComponent, isStandalone: false, 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"], outputs: ["clickLabel"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXWidgetConfigComponent, isStandalone: false, 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        @for (p of displayProps; track identify($index, p)) {\n          <div class=\"row\">\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        }\n      </ax-validation-form>\n    </div>\n  </ax-page-content>\n</ax-page>", dependencies: [{ kind: "directive", type: i1.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i1.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i1.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i1.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>" }]
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ax-page>\n  <ax-page-content>\n    <div class=\"container\">\n      <ax-validation-form #form>\n        @for (p of displayProps; track identify($index, p)) {\n          <div class=\"row\">\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        }\n      </ax-validation-form>\n    </div>\n  </ax-page-content>\n</ax-page>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [AXValidationFormComponent]
@@ -281,11 +280,11 @@ class AXWidgetSaveComponent extends AXBasePopupPageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSaveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXWidgetSaveComponent, isStandalone: false, 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"], outputs: ["clickLabel"] }, { kind: "component", type: i2.AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"], outputs: ["onBlur", "onFocus"] }, { 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", "leadZeroDateTime"] }, { kind: "component", type: i2.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXWidgetSaveComponent, isStandalone: false, 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          @for (prop of displayProps; track prop) {\n            <div class=\"row\">\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                </ax-check-box>\n              </div>\n            </div>\n          }\n        </ax-fieldset>\n      </div>\n    </div>\n  </div>\n</ax-page-content>\n</ax-page>", dependencies: [{ kind: "component", type: i1.AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: i1.AXPageComponent, selector: "ax-page" }, { kind: "component", type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: i1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: i1.AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: i1.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: i1.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSaveComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>" }]
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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          @for (prop of displayProps; track prop) {\n            <div class=\"row\">\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                </ax-check-box>\n              </div>\n            </div>\n          }\n        </ax-fieldset>\n      </div>\n    </div>\n  </div>\n</ax-page-content>\n</ax-page>" }]
         }] });
 
 class AXWidgetHostComponent {
@@ -544,13 +543,13 @@ class AXWidgetHostComponent {
             config: this.config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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: "20.3.3", type: AXWidgetHostComponent, isStandalone: false, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXWidgetHostComponent, isStandalone: false, 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  @if (!isConfigured) {\n    <div class=\"widget-config-overlay\" (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        @if (!readonly) {\n          <div class=\"config-icon\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\n        }\n      </div>\n    </div>\n  }\n  <div class='widget-edit-overlay' >\n    <div class='widget-edit-menu'>\n      @if (_hasProps) {\n        <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\n          (mousedown)=\"$event.stopPropagation()\" (mouseup)=\"$event.stopPropagation()\">\n          <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\n        </button>\n      }\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  @if (_hasMenu && !readonly) {\n    <div class=\"widget-options-menu\" >\n      <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\n    </div>\n  }\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: "component", type: i1.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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, standalone: false, 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: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i2.AXPopupService }, { type: i2.AXLoadingService }], propDecorators: { provideValue: [{
+            args: [{ selector: 'ax-widget-host', host: { class: 'ax widget-host', tabindex: '0' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class='widget-container'>\n  @if (!isConfigured) {\n    <div class=\"widget-config-overlay\" (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        @if (!readonly) {\n          <div class=\"config-icon\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\n        }\n      </div>\n    </div>\n  }\n  <div class='widget-edit-overlay' >\n    <div class='widget-edit-menu'>\n      @if (_hasProps) {\n        <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\n          (mousedown)=\"$event.stopPropagation()\" (mouseup)=\"$event.stopPropagation()\">\n          <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\n        </button>\n      }\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  @if (_hasMenu && !readonly) {\n    <div class=\"widget-options-menu\" >\n      <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\n    </div>\n  }\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: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i1.AXPopupService }, { type: i1.AXLoadingService }], propDecorators: { provideValue: [{
                 type: Input
             }], onRemove: [{
                 type: Output
@@ -1006,11 +1005,11 @@ class AXWidgetBoardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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: "20.3.3", type: AXWidgetBoardComponent, isStandalone: false, 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{overflow:scroll;scrollbar-width:thin;display:inline-block;margin:15px 20px;min-width:calc(100% - 18px);min-height:calc(100% - 18px);--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}.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:#ffffffd9;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:#fff;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:#ffffff80;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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXWidgetBoardComponent, isStandalone: false, 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  @for (w of widgets; track trackByFn($index, w)) {\n    <ax-widget-host  [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  }\n</div>\n", styles: [".widget-board{overflow:scroll;scrollbar-width:thin;display:inline-block;margin:15px 20px;min-width:calc(100% - 18px);min-height:calc(100% - 18px);--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}.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:#ffffffd9;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:#fff;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:#ffffff80;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: "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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{overflow:scroll;scrollbar-width:thin;display:inline-block;margin:15px 20px;min-width:calc(100% - 18px);min-height:calc(100% - 18px);--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}.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:#ffffffd9;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:#fff;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:#ffffff80;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, standalone: false, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\n  @for (w of widgets; track trackByFn($index, w)) {\n    <ax-widget-host  [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  }\n</div>\n", styles: [".widget-board{overflow:scroll;scrollbar-width:thin;display:inline-block;margin:15px 20px;min-width:calc(100% - 18px);min-height:calc(100% - 18px);--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}.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:#ffffffd9;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:#fff;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:#ffffff80;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: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -1071,7 +1070,7 @@ class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXWidgetSizePropertyEditorComponent, isStandalone: false, 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXWidgetSizePropertyEditorComponent, isStandalone: false, 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: 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: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, decorators: [{
             type: Component,