@acorex/layout 16.20.14 → 16.22.2

package/fesm2022/acorex-layout.mjs

@@ -1,1207 +1,1572 @@
-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 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 { 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';
-
-// @dynamic
-// TODO: Add Angular decorator.
-class AXWidgetComponent {
-    uid = AXHtmlUtil.getUID();
-    provideValue;
-    onBusyChanged = new EventEmitter();
-    _isBusy = true;
-    get isBusy() {
-        return this._isBusy;
-    }
-    set isBusy(v) {
-        if (v !== this._isBusy) {
-            const eventData = {
-                component: this,
-                oldValue: this._isBusy,
-                value: v
-            };
-            this._isBusy = v;
-            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());
-    }
-    stopRefreshTimer() {
-        window.clearInterval(this.intervalId);
-    }
-    restartRefreshTimer() {
-        this.stopRefreshTimer();
-        this.startRefreshTimer();
-    }
-    ngOnDestroy() {
-        this.stopRefreshTimer();
-    }
-    redraw() {
-    }
-    refresh() {
-        this.restartRefreshTimer();
-    }
-    onConfiguredChanged = new EventEmitter();
-    get isConfigured() {
-        return true;
-    }
-    setValue(name, value) {
-        this[name] = value;
-        this.onConfiguredChanged.emit();
-    }
-    getValue(name) {
-        const val = this[name];
-        const config = this['__meta__'].config;
-        const runtime = config.props[name]?.runtime;
-        if (runtime && this.provideValue) {
-            const res = this.provideValue({
-                name,
-                value: val,
-                uniqueName: config.uniqueName,
-                options: config.options,
-            });
-            if (this.provideValue instanceof Promise) {
-                return res;
-            }
-            else {
-                return Promise.resolve(res);
-            }
-        }
-        return Promise.resolve(val);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetComponent });
-}
-__decorate([
-    propertyEditor({
-        editorClass: 'ax/editors/widget-size',
-        title: 'common.size',
-        visible: false,
-        order: -99,
-    }),
-    __metadata("design:type", Array)
-], AXWidgetComponent.prototype, "widgetSize", void 0);
-__decorate([
-    propertyEditor({
-        editorClass: 'ax/editors/select',
-        title: 'common.refresh-rate',
-        visible: true,
-        order: -98,
-        editorOptions: {
-            items: () => {
-                return ['بدون مقدار', 1, 2, 3, 5, 10, 20, 30, 60].map(c => ({
-                    id: typeof (c) === 'number' ? 60000 * c : 0,
-                    text: typeof (c) === 'number' ? AXTranslator.get('dateTime.duration.format_minute').replace('{0}', c.toString()) : c
-                }));
-            },
-            allowNull: false,
-            allowSearch: false,
-            selectionDataMode: 'value',
-            selectionMode: 'single',
-            valueField: 'id',
-        }
-    }),
-    __metadata("design:type", Object)
-], AXWidgetComponent.prototype, "refreshRate", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetComponent, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [], propDecorators: { widgetSize: [], refreshRate: [] } });
-
-class AXWidgetConfigComponent extends AXBasePopupPageComponent {
-    cdr;
-    form;
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-    }
-    widget;
-    props = [];
-    displayProps = [];
-    changes = [];
-    context = {};
-    getFooterButtons() {
-        return [
-            {
-                name: 'okay',
-                submitBehavior: true,
-                text: AXTranslator.get('common.confirm'),
-                style: 'success'
-            },
-            {
-                name: 'cancel',
-                cancelBehavior: true,
-                text: AXTranslator.get('common.cancel'),
-                style: 'danger blank'
-            }
-        ];
-    }
-    onFooterButtonClick(e) {
-        if (e.name === 'cancel') {
-            this.close();
-        }
-        if (e.name === 'okay') {
-            this.form.validate().then(c => {
-                if (c.result) {
-                    this.close(this.changes);
-                }
-            });
-        }
-    }
-    handleValueChange(e) {
-        const prop = this.changes.find(c => c.property.name === e.property.name);
-        if (prop) {
-            prop.value = e.value;
-        }
-        else {
-            this.changes.push({ property: e.property, value: e.value });
-        }
-        this.updateContext();
-    }
-    ngOnInit() {
-        this.displayProps = this.props.filter(c => c.property.visible !== false).sort((a, b) => a.property.order - b.property.order);
-        this.updateContext();
-    }
-    updateContext() {
-        const ctx = {};
-        this.props.forEach(p => {
-            ctx[p.property.name] = p.value;
-        });
-        this.changes.forEach(p => {
-            ctx[p.property.name] = p.value;
-        });
-        this.context = ctx;
-    }
-    identify(index, item) {
-        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: "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        @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]
-            }] } });
-
-class AXWidgetSaveComponent extends AXBasePopupPageComponent {
-    config;
-    props = [];
-    displayProps;
-    data;
-    getFooterButtons() {
-        return [
-            {
-                name: 'okay',
-                submitBehavior: true,
-                text: AXTranslator.get('common.confirm'),
-                style: 'ax success'
-            },
-            {
-                name: 'cancel',
-                cancelBehavior: true,
-                text: AXTranslator.get('common.cancel'),
-                style: 'ax light'
-            }
-        ];
-    }
-    ngOnInit() {
-        const titleProp = this.props.find(c => c.property.name === 'title' || c.property.name === 'name');
-        const title = titleProp?.value || this.config.title;
-        const pp = {};
-        this.props?.forEach(c => {
-            pp[c.property.name] = c.property;
-        });
-        this.data = {
-            component: this.config.component,
-            title,
-            uniqueName: `${this.config.uniqueName}-${AXHtmlUtil.getUID()}`,
-            options: AXObjectUtil.deepJSONClone(this.config.options),
-            props: AXObjectUtil.deepJSONClone(pp)
-        };
-        this.displayProps = this.props
-            .filter(c => c.property.visible !== false)
-            .sort((a, b) => a.property.order - b.property.order)
-            .map(c => ({
-            name: c.property.name,
-            title: c.property.title,
-            allow: true
-        }));
-    }
-    onFooterButtonClick(e) {
-        if (e.name === 'cancel') {
-            this.close();
-        }
-        if (e.name === 'okay') {
-            this.props.forEach(p => {
-                const pp = this.displayProps.find(c => c.name === p.property.name);
-                if (pp == null || !pp.allow) {
-                    let ppp = this.data.props[p.property.name];
-                    if (ppp) {
-                        ppp.visible = false;
-                    }
-                    else {
-                        ppp = { visible: false };
-                    }
-                }
-            });
-            this.close(this.data);
-        }
-    }
-    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: "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          @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 {
-    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;
-    }
-    set isLoading(v) {
-        this._isLoading = v;
-        if (this._loadingId && !v) {
-            this.loadingService.hide(this._loadingId);
-            this._loadingId = null;
-        }
-        if (v) {
-            // this._loadingId = this.loadingService.show(this.ref.nativeElement);
-        }
-    }
-    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;
-    }
-    async ngAfterViewInit() {
-        let component;
-        if (typeof this.config.component === 'string') {
-            const route = await this.rendererService.findLoadedComponentByRoute(this.config.component, 20);
-            component = route?.component;
-        }
-        else if (typeof this.config.component === 'function') {
-            component = this.config.component;
-        }
-        if (component == null) {
-            console.error(`Invalid Widget Component!`, this.config);
-            this.onRemove.emit(this);
-            return;
-        }
-        const widgetFactory = this.componentFactoryResolver.resolveComponentFactory(component);
-        this.componentRef = this.vc.createComponent(widgetFactory);
-        this._widget = this.componentRef.instance;
-        this._widget.provideValue = this.provideValue;
-        if (this._widget.onBusyChanged) {
-            this._widget.onBusyChanged.subscribe((d) => {
-                if (!this._widget.widgetSize) {
-                    this._widget.setValue('widgetSize', [this.sizeX, this.sizeY]);
-                }
-                else {
-                    this.setSizeFromOptions();
-                }
-                // this.isLoading = d.value;
-                this.cdr.detectChanges();
-            });
-        }
-        if (this._widget.onConfiguredChanged) {
-            this._widget.onConfiguredChanged.subscribe(() => {
-                this.setSizeFromOptions();
-            });
-        }
-        //
-        if (this.config.options) {
-            Object.assign(this._widget, this.config.options);
-        }
-        this._hasProps = AXPropertyDecorators.getProperties(this._widget).length > 0;
-        this.isLoading = false;
-        this.config['__meta__'].instance = this;
-        this._widget['__meta__'] = {};
-        this._widget['__meta__'].config = this.config;
-        //
-        this.configMenuItem[0].items.push({
-            name: 'refresh',
-            icon: 'far fa-undo',
-            text: AXTranslator.get('common.refresh'),
-            onClick: () => {
-                this?.widget?.refresh();
-            }
-        });
-        //
-        if (this._hasProps) {
-            this.configMenuItem[0].items.push({
-                name: 'configs',
-                icon: 'far fa-cogs',
-                text: AXTranslator.get('common.configs'),
-                onClick: () => {
-                    this.openConfigDialog();
-                }
-            });
-        }
-        this.configMenuItem[0].items.push({
-            name: 'save',
-            icon: 'far fa-save',
-            text: AXTranslator.get('common.save-as'),
-            onClick: () => {
-                this.openSaveDialog();
-            }
-        });
-        if (true) {
-            this.configMenuItem[0].items.push({
-                name: 'remove',
-                icon: 'far fa-times',
-                style: 'ax danger blank',
-                text: AXTranslator.get('common.remove'),
-                onClick: () => {
-                    this.onRemove.emit(this);
-                }
-            });
-        }
-        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;
-            const oldSizeY = this.sizeY;
-            if (c && Array.isArray(c) && (oldSizeX !== c[0] || oldSizeY !== c[1])) {
-                this.config.sizeX = this.sizeX = c[0];
-                this.config.sizeY = this.sizeY = c[1];
-                this.onResized.emit({
-                    component: this._widget,
-                    config: this.config
-                });
-            }
-            this.cdr.detectChanges();
-        });
-    }
-    remove(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!this.readonly)
-            this.onRemove.emit(this);
-        return false;
-    }
-    handleConfig(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!this.readonly)
-            this.openConfigDialog();
-        return false;
-    }
-    openConfigDialog() {
-        const ppp = this.getMergedProps();
-        this.popup.open(AXWidgetConfigComponent, {
-            title: AXTranslator.get('common.configs'),
-            size: 'sm',
-            data: {
-                props: ppp.map(c => ({ property: c.options, value: this._widget[c.options.name] })),
-                widget: this.widget
-            }
-        }).then(c => {
-            if (c.data) {
-                if (!this.config.options) {
-                    this.config.options = {};
-                }
-                c.data.forEach(p => {
-                    this._widget.setValue(p.property.name, p.value);
-                    this.config.options[p.property.name] = p.value;
-                });
-                this.emitConfigChanged();
-                this._widget.redraw();
-                this.cdr.detectChanges();
-            }
-        });
-    }
-    openSaveDialog() {
-        const ppp = this.getMergedProps();
-        this.popup.open(AXWidgetSaveComponent, {
-            title: AXTranslator.get('common.save-as'),
-            size: 'sm',
-            data: {
-                config: this.config,
-                props: ppp.map(c => ({ property: c.options, value: this._widget[c.options.name] }))
-            }
-        }).then(c => {
-            if (c.data) {
-                this.onSave.emit({
-                    component: this._widget,
-                    data: c.data
-                });
-            }
-        });
-    }
-    handleOptionClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openConfigDialog();
-        return false;
-    }
-    ngOnDestroy() {
-        this.vc.clear();
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-    }
-    getMergedProps() {
-        const ppp = AXObjectUtil.deepCopy(AXPropertyDecorators.getProperties(this._widget));
-        for (const key in this.config.props) {
-            if (Object.prototype.hasOwnProperty.call(this.config.props, key)) {
-                const newP = this.config.props[key];
-                const existPropDec = ppp.find(p => p.property === key);
-                if (existPropDec) {
-                    Object.assign(existPropDec.options, newP);
-                }
-            }
-        }
-        return ppp;
-    }
-    emitConfigChanged() {
-        this.onConfigChanged.emit({
-            component: this._widget,
-            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: 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  @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
-            }], onConfigChanged: [{
-                type: Output
-            }], onResized: [{
-                type: Output
-            }], onSave: [{
-                type: Output
-            }], config: [{
-                type: Input
-            }], vc: [{
-                type: ViewChild,
-                args: ['vc', { read: ViewContainerRef }]
-            }], readonly: [{
-                type: Input
-            }], sizeX: [{
-                type: HostBinding,
-                args: ['attr.data-size-x']
-            }, {
-                type: Input
-            }], sizeY: [{
-                type: HostBinding,
-                args: ['attr.data-size-y']
-            }, {
-                type: Input
-            }], col: [{
-                type: HostBinding,
-                args: ['attr.data-col']
-            }, {
-                type: Input
-            }], row: [{
-                type: HostBinding,
-                args: ['attr.data-row']
-            }, {
-                type: Input
-            }] } });
-
-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;
-    }
-    ngOnInit() {
-        if (this.rtl == null) {
-            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-        }
-        this.saveSubject.pipe(debounceTime(750)).subscribe((value) => {
-            this.emitConfigChanged(value);
-        });
-    }
-    ngOnDestroy() {
-        this.saveSubject?.unsubscribe();
-    }
-    ngAfterViewInit() {
-        this.zone.runOutsideAngular((c) => {
-            const style = document.createElement('style');
-            style.type = 'text/css';
-            this.ref.nativeElement.appendChild(style);
-            // add css data classes
-            for (let i = 1; i <= 50; i++) {
-                style.innerHTML += `[${this.DATA_COL}="${i}"] {  ${this.rtl ? 'right' : 'left'}: ${(i - 1) * (this.tileSize + this.gapSize)}px; }`;
-                style.innerHTML += `[${this.DATA_ROW}="${i}"] {  top: ${(i - 1) * (this.tileSize + this.gapSize)}px; }`;
-                style.innerHTML += `[${this.DATA_SIZE_X}="${i}"] {  width:  ${(i * this.tileSize) + ((i - 1) * this.gapSize)}px; }`;
-                style.innerHTML += `[${this.DATA_SIZE_Y}="${i}"] {  height: ${(i * this.tileSize) + ((i - 1) * this.gapSize)}px; }`;
-            }
-        });
-    }
-    calcGridSize() {
-        this.zone.runOutsideAngular(() => {
-            const width = (Math.max(...this.widgets.map((c) => c.col + c.sizeX - 1))) * (this.tileSize + this.gapSize);
-            const height = (Math.max(...this.widgets.map((c) => c.row + c.sizeY - 1))) * (this.tileSize + this.gapSize);
-            this.container.nativeElement.style.width = width + 'px';
-            this.container.nativeElement.style.height = height + 'px';
-        });
-    }
-    toggleEdit() {
-        this._isInEditing ? this.finishEdit() : this.startEdit();
-    }
-    dragStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.zone.runOutsideAngular(() => {
-            if (this._isInEditing && e.which === 1) {
-                this.dragItem = e.currentTarget;
-                this.dragItem.setAttribute('data-x-offset', (this.dragItem.offsetLeft - e.clientX).toString());
-                //
-                this.dragItem.setAttribute('data-y-offset', (this.dragItem.offsetTop - e.clientY).toString());
-                this.dragItem.classList.add('widget-dragging');
-                this.dragItem.classList.remove('animate__animated', 'animate__pulse');
-            }
-        });
-        return false;
-    }
-    removePositionData() {
-        this.zone.runOutsideAngular(() => {
-            if (this.dragItem && this._isInEditing && this.dragItem.getAttribute(this.DATA_OLD_COL) == null) {
-                this.dragItem.setAttribute(this.DATA_OLD_COL, this.dragItem.getAttribute(this.DATA_COL));
-                this.dragItem.setAttribute(this.DATA_OLD_ROW, this.dragItem.getAttribute(this.DATA_ROW));
-                this.dragItem.removeAttribute(this.DATA_COL);
-                this.dragItem.removeAttribute(this.DATA_ROW);
-            }
-        });
-    }
-    resetPositionData() {
-        this.zone.runOutsideAngular(() => {
-            if (this.dragItem && this._isInEditing) {
-                this.setPosition(this.dragItem, this.dragItem.getAttribute(this.DATA_OLD_COL), this.dragItem.getAttribute(this.DATA_OLD_ROW));
-            }
-        });
-    }
-    setPosition(element, col, row) {
-        this.zone.runOutsideAngular(() => {
-            element.setAttribute(this.DATA_COL, col);
-            element.setAttribute(this.DATA_ROW, row);
-            element.removeAttribute(this.DATA_OLD_COL);
-            element.removeAttribute(this.DATA_OLD_ROW);
-            element.style.removeProperty('top');
-            element.style.removeProperty('left');
-            const widget = this.widgets.find(c => c['__meta__'].instance.element === element);
-            widget.col = Number(col);
-            widget.row = Number(row);
-        });
-    }
-    drag(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.zone.runOutsideAngular(() => {
-            if (this.dragItem && this._isInEditing) {
-                this.isDragging = true;
-                this.addPlaceholder();
-                const xOffset = Number(this.dragItem.getAttribute('data-x-offset'));
-                const yOffset = Number(this.dragItem.getAttribute('data-y-offset'));
-                this.dragItem.style.left = e.clientX + xOffset + 'px';
-                this.dragItem.style.top = e.clientY + yOffset + 'px';
-                //
-                this.detectBestPlacement();
-                this.removePositionData();
-            }
-        });
-        return false;
-    }
-    dragEnd(e) {
-        this.zone.runOutsideAngular(() => {
-            if (this.dragItem && this._isInEditing && this.isDragging) {
-                this.dragItem.classList.remove('widget-dragging');
-                this.dragItem.classList.add('animate__animated', 'animate__pulse');
-                //
-                const p = this.container.nativeElement.querySelector('.widget-blank-placeholder');
-                if (this.newWidget) {
-                    const w = {
-                        uniqueName: this.newWidget.uniqueName,
-                        component: this.newWidget.component,
-                        title: this.newWidget.title,
-                        options: this.newWidget.options,
-                        sizeX: this.newWidget.sizeX,
-                        sizeY: this.newWidget.sizeY,
-                        col: Number(p.getAttribute(this.DATA_COL)),
-                        row: Number(p.getAttribute(this.DATA_ROW))
-                    };
-                    this.widgets.push(w);
-                    this.newWidget = null;
-                    this.container.nativeElement.removeChild(this.dragItem);
-                    this.zone.run(() => {
-                        this.cdr.detectChanges();
-                        this.calcGridSize();
-                        setTimeout(() => {
-                            w['__meta__'].instance.element.addEventListener('mousedown', this.dragStart.bind(this), false);
-                        }, 1000);
-                    });
-                }
-                else {
-                    if (p) {
-                        this.setPosition(this.dragItem, p.getAttribute(this.DATA_COL), p.getAttribute(this.DATA_ROW));
-                    }
-                    else {
-                        this.setPosition(this.dragItem, this.dragItem.getAttribute(this.DATA_OLD_COL), this.dragItem.getAttribute(this.DATA_OLD_ROW));
-                    }
-                }
-                //
-                this.removePlaceholder();
-                this.dragItem = null;
-                this.calcGridSize();
-                this.saveSubject.next('config');
-            }
-            this.isDragging = false;
-        });
-    }
-    detectFirstEmptySlot(w) {
-        const xTile = Math.floor(this.ref.nativeElement.parentElement.offsetWidth / this.tileSize);
-        for (let j = 1; j <= 100; j++) {
-            for (let i = 1; i <= xTile - w.sizeX; i++) {
-                const rec = new AXClientRec({
-                    left: i,
-                    top: j,
-                    width: w.sizeX,
-                    height: w.sizeY
-                });
-                const el = this.widgets.filter(c => c !== w).find((c) => rec.intersect({
-                    left: c.col,
-                    top: c.row,
-                    width: c.sizeX,
-                    height: c.sizeY
-                }));
-                if (el == null) {
-                    w.col = i;
-                    w.row = j;
-                    return;
-                }
-            }
-        }
-    }
-    detectBestPlacement() {
-        this.zone.runOutsideAngular(() => {
-            const p = this.container.nativeElement.querySelector('.widget-blank-placeholder');
-            let col = Math.ceil(this.dragItem.offsetLeft / this.tileSize);
-            if (this.rtl) {
-                col = Math.ceil((this.container.nativeElement.clientWidth - (this.dragItem.offsetLeft + this.dragItem.clientWidth)) / this.tileSize);
-            }
-            let row = Math.ceil(this.dragItem.offsetTop / this.tileSize);
-            if (col < 1) {
-                col = 1;
-            }
-            if (row < 1) {
-                row = 1;
-            }
-            const widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host')).map((c) => c);
-            p.setAttribute(this.DATA_COL, col.toString());
-            p.setAttribute(this.DATA_ROW, row.toString());
-            const collision = widgets.filter(c => c !== this.dragItem).some(c => AXHtmlUtil.collision(c, this.dragItem));
-            if (collision) {
-                this.removePlaceholder();
-            }
-        });
-    }
-    addPlaceholder() {
-        this.zone.runOutsideAngular(() => {
-            this.removePlaceholder();
-            if (this.dragItem) {
-                const p = document.createElement('div');
-                p.classList.add('widget-blank-placeholder');
-                p.setAttribute(this.DATA_COL, this.dragItem.getAttribute(this.DATA_COL));
-                p.setAttribute(this.DATA_ROW, this.dragItem.getAttribute(this.DATA_ROW));
-                p.setAttribute(this.DATA_SIZE_X, this.dragItem.getAttribute(this.DATA_SIZE_X));
-                p.setAttribute(this.DATA_SIZE_Y, this.dragItem.getAttribute(this.DATA_SIZE_Y));
-                this.container.nativeElement.appendChild(p);
-            }
-        });
-    }
-    removePlaceholder() {
-        const p = this.container.nativeElement.querySelector('.widget-blank-placeholder');
-        p?.remove();
-    }
-    startEdit() {
-        this._isInEditing = true;
-        this.calcGridSize();
-        this.ref.nativeElement.classList.add('grid-background');
-        const bg = this.ref.nativeElement;
-        bg.style.setProperty('background-position', `${this.rtl ? 'right' : 'left'} top`);
-        // tslint:disable-next-line: max-line-length
-        const pattern = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.tileSize + this.gapSize}" height="${this.tileSize + this.gapSize}"> <rect style="fill: %23dadada" x="${this.rtl ? this.gapSize : 0}" width="${this.tileSize}" height="${this.tileSize}" y="0"></rect></svg>')`;
-        bg.style.setProperty('background-image', pattern);
-        //
-        const widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
-        widgets.forEach((w) => {
-            w.addEventListener('mousedown', this.dragStart.bind(this), false);
-        });
-        this.ref.nativeElement.addEventListener('mousemove', this.drag.bind(this), false);
-        this.ref.nativeElement.addEventListener('mouseup', this.dragEnd.bind(this), false);
-    }
-    finishEdit() {
-        this.ref.nativeElement.classList.remove('grid-background');
-        const bg = this.ref.nativeElement;
-        bg.style.removeProperty('background-image');
-        //
-        this._isInEditing = false;
-        const widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
-        widgets.forEach((w) => {
-            w.removeEventListener('mousedown', this.dragStart.bind(this), false);
-        });
-        this.ref.nativeElement.removeEventListener('mousemove', this.drag.bind(this), false);
-        this.ref.nativeElement.removeEventListener('mouseup', this.dragEnd.bind(this), false);
-        this.saveSubject.next('config');
-    }
-    addWidget(widget) {
-        this.zone.runOutsideAngular(() => {
-            this.newWidget = {
-                uniqueName: widget.uniqueName,
-                component: widget.component,
-                title: widget.title,
-                col: 1,
-                row: 1,
-                sizeX: widget.sizeX,
-                sizeY: widget.sizeY,
-                options: widget.options,
-                props: widget.props
-            };
-            this.detectFirstEmptySlot(this.newWidget);
-            const w = {
-                uniqueName: this.newWidget.uniqueName,
-                component: this.newWidget.component,
-                title: this.newWidget.title,
-                options: this.newWidget.options,
-                props: this.newWidget.props,
-                sizeX: this.newWidget.sizeX,
-                sizeY: this.newWidget.sizeY,
-                col: this.newWidget.col,
-                row: this.newWidget.row
-            };
-            this.widgets.push(w);
-            this.newWidget = null;
-            this.zone.run(() => {
-                this.cdr.detectChanges();
-                this.calcGridSize();
-                this.emitConfigChanged('add');
-                setTimeout(() => {
-                    w['__meta__'].instance.element.addEventListener('mousedown', this.dragStart.bind(this), false);
-                }, 1000);
-            });
-        });
-    }
-    handleOnRemove(w) {
-        w.element.classList.add('animate__animated', 'animate__zoomOut');
-        w.element.addEventListener('animationend', () => {
-            this.widgets = this.widgets.filter((c) => c.__meta__.id !== w.config.__meta__.id);
-            this.cdr.detectChanges();
-            this.calcGridSize();
-            this.emitConfigChanged('remove');
-        });
-    }
-    handleOnSave(e) {
-        this.onWidgetSave.emit(e);
-    }
-    trackByFn(index, item) {
-        if (!item['__meta__']?.id) {
-            item['__meta__'] = {};
-            item['__meta__'].id = AXHtmlUtil.getUID();
-        }
-        return item['__meta__']?.id;
-    }
-    load(widgets) {
-        this.clear();
-        return new Promise((resolve, reject) => {
-            if (widgets) {
-                const loadedWidgets = [];
-                if (typeof widgets === 'string') {
-                    try {
-                        loadedWidgets.push(...JSON.parse(widgets));
-                        this.emitConfigChanged('load');
-                    }
-                    catch (error) {
-                        reject('Invalid widget json data!');
-                    }
-                }
-                else {
-                    loadedWidgets.push(...widgets);
-                    this.emitConfigChanged('load');
-                }
-                let intervalId = -1;
-                const loadFunc = () => {
-                    if (this.galleryItems && this.galleryItems.length > 0) {
-                        loadedWidgets.forEach(w => {
-                            const gitem = this.galleryItems.find(c => c.uniqueName === w.uniqueName);
-                            if (gitem) {
-                                w.component = gitem.component;
-                                if (gitem.props) {
-                                    w.props = JSON.parse(JSON.stringify(gitem.props));
-                                }
-                            }
-                        });
-                        this.widgets.push(...loadedWidgets);
-                        this.emitConfigChanged('load');
-                        window.clearInterval(intervalId);
-                        this.cdr.detectChanges();
-                        resolve();
-                    }
-                };
-                intervalId = window.setInterval(loadFunc, 200);
-            }
-            else {
-                resolve();
-            }
-        });
-    }
-    clear() {
-        if (this.widgets.length) {
-            this.widgets = [];
-            this.cdr.detectChanges();
-            this.saveSubject.next('clear');
-        }
-    }
-    save() {
-        const obj = this.widgets.map(c => ({
-            uniqueName: c.uniqueName,
-            component: c.component,
-            title: c.title,
-            sizeX: c.sizeX,
-            sizeY: c.sizeY,
-            col: c.col,
-            row: c.row,
-            options: c.options,
-            props: c.props
-        }));
-        return Promise.resolve(JSON.stringify(obj));
-    }
-    refresh() {
-        this.widgetHosts.forEach(host => {
-            host.widget.refresh();
-        });
-    }
-    handleOnConfigChanged(e) {
-        this.cdr.detectChanges();
-        this.saveSubject.next('config');
-    }
-    handleOnResizedChanged(e) {
-        this.detectFirstEmptySlot(e.config);
-        this.cdr.detectChanges();
-        this.saveSubject.next('config');
-    }
-    emitConfigChanged(mode) {
-        this.onConfigChanged.emit({
-            component: this,
-            mode: mode
-        });
-    }
-    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: "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  @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']
-            }], widgetHosts: [{
-                type: ViewChildren,
-                args: [AXWidgetHostComponent]
-            }], galleryItems: [{
-                type: Input
-            }], tileSize: [{
-                type: Input
-            }], gapSize: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], provideValue: [{
-                type: Input
-            }], onConfigChanged: [{
-                type: Output
-            }], onWidgetSave: [{
-                type: Output
-            }] } });
-
-class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent {
-    cdr;
-    sizeX;
-    sizeY;
-    minX = 1;
-    maxX = 20;
-    minY = 1;
-    maxY = 20;
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-    }
-    ngOnInit() {
-        if (Array.isArray(this.value)) {
-            this.sizeX = this.value[0];
-            this.sizeY = this.value[1];
-        }
-        else {
-            this.sizeX = 2;
-            this.sizeY = 2;
-        }
-    }
-    handleMinValueChange(e) {
-        this.sizeX = e.value;
-        if (this.sizeY > 0) {
-            super.handleValueChange([this.sizeX, this.sizeY]);
-        }
-    }
-    handleMaxValueChange(e) {
-        this.sizeY = e.value;
-        if (this.sizeX > 0) {
-            super.handleValueChange([this.sizeX, this.sizeY]);
-        }
-    }
-    ngAfterViewInit() {
-        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: 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,
-            args: [{ standalone: false, 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: () => [{ type: i0.ChangeDetectorRef }] });
-
-class AXWidgetBoardModule {
-    /**
-     *
-     */
-    constructor() {
-        AXTranslator.load('en', {
-            'widget-board': {
-                'configurable-props': 'Configurable Properties',
-                configure: 'Configure Widget',
-            },
-        });
-        AXTranslator.load('fa', {
-            'widget-board': {
-                'configurable-props': 'ویژگی های قابل تنظیم',
-                configure: 'پیکر بندی ابزارک',
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", 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: "20.3.3", ngImport: i0, type: AXWidgetBoardModule, imports: [CommonModule,
-            AXSearchBoxModule,
-            AXLoadingModule,
-            RouterModule,
-            AXProppertyEditorModule,
-            AXPageModule,
-            AXToolbarModule,
-            AXTranslatorModule,
-            AXLabelModule,
-            AXTextAreaModule,
-            AXFieldsetModule,
-            AXTextBoxModule,
-            AXFormGroupModule,
-            AXTabStripModule,
-            AXCheckBoxModule,
-            AXMenuModule,
-            AXTranslatorModule,
-            AXValidationModule,
-            RouterModule.forChild([
-                {
-                    component: AXWidgetSizePropertyEditorComponent,
-                    path: 'ax/editors/widget-size',
-                },
-            ]), AXProppertyEditorModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetBoardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        AXSearchBoxModule,
-                        AXLoadingModule,
-                        RouterModule,
-                        AXProppertyEditorModule,
-                        AXPageModule,
-                        AXToolbarModule,
-                        AXTranslatorModule,
-                        AXLabelModule,
-                        AXTextAreaModule,
-                        AXFieldsetModule,
-                        AXTextBoxModule,
-                        AXFormGroupModule,
-                        AXTabStripModule,
-                        AXCheckBoxModule,
-                        AXMenuModule,
-                        AXTranslatorModule,
-                        AXValidationModule,
-                        RouterModule.forChild([
-                            {
-                                component: AXWidgetSizePropertyEditorComponent,
-                                path: 'ax/editors/widget-size',
-                            },
-                        ]),
-                    ],
-                    exports: [AXWidgetBoardComponent, AXProppertyEditorModule],
-                    declarations: [
-                        AXWidgetBoardComponent,
-                        AXWidgetHostComponent,
-                        AXWidgetConfigComponent,
-                        AXWidgetSaveComponent,
-                    ],
-                    providers: [],
-                    schemas: [NO_ERRORS_SCHEMA],
-                }]
-        }], ctorParameters: () => [] });
-
-class AXWidgetSizePropertyEditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorModule, declarations: [AXWidgetSizePropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule], exports: [AXWidgetSizePropertyEditorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorModule, imports: [CommonModule, FormsModule, AXNumberBoxModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXWidgetSizePropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXWidgetSizePropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXNumberBoxModule],
-                    exports: [AXWidgetSizePropertyEditorComponent],
-                    providers: [],
-                    schemas: [NO_ERRORS_SCHEMA],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { __decorate, __metadata } from "tslib";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Injectable, Input, NO_ERRORS_SCHEMA, NgModule, Output, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation } from "@angular/core";
+import * as i1$1 from "@acorex/components";
+import { AXBasePopupPageComponent, AXCheckBoxModule, AXFieldsetModule, AXFormGroupModule, AXLabelModule, AXLoadingModule, AXMenuModule, AXNumberBoxModule, AXPageModule, AXPropertyDecorators, AXProperyEditorComponent, AXProppertyEditorModule, AXSearchBoxModule, AXTabStripModule, AXTextAreaModule, AXTextBoxModule, AXToolbarModule, AXValidationFormComponent, AXValidationModule, propertyEditor } from "@acorex/components";
+import * as i2 from "@acorex/core";
+import { AXClientRec, AXHtmlUtil, AXObjectUtil, AXTranslator, AXTranslatorModule } from "@acorex/core";
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { CommonModule } from "@angular/common";
+import * as i1 from "@angular/router";
+import { RouterModule } from "@angular/router";
+import { FormsModule } from "@angular/forms";
+var AXWidgetComponent = class AXWidgetComponent {
+	uid = AXHtmlUtil.getUID();
+	provideValue;
+	onBusyChanged = new EventEmitter();
+	_isBusy = true;
+	get isBusy() {
+		return this._isBusy;
+	}
+	set isBusy(v) {
+		if (v !== this._isBusy) {
+			const eventData = {
+				component: this,
+				oldValue: this._isBusy,
+				value: v
+			};
+			this._isBusy = v;
+			this.onBusyChanged.emit(eventData);
+		}
+	}
+	widgetSize;
+	refreshRate = [{
+		id: 3e5,
+		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());
+	}
+	stopRefreshTimer() {
+		window.clearInterval(this.intervalId);
+	}
+	restartRefreshTimer() {
+		this.stopRefreshTimer();
+		this.startRefreshTimer();
+	}
+	ngOnDestroy() {
+		this.stopRefreshTimer();
+	}
+	redraw() {}
+	refresh() {
+		this.restartRefreshTimer();
+	}
+	onConfiguredChanged = new EventEmitter();
+	get isConfigured() {
+		return true;
+	}
+	setValue(name, value) {
+		this[name] = value;
+		this.onConfiguredChanged.emit();
+	}
+	getValue(name) {
+		const val = this[name];
+		const config = this["__meta__"].config;
+		if (config.props[name]?.runtime && this.provideValue) {
+			const res = this.provideValue({
+				name,
+				value: val,
+				uniqueName: config.uniqueName,
+				options: config.options
+			});
+			if (this.provideValue instanceof Promise) return res;
+			else return Promise.resolve(res);
+		}
+		return Promise.resolve(val);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetComponent
+	});
+};
+__decorate([propertyEditor({
+	editorClass: "ax/editors/widget-size",
+	title: "common.size",
+	visible: false,
+	order: -99
+}), __metadata("design:type", Array)], AXWidgetComponent.prototype, "widgetSize", void 0);
+__decorate([propertyEditor({
+	editorClass: "ax/editors/select",
+	title: "common.refresh-rate",
+	visible: true,
+	order: -98,
+	editorOptions: {
+		items: () => {
+			return [
+				"بدون مقدار",
+				1,
+				2,
+				3,
+				5,
+				10,
+				20,
+				30,
+				60
+			].map((c) => ({
+				id: typeof c === "number" ? 6e4 * c : 0,
+				text: typeof c === "number" ? AXTranslator.get("dateTime.duration.format_minute").replace("{0}", c.toString()) : c
+			}));
+		},
+		allowNull: false,
+		allowSearch: false,
+		selectionDataMode: "value",
+		selectionMode: "single",
+		valueField: "id"
+	}
+}), __metadata("design:type", Object)], AXWidgetComponent.prototype, "refreshRate", void 0);
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AXWidgetComponent,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [],
+	propDecorators: {
+		widgetSize: [],
+		refreshRate: []
+	}
+});
+var AXWidgetConfigComponent = class AXWidgetConfigComponent extends AXBasePopupPageComponent {
+	cdr;
+	form;
+	constructor(cdr) {
+		super();
+		this.cdr = cdr;
+	}
+	widget;
+	props = [];
+	displayProps = [];
+	changes = [];
+	context = {};
+	getFooterButtons() {
+		return [{
+			name: "okay",
+			submitBehavior: true,
+			text: AXTranslator.get("common.confirm"),
+			style: "success"
+		}, {
+			name: "cancel",
+			cancelBehavior: true,
+			text: AXTranslator.get("common.cancel"),
+			style: "danger blank"
+		}];
+	}
+	onFooterButtonClick(e) {
+		if (e.name === "cancel") this.close();
+		if (e.name === "okay") this.form.validate().then((c) => {
+			if (c.result) this.close(this.changes);
+		});
+	}
+	handleValueChange(e) {
+		const prop = this.changes.find((c) => c.property.name === e.property.name);
+		if (prop) prop.value = e.value;
+		else this.changes.push({
+			property: e.property,
+			value: e.value
+		});
+		this.updateContext();
+	}
+	ngOnInit() {
+		this.displayProps = this.props.filter((c) => c.property.visible !== false).sort((a, b) => a.property.order - b.property.order);
+		this.updateContext();
+	}
+	updateContext() {
+		const ctx = {};
+		this.props.forEach((p) => {
+			ctx[p.property.name] = p.value;
+		});
+		this.changes.forEach((p) => {
+			ctx[p.property.name] = p.value;
+		});
+		this.context = ctx;
+	}
+	identify(index, item) {
+		return item.property.name;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetConfigComponent,
+		deps: [{ token: i0.ChangeDetectorRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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$1.AXPropertyEditorRendererDirective,
+				selector: "[ax-property-editor-renderer]",
+				inputs: [
+					"property",
+					"validationForm",
+					"context",
+					"host",
+					"groupId"
+				],
+				outputs: ["onValueChange"]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXPageContentComponent,
+				selector: "ax-page-content"
+			},
+			{
+				kind: "component",
+				type: i1$1.AXPageComponent,
+				selector: "ax-page"
+			},
+			{
+				kind: "component",
+				type: i1$1.AXLabelComponent,
+				selector: "ax-label",
+				inputs: ["size"],
+				outputs: ["clickLabel"]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXValidationFormComponent,
+				selector: "ax-validation-form",
+				inputs: ["validateOn"],
+				outputs: ["onInit"]
+			},
+			{
+				kind: "pipe",
+				type: i2.AXTranslatorPipe,
+				name: "trans"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	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        @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]
+	}] }
+});
+var AXWidgetSaveComponent = class AXWidgetSaveComponent extends AXBasePopupPageComponent {
+	config;
+	props = [];
+	displayProps;
+	data;
+	getFooterButtons() {
+		return [{
+			name: "okay",
+			submitBehavior: true,
+			text: AXTranslator.get("common.confirm"),
+			style: "ax success"
+		}, {
+			name: "cancel",
+			cancelBehavior: true,
+			text: AXTranslator.get("common.cancel"),
+			style: "ax light"
+		}];
+	}
+	ngOnInit() {
+		const title = this.props.find((c) => c.property.name === "title" || c.property.name === "name")?.value || this.config.title;
+		const pp = {};
+		this.props?.forEach((c) => {
+			pp[c.property.name] = c.property;
+		});
+		this.data = {
+			component: this.config.component,
+			title,
+			uniqueName: `${this.config.uniqueName}-${AXHtmlUtil.getUID()}`,
+			options: AXObjectUtil.deepJSONClone(this.config.options),
+			props: AXObjectUtil.deepJSONClone(pp)
+		};
+		this.displayProps = this.props.filter((c) => c.property.visible !== false).sort((a, b) => a.property.order - b.property.order).map((c) => ({
+			name: c.property.name,
+			title: c.property.title,
+			allow: true
+		}));
+	}
+	onFooterButtonClick(e) {
+		if (e.name === "cancel") this.close();
+		if (e.name === "okay") {
+			this.props.forEach((p) => {
+				const pp = this.displayProps.find((c) => c.name === p.property.name);
+				if (pp == null || !pp.allow) {
+					let ppp = this.data.props[p.property.name];
+					if (ppp) ppp.visible = false;
+					else ppp = { visible: false };
+				}
+			});
+			this.close(this.data);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetSaveComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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$1.AXPageContentComponent,
+				selector: "ax-page-content"
+			},
+			{
+				kind: "component",
+				type: i1$1.AXPageComponent,
+				selector: "ax-page"
+			},
+			{
+				kind: "component",
+				type: i1$1.AXLabelComponent,
+				selector: "ax-label",
+				inputs: ["size"],
+				outputs: ["clickLabel"]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXTextAreaComponent,
+				selector: "ax-text-area",
+				inputs: [
+					"rows",
+					"cols",
+					"maxLength"
+				],
+				outputs: ["onBlur", "onFocus"]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXFieldsetComponent,
+				selector: "ax-fieldset",
+				inputs: [
+					"size",
+					"caption",
+					"allowCollapse"
+				]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXTextBoxComponent,
+				selector: "ax-text-box",
+				inputs: [
+					"mask",
+					"showMask",
+					"type",
+					"maxLength",
+					"maskGuid",
+					"maskPlaceholder",
+					"maskKeepCharPositions",
+					"leadZeroDateTime"
+				]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXFormGroupComponent,
+				selector: "ax-form-group",
+				inputs: ["size", "labelMode"],
+				outputs: ["labelModeChange"]
+			},
+			{
+				kind: "component",
+				type: i1$1.AXCheckBoxComponent,
+				selector: "ax-check-box",
+				inputs: [
+					"readonly",
+					"disabled",
+					"size",
+					"label",
+					"tabIndex",
+					"indeterminate",
+					"value"
+				],
+				outputs: [
+					"onValueChanged",
+					"valueChange",
+					"onClick"
+				]
+			},
+			{
+				kind: "pipe",
+				type: i2.AXTranslatorPipe,
+				name: "trans"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	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          @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>"
+		}]
+	}]
+});
+var AXWidgetHostComponent = class AXWidgetHostComponent {
+	ref;
+	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;
+	_loadingId;
+	_isLoading = false;
+	get isLoading() {
+		return this._isLoading;
+	}
+	set isLoading(v) {
+		this._isLoading = v;
+		if (this._loadingId && !v) {
+			this.loadingService.hide(this._loadingId);
+			this._loadingId = null;
+		}
+		if (v) {}
+	}
+	get isConfigured() {
+		return this._widget?.isConfigured || false;
+	}
+	constructor(ref, rendererService, cdr, popup, loadingService) {
+		this.ref = ref;
+		this.rendererService = rendererService;
+		this.cdr = cdr;
+		this.popup = popup;
+		this.loadingService = loadingService;
+	}
+	ngOnInit() {}
+	async ngAfterViewInit() {
+		let component;
+		if (typeof this.config.component === "string") component = (await this.rendererService.findLoadedComponentByRoute(this.config.component, 20))?.component;
+		else if (typeof this.config.component === "function") component = this.config.component;
+		if (component == null) {
+			console.error(`Invalid Widget Component!`, this.config);
+			this.onRemove.emit(this);
+			return;
+		}
+		this.componentRef = this.vc.createComponent(component);
+		this._widget = this.componentRef.instance;
+		this._widget.provideValue = this.provideValue;
+		if (this._widget.onBusyChanged) this._widget.onBusyChanged.subscribe((d) => {
+			if (!this._widget.widgetSize) this._widget.setValue("widgetSize", [this.sizeX, this.sizeY]);
+			else this.setSizeFromOptions();
+			this.cdr.detectChanges();
+		});
+		if (this._widget.onConfiguredChanged) this._widget.onConfiguredChanged.subscribe(() => {
+			this.setSizeFromOptions();
+		});
+		if (this.config.options) Object.assign(this._widget, this.config.options);
+		this._hasProps = AXPropertyDecorators.getProperties(this._widget).length > 0;
+		this.isLoading = false;
+		this.config["__meta__"].instance = this;
+		this._widget["__meta__"] = {};
+		this._widget["__meta__"].config = this.config;
+		this.configMenuItem[0].items.push({
+			name: "refresh",
+			icon: "far fa-undo",
+			text: AXTranslator.get("common.refresh"),
+			onClick: () => {
+				this?.widget?.refresh();
+			}
+		});
+		if (this._hasProps) this.configMenuItem[0].items.push({
+			name: "configs",
+			icon: "far fa-cogs",
+			text: AXTranslator.get("common.configs"),
+			onClick: () => {
+				this.openConfigDialog();
+			}
+		});
+		this.configMenuItem[0].items.push({
+			name: "save",
+			icon: "far fa-save",
+			text: AXTranslator.get("common.save-as"),
+			onClick: () => {
+				this.openSaveDialog();
+			}
+		});
+		this.configMenuItem[0].items.push({
+			name: "remove",
+			icon: "far fa-times",
+			style: "ax danger blank",
+			text: AXTranslator.get("common.remove"),
+			onClick: () => {
+				this.onRemove.emit(this);
+			}
+		});
+		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;
+			const oldSizeY = this.sizeY;
+			if (c && Array.isArray(c) && (oldSizeX !== c[0] || oldSizeY !== c[1])) {
+				this.config.sizeX = this.sizeX = c[0];
+				this.config.sizeY = this.sizeY = c[1];
+				this.onResized.emit({
+					component: this._widget,
+					config: this.config
+				});
+			}
+			this.cdr.detectChanges();
+		});
+	}
+	remove(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!this.readonly) this.onRemove.emit(this);
+		return false;
+	}
+	handleConfig(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!this.readonly) this.openConfigDialog();
+		return false;
+	}
+	openConfigDialog() {
+		const ppp = this.getMergedProps();
+		this.popup.open(AXWidgetConfigComponent, {
+			title: AXTranslator.get("common.configs"),
+			size: "sm",
+			data: {
+				props: ppp.map((c) => ({
+					property: c.options,
+					value: this._widget[c.options.name]
+				})),
+				widget: this.widget
+			}
+		}).then((c) => {
+			if (c.data) {
+				if (!this.config.options) this.config.options = {};
+				c.data.forEach((p) => {
+					this._widget.setValue(p.property.name, p.value);
+					this.config.options[p.property.name] = p.value;
+				});
+				this.emitConfigChanged();
+				this._widget.redraw();
+				this.cdr.detectChanges();
+			}
+		});
+	}
+	openSaveDialog() {
+		const ppp = this.getMergedProps();
+		this.popup.open(AXWidgetSaveComponent, {
+			title: AXTranslator.get("common.save-as"),
+			size: "sm",
+			data: {
+				config: this.config,
+				props: ppp.map((c) => ({
+					property: c.options,
+					value: this._widget[c.options.name]
+				}))
+			}
+		}).then((c) => {
+			if (c.data) this.onSave.emit({
+				component: this._widget,
+				data: c.data
+			});
+		});
+	}
+	handleOptionClick(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.openConfigDialog();
+		return false;
+	}
+	ngOnDestroy() {
+		this.vc.clear();
+		if (this.componentRef) this.componentRef.destroy();
+	}
+	getMergedProps() {
+		const ppp = AXObjectUtil.deepCopy(AXPropertyDecorators.getProperties(this._widget));
+		for (const key in this.config.props) if (Object.prototype.hasOwnProperty.call(this.config.props, key)) {
+			const newP = this.config.props[key];
+			const existPropDec = ppp.find((p) => p.property === key);
+			if (existPropDec) Object.assign(existPropDec.options, newP);
+		}
+		return ppp;
+	}
+	emitConfigChanged() {
+		this.onConfigChanged.emit({
+			component: this._widget,
+			config: this.config
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetHostComponent,
+		deps: [
+			{ token: i0.ElementRef },
+			{ token: i2.AXRenderService },
+			{ token: i0.ChangeDetectorRef },
+			{ token: i1$1.AXPopupService },
+			{ token: i1$1.AXLoadingService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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$1.AXMenuComponent,
+			selector: "ax-menu",
+			inputs: [
+				"menuTemplate",
+				"rtl",
+				"size",
+				"selection",
+				"mode",
+				"target",
+				"floatAlignment",
+				"floatPlacemnet",
+				"direction",
+				"items"
+			],
+			outputs: ["onItemClick"]
+		}, {
+			kind: "pipe",
+			type: i2.AXTranslatorPipe,
+			name: "trans"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	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  @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: i2.AXRenderService },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i1$1.AXPopupService },
+		{ type: i1$1.AXLoadingService }
+	],
+	propDecorators: {
+		provideValue: [{ type: Input }],
+		onRemove: [{ type: Output }],
+		onConfigChanged: [{ type: Output }],
+		onResized: [{ type: Output }],
+		onSave: [{ type: Output }],
+		config: [{ type: Input }],
+		vc: [{
+			type: ViewChild,
+			args: ["vc", { read: ViewContainerRef }]
+		}],
+		readonly: [{ type: Input }],
+		sizeX: [{
+			type: HostBinding,
+			args: ["attr.data-size-x"]
+		}, { type: Input }],
+		sizeY: [{
+			type: HostBinding,
+			args: ["attr.data-size-y"]
+		}, { type: Input }],
+		col: [{
+			type: HostBinding,
+			args: ["attr.data-col"]
+		}, { type: Input }],
+		row: [{
+			type: HostBinding,
+			args: ["attr.data-row"]
+		}, { type: Input }]
+	}
+});
+var AXWidgetBoardComponent = 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;
+	}
+	ngOnInit() {
+		if (this.rtl == null) this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue("direction") === "rtl";
+		this.saveSubject.pipe(debounceTime(750)).subscribe((value) => {
+			this.emitConfigChanged(value);
+		});
+	}
+	ngOnDestroy() {
+		this.saveSubject?.unsubscribe();
+	}
+	ngAfterViewInit() {
+		this.zone.runOutsideAngular((c) => {
+			const style = document.createElement("style");
+			style.type = "text/css";
+			this.ref.nativeElement.appendChild(style);
+			for (let i = 1; i <= 50; i++) {
+				style.innerHTML += `[${this.DATA_COL}="${i}"] {  ${this.rtl ? "right" : "left"}: ${(i - 1) * (this.tileSize + this.gapSize)}px; }`;
+				style.innerHTML += `[${this.DATA_ROW}="${i}"] {  top: ${(i - 1) * (this.tileSize + this.gapSize)}px; }`;
+				style.innerHTML += `[${this.DATA_SIZE_X}="${i}"] {  width:  ${i * this.tileSize + (i - 1) * this.gapSize}px; }`;
+				style.innerHTML += `[${this.DATA_SIZE_Y}="${i}"] {  height: ${i * this.tileSize + (i - 1) * this.gapSize}px; }`;
+			}
+		});
+	}
+	calcGridSize() {
+		this.zone.runOutsideAngular(() => {
+			const width = Math.max(...this.widgets.map((c) => c.col + c.sizeX - 1)) * (this.tileSize + this.gapSize);
+			const height = Math.max(...this.widgets.map((c) => c.row + c.sizeY - 1)) * (this.tileSize + this.gapSize);
+			this.container.nativeElement.style.width = width + "px";
+			this.container.nativeElement.style.height = height + "px";
+		});
+	}
+	toggleEdit() {
+		this._isInEditing ? this.finishEdit() : this.startEdit();
+	}
+	dragStart(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.zone.runOutsideAngular(() => {
+			if (this._isInEditing && e.which === 1) {
+				this.dragItem = e.currentTarget;
+				this.dragItem.setAttribute("data-x-offset", (this.dragItem.offsetLeft - e.clientX).toString());
+				this.dragItem.setAttribute("data-y-offset", (this.dragItem.offsetTop - e.clientY).toString());
+				this.dragItem.classList.add("widget-dragging");
+				this.dragItem.classList.remove("animate__animated", "animate__pulse");
+			}
+		});
+		return false;
+	}
+	removePositionData() {
+		this.zone.runOutsideAngular(() => {
+			if (this.dragItem && this._isInEditing && this.dragItem.getAttribute(this.DATA_OLD_COL) == null) {
+				this.dragItem.setAttribute(this.DATA_OLD_COL, this.dragItem.getAttribute(this.DATA_COL));
+				this.dragItem.setAttribute(this.DATA_OLD_ROW, this.dragItem.getAttribute(this.DATA_ROW));
+				this.dragItem.removeAttribute(this.DATA_COL);
+				this.dragItem.removeAttribute(this.DATA_ROW);
+			}
+		});
+	}
+	resetPositionData() {
+		this.zone.runOutsideAngular(() => {
+			if (this.dragItem && this._isInEditing) this.setPosition(this.dragItem, this.dragItem.getAttribute(this.DATA_OLD_COL), this.dragItem.getAttribute(this.DATA_OLD_ROW));
+		});
+	}
+	setPosition(element, col, row) {
+		this.zone.runOutsideAngular(() => {
+			element.setAttribute(this.DATA_COL, col);
+			element.setAttribute(this.DATA_ROW, row);
+			element.removeAttribute(this.DATA_OLD_COL);
+			element.removeAttribute(this.DATA_OLD_ROW);
+			element.style.removeProperty("top");
+			element.style.removeProperty("left");
+			const widget = this.widgets.find((c) => c["__meta__"].instance.element === element);
+			widget.col = Number(col);
+			widget.row = Number(row);
+		});
+	}
+	drag(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.zone.runOutsideAngular(() => {
+			if (this.dragItem && this._isInEditing) {
+				this.isDragging = true;
+				this.addPlaceholder();
+				const xOffset = Number(this.dragItem.getAttribute("data-x-offset"));
+				const yOffset = Number(this.dragItem.getAttribute("data-y-offset"));
+				this.dragItem.style.left = e.clientX + xOffset + "px";
+				this.dragItem.style.top = e.clientY + yOffset + "px";
+				this.detectBestPlacement();
+				this.removePositionData();
+			}
+		});
+		return false;
+	}
+	dragEnd(e) {
+		this.zone.runOutsideAngular(() => {
+			if (this.dragItem && this._isInEditing && this.isDragging) {
+				this.dragItem.classList.remove("widget-dragging");
+				this.dragItem.classList.add("animate__animated", "animate__pulse");
+				const p = this.container.nativeElement.querySelector(".widget-blank-placeholder");
+				if (this.newWidget) {
+					const w = {
+						uniqueName: this.newWidget.uniqueName,
+						component: this.newWidget.component,
+						title: this.newWidget.title,
+						options: this.newWidget.options,
+						sizeX: this.newWidget.sizeX,
+						sizeY: this.newWidget.sizeY,
+						col: Number(p.getAttribute(this.DATA_COL)),
+						row: Number(p.getAttribute(this.DATA_ROW))
+					};
+					this.widgets.push(w);
+					this.newWidget = null;
+					this.container.nativeElement.removeChild(this.dragItem);
+					this.zone.run(() => {
+						this.cdr.detectChanges();
+						this.calcGridSize();
+						setTimeout(() => {
+							w["__meta__"].instance.element.addEventListener("mousedown", this.dragStart.bind(this), false);
+						}, 1e3);
+					});
+				} else if (p) this.setPosition(this.dragItem, p.getAttribute(this.DATA_COL), p.getAttribute(this.DATA_ROW));
+				else this.setPosition(this.dragItem, this.dragItem.getAttribute(this.DATA_OLD_COL), this.dragItem.getAttribute(this.DATA_OLD_ROW));
+				this.removePlaceholder();
+				this.dragItem = null;
+				this.calcGridSize();
+				this.saveSubject.next("config");
+			}
+			this.isDragging = false;
+		});
+	}
+	detectFirstEmptySlot(w) {
+		const xTile = Math.floor(this.ref.nativeElement.parentElement.offsetWidth / this.tileSize);
+		for (let j = 1; j <= 100; j++) for (let i = 1; i <= xTile - w.sizeX; i++) {
+			const rec = new AXClientRec({
+				left: i,
+				top: j,
+				width: w.sizeX,
+				height: w.sizeY
+			});
+			if (this.widgets.filter((c) => c !== w).find((c) => rec.intersect({
+				left: c.col,
+				top: c.row,
+				width: c.sizeX,
+				height: c.sizeY
+			})) == null) {
+				w.col = i;
+				w.row = j;
+				return;
+			}
+		}
+	}
+	detectBestPlacement() {
+		this.zone.runOutsideAngular(() => {
+			const p = this.container.nativeElement.querySelector(".widget-blank-placeholder");
+			let col = Math.ceil(this.dragItem.offsetLeft / this.tileSize);
+			if (this.rtl) col = Math.ceil((this.container.nativeElement.clientWidth - (this.dragItem.offsetLeft + this.dragItem.clientWidth)) / this.tileSize);
+			let row = Math.ceil(this.dragItem.offsetTop / this.tileSize);
+			if (col < 1) col = 1;
+			if (row < 1) row = 1;
+			const widgets = Array.from(this.ref.nativeElement.querySelectorAll(".widget-host")).map((c) => c);
+			p.setAttribute(this.DATA_COL, col.toString());
+			p.setAttribute(this.DATA_ROW, row.toString());
+			if (widgets.filter((c) => c !== this.dragItem).some((c) => AXHtmlUtil.collision(c, this.dragItem))) this.removePlaceholder();
+		});
+	}
+	addPlaceholder() {
+		this.zone.runOutsideAngular(() => {
+			this.removePlaceholder();
+			if (this.dragItem) {
+				const p = document.createElement("div");
+				p.classList.add("widget-blank-placeholder");
+				p.setAttribute(this.DATA_COL, this.dragItem.getAttribute(this.DATA_COL));
+				p.setAttribute(this.DATA_ROW, this.dragItem.getAttribute(this.DATA_ROW));
+				p.setAttribute(this.DATA_SIZE_X, this.dragItem.getAttribute(this.DATA_SIZE_X));
+				p.setAttribute(this.DATA_SIZE_Y, this.dragItem.getAttribute(this.DATA_SIZE_Y));
+				this.container.nativeElement.appendChild(p);
+			}
+		});
+	}
+	removePlaceholder() {
+		this.container.nativeElement.querySelector(".widget-blank-placeholder")?.remove();
+	}
+	startEdit() {
+		this._isInEditing = true;
+		this.calcGridSize();
+		this.ref.nativeElement.classList.add("grid-background");
+		const bg = this.ref.nativeElement;
+		bg.style.setProperty("background-position", `${this.rtl ? "right" : "left"} top`);
+		const pattern = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.tileSize + this.gapSize}" height="${this.tileSize + this.gapSize}"> <rect style="fill: %23dadada" x="${this.rtl ? this.gapSize : 0}" width="${this.tileSize}" height="${this.tileSize}" y="0"></rect></svg>')`;
+		bg.style.setProperty("background-image", pattern);
+		Array.from(this.ref.nativeElement.querySelectorAll(".widget-host")).forEach((w) => {
+			w.addEventListener("mousedown", this.dragStart.bind(this), false);
+		});
+		this.ref.nativeElement.addEventListener("mousemove", this.drag.bind(this), false);
+		this.ref.nativeElement.addEventListener("mouseup", this.dragEnd.bind(this), false);
+	}
+	finishEdit() {
+		this.ref.nativeElement.classList.remove("grid-background");
+		this.ref.nativeElement.style.removeProperty("background-image");
+		this._isInEditing = false;
+		Array.from(this.ref.nativeElement.querySelectorAll(".widget-host")).forEach((w) => {
+			w.removeEventListener("mousedown", this.dragStart.bind(this), false);
+		});
+		this.ref.nativeElement.removeEventListener("mousemove", this.drag.bind(this), false);
+		this.ref.nativeElement.removeEventListener("mouseup", this.dragEnd.bind(this), false);
+		this.saveSubject.next("config");
+	}
+	addWidget(widget) {
+		this.zone.runOutsideAngular(() => {
+			this.newWidget = {
+				uniqueName: widget.uniqueName,
+				component: widget.component,
+				title: widget.title,
+				col: 1,
+				row: 1,
+				sizeX: widget.sizeX,
+				sizeY: widget.sizeY,
+				options: widget.options,
+				props: widget.props
+			};
+			this.detectFirstEmptySlot(this.newWidget);
+			const w = {
+				uniqueName: this.newWidget.uniqueName,
+				component: this.newWidget.component,
+				title: this.newWidget.title,
+				options: this.newWidget.options,
+				props: this.newWidget.props,
+				sizeX: this.newWidget.sizeX,
+				sizeY: this.newWidget.sizeY,
+				col: this.newWidget.col,
+				row: this.newWidget.row
+			};
+			this.widgets.push(w);
+			this.newWidget = null;
+			this.zone.run(() => {
+				this.cdr.detectChanges();
+				this.calcGridSize();
+				this.emitConfigChanged("add");
+				setTimeout(() => {
+					w["__meta__"].instance.element.addEventListener("mousedown", this.dragStart.bind(this), false);
+				}, 1e3);
+			});
+		});
+	}
+	handleOnRemove(w) {
+		w.element.classList.add("animate__animated", "animate__zoomOut");
+		w.element.addEventListener("animationend", () => {
+			this.widgets = this.widgets.filter((c) => c.__meta__.id !== w.config.__meta__.id);
+			this.cdr.detectChanges();
+			this.calcGridSize();
+			this.emitConfigChanged("remove");
+		});
+	}
+	handleOnSave(e) {
+		this.onWidgetSave.emit(e);
+	}
+	trackByFn(index, item) {
+		if (!item["__meta__"]?.id) {
+			item["__meta__"] = {};
+			item["__meta__"].id = AXHtmlUtil.getUID();
+		}
+		return item["__meta__"]?.id;
+	}
+	load(widgets) {
+		this.clear();
+		return new Promise((resolve, reject) => {
+			if (widgets) {
+				const loadedWidgets = [];
+				if (typeof widgets === "string") try {
+					loadedWidgets.push(...JSON.parse(widgets));
+					this.emitConfigChanged("load");
+				} catch (error) {
+					reject("Invalid widget json data!");
+				}
+				else {
+					loadedWidgets.push(...widgets);
+					this.emitConfigChanged("load");
+				}
+				let intervalId = -1;
+				const loadFunc = () => {
+					if (this.galleryItems && this.galleryItems.length > 0) {
+						loadedWidgets.forEach((w) => {
+							const gitem = this.galleryItems.find((c) => c.uniqueName === w.uniqueName);
+							if (gitem) {
+								w.component = gitem.component;
+								if (gitem.props) w.props = JSON.parse(JSON.stringify(gitem.props));
+							}
+						});
+						this.widgets.push(...loadedWidgets);
+						this.emitConfigChanged("load");
+						window.clearInterval(intervalId);
+						this.cdr.detectChanges();
+						resolve();
+					}
+				};
+				intervalId = window.setInterval(loadFunc, 200);
+			} else resolve();
+		});
+	}
+	clear() {
+		if (this.widgets.length) {
+			this.widgets = [];
+			this.cdr.detectChanges();
+			this.saveSubject.next("clear");
+		}
+	}
+	save() {
+		const obj = this.widgets.map((c) => ({
+			uniqueName: c.uniqueName,
+			component: c.component,
+			title: c.title,
+			sizeX: c.sizeX,
+			sizeY: c.sizeY,
+			col: c.col,
+			row: c.row,
+			options: c.options,
+			props: c.props
+		}));
+		return Promise.resolve(JSON.stringify(obj));
+	}
+	refresh() {
+		this.widgetHosts.forEach((host) => {
+			host.widget.refresh();
+		});
+	}
+	handleOnConfigChanged(e) {
+		this.cdr.detectChanges();
+		this.saveSubject.next("config");
+	}
+	handleOnResizedChanged(e) {
+		this.detectFirstEmptySlot(e.config);
+		this.cdr.detectChanges();
+		this.saveSubject.next("config");
+	}
+	emitConfigChanged(mode) {
+		this.onConfigChanged.emit({
+			component: this,
+			mode
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetBoardComponent,
+		deps: [
+			{ token: i0.ElementRef },
+			{ token: i0.NgZone },
+			{ token: i0.ChangeDetectorRef }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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}.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 .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;user-select:none}.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: "22.2.0",
+	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  @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}.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 .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;user-select:none}.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"]
+		}],
+		widgetHosts: [{
+			type: ViewChildren,
+			args: [AXWidgetHostComponent]
+		}],
+		galleryItems: [{ type: Input }],
+		tileSize: [{ type: Input }],
+		gapSize: [{ type: Input }],
+		readonly: [{ type: Input }],
+		provideValue: [{ type: Input }],
+		onConfigChanged: [{ type: Output }],
+		onWidgetSave: [{ type: Output }]
+	}
+});
+var AXWidgetSizePropertyEditorComponent = class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent {
+	cdr;
+	sizeX;
+	sizeY;
+	minX = 1;
+	maxX = 20;
+	minY = 1;
+	maxY = 20;
+	constructor(cdr) {
+		super(cdr);
+		this.cdr = cdr;
+	}
+	ngOnInit() {
+		if (Array.isArray(this.value)) {
+			this.sizeX = this.value[0];
+			this.sizeY = this.value[1];
+		} else {
+			this.sizeX = 2;
+			this.sizeY = 2;
+		}
+	}
+	handleMinValueChange(e) {
+		this.sizeX = e.value;
+		if (this.sizeY > 0) super.handleValueChange([this.sizeX, this.sizeY]);
+	}
+	handleMaxValueChange(e) {
+		this.sizeY = e.value;
+		if (this.sizeX > 0) super.handleValueChange([this.sizeX, this.sizeY]);
+	}
+	ngAfterViewInit() {
+		this.onRenderCompleted.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetSizePropertyEditorComponent,
+		deps: [{ token: i0.ChangeDetectorRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		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$1.AXNumberBoxComponent,
+			selector: "ax-number-box",
+			inputs: [
+				"min",
+				"max",
+				"showSeparator",
+				"showCurrency",
+				"showCounter",
+				"scrollWeel",
+				"showDoubleCounter",
+				"maxLength",
+				"intStep",
+				"decimalNumber",
+				"customStep"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.Eager
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AXWidgetSizePropertyEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			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: () => [{ type: i0.ChangeDetectorRef }]
+});
+var AXWidgetBoardModule = class AXWidgetBoardModule {
+	constructor() {
+		AXTranslator.load("en", { "widget-board": {
+			"configurable-props": "Configurable Properties",
+			configure: "Configure Widget"
+		} });
+		AXTranslator.load("fa", { "widget-board": {
+			"configurable-props": "ویژگی های قابل تنظیم",
+			configure: "پیکر بندی ابزارک"
+		} });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetBoardModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		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.RouterModule
+		],
+		exports: [AXWidgetBoardComponent, AXProppertyEditorModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetBoardModule,
+		imports: [
+			CommonModule,
+			AXSearchBoxModule,
+			AXLoadingModule,
+			RouterModule,
+			AXProppertyEditorModule,
+			AXPageModule,
+			AXToolbarModule,
+			AXTranslatorModule,
+			AXLabelModule,
+			AXTextAreaModule,
+			AXFieldsetModule,
+			AXTextBoxModule,
+			AXFormGroupModule,
+			AXTabStripModule,
+			AXCheckBoxModule,
+			AXMenuModule,
+			AXTranslatorModule,
+			AXValidationModule,
+			RouterModule.forChild([{
+				component: AXWidgetSizePropertyEditorComponent,
+				path: "ax/editors/widget-size"
+			}]),
+			AXProppertyEditorModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AXWidgetBoardModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				AXSearchBoxModule,
+				AXLoadingModule,
+				RouterModule,
+				AXProppertyEditorModule,
+				AXPageModule,
+				AXToolbarModule,
+				AXTranslatorModule,
+				AXLabelModule,
+				AXTextAreaModule,
+				AXFieldsetModule,
+				AXTextBoxModule,
+				AXFormGroupModule,
+				AXTabStripModule,
+				AXCheckBoxModule,
+				AXMenuModule,
+				AXTranslatorModule,
+				AXValidationModule,
+				RouterModule.forChild([{
+					component: AXWidgetSizePropertyEditorComponent,
+					path: "ax/editors/widget-size"
+				}])
+			],
+			exports: [AXWidgetBoardComponent, AXProppertyEditorModule],
+			declarations: [
+				AXWidgetBoardComponent,
+				AXWidgetHostComponent,
+				AXWidgetConfigComponent,
+				AXWidgetSaveComponent
+			],
+			providers: [],
+			schemas: [NO_ERRORS_SCHEMA]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AXWidgetSizePropertyEditorModule = class AXWidgetSizePropertyEditorModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetSizePropertyEditorModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetSizePropertyEditorModule,
+		declarations: [AXWidgetSizePropertyEditorComponent],
+		imports: [
+			CommonModule,
+			FormsModule,
+			AXNumberBoxModule
+		],
+		exports: [AXWidgetSizePropertyEditorComponent]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AXWidgetSizePropertyEditorModule,
+		imports: [
+			CommonModule,
+			FormsModule,
+			AXNumberBoxModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AXWidgetSizePropertyEditorModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [AXWidgetSizePropertyEditorComponent],
+			imports: [
+				CommonModule,
+				FormsModule,
+				AXNumberBoxModule
+			],
+			exports: [AXWidgetSizePropertyEditorComponent],
+			providers: [],
+			schemas: [NO_ERRORS_SCHEMA]
+		}]
+	}]
+});
 export { AXWidgetBoardComponent, AXWidgetBoardModule, AXWidgetComponent, AXWidgetHostComponent, AXWidgetSizePropertyEditorComponent, AXWidgetSizePropertyEditorModule };
-//# sourceMappingURL=acorex-layout.mjs.map
+
+//# sourceMappingURL=acorex-layout.mjs.map