@ts-core/angular 13.1.22 → 13.1.25

package/fesm2020/ts-core-angular.mjs

@@ -382,6 +382,9 @@ class ViewUtil {
     static set document(value) {
         ViewUtil._document = value;
     }
+    static get window() {
+        return this.document.defaultView;
+    }
     // --------------------------------------------------------------------------
     //
     //	Private Methods
@@ -437,7 +440,7 @@ class ViewUtil {
             }
         }
         else {
-            let selection = window.getSelection();
+            let selection = ViewUtil.window.getSelection();
             selection.removeAllRanges();
             let range = ViewUtil.document.createRange();
             if (!_.isNil(container)) {
@@ -501,10 +504,10 @@ class ViewUtil {
     //
     // --------------------------------------------------------------------------
     static getStageWidth() {
-        return window.innerWidth || ViewUtil.document.body.clientWidth;
+        return ViewUtil.window.innerWidth || ViewUtil.document.body.clientWidth;
     }
     static getStageHeight() {
-        return window.innerHeight || ViewUtil.document.body.clientHeight;
+        return ViewUtil.window.innerHeight || ViewUtil.document.body.clientHeight;
     }
     static getWidth(container) {
         container = ViewUtil.parseElement(container);
@@ -3448,6 +3451,15 @@ class WindowFactory {
     }
 }
 
+var WindowServiceEvent;
+(function (WindowServiceEvent) {
+    WindowServiceEvent["OPEN_STARTED"] = "OPEN_STARTED";
+    WindowServiceEvent["OPENED"] = "OPENED";
+    WindowServiceEvent["OPEN_FINISHED"] = "OPEN_FINISHED";
+    WindowServiceEvent["CLOSED"] = "CLOSED";
+    WindowServiceEvent["SETTED_ON_TOP"] = "SETTED_ON_TOP";
+})(WindowServiceEvent || (WindowServiceEvent = {}));
+
 class IWindowContent extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
@@ -3633,482 +3645,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{ template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"text\"></p>\n\n<div class=\"text-center border-sm-top p-3\">\n\n    <button (click)=\"data?.closeClickHandler()\" mat-stroked-button *ngIf=\"data?.isInfo\">\n        <span [innerHTML]=\"data?.closeText\"></span>\n    </button>\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" color=\"primary\" mat-stroked-button *ngIf=\"data?.isQuestion\">\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" mat-stroked-button *ngIf=\"data?.isQuestion\">\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.LanguageService }]; } });
 
-class WindowElement extends DestroyableContainer {
+class WindowBase extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
+    constructor() {
         super();
-        this.element = element;
+        // --------------------------------------------------------------------------
+        //
+        // 	Properties
+        //
+        // --------------------------------------------------------------------------
+        this._x = NaN;
+        this._width = NaN;
+        this._y = NaN;
+        this._height = NaN;
+        this.updatePosition = () => this.setPosition();
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    checkWindowParent() {
-        let container = this.getContainer();
-        if (!_.isNil(container)) {
-            ViewUtil.appendChild(container, this.element.nativeElement);
+    setProperties() {
+        let config = this.getConfig();
+        if (!_.isNaN(config.defaultWidth)) {
+            this.width = config.defaultWidth;
+        }
+        if (!_.isNaN(config.defaultHeight)) {
+            this.height = config.defaultHeight;
         }
     }
-    getContainer() {
-        let item = ViewUtil.parseElement(this.element.nativeElement);
-        while (!_.isNil(item) && item.nodeName.toLowerCase() !== 'mat-dialog-container') {
-            item = item.parentElement;
+    setPosition() {
+        let config = this.getConfig();
+        switch (config.horizontalAlign) {
+            case WindowAlign.START:
+                this.x = !_.isNaN(this.paddingLeft) ? this.paddingLeft : 0;
+                break;
+            case WindowAlign.END:
+                let value = ViewUtil.getStageWidth() - this.calculateWidth();
+                if (!_.isNaN(this.paddingRight)) {
+                    value -= this.paddingRight;
+                }
+                this.x = value;
+                break;
+            default:
+                this.x = (ViewUtil.getStageWidth() - this.calculateWidth()) / 2;
+                break;
+        }
+        switch (config.verticalAlign) {
+            case WindowAlign.START:
+                this.y = !_.isNaN(this.paddingTop) ? this.paddingTop : 0;
+                break;
+            case WindowAlign.END:
+                let value = ViewUtil.getStageHeight() - this.calculateHeight();
+                if (!_.isNaN(this.paddingBottom)) {
+                    value -= this.paddingBottom;
+                }
+                this.y = value;
+                break;
+            default:
+                this.y = (ViewUtil.getStageHeight() - this.calculateHeight()) / 2;
+                break;
         }
-        return item;
     }
-    createChildren() { }
-    destroyChildren() { }
-    commitWindowProperties() { }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.createChildren();
-        this.checkWindowParent();
+    clearSize() {
+        this._x = NaN;
+        this._y = NaN;
+        this._width = NaN;
+        this._height = NaN;
     }
-    destroy() {
-        if (this.isDestroyed) {
+    commitSizeProperties() {
+        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
+        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
+        this.getReference().updateSize(width, height);
+    }
+    commitPositionProperties() {
+        if (_.isNaN(this._x) && _.isNaN(this._y)) {
             return;
         }
-        super.destroy();
-        this.destroyChildren();
-        this.element = null;
-        this.window = null;
+        let position = {};
+        if (!_.isNaN(this._y)) {
+            position.top = this._y + 'px';
+        }
+        if (!_.isNaN(this._x)) {
+            position.left = this._x + 'px';
+        }
+        this.getReference().updatePosition(position);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        event.stopPropagation();
+    calculateWidth() {
+        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Protected Properties
-    //
-    // --------------------------------------------------------------------------
-    get nativeElement() {
-        return this.element ? this.element.nativeElement : null;
+    calculateHeight() {
+        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    // 	Private Properties
     //
     // --------------------------------------------------------------------------
-    get window() {
-        return this._window;
+    get width() {
+        return this._width;
     }
-    set window(value) {
-        if (value === this._window) {
+    set width(value) {
+        value = this.getConfig().parseWidth(value);
+        if (value === this._width) {
             return;
         }
-        this._window = value;
-        if (this.window) {
-            this.commitWindowProperties();
+        this._width = value;
+        this.commitSizeProperties();
+    }
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        value = this.getConfig().parseHeight(value);
+        if (value === this._height) {
+            return;
         }
+        this._height = value;
+        this.commitSizeProperties();
     }
-}
-WindowElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowElement, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowElement, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowCloseElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    get x() {
+        return this._x;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowCloseElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowCloseElementComponent.ICON_VALUE);
-        }
-        if (!_.isNil(WindowCloseElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowCloseElementComponent.ICON_CLASS);
+    set x(value) {
+        value = this.getConfig().parseX(value);
+        if (value === this._x) {
+            return;
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+        this._x = value;
+        this.commitPositionProperties();
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.close();
+    get y() {
+        return this._y;
+    }
+    set y(value) {
+        value = this.getConfig().parseY(value);
+        if (value === this._y) {
+            return;
         }
+        this._y = value;
+        this.commitPositionProperties();
+    }
+    get paddingTop() {
+        return this.getConfig().paddingTop;
+    }
+    get paddingLeft() {
+        return this.getConfig().paddingLeft;
+    }
+    get paddingRight() {
+        return this.getConfig().paddingRight;
+    }
+    get paddingBottom() {
+        return this.getConfig().paddingBottom;
     }
 }
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowCloseElementComponent.ICON_CLASS = 'fas fa-times';
-WindowCloseElementComponent.ICON_VALUE = null;
-WindowCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseElementComponent, selector: "vi-window-close-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-close-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class WindowExpandElementComponent extends WindowElement {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
-    }
+class WindowImpl extends WindowBase {
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowExpandElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowExpandElementComponent.ICON_VALUE);
-        }
-        if (!_.isNil(WindowExpandElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowExpandElementComponent.ICON_CLASS);
-        }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.emit(WindowEvent.EXPAND);
-        }
-    }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowExpandElementComponent.ICON_CLASS = 'fas fa-angle-double-up';
-WindowExpandElementComponent.ICON_VALUE = null;
-WindowExpandElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowExpandElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowExpandElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowExpandElementComponent, selector: "vi-window-expand-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowExpandElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-expand-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowResizeElementComponent extends WindowElement {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
-        }
-        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
-        }
-        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.emit(WindowEvent.EXPAND);
-        }
-    }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
-WindowResizeElementComponent.ICON_VALUE = null;
-WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowResizeElementComponent, selector: "vi-window-resize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowMinimizeElementComponent extends WindowElement {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
-        // --------------------------------------------------------------------------
-        //
-        // 	Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.commitIconProperties = () => {
-            let icon = this.window.isMinimized ? WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE : WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE;
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', icon);
-        };
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Protected Methods
-    //
-    // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        super.commitWindowProperties();
-        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
-            if (event === WindowEvent.MINIMIZED_CHANGED) {
-                this.commitIconProperties();
-            }
-        });
-    }
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
-        }
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
-        }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.isMinimized = !this.window.isMinimized;
-        }
-    }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowMinimizeElementComponent.ICON_CLASS = null;
-WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeElementComponent, selector: "vi-window-minimize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-minimize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowBase extends DestroyableContainer {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor() {
-        super();
-        // --------------------------------------------------------------------------
-        //
-        // 	Properties
-        //
-        // --------------------------------------------------------------------------
-        this._x = NaN;
-        this._width = NaN;
-        this._y = NaN;
-        this._height = NaN;
-        this.updatePosition = () => this.setPosition();
-    }
-    setProperties() {
-        let config = this.getConfig();
-        if (!_.isNaN(config.defaultWidth)) {
-            this.width = config.defaultWidth;
-        }
-        if (!_.isNaN(config.defaultHeight)) {
-            this.height = config.defaultHeight;
-        }
-    }
-    setPosition() {
-        let config = this.getConfig();
-        switch (config.horizontalAlign) {
-            case WindowAlign.START:
-                this.x = !_.isNaN(this.paddingLeft) ? this.paddingLeft : 0;
-                break;
-            case WindowAlign.END:
-                let value = ViewUtil.getStageWidth() - this.calculateWidth();
-                if (!_.isNaN(this.paddingRight)) {
-                    value -= this.paddingRight;
-                }
-                this.x = value;
-                break;
-            default:
-                this.x = (ViewUtil.getStageWidth() - this.calculateWidth()) / 2;
-                break;
-        }
-        switch (config.verticalAlign) {
-            case WindowAlign.START:
-                this.y = !_.isNaN(this.paddingTop) ? this.paddingTop : 0;
-                break;
-            case WindowAlign.END:
-                let value = ViewUtil.getStageHeight() - this.calculateHeight();
-                if (!_.isNaN(this.paddingBottom)) {
-                    value -= this.paddingBottom;
-                }
-                this.y = value;
-                break;
-            default:
-                this.y = (ViewUtil.getStageHeight() - this.calculateHeight()) / 2;
-                break;
-        }
-    }
-    clearSize() {
-        this._x = NaN;
-        this._y = NaN;
-        this._width = NaN;
-        this._height = NaN;
-    }
-    commitSizeProperties() {
-        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
-        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
-        this.getReference().updateSize(width, height);
-    }
-    commitPositionProperties() {
-        if (_.isNaN(this._x) && _.isNaN(this._y)) {
-            return;
-        }
-        let position = {};
-        if (!_.isNaN(this._y)) {
-            position.top = this._y + 'px';
-        }
-        if (!_.isNaN(this._x)) {
-            position.left = this._x + 'px';
-        }
-        this.getReference().updatePosition(position);
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    calculateWidth() {
-        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
-    }
-    calculateHeight() {
-        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Properties
-    //
-    // --------------------------------------------------------------------------
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        value = this.getConfig().parseWidth(value);
-        if (value === this._width) {
-            return;
-        }
-        this._width = value;
-        this.commitSizeProperties();
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        value = this.getConfig().parseHeight(value);
-        if (value === this._height) {
-            return;
-        }
-        this._height = value;
-        this.commitSizeProperties();
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        value = this.getConfig().parseX(value);
-        if (value === this._x) {
-            return;
-        }
-        this._x = value;
-        this.commitPositionProperties();
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        value = this.getConfig().parseY(value);
-        if (value === this._y) {
-            return;
-        }
-        this._y = value;
-        this.commitPositionProperties();
-    }
-    get paddingTop() {
-        return this.getConfig().paddingTop;
-    }
-    get paddingLeft() {
-        return this.getConfig().paddingLeft;
-    }
-    get paddingRight() {
-        return this.getConfig().paddingRight;
-    }
-    get paddingBottom() {
-        return this.getConfig().paddingBottom;
-    }
-}
-
-class WindowImpl extends WindowBase {
-    // --------------------------------------------------------------------------
-    //
-    //  Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
     constructor(properties) {
@@ -4460,516 +4164,446 @@ WindowImpl.BLINK_DELAY = 500;
 WindowImpl.SHAKE_DELAY = 500;
 WindowImpl.RESIZE_DELAY = 200;
 
-class WindowResizeable extends WindowImpl {
+class BottomSheetImpl extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    setProperties() {
-        super.setProperties();
-        if (!this.config.isResizeable) {
-            return;
-        }
-        ViewUtil.addClass(this.container, 'vi-resizeable');
-        if (_.isNil(this.resizeMoveHandlerProxy)) {
-            this.resizeMoveHandlerProxy = this.resizeMoveHandler.bind(this);
-        }
-        let edges = {};
-        edges.top = true;
-        edges.left = true;
-        edges.right = true;
-        edges.bottom = true;
-        let param = {};
-        param.edges = edges;
-        this.interactable.resizable(param);
-        this.interactable.on('resizemove', this.resizeMoveHandlerProxy);
+    constructor(properties) {
+        super();
+        // --------------------------------------------------------------------------
+        //
+        //  Properties
+        //
+        // --------------------------------------------------------------------------
+        this._isBlink = false;
+        this._isDisabled = false;
+        // --------------------------------------------------------------------------
+        //
+        //  Protected Methods
+        //
+        // --------------------------------------------------------------------------
+        this.setClosed = () => {
+            this.emit(WindowEvent.CLOSED);
+            this.destroy();
+        };
+        this.setOpened = () => {
+            this.emit(WindowEvent.OPENED);
+        };
+        this.blinkToggle = () => {
+            this.isBlink = !this.isBlink;
+        };
+        this.mouseDownHandlerProxy = (event) => {
+            this.mouseDownHandler(event);
+        };
+        this.mouseClickHandlerProxy = (event) => {
+            this.mouseClickHandler(event);
+        };
+        this.observer = new Subject();
+        this.properties = properties;
+        this.content.window = this;
+        // Have to save for unsubscribe on destroy
+        this._wrapper = this.properties.overlay.hostElement;
+        this._backdrop = this.properties.overlay.backdropElement;
+        this._container = this.properties.overlay.overlayElement;
+        this.setProperties();
+        this.elementsCreate();
+        this.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterDismissed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
     }
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    //  Elements Methods
     //
     // --------------------------------------------------------------------------
-    resizeMoveHandler(event) {
-        if (this.isMinimized) {
-            return;
+    elementsCreate() {
+        this.elements = new Array();
+    }
+    elementsDestroy() {
+        this.elements.forEach(item => this.elementDestroy(item));
+        this.elements = null;
+    }
+    elementAdd(item) {
+        this.elements.push(item);
+        item.instance.window = this;
+        return item;
+    }
+    elementRemove(item) {
+        ArrayUtil.remove(this.elements, item);
+        this.elementDestroy(item);
+        return item;
+    }
+    elementDestroy(item) {
+        item.instance.window = null;
+        item.destroy();
+        return item;
+    }
+    setProperties() {
+        ViewUtil.addClass(this.container, 'vi-bottom-sheet');
+        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
+        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
+        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        /*
+        if (!this.config.isModal) {
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
         }
-        let isChanged = event.dx !== 0 || event.dy !== 0;
-        if (!isChanged) {
-            return;
+        */
+    }
+    commitIsBlinkProperties() { }
+    commitIsDisabledProperties() { }
+    getConfig() {
+        return this.properties.config;
+    }
+    getContainer() {
+        return this.container;
+    }
+    getReference() {
+        return this.properties.reference;
+    }
+    isNeedClickStopPropagation(event) {
+        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
+        if (_.isNil(element)) {
+            return false;
         }
-        if (event.dx !== 0) {
-            let width = this.getWidth();
-            if (_.isNaN(width)) {
-                width = this.calculateWidth();
-            }
-            this.setWidth(width + event.dx, false);
+        element.instance.clickHandler(event);
+        return true;
+    }
+    stopBlinkIfNeed() {
+        this.isBlink = false;
+        if (!this.blinkTimer) {
+            return;
         }
-        if (event.dy !== 0) {
-            let height = this.getHeight();
-            if (_.isNaN(height)) {
-                height = this.calculateHeight();
-            }
-            this.setHeight(height + event.dy, false);
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    mouseDownHandler(event) {
+        this.setOnTop();
+    }
+    mouseClickHandler(event) {
+        if (this.isNeedClickStopPropagation(event)) {
+            event.stopPropagation();
         }
-        this.resizeHandler();
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
+    emit(event) {
+        this.observer.next(event);
+    }
+    close() {
+        this.getReference().dismiss();
+    }
     destroy() {
         if (this.isDestroyed) {
             return;
         }
         super.destroy();
-        this.resizeMoveHandlerProxy = null;
-        if (!_.isNil(this._interactable)) {
-            this._interactable.unset();
-            this._interactable = null;
+        this.elementsDestroy();
+        this._container.removeEventListener('click', this.mouseClickHandlerProxy, true);
+        this._container.removeEventListener('mousedown', this.mouseDownHandlerProxy);
+        if (!_.isNil(this.content)) {
+            this.content.destroy();
         }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    get interactable() {
-        if (_.isNil(this._interactable)) {
-            this._interactable = interact.default(this.container);
-            // this._interactable.styleCursor(false);
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
         }
-        return this._interactable;
+        this.properties = null;
+        this._wrapper = null;
+        this._backdrop = null;
+        this._container = null;
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = null;
     }
-}
-
-class WindowDragable extends WindowResizeable {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties Methods
-        //
-        // --------------------------------------------------------------------------
-        super(...arguments);
-        this.isWasDragged = false;
+    blink() {
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = setInterval(this.blinkToggle, WindowImpl.BLINK_DELAY);
     }
+    shake() { }
+    setOnTop() { }
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    //  Size Methods
     //
     // --------------------------------------------------------------------------
-    setProperties() {
-        super.setProperties();
-        if (this.config.isModal) {
-            return;
-        }
-        ViewUtil.addClass(this.container, 'vi-draggable');
-        if (!this.config.isContentDragable) {
-            return;
-        }
-        this.dragMoveHandlerProxy = this.dragMoveHandler.bind(this);
-        this.dragStartHandlerProxy = this.dragStartHandler.bind(this);
-        let param = {};
-        // let param = {} as any;
-        this.interactable.draggable(param);
-        this.interactable.on('dragmove', this.dragMoveHandlerProxy);
-        this.interactable.on('dragstart', this.dragStartHandlerProxy);
+    getWidth() {
+        return NaN;
     }
-    isNeedClickStopPropagation(event) {
-        return this.isWasDragged || super.isNeedClickStopPropagation(event);
+    getHeight() {
+        return NaN;
     }
+    setWidth(value, isNeedNotify = true) { }
+    setHeight(value, isNeedNotify = true) { }
+    setSize(width, height) { }
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    //  Move Methods
     //
     // --------------------------------------------------------------------------
-    dragStartHandler(event) {
-        this.isWasDragged = true;
-    }
-    dragMoveHandler(event) {
-        let x = this.getX() + event.dx;
-        let y = this.getY() + event.dy;
-        this.move(x, y);
+    getX() {
+        return NaN;
     }
-    mouseClickHandler(event) {
-        super.mouseClickHandler(event);
-        this.isWasDragged = false;
+    setX(value, isNeedNotify = true) { }
+    getY() {
+        return NaN;
     }
+    setY(value, isNeedNotify = true) { }
+    move(x, y) { }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
+    get reference() {
+        return this.properties.reference;
+    }
+    get isBlink() {
+        return this._isBlink;
+    }
+    set isBlink(value) {
+        if (value === this._isBlink) {
             return;
         }
-        super.destroy();
-        this.dragMoveHandlerProxy = null;
-        this.dragStartHandlerProxy = null;
+        this._isBlink = value;
+        this.commitIsBlinkProperties();
     }
-}
-
-class WindowBaseComponent extends WindowDragable {
+    get isShaking() {
+        return false;
+    }
+    set isShaking(value) { }
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    elementsCreate() {
-        super.elementsCreate();
-        if (!(this.content.container instanceof ViewContainerRef)) {
-            return;
-        }
-        if (!this.config.disableClose) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.CLOSE_COMPONENT));
-        }
-        if (this.config.isResizeable) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.RESIZE_COMPONENT));
-        }
-        if (this.config.isMinimizable) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.MINIMIZE_COMPONENT));
-        }
-        if (this.config.isExpandable) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.EXPAND_COMPONENT));
-        }
+    get events() {
+        return this.observer.asObservable();
     }
-    commitIsBlinkProperties() {
-        ViewUtil.toggleClass(this.container, this.blinkClass, this.isBlink);
+    get config() {
+        return this.properties.config;
     }
-    commitIsDisabledProperties() {
-        ViewUtil.toggleClass(this.container, this.disabledClass, this.isDisabled);
-        ViewUtil.toggleClass(this.content.element, this.disabledClass, this.isDisabled);
-        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.disabledClass, this.isDisabled);
+    get content() {
+        return !_.isNil(this.reference) ? this.reference.instance : null;
     }
-    commitIsShakingProperties() {
-        ViewUtil.toggleClasses(this.container, this.shakingClass, this.isShaking);
+    get container() {
+        return this._container;
     }
-    commitIsMinimizedProperties() {
-        ViewUtil.toggleClass(this.container, this.minimizedClass, this.isMinimized);
-        ViewUtil.toggleClass(this.content.element, this.minimizedClass, this.isMinimized);
-        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.minimizedClass, this.isMinimized);
+    get wrapper() {
+        return this._wrapper;
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Protected Properties
-    //
-    // --------------------------------------------------------------------------
-    get blinkClass() {
-        return 'vi-blink';
+    get backdrop() {
+        return this._backdrop;
     }
-    get disabledClass() {
-        return 'vi-disabled';
+    get isOnTop() {
+        return false;
     }
-    get minimizedClass() {
-        return 'vi-minimized';
+    set isOnTop(value) { }
+    get isMinimized() {
+        return false;
     }
-    get shakingClass() {
-        return 'shake-constant shake-horizontal';
+    set isMinimized(value) { }
+    get isDisabled() {
+        return this._isDisabled;
+    }
+    set isDisabled(value) {
+        if (value === this._isDisabled) {
+            return;
+        }
+        this._isDisabled = value;
+        this.commitIsDisabledProperties();
+        this.emit(WindowEvent.DISABLED_CHANGED);
     }
 }
 // --------------------------------------------------------------------------
 //
-//  Static Properties
+//  Constants
 //
 // --------------------------------------------------------------------------
-WindowBaseComponent.CLOSE_COMPONENT = WindowCloseElementComponent;
-WindowBaseComponent.EXPAND_COMPONENT = WindowExpandElementComponent;
-WindowBaseComponent.RESIZE_COMPONENT = WindowResizeElementComponent;
-WindowBaseComponent.MINIMIZE_COMPONENT = WindowMinimizeElementComponent;
+BottomSheetImpl.BLINK_DELAY = 500;
+BottomSheetImpl.SHAKE_DELAY = 500;
 
-class WindowService extends Destroyable {
-    // public topZIndex: number = 1001;
+class WindowElement extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(dialog, language, cookies, sheet) {
+    constructor(element) {
         super();
-        this.sheet = sheet;
-        this.isNeedCheckPositionAfterOpen = true;
-        this.gapX = 25;
-        this.gapY = 25;
-        this.minWidth = 100;
-        this.minHeight = 100;
-        this.paddingTop = 25;
-        this.paddingLeft = 25;
-        this.paddingRight = 25;
-        this.paddingBottom = 25;
-        this.defaultVerticalAlign = WindowAlign.CENTER;
-        this.defaultHorizontalAlign = WindowAlign.CENTER;
-        this.topZIndex = WindowService.Z_INDEX_MAX;
-        this._windows = new Map();
-        this.dialog = dialog;
-        this.language = language;
-        this.observer = new Subject();
-        this.properties = new PropertiesManager(cookies);
-        this.factory = new WindowFactory(WindowBaseComponent);
-        this.questionComponent = WindowQuestionComponent;
+        this.element = element;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    checkWindowParent() {
+        let container = this.getContainer();
+        if (!_.isNil(container)) {
+            ViewUtil.appendChild(container, this.element.nativeElement);
+        }
+    }
+    getContainer() {
+        let item = ViewUtil.parseElement(this.element.nativeElement);
+        while (!_.isNil(item) && item.nodeName.toLowerCase() !== 'mat-dialog-container') {
+            item = item.parentElement;
+        }
+        return item;
     }
+    createChildren() { }
+    destroyChildren() { }
+    commitWindowProperties() { }
     // --------------------------------------------------------------------------
     //
-    // 	Static Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    static getZIndex(window) {
-        return !_.isNil(window) && !_.isNil(window.container) ? parseInt(ViewUtil.getStyle(window.container.parentElement, 'zIndex'), 10) : -1;
+    ngAfterViewInit() {
+        this.createChildren();
+        this.checkWindowParent();
     }
-    static setZIndex(window, index) {
-        if (_.isNil(window)) {
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        if (!_.isNil(window.backdrop)) {
-            ViewUtil.setStyle(window.backdrop, 'zIndex', index);
-        }
-        if (!_.isNil(window.wrapper)) {
-            ViewUtil.setStyle(window.wrapper, 'zIndex', index);
-        }
+        super.destroy();
+        this.destroyChildren();
+        this.element = null;
+        this.window = null;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    sortFunction(first, second) {
-        return WindowService.getZIndex(first) > WindowService.getZIndex(second) ? -1 : 1;
-    }
-    updateTop() {
-        let zIndex = 0;
-        let topWindow = null;
-        let windows = [...this.windowsArray, this.sheet.window];
-        for (let window of windows) {
-            if (_.isNil(window) || _.isNil(window.container)) {
-                continue;
-            }
-            let index = WindowService.getZIndex(window);
-            if (zIndex >= index) {
-                continue;
-            }
-            zIndex = index;
-            topWindow = window;
-        }
-        if (_.isNil(topWindow) || topWindow.isOnTop) {
-            return;
-        }
-        topWindow.isOnTop = true;
-        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
-    }
-    setWindowOnTop(topWindow) {
-        let currentIndex = this.topZIndex - 2;
-        let windows = [...this.windowsArray, this.sheet.window];
-        for (let window of windows) {
-            if (_.isNil(window) || _.isNil(window.container)) {
-                continue;
-            }
-            window.isOnTop = window === topWindow;
-            let zIndex = window.isOnTop ? this.topZIndex : currentIndex--;
-            WindowService.setZIndex(window, zIndex);
-        }
-        this.windowsArray.sort(this.sortFunction);
-        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
-    }
-    checkPosition(item) {
-        while (this.hasSamePosition(item)) {
-            item.move(item.getX() + this.gapX, item.getY() + this.gapY);
-        }
-    }
-    hasSamePosition(itemWindow) {
-        let x = itemWindow.getX();
-        let y = itemWindow.getY();
-        let result = false;
-        this.windowsArray.forEach(window => {
-            if (window !== itemWindow && x === window.getX() && y === window.getY()) {
-                result = true;
-            }
-        });
-        return result;
+    clickHandler(event) {
+        event.stopPropagation();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Setters Methods
+    // 	Protected Properties
     //
     // --------------------------------------------------------------------------
-    add(config, content) {
-        this._windows.set(config, content);
-        this.observer.next(new ObservableData(WindowServiceEvent.OPENED, content.window));
-    }
-    remove(config) {
-        let window = this._windows.get(config);
-        if (!window) {
-            return null;
-        }
-        window.close();
-        this._windows.delete(config);
-        this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window.window));
+    get nativeElement() {
+        return this.element ? this.element.nativeElement : null;
     }
-    getById(id) {
-        let item = _.find(Array.from(this._windows.values()), item => item.config.id === id);
-        return !_.isNil(item) ? item.window : null;
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Properties
+    //
+    // --------------------------------------------------------------------------
+    get window() {
+        return this._window;
     }
-    setDefaultProperties(config) {
-        if (!config.verticalAlign) {
-            config.verticalAlign = this.defaultVerticalAlign;
-        }
-        if (!config.horizontalAlign) {
-            config.horizontalAlign = this.defaultHorizontalAlign;
-        }
-        if (_.isNaN(config.defaultMinWidth)) {
-            config.defaultMinWidth = this.minWidth;
-        }
-        if (_.isNaN(config.defaultMinHeight)) {
-            config.defaultMinHeight = this.minHeight;
-        }
-        if (_.isNaN(config.paddingTop)) {
-            config.paddingTop = this.paddingTop;
-        }
-        if (_.isNaN(config.paddingLeft)) {
-            config.paddingLeft = this.paddingLeft;
-        }
-        if (_.isNaN(config.paddingRight)) {
-            config.paddingRight = this.paddingRight;
-        }
-        if (_.isNaN(config.paddingBottom)) {
-            config.paddingBottom = this.paddingBottom;
+    set window(value) {
+        if (value === this._window) {
+            return;
         }
-        if (config.propertiesId) {
-            this.properties.load(config.propertiesId, config);
+        this._window = value;
+        if (this.window) {
+            this.commitWindowProperties();
         }
-        config.setDefaultProperties();
     }
+}
+WindowElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowElement, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowElement, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowCloseElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    open(component, config) {
-        let window = null;
-        if (config.id) {
-            window = this.getById(config.id);
-            if (window) {
-                return window.content;
-            }
-        }
-        this.setDefaultProperties(config);
-        // let dialog = this.dialog as any;
-        // dialog._getOverlayState = config.isModal ? dialog.getOverlayStateModal : dialog.getOverlayStateNonModal;
-        let reference = this.dialog.open(component, config);
-        window = this.factory.create({ config, reference, overlay: reference._overlayRef });
-        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
-        let subscription = window.events.subscribe(event => {
-            switch (event) {
-                case WindowEvent.OPENED:
-                    this.add(config, reference.componentInstance);
-                    this.setWindowOnTop(window);
-                    if (this.isNeedCheckPositionAfterOpen) {
-                        this.checkPosition(window);
-                    }
-                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
-                    break;
-                case WindowEvent.CLOSED:
-                    subscription.unsubscribe();
-                    this.remove(config);
-                    if (window.isOnTop && this.windows.size > 0) {
-                        this.updateTop();
-                    }
-                    break;
-                case WindowEvent.RESIZED:
-                    if (!_.isNil(config.propertiesId)) {
-                        this.properties.save(config.propertiesId, window);
-                    }
-                    break;
-                case WindowEvent.SET_ON_TOP:
-                    this.setWindowOnTop(window);
-                    break;
-            }
-        });
-        return window.content;
+    constructor(element) {
+        super(element);
     }
-    get(value) {
-        let id = value.toString();
-        if (value instanceof WindowConfig) {
-            id = value.id;
-        }
-        if (!id) {
-            return null;
-        }
-        let window = this.getById(id);
-        if (_.isNil(window)) {
-            return null;
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowCloseElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowCloseElementComponent.ICON_VALUE);
         }
-        return window.content;
-    }
-    has(value) {
-        return !_.isNil(this.get(value));
-    }
-    setOnTop(value) {
-        let content = this.get(value);
-        if (!content) {
-            return false;
+        if (!_.isNil(WindowCloseElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowCloseElementComponent.ICON_CLASS);
         }
-        content.window.setOnTop();
-        return true;
-    }
-    removeAll() {
-        this.windowsArray.forEach(window => window.close());
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.removeAll();
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
-        }
-        if (!_.isNil(this.properties)) {
-            this.properties.destroy();
-            this.properties = null;
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.close();
         }
-        this.factory = null;
-        this.questionComponent = null;
-        this.dialog = null;
-        this.language = null;
-        this._windows = null;
     }
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowCloseElementComponent.ICON_CLASS = 'fas fa-times';
+WindowCloseElementComponent.ICON_VALUE = null;
+WindowCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseElementComponent, selector: "vi-window-close-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-close-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowExpandElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Additional Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    info(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
-        return this.open(this.questionComponent, config).config.data;
-    }
-    question(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
-        return this.open(this.questionComponent, config).config.data;
+    constructor(element) {
+        super(element);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Properties
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    get windowsArray() {
-        return Array.from(this.windows.values()).map(item => item.window);
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowExpandElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowExpandElementComponent.ICON_VALUE);
+        }
+        if (!_.isNil(WindowExpandElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowExpandElementComponent.ICON_CLASS);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
-    }
-    get windows() {
-        return this._windows;
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.emit(WindowEvent.EXPAND);
+        }
     }
 }
 // --------------------------------------------------------------------------
@@ -4977,328 +4611,351 @@ class WindowService extends Destroyable {
 // 	Constants
 //
 // --------------------------------------------------------------------------
-WindowService.Z_INDEX_MAX = 1000;
-WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, deps: [{ token: i1.MatDialog }, { token: i1$1.LanguageService }, { token: CookieService }, { token: BottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
-WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.LanguageService }, { type: CookieService }, { type: BottomSheetService }]; } });
-class PropertiesManager extends Destroyable {
+WindowExpandElementComponent.ICON_CLASS = 'fas fa-angle-double-up';
+WindowExpandElementComponent.ICON_VALUE = null;
+WindowExpandElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowExpandElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowExpandElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowExpandElementComponent, selector: "vi-window-expand-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowExpandElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-expand-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowResizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(cookies) {
-        super();
-        this.cookies = cookies;
+    constructor(element) {
+        super(element);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    load(name, config) {
-        let item = this.cookies.getObject(name + 'Window');
-        if (!item) {
-            return;
-        }
-        if (item.hasOwnProperty('width')) {
-            config.defaultWidth = item.width;
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
         }
-        if (item.hasOwnProperty('height')) {
-            config.defaultHeight = item.height;
+        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
         }
+        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
     }
-    save(name, window) {
-        this.cookies.putObject(name + 'Window', {
-            width: window.getWidth(),
-            height: window.getHeight()
-        });
-    }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.emit(WindowEvent.EXPAND);
         }
-        super.destroy();
-        this.cookies = null;
     }
 }
-var WindowServiceEvent;
-(function (WindowServiceEvent) {
-    WindowServiceEvent["OPEN_STARTED"] = "OPEN_STARTED";
-    WindowServiceEvent["OPENED"] = "OPENED";
-    WindowServiceEvent["OPEN_FINISHED"] = "OPEN_FINISHED";
-    WindowServiceEvent["CLOSED"] = "CLOSED";
-    WindowServiceEvent["SETTED_ON_TOP"] = "SETTED_ON_TOP";
-})(WindowServiceEvent || (WindowServiceEvent = {}));
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
+WindowResizeElementComponent.ICON_VALUE = null;
+WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowResizeElementComponent, selector: "vi-window-resize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class BottomSheetImpl extends DestroyableContainer {
+class WindowMinimizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(properties) {
-        super();
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        this._isBlink = false;
-        this._isDisabled = false;
+    constructor(element) {
+        super(element);
         // --------------------------------------------------------------------------
         //
-        //  Protected Methods
+        // 	Private Methods
         //
         // --------------------------------------------------------------------------
-        this.setClosed = () => {
-            this.emit(WindowEvent.CLOSED);
-            this.destroy();
-        };
-        this.setOpened = () => {
-            this.emit(WindowEvent.OPENED);
-        };
-        this.blinkToggle = () => {
-            this.isBlink = !this.isBlink;
-        };
-        this.mouseDownHandlerProxy = (event) => {
-            this.mouseDownHandler(event);
-        };
-        this.mouseClickHandlerProxy = (event) => {
-            this.mouseClickHandler(event);
+        this.commitIconProperties = () => {
+            let icon = this.window.isMinimized ? WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE : WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE;
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', icon);
         };
-        this.observer = new Subject();
-        this.properties = properties;
-        this.content.window = this;
-        // Have to save for unsubscribe on destroy
-        this._wrapper = this.properties.overlay.hostElement;
-        this._backdrop = this.properties.overlay.backdropElement;
-        this._container = this.properties.overlay.overlayElement;
-        this.setProperties();
-        this.elementsCreate();
-        this.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterDismissed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
     }
     // --------------------------------------------------------------------------
     //
-    //  Elements Methods
+    // 	Protected Methods
     //
     // --------------------------------------------------------------------------
-    elementsCreate() {
-        this.elements = new Array();
-    }
-    elementsDestroy() {
-        this.elements.forEach(item => this.elementDestroy(item));
-        this.elements = null;
-    }
-    elementAdd(item) {
-        this.elements.push(item);
-        item.instance.window = this;
-        return item;
-    }
-    elementRemove(item) {
-        ArrayUtil.remove(this.elements, item);
-        this.elementDestroy(item);
-        return item;
-    }
-    elementDestroy(item) {
-        item.instance.window = null;
-        item.destroy();
-        return item;
+    commitWindowProperties() {
+        super.commitWindowProperties();
+        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
+            if (event === WindowEvent.MINIMIZED_CHANGED) {
+                this.commitIconProperties();
+            }
+        });
     }
-    setProperties() {
-        ViewUtil.addClass(this.container, 'vi-bottom-sheet');
-        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
-        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
-        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
-        /*
-        if (!this.config.isModal) {
-            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
         }
-        */
-    }
-    commitIsBlinkProperties() { }
-    commitIsDisabledProperties() { }
-    getConfig() {
-        return this.properties.config;
-    }
-    getContainer() {
-        return this.container;
-    }
-    getReference() {
-        return this.properties.reference;
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    isNeedClickStopPropagation(event) {
-        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
-        if (_.isNil(element)) {
-            return false;
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.isMinimized = !this.window.isMinimized;
         }
-        element.instance.clickHandler(event);
-        return true;
     }
-    stopBlinkIfNeed() {
-        this.isBlink = false;
-        if (!this.blinkTimer) {
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowMinimizeElementComponent.ICON_CLASS = null;
+WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeElementComponent, selector: "vi-window-minimize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-minimize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowResizeable extends WindowImpl {
+    // --------------------------------------------------------------------------
+    //
+    //  Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    setProperties() {
+        super.setProperties();
+        if (!this.config.isResizeable) {
             return;
         }
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
+        ViewUtil.addClass(this.container, 'vi-resizeable');
+        if (_.isNil(this.resizeMoveHandlerProxy)) {
+            this.resizeMoveHandlerProxy = this.resizeMoveHandler.bind(this);
+        }
+        let edges = {};
+        edges.top = true;
+        edges.left = true;
+        edges.right = true;
+        edges.bottom = true;
+        let param = {};
+        param.edges = edges;
+        this.interactable.resizable(param);
+        this.interactable.on('resizemove', this.resizeMoveHandlerProxy);
     }
     // --------------------------------------------------------------------------
     //
     //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    mouseDownHandler(event) {
-        this.setOnTop();
-    }
-    mouseClickHandler(event) {
-        if (this.isNeedClickStopPropagation(event)) {
-            event.stopPropagation();
+    resizeMoveHandler(event) {
+        if (this.isMinimized) {
+            return;
+        }
+        let isChanged = event.dx !== 0 || event.dy !== 0;
+        if (!isChanged) {
+            return;
+        }
+        if (event.dx !== 0) {
+            let width = this.getWidth();
+            if (_.isNaN(width)) {
+                width = this.calculateWidth();
+            }
+            this.setWidth(width + event.dx, false);
         }
+        if (event.dy !== 0) {
+            let height = this.getHeight();
+            if (_.isNaN(height)) {
+                height = this.calculateHeight();
+            }
+            this.setHeight(height + event.dy, false);
+        }
+        this.resizeHandler();
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    emit(event) {
-        this.observer.next(event);
-    }
-    close() {
-        this.getReference().dismiss();
-    }
     destroy() {
         if (this.isDestroyed) {
             return;
         }
         super.destroy();
-        this.elementsDestroy();
-        this._container.removeEventListener('click', this.mouseClickHandlerProxy, true);
-        this._container.removeEventListener('mousedown', this.mouseDownHandlerProxy);
-        if (!_.isNil(this.content)) {
-            this.content.destroy();
-        }
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
+        this.resizeMoveHandlerProxy = null;
+        if (!_.isNil(this._interactable)) {
+            this._interactable.unset();
+            this._interactable = null;
         }
-        this.properties = null;
-        this._wrapper = null;
-        this._backdrop = null;
-        this._container = null;
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
-    }
-    blink() {
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = setInterval(this.blinkToggle, WindowImpl.BLINK_DELAY);
     }
-    shake() { }
-    setOnTop() { }
     // --------------------------------------------------------------------------
     //
-    //  Size Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    getWidth() {
-        return NaN;
+    get interactable() {
+        if (_.isNil(this._interactable)) {
+            this._interactable = interact.default(this.container);
+            // this._interactable.styleCursor(false);
+        }
+        return this._interactable;
     }
-    getHeight() {
-        return NaN;
+}
+
+class WindowDragable extends WindowResizeable {
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Properties Methods
+        //
+        // --------------------------------------------------------------------------
+        super(...arguments);
+        this.isWasDragged = false;
     }
-    setWidth(value, isNeedNotify = true) { }
-    setHeight(value, isNeedNotify = true) { }
-    setSize(width, height) { }
     // --------------------------------------------------------------------------
     //
-    //  Move Methods
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    getX() {
-        return NaN;
+    setProperties() {
+        super.setProperties();
+        if (this.config.isModal) {
+            return;
+        }
+        ViewUtil.addClass(this.container, 'vi-draggable');
+        if (!this.config.isContentDragable) {
+            return;
+        }
+        this.dragMoveHandlerProxy = this.dragMoveHandler.bind(this);
+        this.dragStartHandlerProxy = this.dragStartHandler.bind(this);
+        let param = {};
+        // let param = {} as any;
+        this.interactable.draggable(param);
+        this.interactable.on('dragmove', this.dragMoveHandlerProxy);
+        this.interactable.on('dragstart', this.dragStartHandlerProxy);
     }
-    setX(value, isNeedNotify = true) { }
-    getY() {
-        return NaN;
+    isNeedClickStopPropagation(event) {
+        return this.isWasDragged || super.isNeedClickStopPropagation(event);
     }
-    setY(value, isNeedNotify = true) { }
-    move(x, y) { }
     // --------------------------------------------------------------------------
     //
-    //  Private Properties
+    //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    get reference() {
-        return this.properties.reference;
+    dragStartHandler(event) {
+        this.isWasDragged = true;
     }
-    get isBlink() {
-        return this._isBlink;
+    dragMoveHandler(event) {
+        let x = this.getX() + event.dx;
+        let y = this.getY() + event.dy;
+        this.move(x, y);
     }
-    set isBlink(value) {
-        if (value === this._isBlink) {
+    mouseClickHandler(event) {
+        super.mouseClickHandler(event);
+        this.isWasDragged = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        this._isBlink = value;
-        this.commitIsBlinkProperties();
-    }
-    get isShaking() {
-        return false;
+        super.destroy();
+        this.dragMoveHandlerProxy = null;
+        this.dragStartHandlerProxy = null;
     }
-    set isShaking(value) { }
+}
+
+class WindowBaseComponent extends WindowDragable {
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
-    }
-    get config() {
-        return this.properties.config;
+    elementsCreate() {
+        super.elementsCreate();
+        if (!(this.content.container instanceof ViewContainerRef)) {
+            return;
+        }
+        if (!this.config.disableClose) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.CLOSE_COMPONENT));
+        }
+        if (this.config.isResizeable) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.RESIZE_COMPONENT));
+        }
+        if (this.config.isMinimizable) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.MINIMIZE_COMPONENT));
+        }
+        if (this.config.isExpandable) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.EXPAND_COMPONENT));
+        }
     }
-    get content() {
-        return !_.isNil(this.reference) ? this.reference.instance : null;
+    commitIsBlinkProperties() {
+        ViewUtil.toggleClass(this.container, this.blinkClass, this.isBlink);
     }
-    get container() {
-        return this._container;
+    commitIsDisabledProperties() {
+        ViewUtil.toggleClass(this.container, this.disabledClass, this.isDisabled);
+        ViewUtil.toggleClass(this.content.element, this.disabledClass, this.isDisabled);
+        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.disabledClass, this.isDisabled);
     }
-    get wrapper() {
-        return this._wrapper;
+    commitIsShakingProperties() {
+        ViewUtil.toggleClasses(this.container, this.shakingClass, this.isShaking);
     }
-    get backdrop() {
-        return this._backdrop;
+    commitIsMinimizedProperties() {
+        ViewUtil.toggleClass(this.container, this.minimizedClass, this.isMinimized);
+        ViewUtil.toggleClass(this.content.element, this.minimizedClass, this.isMinimized);
+        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.minimizedClass, this.isMinimized);
     }
-    get isOnTop() {
-        return false;
+    // --------------------------------------------------------------------------
+    //
+    //  Protected Properties
+    //
+    // --------------------------------------------------------------------------
+    get blinkClass() {
+        return 'vi-blink';
     }
-    set isOnTop(value) { }
-    get isMinimized() {
-        return false;
+    get disabledClass() {
+        return 'vi-disabled';
     }
-    set isMinimized(value) { }
-    get isDisabled() {
-        return this._isDisabled;
+    get minimizedClass() {
+        return 'vi-minimized';
     }
-    set isDisabled(value) {
-        if (value === this._isDisabled) {
-            return;
-        }
-        this._isDisabled = value;
-        this.commitIsDisabledProperties();
-        this.emit(WindowEvent.DISABLED_CHANGED);
+    get shakingClass() {
+        return 'shake-constant shake-horizontal';
     }
 }
 // --------------------------------------------------------------------------
 //
-//  Constants
+//  Static Properties
 //
 // --------------------------------------------------------------------------
-BottomSheetImpl.BLINK_DELAY = 500;
-BottomSheetImpl.SHAKE_DELAY = 500;
+WindowBaseComponent.CLOSE_COMPONENT = WindowCloseElementComponent;
+WindowBaseComponent.EXPAND_COMPONENT = WindowExpandElementComponent;
+WindowBaseComponent.RESIZE_COMPONENT = WindowResizeElementComponent;
+WindowBaseComponent.MINIMIZE_COMPONENT = WindowMinimizeElementComponent;
 
 class BottomSheetBaseComponent extends BottomSheetImpl {
     // --------------------------------------------------------------------------
@@ -6490,436 +6147,783 @@ class ThemeAssetDirective extends Destroyable {
     get name() {
         return this._name;
     }
-    set name(value) {
-        if (value === this._name) {
+    set name(value) {
+        if (value === this._name) {
+            return;
+        }
+        if (!_.isNil(this._name)) {
+            this.removeSourceProperties();
+        }
+        this._name = value;
+        if (!_.isNil(value)) {
+            this.setSourceProperties();
+        }
+    }
+    get extension() {
+        return this._extension;
+    }
+    set extension(value) {
+        if (value === this._extension) {
+            return;
+        }
+        this._extension = value;
+        if (!_.isNil(value)) {
+            this.setSourceProperties();
+        }
+    }
+}
+ThemeAssetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetDirective, inputs: { isSound: "isSound", isVideo: "isVideo", isFile: "isFile", isImage: "isImage", isBackground: "isBackground", isIgnoreTheme: "isIgnoreTheme", name: "name", extension: "extension" }, host: { listeners: { "error": "errorLoadingHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
+                type: HostListener,
+                args: ['error', ['$event']]
+            }], isSound: [{
+                type: Input
+            }], isVideo: [{
+                type: Input
+            }], isFile: [{
+                type: Input
+            }], isImage: [{
+                type: Input
+            }], isBackground: [{
+                type: Input
+            }], isIgnoreTheme: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], extension: [{
+                type: Input
+            }] } });
+
+class ThemeAssetBackgroundDirective extends ThemeAssetDirective {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element, theme, themeAsset) {
+        super(element, theme, themeAsset);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    commitSourceProperties() {
+        let value = 'url(' + this.source + ')';
+        ViewUtil.setStyle(this.element, 'backgroundImage', value);
+    }
+    removeSourceProperties() {
+        ViewUtil.removeStyle(this.element, 'backgroundImage');
+    }
+}
+ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetBackgroundDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetBackgroundDirective, selector: "[vi-theme-background]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-background]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
+
+class ThemeAssetImageDirective extends ThemeAssetDirective {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element, theme, themeAsset) {
+        super(element, theme, themeAsset);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    commitSourceProperties() {
+        this.element.src = this.source;
+    }
+    removeSourceProperties() {
+        this.element.src = null;
+    }
+}
+ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetImageDirective, selector: "[vi-theme-image]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-image]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
+
+class ThemeToggleDirective extends Destroyable {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(theme) {
+        super();
+        this.theme = theme;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        let themes = this.theme.themes.collection;
+        let length = themes.length;
+        if (length < 2) {
+            return;
+        }
+        let index = 0;
+        if (this.theme.theme) {
+            index = themes.indexOf(this.theme.theme);
+            if (index < length - 1) {
+                index++;
+            }
+            else {
+                index = 0;
+            }
+        }
+        this.theme.theme = themes[index];
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.theme = null;
+    }
+}
+ThemeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, deps: [{ token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeToggleDirective, selector: "[vi-theme-toggle]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-toggle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThemeService }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class ThemeStyleDirective extends Destroyable {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element, theme) {
+        super();
+        this.theme = theme;
+        this.element = ViewUtil.parseElement(element.nativeElement);
+        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesAdd());
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    commitStyleProperties(name, value) {
+        ViewUtil.setStyle(this.element, name, value, this.flags);
+    }
+    stylePropertiesCheck() {
+        if (this.isNeedStyleAdd()) {
+            this.stylePropertiesAdd();
+        }
+        else if (this.isNeedStyleRemove()) {
+            this.stylePropertiesRemove();
+        }
+    }
+    stylePropertiesRemove() {
+        ViewUtil.removeStyle(this.element, this.styleName);
+    }
+    stylePropertiesAdd() {
+        this.commitStyleProperties(this.styleName, this.theme.getStyle(this.key));
+    }
+    isNeedStyleAdd() {
+        return !_.isNil(this.theme.theme) && !_.isNil(this.styleName);
+    }
+    isNeedStyleRemove() {
+        return !_.isNil(this.styleName);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.key = null;
+        this.theme = null;
+        this.element = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Properties
+    //
+    // --------------------------------------------------------------------------
+    get flags() {
+        return this._flags;
+    }
+    set flags(value) {
+        if (value === this._flags) {
             return;
         }
-        if (!_.isNil(this._name)) {
-            this.removeSourceProperties();
-        }
-        this._name = value;
-        if (!_.isNil(value)) {
-            this.setSourceProperties();
+        this._flags = value;
+        this.stylePropertiesCheck();
+    }
+    get styleName() {
+        return this._styleName;
+    }
+    set styleName(value) {
+        if (value === this._styleName) {
+            return;
         }
+        this._styleName = value;
+        this.stylePropertiesCheck();
     }
-    get extension() {
-        return this._extension;
+    get key() {
+        return this._key;
     }
-    set extension(value) {
-        if (value === this._extension) {
+    set key(value) {
+        if (value === this._key) {
             return;
         }
-        this._extension = value;
+        this._key = value;
         if (!_.isNil(value)) {
-            this.setSourceProperties();
+            this.stylePropertiesCheck();
         }
     }
 }
-ThemeAssetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetDirective, inputs: { isSound: "isSound", isVideo: "isVideo", isFile: "isFile", isImage: "isImage", isBackground: "isBackground", isIgnoreTheme: "isIgnoreTheme", name: "name", extension: "extension" }, host: { listeners: { "error": "errorLoadingHandler($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
-                type: HostListener,
-                args: ['error', ['$event']]
-            }], isSound: [{
-                type: Input
-            }], isVideo: [{
-                type: Input
-            }], isFile: [{
-                type: Input
-            }], isImage: [{
-                type: Input
-            }], isBackground: [{
-                type: Input
-            }], isIgnoreTheme: [{
-                type: Input
-            }], name: [{
+ThemeStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleDirective, selector: "[vi-theme-style]", inputs: { flags: "flags", styleName: "styleName", key: ["vi-theme-style", "key"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-style]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { flags: [{
                 type: Input
-            }], extension: [{
+            }], styleName: [{
                 type: Input
+            }], key: [{
+                type: Input,
+                args: ['vi-theme-style']
             }] } });
 
-class ThemeAssetBackgroundDirective extends ThemeAssetDirective {
+class ThemeStyleHoverDirective extends ThemeStyleDirective {
     // --------------------------------------------------------------------------
     //
     //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme, themeAsset) {
-        super(element, theme, themeAsset);
+    constructor(element, theme) {
+        super(element, theme);
+        // --------------------------------------------------------------------------
+        //
+        //	Properties
+        //
+        // --------------------------------------------------------------------------
+        this._isHover = false;
+        // --------------------------------------------------------------------------
+        //
+        //	Event Handlers
+        //
+        // --------------------------------------------------------------------------
+        this.mouseEnter = (event) => {
+            this.isHover = true;
+        };
+        this.mouseLeave = (event) => {
+            this.isHover = false;
+        };
+        this.flags = RendererStyleFlags2.Important;
+        this.element.addEventListener('mouseenter', this.mouseEnter, false);
+        this.element.addEventListener('mouseleave', this.mouseLeave, false);
     }
     // --------------------------------------------------------------------------
     //
-    //	Private Methods
+    //	Protected Methods
     //
     // --------------------------------------------------------------------------
-    commitSourceProperties() {
-        let value = 'url(' + this.source + ')';
-        ViewUtil.setStyle(this.element, 'backgroundImage', value);
+    isNeedStyleAdd() {
+        return this.isHover && super.isNeedStyleAdd();
     }
-    removeSourceProperties() {
-        ViewUtil.removeStyle(this.element, 'backgroundImage');
+    isNeedStyleRemove() {
+        return !this.isHover || super.isNeedStyleRemove();
     }
-}
-ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetBackgroundDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetBackgroundDirective, selector: "[vi-theme-background]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vi-theme-background]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
-
-class ThemeAssetImageDirective extends ThemeAssetDirective {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme, themeAsset) {
-        super(element, theme, themeAsset);
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.element.removeEventListener('mouseenter', this.mouseEnter, false);
+        this.element.removeEventListener('mouseleave', this.mouseLeave, false);
+        super.destroy();
     }
     // --------------------------------------------------------------------------
     //
-    //	Private Methods
+    //	Public Properties
     //
     // --------------------------------------------------------------------------
-    commitSourceProperties() {
-        this.element.src = this.source;
+    get isHover() {
+        return this._isHover;
     }
-    removeSourceProperties() {
-        this.element.src = null;
+    set isHover(value) {
+        if (value === this._isHover) {
+            return;
+        }
+        this._isHover = value;
+        this.stylePropertiesCheck();
+    }
+    get key() {
+        return super.key;
+    }
+    set key(value) {
+        super.key = value;
+    }
+    get styleName() {
+        return super.styleName;
+    }
+    set styleName(value) {
+        super.styleName = value;
+    }
+    get flags() {
+        return super.flags;
+    }
+    set flags(value) {
+        super.flags = value;
     }
 }
-ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetImageDirective, selector: "[vi-theme-image]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, decorators: [{
+ThemeStyleHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeStyleHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleHoverDirective, selector: "[vi-theme-style-hover]", inputs: { key: ["vi-theme-style-hover", "key"], styleName: "styleName", flags: "flags" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[vi-theme-image]'
+                    selector: '[vi-theme-style-hover]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { key: [{
+                type: Input,
+                args: ['vi-theme-style-hover']
+            }], styleName: [{
+                type: Input
+            }], flags: [{
+                type: Input
+            }] } });
 
-class ThemeToggleDirective extends Destroyable {
-    // --------------------------------------------------------------------------
-    //
-    //	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(theme) {
-        super();
-        this.theme = theme;
-    }
+let declarations = [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective];
+class ThemeModule {
     // --------------------------------------------------------------------------
     //
-    //	Event Handlers
+    // 	Static Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        let themes = this.theme.themes.collection;
-        let length = themes.length;
-        if (length < 2) {
-            return;
-        }
-        let index = 0;
-        if (this.theme.theme) {
-            index = themes.indexOf(this.theme.theme);
-            if (index < length - 1) {
-                index++;
-            }
-            else {
-                index = 0;
-            }
-        }
-        this.theme.theme = themes[index];
+    static forRoot(options) {
+        return {
+            ngModule: ThemeModule,
+            providers: [
+                {
+                    provide: THEME_OPTIONS,
+                    useValue: options || {}
+                },
+                {
+                    provide: ThemeService,
+                    deps: [NativeWindowService, CookieService, THEME_OPTIONS],
+                    useFactory: themeServiceFactory
+                },
+                {
+                    provide: ThemeAssetService,
+                    deps: [ThemeService, NativeWindowService],
+                    useFactory: themeAssetServiceFactory
+                }
+            ]
+        };
     }
-    // --------------------------------------------------------------------------
-    //
-    //	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.theme = null;
+}
+ThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, declarations: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective], imports: [CookieModule], exports: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective] });
+ThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, imports: [[CookieModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CookieModule],
+                    declarations,
+                    exports: declarations
+                }]
+        }] });
+function themeServiceFactory(nativeWindow, cookie, options) {
+    if (!_.isNil(options) && _.isNil(options.service)) {
+        options.service = cookie;
     }
+    return new ThemeService(options, nativeWindow.document);
+}
+function themeAssetServiceFactory(theme) {
+    return new ThemeAssetService(theme);
 }
-ThemeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, deps: [{ token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeToggleDirective, selector: "[vi-theme-toggle]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vi-theme-toggle]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThemeService }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+const THEME_OPTIONS = new InjectionToken(`THEME_OPTIONS`);
 
-class ThemeStyleDirective extends Destroyable {
+class WindowService extends Destroyable {
+    // public topZIndex: number = 1001;
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme) {
+    constructor(dialog, language, cookies, sheet) {
         super();
-        this.theme = theme;
-        this.element = ViewUtil.parseElement(element.nativeElement);
-        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesAdd());
+        this.sheet = sheet;
+        this.isNeedCheckPositionAfterOpen = true;
+        this.gapX = 25;
+        this.gapY = 25;
+        this.minWidth = 100;
+        this.minHeight = 100;
+        this.paddingTop = 25;
+        this.paddingLeft = 25;
+        this.paddingRight = 25;
+        this.paddingBottom = 25;
+        this.defaultVerticalAlign = WindowAlign.CENTER;
+        this.defaultHorizontalAlign = WindowAlign.CENTER;
+        this.topZIndex = WindowService.Z_INDEX_MAX;
+        this._windows = new Map();
+        this.dialog = dialog;
+        this.language = language;
+        this.observer = new Subject();
+        this.properties = new PropertiesManager(cookies);
+        this.factory = new WindowFactory(WindowBaseComponent);
+        this.questionComponent = WindowQuestionComponent;
     }
     // --------------------------------------------------------------------------
     //
-    //	Protected Methods
+    // 	Static Methods
     //
     // --------------------------------------------------------------------------
-    commitStyleProperties(name, value) {
-        ViewUtil.setStyle(this.element, name, value, this.flags);
+    static getZIndex(window) {
+        return !_.isNil(window) && !_.isNil(window.container) ? parseInt(ViewUtil.getStyle(window.container.parentElement, 'zIndex'), 10) : -1;
     }
-    stylePropertiesCheck() {
-        if (this.isNeedStyleAdd()) {
-            this.stylePropertiesAdd();
+    static setZIndex(window, index) {
+        if (_.isNil(window)) {
+            return;
         }
-        else if (this.isNeedStyleRemove()) {
-            this.stylePropertiesRemove();
+        if (!_.isNil(window.backdrop)) {
+            ViewUtil.setStyle(window.backdrop, 'zIndex', index);
+        }
+        if (!_.isNil(window.wrapper)) {
+            ViewUtil.setStyle(window.wrapper, 'zIndex', index);
         }
     }
-    stylePropertiesRemove() {
-        ViewUtil.removeStyle(this.element, this.styleName);
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    sortFunction(first, second) {
+        return WindowService.getZIndex(first) > WindowService.getZIndex(second) ? -1 : 1;
     }
-    stylePropertiesAdd() {
-        this.commitStyleProperties(this.styleName, this.theme.getStyle(this.key));
+    updateTop() {
+        let zIndex = 0;
+        let topWindow = null;
+        let windows = [...this.windowsArray, this.sheet.window];
+        for (let window of windows) {
+            if (_.isNil(window) || _.isNil(window.container)) {
+                continue;
+            }
+            let index = WindowService.getZIndex(window);
+            if (zIndex >= index) {
+                continue;
+            }
+            zIndex = index;
+            topWindow = window;
+        }
+        if (_.isNil(topWindow) || topWindow.isOnTop) {
+            return;
+        }
+        topWindow.isOnTop = true;
+        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
     }
-    isNeedStyleAdd() {
-        return !_.isNil(this.theme.theme) && !_.isNil(this.styleName);
+    setWindowOnTop(topWindow) {
+        let currentIndex = this.topZIndex - 2;
+        let windows = [...this.windowsArray, this.sheet.window];
+        for (let window of windows) {
+            if (_.isNil(window) || _.isNil(window.container)) {
+                continue;
+            }
+            window.isOnTop = window === topWindow;
+            let zIndex = window.isOnTop ? this.topZIndex : currentIndex--;
+            WindowService.setZIndex(window, zIndex);
+        }
+        this.windowsArray.sort(this.sortFunction);
+        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
     }
-    isNeedStyleRemove() {
-        return !_.isNil(this.styleName);
+    checkPosition(item) {
+        while (this.hasSamePosition(item)) {
+            item.move(item.getX() + this.gapX, item.getY() + this.gapY);
+        }
+    }
+    hasSamePosition(itemWindow) {
+        let x = itemWindow.getX();
+        let y = itemWindow.getY();
+        let result = false;
+        this.windowsArray.forEach(window => {
+            if (window !== itemWindow && x === window.getX() && y === window.getY()) {
+                result = true;
+            }
+        });
+        return result;
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Setters Methods
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
+    add(config, content) {
+        this._windows.set(config, content);
+        this.observer.next(new ObservableData(WindowServiceEvent.OPENED, content.window));
+    }
+    remove(config) {
+        let window = this._windows.get(config);
+        if (!window) {
+            return null;
         }
-        super.destroy();
-        this.key = null;
-        this.theme = null;
-        this.element = null;
+        window.close();
+        this._windows.delete(config);
+        this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window.window));
+    }
+    getById(id) {
+        let item = _.find(Array.from(this._windows.values()), item => item.config.id === id);
+        return !_.isNil(item) ? item.window : null;
+    }
+    setDefaultProperties(config) {
+        if (!config.verticalAlign) {
+            config.verticalAlign = this.defaultVerticalAlign;
+        }
+        if (!config.horizontalAlign) {
+            config.horizontalAlign = this.defaultHorizontalAlign;
+        }
+        if (_.isNaN(config.defaultMinWidth)) {
+            config.defaultMinWidth = this.minWidth;
+        }
+        if (_.isNaN(config.defaultMinHeight)) {
+            config.defaultMinHeight = this.minHeight;
+        }
+        if (_.isNaN(config.paddingTop)) {
+            config.paddingTop = this.paddingTop;
+        }
+        if (_.isNaN(config.paddingLeft)) {
+            config.paddingLeft = this.paddingLeft;
+        }
+        if (_.isNaN(config.paddingRight)) {
+            config.paddingRight = this.paddingRight;
+        }
+        if (_.isNaN(config.paddingBottom)) {
+            config.paddingBottom = this.paddingBottom;
+        }
+        if (config.propertiesId) {
+            this.properties.load(config.propertiesId, config);
+        }
+        config.setDefaultProperties();
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Properties
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    get flags() {
-        return this._flags;
+    open(component, config) {
+        let window = null;
+        if (config.id) {
+            window = this.getById(config.id);
+            if (window) {
+                return window.content;
+            }
+        }
+        this.setDefaultProperties(config);
+        // let dialog = this.dialog as any;
+        // dialog._getOverlayState = config.isModal ? dialog.getOverlayStateModal : dialog.getOverlayStateNonModal;
+        let reference = this.dialog.open(component, config);
+        window = this.factory.create({ config, reference, overlay: reference._overlayRef });
+        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
+        let subscription = window.events.subscribe(event => {
+            switch (event) {
+                case WindowEvent.OPENED:
+                    this.add(config, reference.componentInstance);
+                    this.setWindowOnTop(window);
+                    if (this.isNeedCheckPositionAfterOpen) {
+                        this.checkPosition(window);
+                    }
+                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
+                    break;
+                case WindowEvent.CLOSED:
+                    subscription.unsubscribe();
+                    this.remove(config);
+                    if (window.isOnTop && this.windows.size > 0) {
+                        this.updateTop();
+                    }
+                    break;
+                case WindowEvent.RESIZED:
+                    if (!_.isNil(config.propertiesId)) {
+                        this.properties.save(config.propertiesId, window);
+                    }
+                    break;
+                case WindowEvent.SET_ON_TOP:
+                    this.setWindowOnTop(window);
+                    break;
+            }
+        });
+        return window.content;
     }
-    set flags(value) {
-        if (value === this._flags) {
-            return;
+    get(value) {
+        let id = value.toString();
+        if (value instanceof WindowConfig) {
+            id = value.id;
         }
-        this._flags = value;
-        this.stylePropertiesCheck();
+        if (!id) {
+            return null;
+        }
+        let window = this.getById(id);
+        if (_.isNil(window)) {
+            return null;
+        }
+        return window.content;
     }
-    get styleName() {
-        return this._styleName;
+    has(value) {
+        return !_.isNil(this.get(value));
     }
-    set styleName(value) {
-        if (value === this._styleName) {
-            return;
+    setOnTop(value) {
+        let content = this.get(value);
+        if (!content) {
+            return false;
         }
-        this._styleName = value;
-        this.stylePropertiesCheck();
+        content.window.setOnTop();
+        return true;
     }
-    get key() {
-        return this._key;
+    removeAll() {
+        this.windowsArray.forEach(window => window.close());
     }
-    set key(value) {
-        if (value === this._key) {
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        this._key = value;
-        if (!_.isNil(value)) {
-            this.stylePropertiesCheck();
+        super.destroy();
+        this.removeAll();
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
+        }
+        if (!_.isNil(this.properties)) {
+            this.properties.destroy();
+            this.properties = null;
         }
+        this.factory = null;
+        this.questionComponent = null;
+        this.dialog = null;
+        this.language = null;
+        this._windows = null;
     }
-}
-ThemeStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleDirective, selector: "[vi-theme-style]", inputs: { flags: "flags", styleName: "styleName", key: ["vi-theme-style", "key"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vi-theme-style]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { flags: [{
-                type: Input
-            }], styleName: [{
-                type: Input
-            }], key: [{
-                type: Input,
-                args: ['vi-theme-style']
-            }] } });
-
-class ThemeStyleHoverDirective extends ThemeStyleDirective {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    // 	Additional Methods
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme) {
-        super(element, theme);
-        // --------------------------------------------------------------------------
-        //
-        //	Properties
-        //
-        // --------------------------------------------------------------------------
-        this._isHover = false;
-        // --------------------------------------------------------------------------
-        //
-        //	Event Handlers
-        //
-        // --------------------------------------------------------------------------
-        this.mouseEnter = (event) => {
-            this.isHover = true;
-        };
-        this.mouseLeave = (event) => {
-            this.isHover = false;
-        };
-        this.flags = RendererStyleFlags2.Important;
-        this.element.addEventListener('mouseenter', this.mouseEnter, false);
-        this.element.addEventListener('mouseleave', this.mouseLeave, false);
+    info(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
+        return this.open(this.questionComponent, config).config.data;
+    }
+    question(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
+        return this.open(this.questionComponent, config).config.data;
     }
     // --------------------------------------------------------------------------
     //
-    //	Protected Methods
+    // 	Private Properties
     //
     // --------------------------------------------------------------------------
-    isNeedStyleAdd() {
-        return this.isHover && super.isNeedStyleAdd();
-    }
-    isNeedStyleRemove() {
-        return !this.isHover || super.isNeedStyleRemove();
+    get windowsArray() {
+        return Array.from(this.windows.values()).map(item => item.window);
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        this.element.removeEventListener('mouseenter', this.mouseEnter, false);
-        this.element.removeEventListener('mouseleave', this.mouseLeave, false);
-        super.destroy();
+    get events() {
+        return this.observer.asObservable();
+    }
+    get windows() {
+        return this._windows;
     }
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowService.Z_INDEX_MAX = 1000;
+WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, deps: [{ token: i1.MatDialog }, { token: i1$1.LanguageService }, { token: CookieService }, { token: BottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
+WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.LanguageService }, { type: CookieService }, { type: BottomSheetService }]; } });
+class PropertiesManager extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    //	Public Properties
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    get isHover() {
-        return this._isHover;
-    }
-    set isHover(value) {
-        if (value === this._isHover) {
-            return;
-        }
-        this._isHover = value;
-        this.stylePropertiesCheck();
-    }
-    get key() {
-        return super.key;
-    }
-    set key(value) {
-        super.key = value;
-    }
-    get styleName() {
-        return super.styleName;
-    }
-    set styleName(value) {
-        super.styleName = value;
-    }
-    get flags() {
-        return super.flags;
-    }
-    set flags(value) {
-        super.flags = value;
+    constructor(cookies) {
+        super();
+        this.cookies = cookies;
     }
-}
-ThemeStyleHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeStyleHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleHoverDirective, selector: "[vi-theme-style-hover]", inputs: { key: ["vi-theme-style-hover", "key"], styleName: "styleName", flags: "flags" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vi-theme-style-hover]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { key: [{
-                type: Input,
-                args: ['vi-theme-style-hover']
-            }], styleName: [{
-                type: Input
-            }], flags: [{
-                type: Input
-            }] } });
-
-let declarations = [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective];
-class ThemeModule {
     // --------------------------------------------------------------------------
     //
-    // 	Static Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    static forRoot(options) {
-        return {
-            ngModule: ThemeModule,
-            providers: [
-                {
-                    provide: THEME_OPTIONS,
-                    useValue: options || {}
-                },
-                {
-                    provide: ThemeService,
-                    deps: [NativeWindowService, CookieService, THEME_OPTIONS],
-                    useFactory: themeServiceFactory
-                },
-                {
-                    provide: ThemeAssetService,
-                    deps: [ThemeService, NativeWindowService],
-                    useFactory: themeAssetServiceFactory
-                }
-            ]
-        };
+    load(name, config) {
+        let item = this.cookies.getObject(name + 'Window');
+        if (!item) {
+            return;
+        }
+        if (item.hasOwnProperty('width')) {
+            config.defaultWidth = item.width;
+        }
+        if (item.hasOwnProperty('height')) {
+            config.defaultHeight = item.height;
+        }
     }
-}
-ThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, declarations: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective], imports: [CookieModule], exports: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective] });
-ThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, imports: [[CookieModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CookieModule],
-                    declarations,
-                    exports: declarations
-                }]
-        }] });
-function themeServiceFactory(nativeWindow, cookie, options) {
-    if (!_.isNil(options) && _.isNil(options.service)) {
-        options.service = cookie;
+    save(name, window) {
+        this.cookies.putObject(name + 'Window', {
+            width: window.getWidth(),
+            height: window.getHeight()
+        });
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.cookies = null;
     }
-    return new ThemeService(options, nativeWindow.document);
-}
-function themeAssetServiceFactory(theme) {
-    return new ThemeAssetService(theme);
 }
-const THEME_OPTIONS = new InjectionToken(`THEME_OPTIONS`);
 
 class WindowDragAreaDirective extends Destroyable {
     // --------------------------------------------------------------------------
@@ -7056,6 +7060,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class IsServerDirective {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(platform, templateRef, viewContainer) {
+        if (platform.isPlatformServer) {
+            viewContainer.createEmbeddedView(templateRef);
+        }
+    }
+}
+IsServerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IsServerDirective, deps: [{ token: PlatformService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+IsServerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: IsServerDirective, selector: "[viIsServer]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IsServerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viIsServer]'
+                }]
+        }], ctorParameters: function () { return [{ type: PlatformService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+
+class IsBrowserDirective {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(platform, templateRef, viewContainer) {
+        if (platform.isPlatformBrowser) {
+            viewContainer.createEmbeddedView(templateRef);
+        }
+    }
+}
+IsBrowserDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IsBrowserDirective, deps: [{ token: PlatformService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+IsBrowserDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: IsBrowserDirective, selector: "[viIsBrowser]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IsBrowserDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viIsBrowser]'
+                }]
+        }], ctorParameters: function () { return [{ type: PlatformService }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+
 class MenuTriggerForDirective extends MatMenuTrigger {
     //--------------------------------------------------------------------------
     //
@@ -7114,6 +7160,8 @@ const DECLARATIONS$1 = [
     CamelCasePipe,
     StartCasePipe,
     NgModelErrorPipe,
+    IsServerDirective,
+    IsBrowserDirective,
     MomentDatePipe,
     MomentTimePipe,
     MomentDateFromNowPipe,
@@ -7173,6 +7221,8 @@ VICommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CamelCasePipe,
         StartCasePipe,
         NgModelErrorPipe,
+        IsServerDirective,
+        IsBrowserDirective,
         MomentDatePipe,
         MomentTimePipe,
         MomentDateFromNowPipe,
@@ -7197,6 +7247,8 @@ VICommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CamelCasePipe,
         StartCasePipe,
         NgModelErrorPipe,
+        IsServerDirective,
+        IsBrowserDirective,
         MomentDatePipe,
         MomentTimePipe,
         MomentDateFromNowPipe,
@@ -10111,5 +10163,5 @@ class TransportLazyModule {
  * Generated bundle index. Do not edit.
  */
 
-export { APPLICATION_INJECTOR, ApplicationBaseComponent, ApplicationComponent, AspectRatioResizeDirective, AssetBackgroundDirective, AssetBackgroundPipe, AssetFilePipe, AssetIconPipe, AssetImagePipe, AssetModule, AssetSoundPipe, AssetVideoPipe, AutoScrollBottomDirective, BootstrapBreakpoint, BootstrapBreakpointService, BootstrapBreakpointServiceEvent, BottomSheetBaseComponent, BottomSheetModule, BottomSheetService, COOKIE_OPTIONS, CamelCasePipe, CanDeactivateGuard, CdkTableBaseComponent, CdkTableCellClassNamePipe, CdkTableCellStyleNamePipe, CdkTableCellValuePipe, CdkTableCellValuePipePure, CdkTableColumnClassNamePipe, CdkTableColumnStyleNamePipe, CdkTableDataSource, CdkTableFilterableComponent, CdkTableFilterableMapCollection, CdkTablePaginableBookmarkComponent, CdkTablePaginableBookmarkMapCollection, CdkTablePaginableComponent, CdkTablePaginableMapCollection, CdkTableRowClassNamePipe, CdkTableRowStyleNamePipe, ClickToCopyDirective, ClickToSelectDirective, CookieModule, CookieOptions, CookieService, Direction, FinancePipe, FocusDirective, FocusManager, FormElementAsync, FormElementSync, HTMLContentTitleDirective, HTMLTitleDirective, INotification, INotificationContent, IUser, IVICommonOptions, IWindow, IWindowContent, InfiniteScrollDirective, LANGUAGE_OPTIONS, LanguageDirective, LanguageHasDirective, LanguageMatPaginatorIntl, LanguageModule, LanguageMomentDateAdapter, LanguagePipe, LanguagePipeHas, LanguagePipeHasPure, LanguagePipePure, LanguageRequireResolver, LanguageResolver, LanguageSelectorComponent, LazyModuleLoader, ListItem, ListItems, LoginBaseService, LoginBaseServiceEvent, LoginGuard, LoginIfCanGuard, LoginNotGuard, LoginRequireResolver, LoginResolver, MenuItem, MenuItemBase, MenuItems, MenuListComponent, MenuTriggerForDirective, MessageBaseComponent, MomentDateAdaptivePipe, MomentDateFromNowPipe, MomentDatePipe, MomentTimePipe, NavigationMenuItem, NgModelErrorPipe, NotificationBaseComponent, NotificationComponent, NotificationConfig, NotificationEvent, NotificationFactory, NotificationModule, NotificationService, NotificationServiceEvent, PipeBaseService, PlatformService, PrettifyPipe, PropertiesManager, QuestionEvent, QuestionManager, QuestionMode, ResizeDirective, ResizeManager, RouterBaseService, SanitizePipe, ScrollCheckDirective, ScrollDirective, SelectListComponent, SelectListItem, SelectListItems, SelectOnFocusDirective, ShellBaseComponent, StartCasePipe, THEME_OPTIONS, TabGroupComponent, ThemeAssetBackgroundDirective, ThemeAssetDirective, ThemeAssetImageDirective, ThemeModule, ThemeStyleDirective, ThemeStyleHoverDirective, ThemeToggleDirective, TimePipe, TransportLazy, TransportLazyModule, TransportLazyModuleLoadedEvent, TruncatePipe, UserBaseService, UserBaseServiceEvent, VICommonModule, VIComponentModule, VI_ANGULAR_OPTIONS, ViewUtil, WINDOW_CONTENT_CONTAINER, WindowAlign, WindowBase, WindowBaseComponent, WindowCloseElementComponent, WindowClosedError, WindowConfig, WindowDragAreaDirective, WindowElement, WindowEvent, WindowExpandElementComponent, WindowFactory, WindowImpl, WindowMinimizeElementComponent, WindowModule, WindowQuestionBaseComponent, WindowQuestionComponent, WindowResizeElementComponent, WindowService, WindowServiceEvent, cookieServiceFactory, initializerFactory, languageServiceFactory, loggerServiceFactory, nativeWindowServiceFactory, notificationServiceFactory, themeAssetServiceFactory, themeServiceFactory };
+export { APPLICATION_INJECTOR, ApplicationBaseComponent, ApplicationComponent, AspectRatioResizeDirective, AssetBackgroundDirective, AssetBackgroundPipe, AssetFilePipe, AssetIconPipe, AssetImagePipe, AssetModule, AssetSoundPipe, AssetVideoPipe, AutoScrollBottomDirective, BootstrapBreakpoint, BootstrapBreakpointService, BootstrapBreakpointServiceEvent, BottomSheetBaseComponent, BottomSheetModule, BottomSheetService, COOKIE_OPTIONS, CamelCasePipe, CanDeactivateGuard, CdkTableBaseComponent, CdkTableCellClassNamePipe, CdkTableCellStyleNamePipe, CdkTableCellValuePipe, CdkTableCellValuePipePure, CdkTableColumnClassNamePipe, CdkTableColumnStyleNamePipe, CdkTableDataSource, CdkTableFilterableComponent, CdkTableFilterableMapCollection, CdkTablePaginableBookmarkComponent, CdkTablePaginableBookmarkMapCollection, CdkTablePaginableComponent, CdkTablePaginableMapCollection, CdkTableRowClassNamePipe, CdkTableRowStyleNamePipe, ClickToCopyDirective, ClickToSelectDirective, CookieModule, CookieOptions, CookieService, Direction, FinancePipe, FocusDirective, FocusManager, FormElementAsync, FormElementSync, HTMLContentTitleDirective, HTMLTitleDirective, INotification, INotificationContent, IUser, IVICommonOptions, IWindow, IWindowContent, InfiniteScrollDirective, IsBrowserDirective, IsServerDirective, LANGUAGE_OPTIONS, LanguageDirective, LanguageHasDirective, LanguageMatPaginatorIntl, LanguageModule, LanguageMomentDateAdapter, LanguagePipe, LanguagePipeHas, LanguagePipeHasPure, LanguagePipePure, LanguageRequireResolver, LanguageResolver, LanguageSelectorComponent, LazyModuleLoader, ListItem, ListItems, LoginBaseService, LoginBaseServiceEvent, LoginGuard, LoginIfCanGuard, LoginNotGuard, LoginRequireResolver, LoginResolver, MenuItem, MenuItemBase, MenuItems, MenuListComponent, MenuTriggerForDirective, MessageBaseComponent, MomentDateAdaptivePipe, MomentDateFromNowPipe, MomentDatePipe, MomentTimePipe, NavigationMenuItem, NgModelErrorPipe, NotificationBaseComponent, NotificationComponent, NotificationConfig, NotificationEvent, NotificationFactory, NotificationModule, NotificationService, NotificationServiceEvent, PipeBaseService, PlatformService, PrettifyPipe, PropertiesManager, QuestionEvent, QuestionManager, QuestionMode, ResizeDirective, ResizeManager, RouterBaseService, SanitizePipe, ScrollCheckDirective, ScrollDirective, SelectListComponent, SelectListItem, SelectListItems, SelectOnFocusDirective, ShellBaseComponent, StartCasePipe, THEME_OPTIONS, TabGroupComponent, ThemeAssetBackgroundDirective, ThemeAssetDirective, ThemeAssetImageDirective, ThemeModule, ThemeStyleDirective, ThemeStyleHoverDirective, ThemeToggleDirective, TimePipe, TransportLazy, TransportLazyModule, TransportLazyModuleLoadedEvent, TruncatePipe, UserBaseService, UserBaseServiceEvent, VICommonModule, VIComponentModule, VI_ANGULAR_OPTIONS, ViewUtil, WINDOW_CONTENT_CONTAINER, WindowAlign, WindowBase, WindowBaseComponent, WindowCloseElementComponent, WindowClosedError, WindowConfig, WindowDragAreaDirective, WindowElement, WindowEvent, WindowExpandElementComponent, WindowFactory, WindowImpl, WindowMinimizeElementComponent, WindowModule, WindowQuestionBaseComponent, WindowQuestionComponent, WindowResizeElementComponent, WindowService, WindowServiceEvent, cookieServiceFactory, initializerFactory, languageServiceFactory, loggerServiceFactory, nativeWindowServiceFactory, notificationServiceFactory, themeAssetServiceFactory, themeServiceFactory };
 //# sourceMappingURL=ts-core-angular.mjs.map