@acorex/layout 5.1.6 → 5.1.8

package/fesm2015/acorex-layout.mjs

@@ -0,0 +1,1174 @@
+import { __decorate, __metadata, __awaiter } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Input, Output, HostBinding, ViewChildren, NgModule } from '@angular/core';
+import * as i1 from '@acorex/components';
+import { propertyEditor, AXBasePopupPageComponent, AXValidationFormComponent, AXPropertyDecorators, AXProperyEditorComponent, AXSearchBoxModule, AXLoadingModule, AXProppertyEditorModule, AXPageModule, AXToolbarModule, AXLabelModule, AXTextAreaModule, AXFieldsetModule, AXTextBoxModule, AXFormGroupModule, AXTabStripModule, AXCheckBoxModule, AXMenuModule, AXValidationModule, AXNumberBoxModule } from '@acorex/components';
+import * as i1$1 from '@acorex/core';
+import { AXHtmlUtil, AXTranslator, AXObjectUtil, AXClientRec, AXTranslatorModule } from '@acorex/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+// @dynamic
+// TODO: Add Angular decorator.
+class AXWidgetComponent {
+    constructor() {
+        this.uid = AXHtmlUtil.getUID();
+        this.onBusyChanged = new EventEmitter();
+        this._isBusy = true;
+        this.refreshRate = [{
+                id: 60000 * 5,
+                text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', '5')
+            }];
+        this.onConfiguredChanged = new EventEmitter();
+        this.onConfiguredChanged.subscribe(() => {
+            if (this.isConfigured === true && this.getRefreshRate()) {
+                this.restartRefreshTimer();
+            }
+            else {
+                this.stopRefreshTimer();
+            }
+        });
+    }
+    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);
+        }
+    }
+    // ???
+    getRefreshRate() {
+        return Array.isArray(this.refreshRate) && this.refreshRate.length ? this.refreshRate[0].id : this.refreshRate;
+    }
+    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();
+    }
+    get isConfigured() {
+        return true;
+    }
+    setValue(name, value) {
+        this[name] = value;
+        this.onConfiguredChanged.emit();
+    }
+    getValue(name) {
+        var _a;
+        const val = this[name];
+        const config = this['__meta__'].config;
+        const runtime = (_a = config.props[name]) === null || _a === void 0 ? void 0 : _a.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);
+    }
+}
+AXWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXWidgetComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetComponent });
+__decorate([
+    propertyEditor({
+        editorClass: 'ax/editors/widget-size',
+        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: 60000 * c,
+                    text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', c.toString())
+                }));
+            },
+            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: "13.3.11", ngImport: i0, type: AXWidgetComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; }, propDecorators: { widgetSize: [], refreshRate: [] } });
+
+class AXWidgetConfigComponent extends AXBasePopupPageComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.props = [];
+        this.displayProps = [];
+        this.changes = [];
+        this.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;
+    }
+}
+AXWidgetConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetConfigComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXWidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetConfigComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-page>\r\n    <ax-page-content>\r\n        <div class=\"container\">\r\n            <ax-validation-form #form>\r\n                <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\r\n                    <div class=\"col-12\">\r\n                        <ax-label>{{p.property.title | trans}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\"  [validationForm]=\"form\"\r\n                            (onValueChange)=\"handleValueChange($event)\">\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ax-page-content>\r\n</ax-page>", components: [{ type: i1.AXPageComponent, selector: "ax-page" }, { type: i1.AXPageContentComponent, selector: "ax-page-content" }, { type: i1.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetConfigComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-page>\r\n    <ax-page-content>\r\n        <div class=\"container\">\r\n            <ax-validation-form #form>\r\n                <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\r\n                    <div class=\"col-12\">\r\n                        <ax-label>{{p.property.title | trans}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\"  [validationForm]=\"form\"\r\n                            (onValueChange)=\"handleValueChange($event)\">\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ax-page-content>\r\n</ax-page>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
+                type: ViewChild,
+                args: [AXValidationFormComponent]
+            }] } });
+
+class AXWidgetSaveComponent extends AXBasePopupPageComponent {
+    constructor() {
+        super(...arguments);
+        this.props = [];
+    }
+    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() {
+        var _a;
+        const titleProp = this.props.find(c => c.property.name === 'title' || c.property.name === 'name');
+        const title = (titleProp === null || titleProp === void 0 ? void 0 : titleProp.value) || this.config.title;
+        const pp = {};
+        (_a = this.props) === null || _a === void 0 ? void 0 : _a.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);
+        }
+    }
+}
+AXWidgetSaveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSaveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AXWidgetSaveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetSaveComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ax-page>\r\n    <ax-page-content>\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.title' | trans}}</ax-label>\r\n                        <ax-text-box [(value)]=\"data.title\"></ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.description' | trans}}</ax-label>\r\n                        <ax-text-area [(value)]=\"data.description\"></ax-text-area>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <!-- <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.uniquename' | trans}}</ax-label>\r\n                        <ax-text-box></ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div> -->\r\n            <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\r\n                <div class=\"col-12\">\r\n                    <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\r\n                        <div class=\"row\" *ngFor=\"let prop of displayProps\">\r\n                            <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\r\n                                <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\r\n\r\n                                </ax-check-box>\r\n                            </div>\r\n                        </div>\r\n                    </ax-fieldset>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ax-page-content>\r\n</ax-page>", components: [{ type: i1.AXPageComponent, selector: "ax-page" }, { type: i1.AXPageContentComponent, selector: "ax-page-content" }, { type: i1.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: i1.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: i1.AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: i1.AXFieldsetComponent, selector: "ax-fieldset", inputs: ["size", "caption", "allowCollapse"] }, { type: i1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSaveComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-page>\r\n    <ax-page-content>\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.title' | trans}}</ax-label>\r\n                        <ax-text-box [(value)]=\"data.title\"></ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.description' | trans}}</ax-label>\r\n                        <ax-text-area [(value)]=\"data.description\"></ax-text-area>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <!-- <div class=\"row\">\r\n                <div class=\"col-12\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{'common.uniquename' | trans}}</ax-label>\r\n                        <ax-text-box></ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div> -->\r\n            <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\r\n                <div class=\"col-12\">\r\n                    <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\r\n                        <div class=\"row\" *ngFor=\"let prop of displayProps\">\r\n                            <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\r\n                                <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\r\n\r\n                                </ax-check-box>\r\n                            </div>\r\n                        </div>\r\n                    </ax-fieldset>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ax-page-content>\r\n</ax-page>" }]
+        }] });
+
+class AXWidgetHostComponent {
+    constructor(ref, componentFactoryResolver, rendererService, cdr, popup, loadingService) {
+        this.ref = ref;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.rendererService = rendererService;
+        this.cdr = cdr;
+        this.popup = popup;
+        this.loadingService = loadingService;
+        this._hasProps = false;
+        this._hasMenu = false;
+        this.configMenuItem = [
+            {
+                icon: 'far fa-ellipsis-h',
+                items: []
+            }
+        ];
+        this.onRemove = new EventEmitter();
+        this.onConfigChanged = new EventEmitter();
+        this.onResized = new EventEmitter();
+        this.onSave = new EventEmitter();
+        this.readonly = false;
+        this._isLoading = false;
+        this.sizeX = 1;
+        this.sizeY = 1;
+        this.col = 1;
+        this.row = 1;
+    }
+    get widget() {
+        return this._widget;
+    }
+    get element() {
+        return this.ref.nativeElement;
+    }
+    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() {
+        var _a;
+        return ((_a = this._widget) === null || _a === void 0 ? void 0 : _a.isConfigured) || false;
+    }
+    ngOnInit() {
+        this.isLoading = true;
+    }
+    ngAfterViewInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let component;
+            if (typeof this.config.component === 'string') {
+                const route = yield this.rendererService.findLoadedComponentByRoute(this.config.component, 20);
+                component = route === null || route === void 0 ? void 0 : 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: () => {
+                    var _a;
+                    (_a = this === null || this === void 0 ? void 0 : this.widget) === null || _a === void 0 ? void 0 : _a.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();
+        });
+    }
+    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
+        });
+    }
+}
+AXWidgetHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.AXRenderService }, { token: i0.ChangeDetectorRef }, { token: i1.AXPopupService }, { token: i1.AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
+AXWidgetHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: { provideValue: "provideValue", config: "config", readonly: "readonly", sizeX: "sizeX", sizeY: "sizeY", col: "col", row: "row" }, outputs: { onRemove: "onRemove", onConfigChanged: "onConfigChanged", onResized: "onResized", onSave: "onSave" }, host: { attributes: { "tabindex": "0" }, properties: { "attr.data-size-x": "this.sizeX", "attr.data-size-y": "this.sizeY", "attr.data-col": "this.col", "attr.data-row": "this.row" }, classAttribute: "ax widget-host" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class='widget-container'>\r\n    <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\r\n        <div class=\"widget-title\">{{config.title}}</div>\r\n        <div class=\"widget-config-box\">\r\n            <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\r\n            <div class=\"config-icon\" *ngIf=\"!readonly\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\r\n        </div>\r\n    </div>\r\n    <div class='widget-edit-overlay' >\r\n        <div class='widget-edit-menu'>\r\n            <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\r\n                (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\r\n                <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\r\n            </button>\r\n            <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\r\n                (mouseup)=\"$event.stopPropagation()\">\r\n                <i class=\"far fa-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"widget-options-menu\"  *ngIf=\"_hasMenu && !readonly\">\r\n        <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\r\n    </div>\r\n    <!-- <ax-loading-panel [visible]=\"isBusy\">\r\n    </ax-loading-panel> -->\r\n    <div class=\"widget-content\">\r\n        <ng-container #vc></ng-container>\r\n    </div>\r\n</div>", components: [{ type: i1.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-widget-host', host: { class: 'ax widget-host', tabindex: '0' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class='widget-container'>\r\n    <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\r\n        <div class=\"widget-title\">{{config.title}}</div>\r\n        <div class=\"widget-config-box\">\r\n            <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\r\n            <div class=\"config-icon\" *ngIf=\"!readonly\"><i class=\"fas fa-cogs fa-5x\" aria-hidden=\"true\"></i></div>\r\n        </div>\r\n    </div>\r\n    <div class='widget-edit-overlay' >\r\n        <div class='widget-edit-menu'>\r\n            <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\r\n                (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\r\n                <i class=\"far fa-cogs\" aria-hidden=\"true\"></i>\r\n            </button>\r\n            <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\r\n                (mouseup)=\"$event.stopPropagation()\">\r\n                <i class=\"far fa-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"widget-options-menu\"  *ngIf=\"_hasMenu && !readonly\">\r\n        <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\r\n    </div>\r\n    <!-- <ax-loading-panel [visible]=\"isBusy\">\r\n    </ax-loading-panel> -->\r\n    <div class=\"widget-content\">\r\n        <ng-container #vc></ng-container>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i1.AXPopupService }, { type: i1.AXLoadingService }]; }, propDecorators: { provideValue: [{
+                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 {
+    constructor(ref, zone, cdr) {
+        this.ref = ref;
+        this.zone = zone;
+        this.cdr = cdr;
+        this.widgets = [];
+        this.galleryItems = [];
+        this.tileSize = 80;
+        this.gapSize = 5;
+        this.readonly = false;
+        this.newWidget = null;
+        this._isInEditing = false;
+        this.isDragging = false;
+        this.DATA_COL = 'data-col';
+        this.DATA_ROW = 'data-row';
+        this.DATA_SIZE_X = 'data-size-x';
+        this.DATA_SIZE_Y = 'data-size-y';
+        this.DATA_OLD_COL = 'data-old-col';
+        this.DATA_OLD_ROW = 'data-old-row';
+        this.onConfigChanged = new EventEmitter();
+        this.onWidgetSave = new EventEmitter();
+    }
+    isInEditing() {
+        return this._isInEditing;
+    }
+    ngOnInit() {
+        if (this.rtl == null) {
+            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+        }
+    }
+    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.emitConfigChanged();
+            }
+            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 === null || p === void 0 ? void 0 : 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.emitConfigChanged();
+    }
+    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();
+                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();
+        });
+    }
+    handleOnSave(e) {
+        this.onWidgetSave.emit(e);
+    }
+    trackByFn(index, item) {
+        var _a, _b;
+        if (!((_a = item['__meta__']) === null || _a === void 0 ? void 0 : _a.id)) {
+            item['__meta__'] = {};
+            item['__meta__'].id = AXHtmlUtil.getUID();
+        }
+        return (_b = item['__meta__']) === null || _b === void 0 ? void 0 : _b.id;
+    }
+    load(widgets) {
+        this.clear();
+        return new Promise((resolve, reject) => {
+            if (widgets) {
+                const loadedWidgets = [];
+                if (typeof widgets === 'string') {
+                    try {
+                        loadedWidgets.push(...JSON.parse(widgets));
+                    }
+                    catch (error) {
+                        reject('Invalid widget json data!');
+                    }
+                }
+                else {
+                    loadedWidgets.push(...widgets);
+                }
+                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);
+                        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.emitConfigChanged();
+        }
+    }
+    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.emitConfigChanged();
+    }
+    handleOnResizedChanged(e) {
+        this.detectFirstEmptySlot(e.config);
+        this.cdr.detectChanges();
+        this.emitConfigChanged();
+    }
+    emitConfigChanged() {
+        if (!this.resizeChangeObserver) {
+            this.resizeChangeObserver = new Observable();
+            Observable.create(observer => {
+                this.resizeChangeObserver = observer;
+            })
+                .pipe(debounceTime(750))
+                .pipe(distinctUntilChanged())
+                .subscribe(c => {
+                this.onConfigChanged.emit({
+                    component: this
+                });
+            });
+        }
+        this.resizeChangeObserver.next(new Date());
+    }
+}
+AXWidgetBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXWidgetBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetBoardComponent, selector: "ax-widget-board", inputs: { galleryItems: "galleryItems", tileSize: "tileSize", gapSize: "gapSize", readonly: "readonly", provideValue: "provideValue" }, outputs: { onConfigChanged: "onConfigChanged", onWidgetSave: "onWidgetSave" }, host: { classAttribute: "ax widget-board" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "widgetHosts", predicate: AXWidgetHostComponent, descendants: true }], ngImport: i0, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\r\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\r\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\r\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\r\n        [provideValue]=\"provideValue\">\r\n    </ax-widget-host>\r\n</div>\r\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:white;width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"], components: [{ type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: ["provideValue", "config", "readonly", "sizeX", "sizeY", "col", "row"], outputs: ["onRemove", "onConfigChanged", "onResized", "onSave"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\r\n    <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\"  [config]='w' [sizeX]=\"w.sizeX\" [readonly]=\"readonly || w.readonly\"\r\n        [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\r\n        (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\r\n        [provideValue]=\"provideValue\">\r\n    </ax-widget-host>\r\n</div>\r\n", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:white;width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s ease}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ 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 {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.minX = 1;
+        this.maxX = 10;
+        this.minY = 1;
+        this.maxY = 10;
+    }
+    ngOnInit() {
+        if (Array.isArray(this.value)) {
+            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();
+    }
+}
+AXWidgetSizePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXWidgetSizePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetSizePropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div style=\"display: grid;grid-gap: 2%; grid-template-columns: 49% 49%;\">\r\n    <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\r\n    </ax-number-box>\r\n    <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\r\n    </ax-number-box>\r\n</div>", components: [{ type: i1.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div style=\"display: grid;grid-gap: 2%; grid-template-columns: 49% 49%;\">\r\n    <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\r\n    </ax-number-box>\r\n    <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\r\n    </ax-number-box>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ 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: 'پیکر بندی ابزارک'
+            }
+        });
+    }
+}
+AXWidgetBoardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXWidgetBoardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, declarations: [AXWidgetBoardComponent, AXWidgetHostComponent, AXWidgetConfigComponent, AXWidgetSaveComponent], imports: [CommonModule,
+        AXSearchBoxModule,
+        AXLoadingModule,
+        RouterModule,
+        AXProppertyEditorModule,
+        AXPageModule,
+        AXToolbarModule,
+        AXTranslatorModule,
+        AXLabelModule,
+        AXTextAreaModule,
+        AXFieldsetModule,
+        AXTextBoxModule,
+        AXFormGroupModule,
+        AXTabStripModule,
+        AXCheckBoxModule,
+        AXMenuModule,
+        AXTranslatorModule,
+        AXValidationModule, i1$2.RouterModule], exports: [AXWidgetBoardComponent, AXProppertyEditorModule] });
+AXWidgetBoardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardModule, providers: [], imports: [[
+            CommonModule,
+            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: "13.3.11", 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: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AXWidgetSizePropertyEditorModule {
+}
+AXWidgetSizePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXWidgetSizePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, declarations: [AXWidgetSizePropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule], exports: [AXWidgetSizePropertyEditorComponent] });
+AXWidgetSizePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetSizePropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXWidgetSizePropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXNumberBoxModule],
+                    exports: [AXWidgetSizePropertyEditorComponent],
+                    providers: []
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXWidgetBoardComponent, AXWidgetBoardModule, AXWidgetComponent, AXWidgetHostComponent, AXWidgetSizePropertyEditorComponent, AXWidgetSizePropertyEditorModule };
+//# sourceMappingURL=acorex-layout.mjs.map