@acorex/layout 3.0.65 → 4.1.0

package/fesm5/acorex-layout.js

@@ -1,1264 +0,0 @@
-import { __decorate, __metadata, __extends, __awaiter, __generator, __spread } from 'tslib';
-import { EventEmitter, ChangeDetectorRef, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ComponentFactoryResolver, Input, Output, ViewContainerRef, HostBinding, NgZone, ViewChildren, QueryList, NgModule } from '@angular/core';
-import { propertyEditor, AXValidationFormComponent, AXBasePopupPageComponent, AXPropertyDecorators, AXPopupService, AXLoadingService, AXProperyEditorComponent, AXSearchBoxModule, AXLoadingModule, AXProppertyEditorModule, AXPageModule, AXToolbarModule, AXLabelModule, AXTextAreaModule, AXFieldsetModule, AXTextBoxModule, AXFormGroupModule, AXTabStripModule, AXCheckBoxModule, AXMenuModule, AXValidationModule, AXNumberBoxModule } from '@acorex/components';
-import { AXTranslator, AXHtmlUtil, AXObjectUtil, AXRenderService, AXClientRec, AXTranslatorModule } from '@acorex/core';
-import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-
-var ɵ0 = function () {
-    return [1, 2, 3, 5, 10, 20, 30, 60].map(function (c) { return ({
-        id: 60000 * c,
-        text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', c.toString())
-    }); });
-};
-// @dynamic
-var AXWidgetComponent = /** @class */ (function () {
-    function AXWidgetComponent() {
-        var _this = this;
-        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(function () {
-            if (_this.isConfigured === true && _this.getRefreshRate()) {
-                _this.restartRefreshTimer();
-            }
-            else {
-                _this.stopRefreshTimer();
-            }
-        });
-    }
-    Object.defineProperty(AXWidgetComponent.prototype, "isBusy", {
-        get: function () {
-            return this._isBusy;
-        },
-        set: function (v) {
-            if (v !== this._isBusy) {
-                var eventData = {
-                    component: this,
-                    oldValue: this._isBusy,
-                    value: v
-                };
-                this._isBusy = v;
-                this.onBusyChanged.emit(eventData);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    // ???
-    AXWidgetComponent.prototype.getRefreshRate = function () {
-        return Array.isArray(this.refreshRate) && this.refreshRate.length ? this.refreshRate[0].id : this.refreshRate;
-    };
-    AXWidgetComponent.prototype.startRefreshTimer = function () {
-        this.intervalId = window.setInterval(this.refresh.bind(this), this.getRefreshRate());
-    };
-    AXWidgetComponent.prototype.stopRefreshTimer = function () {
-        window.clearInterval(this.intervalId);
-    };
-    AXWidgetComponent.prototype.restartRefreshTimer = function () {
-        this.stopRefreshTimer();
-        this.startRefreshTimer();
-    };
-    AXWidgetComponent.prototype.ngOnDestroy = function () {
-        this.stopRefreshTimer();
-    };
-    AXWidgetComponent.prototype.redraw = function () {
-    };
-    AXWidgetComponent.prototype.refresh = function () {
-        this.restartRefreshTimer();
-    };
-    Object.defineProperty(AXWidgetComponent.prototype, "isConfigured", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AXWidgetComponent.prototype.setValue = function (name, value) {
-        this[name] = value;
-        this.onConfiguredChanged.emit();
-    };
-    AXWidgetComponent.prototype.getValue = function (name) {
-        var _a;
-        var val = this[name];
-        var config = this['__meta__'].config;
-        var runtime = (_a = config.props[name]) === null || _a === void 0 ? void 0 : _a.runtime;
-        if (runtime && this.provideValue) {
-            var res = this.provideValue({
-                name: 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);
-    };
-    __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: ɵ0,
-                allowNull: false,
-                allowSearch: false,
-                selectionDataMode: 'value',
-                selectionMode: 'single',
-                valueField: 'id',
-            }
-        }),
-        __metadata("design:type", Object)
-    ], AXWidgetComponent.prototype, "refreshRate", void 0);
-    return AXWidgetComponent;
-}());
-
-var AXWidgetConfigComponent = /** @class */ (function (_super) {
-    __extends(AXWidgetConfigComponent, _super);
-    function AXWidgetConfigComponent(cdr) {
-        var _this = _super.call(this) || this;
-        _this.cdr = cdr;
-        _this.props = [];
-        _this.displayProps = [];
-        _this.changes = [];
-        _this.context = {};
-        return _this;
-    }
-    AXWidgetConfigComponent.prototype.getFooterButtons = function () {
-        return [
-            {
-                name: 'okay',
-                submitBehavior: true,
-                text: AXTranslator.get('common.confirm'),
-                style: 'success'
-            },
-            {
-                name: 'cancel',
-                cancelBehavior: true,
-                text: AXTranslator.get('common.cancel'),
-                style: 'danger blank'
-            }
-        ];
-    };
-    AXWidgetConfigComponent.prototype.onFooterButtonClick = function (e) {
-        var _this = this;
-        if (e.name === 'cancel') {
-            this.close();
-        }
-        if (e.name === 'okay') {
-            this.form.validate().then(function (c) {
-                if (c.result) {
-                    _this.close(_this.changes);
-                }
-            });
-        }
-    };
-    AXWidgetConfigComponent.prototype.handleValueChange = function (e) {
-        var prop = this.changes.find(function (c) { return c.property.name === e.property.name; });
-        if (prop) {
-            prop.value = e.value;
-        }
-        else {
-            this.changes.push({ property: e.property, value: e.value });
-        }
-        this.updateContext();
-    };
-    AXWidgetConfigComponent.prototype.ngOnInit = function () {
-        this.displayProps = this.props.filter(function (c) { return c.property.visible !== false; }).sort(function (a, b) { return a.property.order - b.property.order; });
-        this.updateContext();
-    };
-    AXWidgetConfigComponent.prototype.updateContext = function () {
-        var ctx = {};
-        this.props.forEach(function (p) {
-            ctx[p.property.name] = p.value;
-        });
-        this.changes.forEach(function (p) {
-            ctx[p.property.name] = p.value;
-        });
-        this.context = ctx;
-    };
-    AXWidgetConfigComponent.prototype.identify = function (index, item) {
-        return item.property.name;
-    };
-    AXWidgetConfigComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        ViewChild(AXValidationFormComponent),
-        __metadata("design:type", AXValidationFormComponent)
-    ], AXWidgetConfigComponent.prototype, "form", void 0);
-    AXWidgetConfigComponent = __decorate([
-        Component({
-            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>",
-            encapsulation: ViewEncapsulation.None,
-            changeDetection: ChangeDetectionStrategy.OnPush
-        }),
-        __metadata("design:paramtypes", [ChangeDetectorRef])
-    ], AXWidgetConfigComponent);
-    return AXWidgetConfigComponent;
-}(AXBasePopupPageComponent));
-
-var AXWidgetSaveComponent = /** @class */ (function (_super) {
-    __extends(AXWidgetSaveComponent, _super);
-    function AXWidgetSaveComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.props = [];
-        return _this;
-    }
-    AXWidgetSaveComponent.prototype.getFooterButtons = function () {
-        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'
-            }
-        ];
-    };
-    AXWidgetSaveComponent.prototype.ngOnInit = function () {
-        var _a, _b;
-        var titleProp = this.props.find(function (c) { return c.property.name === 'title' || c.property.name === 'name'; });
-        var title = ((_a = titleProp) === null || _a === void 0 ? void 0 : _a.value) || this.config.title;
-        var pp = {};
-        (_b = this.props) === null || _b === void 0 ? void 0 : _b.forEach(function (c) {
-            pp[c.property.name] = c.property;
-        });
-        this.data = {
-            component: this.config.component,
-            title: title,
-            uniqueName: this.config.uniqueName + "-" + AXHtmlUtil.getUID(),
-            options: AXObjectUtil.deepJSONClone(this.config.options),
-            props: AXObjectUtil.deepJSONClone(pp)
-        };
-        this.displayProps = this.props
-            .filter(function (c) { return c.property.visible !== false; })
-            .sort(function (a, b) { return a.property.order - b.property.order; })
-            .map(function (c) { return ({
-            name: c.property.name,
-            title: c.property.title,
-            allow: true
-        }); });
-    };
-    AXWidgetSaveComponent.prototype.onFooterButtonClick = function (e) {
-        var _this = this;
-        if (e.name === 'cancel') {
-            this.close();
-        }
-        if (e.name === 'okay') {
-            this.props.forEach(function (p) {
-                var pp = _this.displayProps.find(function (c) { return c.name === p.property.name; });
-                if (pp == null || !pp.allow) {
-                    var ppp = _this.data.props[p.property.name];
-                    if (ppp) {
-                        ppp.visible = false;
-                    }
-                    else {
-                        ppp = { visible: false };
-                    }
-                }
-            });
-            this.close(this.data);
-        }
-    };
-    AXWidgetSaveComponent = __decorate([
-        Component({
-            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>",
-            encapsulation: ViewEncapsulation.None,
-            changeDetection: ChangeDetectionStrategy.OnPush
-        })
-    ], AXWidgetSaveComponent);
-    return AXWidgetSaveComponent;
-}(AXBasePopupPageComponent));
-
-var AXWidgetHostComponent = /** @class */ (function () {
-    function AXWidgetHostComponent(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._isLoading = false;
-        this.sizeX = 1;
-        this.sizeY = 1;
-        this.col = 1;
-        this.row = 1;
-    }
-    Object.defineProperty(AXWidgetHostComponent.prototype, "widget", {
-        get: function () {
-            return this._widget;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AXWidgetHostComponent.prototype, "element", {
-        get: function () {
-            return this.ref.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AXWidgetHostComponent.prototype, "isLoading", {
-        get: function () {
-            return this._isLoading;
-        },
-        set: function (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);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AXWidgetHostComponent.prototype, "isConfigured", {
-        get: function () {
-            var _a;
-            return ((_a = this._widget) === null || _a === void 0 ? void 0 : _a.isConfigured) || false;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AXWidgetHostComponent.prototype.ngOnInit = function () {
-        this.isLoading = true;
-    };
-    AXWidgetHostComponent.prototype.ngAfterViewInit = function () {
-        var _a;
-        return __awaiter(this, void 0, void 0, function () {
-            var component, route, widgetFactory;
-            var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!(typeof this.config.component === 'string')) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.rendererService.findLoadedComponentByRoute(this.config.component, 20)];
-                    case 1:
-                        route = _b.sent();
-                        component = (_a = route) === null || _a === void 0 ? void 0 : _a.component;
-                        return [3 /*break*/, 3];
-                    case 2:
-                        if (typeof this.config.component === 'function') {
-                            component = this.config.component;
-                        }
-                        _b.label = 3;
-                    case 3:
-                        if (component == null) {
-                            console.error("Invalid Widget Component!", this.config);
-                            this.onRemove.emit(this);
-                            return [2 /*return*/];
-                        }
-                        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(function (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(function () {
-                                _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: function () {
-                                var _a, _b;
-                                (_b = (_a = _this) === null || _a === void 0 ? void 0 : _a.widget) === null || _b === void 0 ? void 0 : _b.refresh();
-                            }
-                        });
-                        //
-                        if (this._hasProps) {
-                            this.configMenuItem[0].items.push({
-                                name: 'configs',
-                                icon: 'far fa-cogs',
-                                text: AXTranslator.get('common.configs'),
-                                onClick: function () {
-                                    _this.openConfigDialog();
-                                }
-                            });
-                        }
-                        this.configMenuItem[0].items.push({
-                            name: 'save',
-                            icon: 'far fa-save',
-                            text: AXTranslator.get('common.save-as'),
-                            onClick: function () {
-                                _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: function () {
-                                    _this.onRemove.emit(_this);
-                                }
-                            });
-                        }
-                        this._hasMenu = this.configMenuItem[0].items.length > 0;
-                        this.cdr.detectChanges();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    AXWidgetHostComponent.prototype.setSizeFromOptions = function () {
-        var _this = this;
-        this._widget.getValue('widgetSize').then(function (c) {
-            var oldSizeX = _this.sizeX;
-            var 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();
-        });
-    };
-    AXWidgetHostComponent.prototype.remove = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.onRemove.emit(this);
-        return false;
-    };
-    AXWidgetHostComponent.prototype.handleConfig = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openConfigDialog();
-        return false;
-    };
-    AXWidgetHostComponent.prototype.openConfigDialog = function () {
-        var _this = this;
-        var ppp = this.getMergedProps();
-        this.popup.open(AXWidgetConfigComponent, {
-            title: AXTranslator.get('common.configs'),
-            size: 'sm',
-            data: {
-                props: ppp.map(function (c) { return ({ property: c.options, value: _this._widget[c.options.name] }); }),
-                widget: this.widget
-            }
-        }).then(function (c) {
-            if (c.data) {
-                if (!_this.config.options) {
-                    _this.config.options = {};
-                }
-                c.data.forEach(function (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();
-            }
-        });
-    };
-    AXWidgetHostComponent.prototype.openSaveDialog = function () {
-        var _this = this;
-        var ppp = this.getMergedProps();
-        this.popup.open(AXWidgetSaveComponent, {
-            title: AXTranslator.get('common.save-as'),
-            size: 'sm',
-            data: {
-                config: this.config,
-                props: ppp.map(function (c) { return ({ property: c.options, value: _this._widget[c.options.name] }); })
-            }
-        }).then(function (c) {
-            if (c.data) {
-                _this.onSave.emit({
-                    component: _this._widget,
-                    data: c.data
-                });
-            }
-        });
-    };
-    AXWidgetHostComponent.prototype.handleOptionClick = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.openConfigDialog();
-        return false;
-    };
-    AXWidgetHostComponent.prototype.ngOnDestroy = function () {
-        this.vc.clear();
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-    };
-    AXWidgetHostComponent.prototype.getMergedProps = function () {
-        var ppp = AXObjectUtil.deepCopy(AXPropertyDecorators.getProperties(this._widget));
-        var _loop_1 = function (key) {
-            if (Object.prototype.hasOwnProperty.call(this_1.config.props, key)) {
-                var newP = this_1.config.props[key];
-                var existPropDec = ppp.find(function (p) { return p.property === key; });
-                if (existPropDec) {
-                    Object.assign(existPropDec.options, newP);
-                }
-            }
-        };
-        var this_1 = this;
-        for (var key in this.config.props) {
-            _loop_1(key);
-        }
-        return ppp;
-    };
-    AXWidgetHostComponent.prototype.emitConfigChanged = function () {
-        this.onConfigChanged.emit({
-            component: this._widget,
-            config: this.config
-        });
-    };
-    AXWidgetHostComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: ComponentFactoryResolver },
-        { type: AXRenderService },
-        { type: ChangeDetectorRef },
-        { type: AXPopupService },
-        { type: AXLoadingService }
-    ]; };
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], AXWidgetHostComponent.prototype, "provideValue", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetHostComponent.prototype, "onRemove", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetHostComponent.prototype, "onConfigChanged", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetHostComponent.prototype, "onResized", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetHostComponent.prototype, "onSave", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], AXWidgetHostComponent.prototype, "config", void 0);
-    __decorate([
-        ViewChild('vc', { read: ViewContainerRef }),
-        __metadata("design:type", ViewContainerRef)
-    ], AXWidgetHostComponent.prototype, "vc", void 0);
-    __decorate([
-        HostBinding('attr.data-size-x'),
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetHostComponent.prototype, "sizeX", void 0);
-    __decorate([
-        HostBinding('attr.data-size-y'),
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetHostComponent.prototype, "sizeY", void 0);
-    __decorate([
-        HostBinding('attr.data-col'),
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetHostComponent.prototype, "col", void 0);
-    __decorate([
-        HostBinding('attr.data-row'),
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetHostComponent.prototype, "row", void 0);
-    AXWidgetHostComponent = __decorate([
-        Component({
-            selector: 'ax-widget-host',
-            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\"><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\">\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>",
-            host: { class: 'ax widget-host', tabindex: '0' },
-            encapsulation: ViewEncapsulation.None,
-            changeDetection: ChangeDetectionStrategy.OnPush
-        }),
-        __metadata("design:paramtypes", [ElementRef,
-            ComponentFactoryResolver,
-            AXRenderService,
-            ChangeDetectorRef,
-            AXPopupService,
-            AXLoadingService])
-    ], AXWidgetHostComponent);
-    return AXWidgetHostComponent;
-}());
-
-var AXWidgetBoardComponent = /** @class */ (function () {
-    function AXWidgetBoardComponent(ref, zone, cdr) {
-        this.ref = ref;
-        this.zone = zone;
-        this.cdr = cdr;
-        this.widgets = [];
-        this.galleryItems = [];
-        this.tileSize = 80;
-        this.gapSize = 5;
-        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();
-    }
-    AXWidgetBoardComponent.prototype.isInEditing = function () {
-        return this._isInEditing;
-    };
-    AXWidgetBoardComponent.prototype.ngOnInit = function () {
-        if (this.rtl == null) {
-            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-        }
-    };
-    AXWidgetBoardComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function (c) {
-            var style = document.createElement('style');
-            style.type = 'text/css';
-            _this.ref.nativeElement.appendChild(style);
-            // add css data classes
-            for (var 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; }";
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.calcGridSize = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            var width = (Math.max.apply(Math, __spread(_this.widgets.map(function (c) { return c.col + c.sizeX - 1; })))) * (_this.tileSize + _this.gapSize);
-            var height = (Math.max.apply(Math, __spread(_this.widgets.map(function (c) { return c.row + c.sizeY - 1; })))) * (_this.tileSize + _this.gapSize);
-            _this.container.nativeElement.style.width = width + 'px';
-            _this.container.nativeElement.style.height = height + 'px';
-        });
-    };
-    AXWidgetBoardComponent.prototype.toggleEdit = function () {
-        this._isInEditing ? this.finishEdit() : this.startEdit();
-    };
-    AXWidgetBoardComponent.prototype.dragStart = function (e) {
-        var _this = this;
-        e.preventDefault();
-        e.stopPropagation();
-        this.zone.runOutsideAngular(function () {
-            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;
-    };
-    AXWidgetBoardComponent.prototype.removePositionData = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            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);
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.resetPositionData = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            if (_this.dragItem && _this._isInEditing) {
-                _this.setPosition(_this.dragItem, _this.dragItem.getAttribute(_this.DATA_OLD_COL), _this.dragItem.getAttribute(_this.DATA_OLD_ROW));
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.setPosition = function (element, col, row) {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            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');
-            var widget = _this.widgets.find(function (c) { return c['__meta__'].instance.element === element; });
-            widget.col = Number(col);
-            widget.row = Number(row);
-        });
-    };
-    AXWidgetBoardComponent.prototype.drag = function (e) {
-        var _this = this;
-        e.preventDefault();
-        e.stopPropagation();
-        this.zone.runOutsideAngular(function () {
-            if (_this.dragItem && _this._isInEditing) {
-                _this.isDragging = true;
-                _this.addPlaceholder();
-                var xOffset = Number(_this.dragItem.getAttribute('data-x-offset'));
-                var 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;
-    };
-    AXWidgetBoardComponent.prototype.dragEnd = function (e) {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            if (_this.dragItem && _this._isInEditing && _this.isDragging) {
-                _this.dragItem.classList.remove('widget-dragging');
-                _this.dragItem.classList.add('animate__animated', 'animate__pulse');
-                //
-                var p = _this.container.nativeElement.querySelector('.widget-blank-placeholder');
-                if (_this.newWidget) {
-                    var w_1 = {
-                        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_1);
-                    _this.newWidget = null;
-                    _this.container.nativeElement.removeChild(_this.dragItem);
-                    _this.zone.run(function () {
-                        _this.cdr.detectChanges();
-                        _this.calcGridSize();
-                        setTimeout(function () {
-                            w_1['__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;
-        });
-    };
-    AXWidgetBoardComponent.prototype.detectFirstEmptySlot = function (w) {
-        var xTile = Math.floor(this.ref.nativeElement.parentElement.offsetWidth / this.tileSize);
-        for (var j = 1; j <= 100; j++) {
-            var _loop_1 = function (i) {
-                var rec = new AXClientRec({
-                    left: i,
-                    top: j,
-                    width: w.sizeX,
-                    height: w.sizeY
-                });
-                var el = this_1.widgets.filter(function (c) { return c !== w; }).find(function (c) {
-                    return rec.intersect({
-                        left: c.col,
-                        top: c.row,
-                        width: c.sizeX,
-                        height: c.sizeY
-                    });
-                });
-                if (el == null) {
-                    w.col = i;
-                    w.row = j;
-                    return { value: void 0 };
-                }
-            };
-            var this_1 = this;
-            for (var i = 1; i <= xTile - w.sizeX; i++) {
-                var state_1 = _loop_1(i);
-                if (typeof state_1 === "object")
-                    return state_1.value;
-            }
-        }
-    };
-    AXWidgetBoardComponent.prototype.detectBestPlacement = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            var p = _this.container.nativeElement.querySelector('.widget-blank-placeholder');
-            var 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);
-            }
-            var row = Math.ceil(_this.dragItem.offsetTop / _this.tileSize);
-            if (col < 1) {
-                col = 1;
-            }
-            if (row < 1) {
-                row = 1;
-            }
-            var widgets = Array.from(_this.ref.nativeElement.querySelectorAll('.widget-host')).map(function (c) { return c; });
-            p.setAttribute(_this.DATA_COL, col.toString());
-            p.setAttribute(_this.DATA_ROW, row.toString());
-            var collision = widgets.filter(function (c) { return c !== _this.dragItem; }).some(function (c) { return AXHtmlUtil.collision(c, _this.dragItem); });
-            if (collision) {
-                _this.removePlaceholder();
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.addPlaceholder = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            _this.removePlaceholder();
-            if (_this.dragItem) {
-                var 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);
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.removePlaceholder = function () {
-        var _a;
-        var p = this.container.nativeElement.querySelector('.widget-blank-placeholder');
-        (_a = p) === null || _a === void 0 ? void 0 : _a.remove();
-    };
-    AXWidgetBoardComponent.prototype.startEdit = function () {
-        var _this = this;
-        this._isInEditing = true;
-        this.calcGridSize();
-        this.ref.nativeElement.classList.add('grid-background');
-        var bg = this.ref.nativeElement;
-        bg.style.setProperty('background-position', (this.rtl ? 'right' : 'left') + " top");
-        // tslint:disable-next-line: max-line-length
-        var 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);
-        //
-        var widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
-        widgets.forEach(function (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);
-    };
-    AXWidgetBoardComponent.prototype.finishEdit = function () {
-        var _this = this;
-        this.ref.nativeElement.classList.remove('grid-background');
-        var bg = this.ref.nativeElement;
-        bg.style.removeProperty('background-image');
-        //
-        this._isInEditing = false;
-        var widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
-        widgets.forEach(function (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();
-    };
-    AXWidgetBoardComponent.prototype.addWidget = function (widget) {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            _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);
-            var 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(function () {
-                _this.cdr.detectChanges();
-                _this.calcGridSize();
-                _this.emitConfigChanged();
-                setTimeout(function () {
-                    w['__meta__'].instance.element.addEventListener('mousedown', _this.dragStart.bind(_this), false);
-                }, 1000);
-            });
-        });
-    };
-    AXWidgetBoardComponent.prototype.handleOnRemove = function (w) {
-        var _this = this;
-        w.element.classList.add('animate__animated', 'animate__zoomOut');
-        w.element.addEventListener('animationend', function () {
-            _this.widgets = _this.widgets.filter(function (c) { return c.__meta__.id !== w.config.__meta__.id; });
-            _this.cdr.detectChanges();
-            _this.calcGridSize();
-            _this.emitConfigChanged();
-        });
-    };
-    AXWidgetBoardComponent.prototype.handleOnSave = function (e) {
-        this.onWidgetSave.emit(e);
-    };
-    AXWidgetBoardComponent.prototype.trackByFn = function (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;
-    };
-    AXWidgetBoardComponent.prototype.load = function (widgets) {
-        var _this = this;
-        this.clear();
-        return new Promise(function (resolve, reject) {
-            if (widgets) {
-                var loadedWidgets_1 = [];
-                if (typeof widgets === 'string') {
-                    try {
-                        loadedWidgets_1.push.apply(loadedWidgets_1, __spread(JSON.parse(widgets)));
-                    }
-                    catch (error) {
-                        reject('Invalid widget json data!');
-                    }
-                }
-                else {
-                    loadedWidgets_1.push.apply(loadedWidgets_1, __spread(widgets));
-                }
-                var intervalId_1 = -1;
-                var loadFunc = function () {
-                    var _a;
-                    if (_this.galleryItems && _this.galleryItems.length > 0) {
-                        loadedWidgets_1.forEach(function (w) {
-                            var gitem = _this.galleryItems.find(function (c) { return c.uniqueName === w.uniqueName; });
-                            if (gitem) {
-                                w.component = gitem.component;
-                                if (gitem.props) {
-                                    w.props = JSON.parse(JSON.stringify(gitem.props));
-                                }
-                            }
-                        });
-                        (_a = _this.widgets).push.apply(_a, __spread(loadedWidgets_1));
-                        window.clearInterval(intervalId_1);
-                        _this.cdr.detectChanges();
-                        resolve();
-                    }
-                };
-                intervalId_1 = window.setInterval(loadFunc, 200);
-            }
-            else {
-                resolve();
-            }
-        });
-    };
-    AXWidgetBoardComponent.prototype.clear = function () {
-        if (this.widgets.length) {
-            this.widgets = [];
-            this.cdr.detectChanges();
-            this.emitConfigChanged();
-        }
-    };
-    AXWidgetBoardComponent.prototype.save = function () {
-        var obj = this.widgets.map(function (c) { return ({
-            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));
-    };
-    AXWidgetBoardComponent.prototype.refresh = function () {
-        this.widgetHosts.forEach(function (host) {
-            host.widget.refresh();
-        });
-    };
-    AXWidgetBoardComponent.prototype.handleOnConfigChanged = function (e) {
-        this.cdr.detectChanges();
-        this.emitConfigChanged();
-    };
-    AXWidgetBoardComponent.prototype.handleOnResizedChanged = function (e) {
-        this.detectFirstEmptySlot(e.config);
-        this.cdr.detectChanges();
-        this.emitConfigChanged();
-    };
-    AXWidgetBoardComponent.prototype.emitConfigChanged = function () {
-        var _this = this;
-        if (!this.resizeChangeObserver) {
-            this.resizeChangeObserver = new Observable();
-            Observable.create(function (observer) {
-                _this.resizeChangeObserver = observer;
-            })
-                .pipe(debounceTime(750))
-                .pipe(distinctUntilChanged())
-                .subscribe(function (c) {
-                _this.onConfigChanged.emit({
-                    component: _this
-                });
-            });
-        }
-        this.resizeChangeObserver.next(new Date());
-    };
-    AXWidgetBoardComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: NgZone },
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        ViewChild('container'),
-        __metadata("design:type", ElementRef)
-    ], AXWidgetBoardComponent.prototype, "container", void 0);
-    __decorate([
-        ViewChildren(AXWidgetHostComponent),
-        __metadata("design:type", QueryList)
-    ], AXWidgetBoardComponent.prototype, "widgetHosts", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], AXWidgetBoardComponent.prototype, "galleryItems", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetBoardComponent.prototype, "tileSize", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], AXWidgetBoardComponent.prototype, "gapSize", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Function)
-    ], AXWidgetBoardComponent.prototype, "provideValue", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetBoardComponent.prototype, "onConfigChanged", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], AXWidgetBoardComponent.prototype, "onWidgetSave", void 0);
-    AXWidgetBoardComponent = __decorate([
-        Component({
-            selector: 'ax-widget-board',
-            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\"\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",
-            host: { class: 'ax widget-board' },
-            encapsulation: ViewEncapsulation.None,
-            changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration:0.5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;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:#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: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}.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}"]
-        }),
-        __metadata("design:paramtypes", [ElementRef,
-            NgZone,
-            ChangeDetectorRef])
-    ], AXWidgetBoardComponent);
-    return AXWidgetBoardComponent;
-}());
-
-var AXWidgetSizePropertyEditorComponent = /** @class */ (function (_super) {
-    __extends(AXWidgetSizePropertyEditorComponent, _super);
-    function AXWidgetSizePropertyEditorComponent(cdr) {
-        var _this = _super.call(this, cdr) || this;
-        _this.cdr = cdr;
-        _this.minX = 1;
-        _this.maxX = 10;
-        _this.minY = 1;
-        _this.maxY = 10;
-        return _this;
-    }
-    AXWidgetSizePropertyEditorComponent.prototype.ngOnInit = function () {
-        if (Array.isArray(this.value)) {
-            this.sizeX = this.value[0];
-            this.sizeY = this.value[1];
-        }
-        else {
-            this.sizeX = 2;
-            this.sizeY = 2;
-        }
-    };
-    AXWidgetSizePropertyEditorComponent.prototype.handleMinValueChange = function (e) {
-        this.sizeX = e.value;
-        if (this.sizeY > 0) {
-            _super.prototype.handleValueChange.call(this, [this.sizeX, this.sizeY]);
-        }
-    };
-    AXWidgetSizePropertyEditorComponent.prototype.handleMaxValueChange = function (e) {
-        this.sizeY = e.value;
-        if (this.sizeX > 0) {
-            _super.prototype.handleValueChange.call(this, [this.sizeX, this.sizeY]);
-        }
-    };
-    AXWidgetSizePropertyEditorComponent.prototype.ngAfterViewInit = function () {
-        this.onRenderCompleted.emit();
-    };
-    AXWidgetSizePropertyEditorComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
-    ]; };
-    AXWidgetSizePropertyEditorComponent = __decorate([
-        Component({
-            template: "<div style=\"display: flex;\">\r\n    <div style=\"margin-inline-end: 0.5em;flex: calc(50% - 0.25em);\">\r\n        <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\r\n        </ax-number-box>\r\n    </div>\r\n    <div style=\"flex: calc(50% - 0.25em);\">\r\n        <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\r\n        </ax-number-box>\r\n    </div>\r\n</div>"
-        }),
-        __metadata("design:paramtypes", [ChangeDetectorRef])
-    ], AXWidgetSizePropertyEditorComponent);
-    return AXWidgetSizePropertyEditorComponent;
-}(AXProperyEditorComponent));
-
-var AXWidgetBoardModule = /** @class */ (function () {
-    /**
-     *
-     */
-    function AXWidgetBoardModule() {
-        AXTranslator.load('en', {
-            'widget-board': {
-                'configurable-props': 'Configurable Properties',
-                configure: 'Configure Widget'
-            }
-        });
-        AXTranslator.load('fa', {
-            'widget-board': {
-                'configurable-props': 'ویژگی های قابل تنظیم',
-                configure: 'پیکر بندی ابزارک'
-            }
-        });
-    }
-    AXWidgetBoardModule = __decorate([
-        NgModule({
-            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],
-            entryComponents: [AXWidgetConfigComponent, AXWidgetSaveComponent],
-            providers: []
-        }),
-        __metadata("design:paramtypes", [])
-    ], AXWidgetBoardModule);
-    return AXWidgetBoardModule;
-}());
-
-var AXWidgetSizePropertyEditorModule = /** @class */ (function () {
-    function AXWidgetSizePropertyEditorModule() {
-    }
-    AXWidgetSizePropertyEditorModule = __decorate([
-        NgModule({
-            declarations: [AXWidgetSizePropertyEditorComponent],
-            imports: [CommonModule, FormsModule, AXNumberBoxModule],
-            exports: [AXWidgetSizePropertyEditorComponent],
-            entryComponents: [AXWidgetSizePropertyEditorComponent],
-            providers: [],
-        })
-    ], AXWidgetSizePropertyEditorModule);
-    return AXWidgetSizePropertyEditorModule;
-}());
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AXWidgetBoardComponent, AXWidgetBoardModule, AXWidgetComponent, AXWidgetHostComponent, AXWidgetSizePropertyEditorComponent, AXWidgetSizePropertyEditorModule, ɵ0, AXWidgetConfigComponent as ɵa, AXWidgetSaveComponent as ɵb };
-//# sourceMappingURL=acorex-layout.js.map