@ts-core/angular 13.0.49 → 13.0.50

package/fesm2020/ts-core-angular.mjs

@@ -3335,8 +3335,8 @@ class WindowFactory {
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(classType) {
-        this.classType = classType;
+    constructor(defaultType) {
+        this.defaultType = defaultType;
     }
     // --------------------------------------------------------------------------
     //
@@ -3344,887 +3344,411 @@ class WindowFactory {
     //
     // --------------------------------------------------------------------------
     create(properties) {
-        return new this.classType(properties);
+        let item = null;
+        if (!_.isNil(this.createFunction)) {
+            item = this.createFunction(properties);
+        }
+        if (_.isNil(item)) {
+            item = new this.defaultType(properties);
+        }
+        return item;
     }
 }
 
-class WindowBase extends DestroyableContainer {
+class IWindowContent extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    constructor() {
+    constructor(container) {
         super();
-        // --------------------------------------------------------------------------
-        //
-        // 	Properties
-        //
-        // --------------------------------------------------------------------------
-        this._x = NaN;
-        this._width = NaN;
-        this._y = NaN;
-        this._height = NaN;
-        this.updatePosition = () => this.setPosition();
+        this.container = container;
     }
-    setProperties() {
-        let config = this.getConfig();
-        if (!_.isNaN(config.defaultWidth)) {
-            this.width = config.defaultWidth;
-        }
-        if (!_.isNaN(config.defaultHeight)) {
-            this.height = config.defaultHeight;
-        }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    commitWindowProperties() {
+        this.commitConfigProperties();
     }
-    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;
+    commitConfigProperties() { }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    ngAfterViewInit() {
+        this.emit(WindowEvent.CONTENT_READY);
+    }
+    ngOnDestroy() {
+        // do nothing, window will destroy content after closing
+    }
+    blink() {
+        if (!_.isNil(this.window)) {
+            this.window.blink();
         }
-        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;
+    }
+    shake() {
+        if (!_.isNil(this.window)) {
+            this.window.shake();
         }
     }
-    clearSize() {
-        this._x = NaN;
-        this._y = NaN;
-        this._width = NaN;
-        this._height = NaN;
+    emit(event) {
+        if (!_.isNil(this.window)) {
+            this.window.emit(event);
+        }
     }
-    commitSizeProperties() {
-        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
-        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
-        this.getReference().updateSize(width, height);
+    close() {
+        if (!_.isNil(this.window)) {
+            this.window.close();
+        }
     }
-    commitPositionProperties() {
-        if (_.isNaN(this._x) && _.isNaN(this._y)) {
+    destroy() {
+        if (this.isDestroyed) {
             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);
+        super.destroy();
+        this.window = null;
+        this.container = null;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Proxy Public Properties
     //
     // --------------------------------------------------------------------------
-    calculateWidth() {
-        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
+    get data() {
+        return !_.isNil(this.config) ? this.config.data : null;
     }
-    calculateHeight() {
-        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
+    get isOnTop() {
+        return !_.isNil(this.window) ? this.window.isOnTop : false;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Properties
-    //
-    // --------------------------------------------------------------------------
-    get width() {
-        return this._width;
+    get isMinimized() {
+        return !_.isNil(this.window) ? this.window.isMinimized : false;
     }
-    set width(value) {
-        value = this.getConfig().parseWidth(value);
-        if (value === this._width) {
-            return;
-        }
-        this._width = value;
-        this.commitSizeProperties();
+    get events() {
+        return !_.isNil(this.window) ? this.window.events : null;
     }
-    get height() {
-        return this._height;
+    get isDisabled() {
+        return !_.isNil(this.window) ? this.window.isDisabled : false;
     }
-    set height(value) {
-        value = this.getConfig().parseHeight(value);
-        if (value === this._height) {
-            return;
+    set isDisabled(value) {
+        if (!_.isNil(this.window)) {
+            this.window.isDisabled = value;
         }
-        this._height = value;
-        this.commitSizeProperties();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        value = this.getConfig().parseX(value);
-        if (value === this._x) {
-            return;
+    get element() {
+        if (_.isNil(this.container)) {
+            return null;
         }
-        this._x = value;
-        this.commitPositionProperties();
+        return this.container instanceof ViewContainerRef ? this.container.element : this.container;
     }
-    get y() {
-        return this._y;
+    get config() {
+        return !_.isNil(this.window) ? this.window.config : null;
     }
-    set y(value) {
-        value = this.getConfig().parseY(value);
-        if (value === this._y) {
+    get window() {
+        return this._window;
+    }
+    set window(value) {
+        if (value === this._window) {
             return;
         }
-        this._y = value;
-        this.commitPositionProperties();
-    }
-    get paddingTop() {
-        return this.getConfig().paddingTop;
-    }
-    get paddingLeft() {
-        return this.getConfig().paddingLeft;
-    }
-    get paddingRight() {
-        return this.getConfig().paddingRight;
+        this._window = value;
+        if (!_.isNil(value)) {
+            this.commitWindowProperties();
+        }
     }
-    get paddingBottom() {
-        return this.getConfig().paddingBottom;
+}
+IWindowContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IWindowContent, deps: [{ token: WINDOW_CONTENT_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+IWindowContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: IWindowContent, selector: "ng-component", inputs: { isDisabled: "isDisabled", window: "window" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IWindowContent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [WINDOW_CONTENT_CONTAINER]
+                }] }]; }, propDecorators: { isDisabled: [{
+                type: Input
+            }], window: [{
+                type: Input
+            }] } });
+const WINDOW_CONTENT_CONTAINER = new InjectionToken('WINDOW_CONTENT_CONTAINER');
+
+class WindowQuestionBaseComponent extends IWindowContent {
+    // --------------------------------------------------------------------------
+    //
+    // 	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    commitConfigProperties() {
+        super.commitConfigProperties();
+        this.data.closePromise.then(() => {
+            if (!this.isDestroyed) {
+                this.close();
+            }
+        });
     }
 }
 
-class WindowImpl extends WindowBase {
+class WindowQuestionComponent extends WindowQuestionBaseComponent {
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(properties) {
-        super();
-        // --------------------------------------------------------------------------
-        //
-        //  Properties
-        //
-        // --------------------------------------------------------------------------
-        this._isBlink = false;
-        this._isShaking = false;
-        this._isOnTop = false;
-        this._isDisabled = false;
-        this._isMinimized = false;
-        this.isOpened = false;
-        this.isWasOnTop = false;
-        // --------------------------------------------------------------------------
-        //
-        //  Protected Methods
-        //
-        // --------------------------------------------------------------------------
-        this.setClosed = () => {
-            this.isOpened = false;
-            this.emit(WindowEvent.CLOSED);
-            this.destroy();
-        };
-        this.setOpened = () => {
-            this.isOpened = true;
-            this.emit(WindowEvent.OPENED);
-        };
-        this.blinkToggle = () => {
-            this.isBlink = !this.isBlink;
-        };
-        this.stopShaking = () => {
-            this.isShaking = false;
-        };
-        this.emitResize = () => {
-            this.emit(WindowEvent.RESIZED);
-        };
-        this.resizeHandler = () => {
-            if (!this.isOpened) {
-                return;
-            }
-            clearTimeout(this.resizeTimer);
-            this.resizeTimer = setTimeout(this.emitResize, WindowImpl.RESIZE_DELAY);
-        };
-        this.mouseDownHandlerProxy = (event) => {
-            this.mouseDownHandler(event);
-        };
-        this.mouseClickHandlerProxy = (event) => {
-            this.mouseClickHandler(event);
-        };
-        this.observer = new Subject();
-        this.elements = new Array();
-        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.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterClosed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
-        this.events
-            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
-            .subscribe(this.updatePosition);
+    constructor(container, language) {
+        super(container);
+        this.language = language;
+        ViewUtil.addClasses(container.element, 'd-block');
     }
     // --------------------------------------------------------------------------
     //
-    //  Elements Methods
+    // 	Public 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;
-    }
-    setProperties() {
-        super.setProperties();
-        ViewUtil.addClass(this.container, 'vi-window');
-        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
-        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
-        if (!this.config.isModal) {
-            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+    commitConfigProperties() {
+        super.commitConfigProperties();
+        if (!_.isNil(this.data.text)) {
+            this.text = this.data.text.replace(/(?:\r\n|\r|\n)/g, `<br/>`);
         }
-        /*
-        if (!this.config.isModal) {
-            this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
-            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        if (this.language.isHasTranslation(this.data.options.yesTextId)) {
+            this.data.yesText = this.language.translate(this.data.options.yesTextId);
         }
-        */
-        this.elementsCreate();
-    }
-    commitIsBlinkProperties() { }
-    commitIsShakingProperties() { }
-    commitIsDisabledProperties() { }
-    commitIsMinimizedProperties() { }
-    getConfig() {
-        return this.properties.config;
-    }
-    getContainer() {
-        return this.container;
-    }
-    getReference() {
-        return this.properties.reference;
-    }
-    isNeedClickStopPropagation(event) {
-        // return !this.isWasOnTop;
-        if (this.isWasOnTop) {
-            return false;
+        if (this.language.isHasTranslation(this.data.options.notTextId)) {
+            this.data.notText = this.language.translate(this.data.options.notTextId);
         }
-        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
-        if (_.isNil(element)) {
-            return false;
+        if (this.language.isHasTranslation(this.data.options.checkTextId)) {
+            this.data.checkText = this.language.translate(this.data.options.checkTextId);
         }
-        element.instance.clickHandler(event);
-        return true;
-    }
-    stopBlinkIfNeed() {
-        this.isBlink = false;
-        if (!this.blinkTimer) {
-            return;
+        if (this.language.isHasTranslation(this.data.options.closeTextId)) {
+            this.data.closeText = this.language.translate(this.data.options.closeTextId);
         }
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
     }
-    mouseDownHandler(event) {
-        this.setOnTop();
+}
+WindowQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowQuestionComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
+WindowQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowQuestionComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, 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>", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowQuestionComponent, decorators: [{
+            type: Component,
+            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 {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element) {
+        super();
+        this.element = element;
     }
-    mouseClickHandler(event) {
-        if (this.isNeedClickStopPropagation(event)) {
-            event.stopPropagation();
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    checkWindowParent() {
+        let container = this.getContainer();
+        if (!_.isNil(container)) {
+            ViewUtil.appendChild(container, this.element.nativeElement);
         }
-        if (!this.isWasOnTop) {
-            this.isWasOnTop = true;
+    }
+    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() { }
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    emit(event) {
-        this.observer.next(event);
-    }
-    close() {
-        this.getReference().close();
+    ngAfterViewInit() {
+        this.createChildren();
+        this.checkWindowParent();
     }
     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.properties = null;
-        this._wrapper = null;
-        this._backdrop = null;
-        this._container = null;
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
-        clearInterval(this.shakeTimer);
-        this.shakeTimer = null;
-        clearTimeout(this.resizeTimer);
-        this.resizeTimer = null;
-    }
-    blink() {
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = setInterval(this.blinkToggle, WindowImpl.BLINK_DELAY);
-    }
-    shake() {
-        if (this.isShaking) {
-            return;
-        }
-        this.isShaking = true;
-        clearInterval(this.shakeTimer);
-        this.shakeTimer = setInterval(this.stopShaking, WindowImpl.SHAKE_DELAY);
-    }
-    setOnTop() {
-        this.isWasOnTop = this.isOnTop;
-        this.emit(WindowEvent.SET_ON_TOP);
+        this.destroyChildren();
+        this.element = null;
+        this.window = null;
     }
     // --------------------------------------------------------------------------
     //
-    //  Size Methods
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    getWidth() {
-        return this.width;
-    }
-    getHeight() {
-        return this.height;
-    }
-    setWidth(value, isNeedNotify = true) {
-        this.width = value;
-        if (isNeedNotify) {
-            this.resizeHandler();
-        }
-    }
-    setHeight(value, isNeedNotify = true) {
-        this.height = value;
-        if (isNeedNotify) {
-            this.resizeHandler();
-        }
-    }
-    setSize(width, height) {
-        this.setWidth(width, false);
-        this.setHeight(height, false);
-        this.resizeHandler();
+    clickHandler(event) {
+        event.stopPropagation();
     }
     // --------------------------------------------------------------------------
     //
-    //  Move Methods
+    // 	Protected Properties
     //
     // --------------------------------------------------------------------------
-    getX() {
-        return this.x;
-    }
-    setX(value, isNeedNotify = true) {
-        this.x = value;
-        if (isNeedNotify) {
-            this.emit(WindowEvent.MOVED);
-        }
-    }
-    getY() {
-        return this.y;
-    }
-    setY(value, isNeedNotify = true) {
-        this.y = value;
-        if (isNeedNotify) {
-            this.emit(WindowEvent.MOVED);
-        }
-    }
-    move(x, y) {
-        this.setX(x, false);
-        this.setY(y, false);
-        this.emit(WindowEvent.MOVED);
+    get nativeElement() {
+        return this.element ? this.element.nativeElement : null;
     }
     // --------------------------------------------------------------------------
     //
-    //  Private Properties
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    get isBlink() {
-        return this._isBlink;
+    get window() {
+        return this._window;
     }
-    set isBlink(value) {
-        if (value === this._isBlink) {
+    set window(value) {
+        if (value === this._window) {
             return;
         }
-        this._isBlink = value;
-        this.commitIsBlinkProperties();
-    }
-    get isShaking() {
-        return this._isShaking;
-    }
-    set isShaking(value) {
-        if (value === this._isShaking) {
-            return;
+        this._window = value;
+        if (this.window) {
+            this.commitWindowProperties();
         }
-        this._isShaking = value;
-        this.commitIsShakingProperties();
     }
+}
+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 Properties
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
-    }
-    get config() {
-        return this.properties.config;
-    }
-    get content() {
-        return this.properties.reference ? this.properties.reference.componentInstance : null;
-    }
-    get container() {
-        return this._container;
-    }
-    get wrapper() {
-        return this._wrapper;
-    }
-    get backdrop() {
-        return this._backdrop;
-    }
-    get isOnTop() {
-        return this._isOnTop;
+    constructor(element) {
+        super(element);
     }
-    set isOnTop(value) {
-        if (value === this._isOnTop) {
-            return;
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowCloseElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowCloseElementComponent.ICON_VALUE);
         }
-        this._isOnTop = value;
-        clearInterval(this.blinkTimer);
-        this.isBlink = false;
-    }
-    get isMinimized() {
-        return this._isMinimized;
-    }
-    set isMinimized(value) {
-        if (value === this._isMinimized) {
-            return;
+        if (!_.isNil(WindowCloseElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowCloseElementComponent.ICON_CLASS);
         }
-        this._isMinimized = value;
-        this.commitIsMinimizedProperties();
-        this.emit(WindowEvent.MINIMIZED_CHANGED);
-        this.stopBlinkIfNeed();
-    }
-    get isDisabled() {
-        return this._isDisabled;
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    set isDisabled(value) {
-        if (value === this._isDisabled) {
-            return;
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.close();
         }
-        this._isDisabled = value;
-        this.commitIsDisabledProperties();
-        this.emit(WindowEvent.DISABLED_CHANGED);
     }
 }
 // --------------------------------------------------------------------------
 //
-//  Constants
+// 	Constants
 //
 // --------------------------------------------------------------------------
-WindowImpl.BLINK_DELAY = 500;
-WindowImpl.SHAKE_DELAY = 500;
-WindowImpl.RESIZE_DELAY = 200;
+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 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$1(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterDismissed().pipe(takeUntil$1(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;
-    }
-    setProperties() {
-        ViewUtil.addClass(this.container, 'vi-bottom-sheet');
-        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
-        if (!this.config.isModal) {
-            this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
-            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
-        }
-    }
-    commitIsBlinkProperties() { }
-    commitIsDisabledProperties() { }
-    getConfig() {
-        return this.properties.config;
-    }
-    getContainer() {
-        return this.container;
-    }
-    getReference() {
-        return this.properties.reference;
+    commitWindowProperties() {
+        super.commitWindowProperties();
+        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
+            if (event === WindowEvent.MINIMIZED_CHANGED) {
+                this.commitIconProperties();
+            }
+        });
     }
-    isNeedClickStopPropagation(event) {
-        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
-        if (_.isNil(element)) {
-            return false;
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
         }
-        element.instance.clickHandler(event);
-        return true;
-    }
-    stopBlinkIfNeed() {
-        this.isBlink = false;
-        if (!this.blinkTimer) {
-            return;
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
         }
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    mouseDownHandler(event) {
-        this.setOnTop();
-    }
-    mouseClickHandler(event) {
-        if (this.isNeedClickStopPropagation(event)) {
-            event.stopPropagation();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    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.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
-    //
-    // --------------------------------------------------------------------------
-    getWidth() {
-        return NaN;
-    }
-    getHeight() {
-        return NaN;
-    }
-    setWidth(value, isNeedNotify = true) { }
-    setHeight(value, isNeedNotify = true) { }
-    setSize(width, height) { }
-    // --------------------------------------------------------------------------
-    //
-    //  Move Methods
-    //
-    // --------------------------------------------------------------------------
-    getX() {
-        return NaN;
-    }
-    setX(value, isNeedNotify = true) { }
-    getY() {
-        return NaN;
-    }
-    setY(value, isNeedNotify = true) { }
-    move(x, y) { }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    get reference() {
-        return this.properties.reference;
-    }
-    get isBlink() {
-        return this._isBlink;
-    }
-    set isBlink(value) {
-        if (value === this._isBlink) {
-            return;
-        }
-        this._isBlink = value;
-        this.commitIsBlinkProperties();
-    }
-    get isShaking() {
-        return false;
-    }
-    set isShaking(value) { }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
-    }
-    get config() {
-        return this.properties.config;
-    }
-    get content() {
-        return !_.isNil(this.reference) ? this.reference.instance : null;
-    }
-    get container() {
-        return this._container;
-    }
-    get wrapper() {
-        return this._wrapper;
-    }
-    get backdrop() {
-        return this._backdrop;
-    }
-    get isOnTop() {
-        return false;
-    }
-    set isOnTop(value) { }
-    get isMinimized() {
-        return false;
-    }
-    set isMinimized(value) { }
-    get isDisabled() {
-        return this._isDisabled;
-    }
-    set isDisabled(value) {
-        if (value === this._isDisabled) {
-            return;
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.isMinimized = !this.window.isMinimized;
         }
-        this._isDisabled = value;
-        this.commitIsDisabledProperties();
-        this.emit(WindowEvent.DISABLED_CHANGED);
     }
 }
 // --------------------------------------------------------------------------
 //
-//  Constants
+// 	Constants
 //
 // --------------------------------------------------------------------------
-BottomSheetImpl.BLINK_DELAY = 500;
-BottomSheetImpl.SHAKE_DELAY = 500;
-
-class WindowElement extends DestroyableContainer {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super();
-        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() { }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.createChildren();
-        this.checkWindowParent();
-    }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.destroyChildren();
-        this.element = null;
-        this.window = null;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        event.stopPropagation();
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Protected Properties
-    //
-    // --------------------------------------------------------------------------
-    get nativeElement() {
-        return this.element ? this.element.nativeElement : null;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get window() {
-        return this._window;
-    }
-    set window(value) {
-        if (value === this._window) {
-            return;
-        }
-        this._window = value;
-        if (this.window) {
-            this.commitWindowProperties();
-        }
-    }
-}
-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: [{
+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: [{ template: '' }]
+            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 BottomSheetCloseElementComponent extends WindowElement {
+class WindowResizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
@@ -4240,13 +3764,13 @@ class BottomSheetCloseElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     createChildren() {
         super.createChildren();
-        if (!_.isNil(BottomSheetCloseElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', BottomSheetCloseElementComponent.ICON_VALUE);
+        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
         }
-        if (!_.isNil(BottomSheetCloseElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, BottomSheetCloseElementComponent.ICON_CLASS);
+        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
     }
     // --------------------------------------------------------------------------
     //
@@ -4256,7 +3780,6 @@ class BottomSheetCloseElementComponent extends WindowElement {
     clickHandler(event) {
         super.clickHandler(event);
         if (!_.isNil(this.window)) {
-            this.window.close();
         }
     }
 }
@@ -4265,417 +3788,537 @@ class BottomSheetCloseElementComponent extends WindowElement {
 // 	Constants
 //
 // --------------------------------------------------------------------------
-BottomSheetCloseElementComponent.ICON_CLASS = 'fas fa-times';
-BottomSheetCloseElementComponent.ICON_VALUE = null;
-BottomSheetCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BottomSheetCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomSheetCloseElementComponent, selector: "vi-bottom-sheet-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: BottomSheetCloseElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-bottom-sheet-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"] }]
+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 BottomSheetBaseComponent extends BottomSheetImpl {
+class WindowBase extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    elementsCreate() {
-        super.elementsCreate();
-        if (!(this.content.container instanceof ViewContainerRef)) {
-            return;
+    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 (!this.config.disableClose) {
-            this.elementAdd(this.content.container.createComponent(BottomSheetBaseComponent.CLOSE_COMPONENT));
+        if (!_.isNaN(config.defaultHeight)) {
+            this.height = config.defaultHeight;
         }
     }
-    commitIsBlinkProperties() {
-        ViewUtil.toggleClass(this.container, this.blinkClass, this.isBlink);
-    }
-    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);
-    }
-    commitIsShakingProperties() {
-        ViewUtil.toggleClass(this.container, this.shakingClass, this.isShaking);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Protected Properties
-    //
-    // --------------------------------------------------------------------------
-    get blinkClass() {
-        return 'vi-blink';
+    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;
+        }
     }
-    get disabledClass() {
-        return 'vi-disabled';
+    clearSize() {
+        this._x = NaN;
+        this._y = NaN;
+        this._width = NaN;
+        this._height = NaN;
     }
-    get minimizedClass() {
-        return 'vi-minimized';
+    commitSizeProperties() {
+        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
+        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
+        this.getReference().updateSize(width, height);
     }
-    get shakingClass() {
-        return 'shake-constant shake-horizontal';
+    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);
     }
-}
-// --------------------------------------------------------------------------
-//
-//  Static Properties
-//
-// --------------------------------------------------------------------------
-BottomSheetBaseComponent.CLOSE_COMPONENT = BottomSheetCloseElementComponent;
-
-class IWindowContent extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    constructor(container) {
-        super();
-        this.container = container;
+    calculateWidth() {
+        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        this.commitConfigProperties();
+    calculateHeight() {
+        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
     }
-    commitConfigProperties() { }
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    // 	Private Properties
     //
     // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.emit(WindowEvent.CONTENT_READY);
-    }
-    ngOnDestroy() {
-        // do nothing, window will destroy content after closing
-    }
-    blink() {
-        if (!_.isNil(this.window)) {
-            this.window.blink();
-        }
-    }
-    shake() {
-        if (!_.isNil(this.window)) {
-            this.window.shake();
-        }
+    get width() {
+        return this._width;
     }
-    emit(event) {
-        if (!_.isNil(this.window)) {
-            this.window.emit(event);
+    set width(value) {
+        value = this.getConfig().parseWidth(value);
+        if (value === this._width) {
+            return;
         }
+        this._width = value;
+        this.commitSizeProperties();
     }
-    close() {
-        if (!_.isNil(this.window)) {
-            this.window.close();
-        }
+    get height() {
+        return this._height;
     }
-    destroy() {
-        if (this.isDestroyed) {
+    set height(value) {
+        value = this.getConfig().parseHeight(value);
+        if (value === this._height) {
             return;
         }
-        super.destroy();
-        this.window = null;
-        this.container = null;
+        this._height = value;
+        this.commitSizeProperties();
     }
     // --------------------------------------------------------------------------
     //
-    //  Proxy Public Properties
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    get data() {
-        return !_.isNil(this.config) ? this.config.data : null;
-    }
-    get isOnTop() {
-        return !_.isNil(this.window) ? this.window.isOnTop : false;
-    }
-    get isMinimized() {
-        return !_.isNil(this.window) ? this.window.isMinimized : false;
+    get x() {
+        return this._x;
     }
-    get events() {
-        return !_.isNil(this.window) ? this.window.events : null;
+    set x(value) {
+        value = this.getConfig().parseX(value);
+        if (value === this._x) {
+            return;
+        }
+        this._x = value;
+        this.commitPositionProperties();
     }
-    get isDisabled() {
-        return !_.isNil(this.window) ? this.window.isDisabled : false;
+    get y() {
+        return this._y;
     }
-    set isDisabled(value) {
-        if (!_.isNil(this.window)) {
-            this.window.isDisabled = value;
+    set y(value) {
+        value = this.getConfig().parseY(value);
+        if (value === this._y) {
+            return;
         }
+        this._y = value;
+        this.commitPositionProperties();
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get element() {
-        if (_.isNil(this.container)) {
-            return null;
-        }
-        return this.container instanceof ViewContainerRef ? this.container.element : this.container;
+    get paddingTop() {
+        return this.getConfig().paddingTop;
     }
-    get config() {
-        return !_.isNil(this.window) ? this.window.config : null;
+    get paddingLeft() {
+        return this.getConfig().paddingLeft;
     }
-    get window() {
-        return this._window;
+    get paddingRight() {
+        return this.getConfig().paddingRight;
     }
-    set window(value) {
-        if (value === this._window) {
-            return;
-        }
-        this._window = value;
-        if (!_.isNil(value)) {
-            this.commitWindowProperties();
-        }
+    get paddingBottom() {
+        return this.getConfig().paddingBottom;
     }
 }
-IWindowContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IWindowContent, deps: [{ token: WINDOW_CONTENT_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IWindowContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: IWindowContent, selector: "ng-component", inputs: { isDisabled: "isDisabled", window: "window" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: IWindowContent, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WINDOW_CONTENT_CONTAINER]
-                }] }]; }, propDecorators: { isDisabled: [{
-                type: Input
-            }], window: [{
-                type: Input
-            }] } });
-const WINDOW_CONTENT_CONTAINER = new InjectionToken('WINDOW_CONTENT_CONTAINER');
 
-class WindowQuestionBaseComponent extends IWindowContent {
+class WindowImpl extends WindowBase {
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    commitConfigProperties() {
-        super.commitConfigProperties();
-        this.data.closePromise.then(() => {
-            if (!this.isDestroyed) {
-                this.close();
+    constructor(properties) {
+        super();
+        // --------------------------------------------------------------------------
+        //
+        //  Properties
+        //
+        // --------------------------------------------------------------------------
+        this._isBlink = false;
+        this._isShaking = false;
+        this._isOnTop = false;
+        this._isDisabled = false;
+        this._isMinimized = false;
+        this.isOpened = false;
+        this.isWasOnTop = false;
+        // --------------------------------------------------------------------------
+        //
+        //  Protected Methods
+        //
+        // --------------------------------------------------------------------------
+        this.setClosed = () => {
+            this.isOpened = false;
+            this.emit(WindowEvent.CLOSED);
+            this.destroy();
+        };
+        this.setOpened = () => {
+            this.isOpened = true;
+            this.emit(WindowEvent.OPENED);
+        };
+        this.blinkToggle = () => {
+            this.isBlink = !this.isBlink;
+        };
+        this.stopShaking = () => {
+            this.isShaking = false;
+        };
+        this.emitResize = () => {
+            this.emit(WindowEvent.RESIZED);
+        };
+        this.resizeHandler = () => {
+            if (!this.isOpened) {
+                return;
             }
-        });
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = setTimeout(this.emitResize, WindowImpl.RESIZE_DELAY);
+        };
+        this.mouseDownHandlerProxy = (event) => {
+            this.mouseDownHandler(event);
+        };
+        this.mouseClickHandlerProxy = (event) => {
+            this.mouseClickHandler(event);
+        };
+        this.observer = new Subject();
+        this.elements = new Array();
+        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.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterClosed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
+        this.events
+            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
+            .subscribe(this.updatePosition);
     }
-}
-
-class WindowQuestionComponent extends WindowQuestionBaseComponent {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Elements Methods
     //
     // --------------------------------------------------------------------------
-    constructor(container, language) {
-        super(container);
-        this.language = language;
-        ViewUtil.addClasses(container.element, 'd-block');
+    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() {
+        super.setProperties();
+        ViewUtil.addClass(this.container, 'vi-window');
+        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
+        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
+        if (!this.config.isModal) {
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        }
+        /*
+        if (!this.config.isModal) {
+            this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        }
+        */
+        this.elementsCreate();
+    }
+    commitIsBlinkProperties() { }
+    commitIsShakingProperties() { }
+    commitIsDisabledProperties() { }
+    commitIsMinimizedProperties() { }
+    getConfig() {
+        return this.properties.config;
+    }
+    getContainer() {
+        return this.container;
+    }
+    getReference() {
+        return this.properties.reference;
+    }
+    isNeedClickStopPropagation(event) {
+        // return !this.isWasOnTop;
+        if (this.isWasOnTop) {
+            return false;
+        }
+        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
+        if (_.isNil(element)) {
+            return false;
+        }
+        element.instance.clickHandler(event);
+        return true;
+    }
+    stopBlinkIfNeed() {
+        this.isBlink = false;
+        if (!this.blinkTimer) {
+            return;
+        }
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = null;
+    }
+    mouseDownHandler(event) {
+        this.setOnTop();
+    }
+    mouseClickHandler(event) {
+        if (this.isNeedClickStopPropagation(event)) {
+            event.stopPropagation();
+        }
+        if (!this.isWasOnTop) {
+            this.isWasOnTop = true;
+        }
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
-    commitConfigProperties() {
-        super.commitConfigProperties();
-        if (!_.isNil(this.data.text)) {
-            this.text = this.data.text.replace(/(?:\r\n|\r|\n)/g, `<br/>`);
-        }
-        if (this.language.isHasTranslation(this.data.options.yesTextId)) {
-            this.data.yesText = this.language.translate(this.data.options.yesTextId);
+    emit(event) {
+        this.observer.next(event);
+    }
+    close() {
+        this.getReference().close();
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
-        if (this.language.isHasTranslation(this.data.options.notTextId)) {
-            this.data.notText = this.language.translate(this.data.options.notTextId);
+        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 (this.language.isHasTranslation(this.data.options.checkTextId)) {
-            this.data.checkText = this.language.translate(this.data.options.checkTextId);
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
         }
-        if (this.language.isHasTranslation(this.data.options.closeTextId)) {
-            this.data.closeText = this.language.translate(this.data.options.closeTextId);
+        this.properties = null;
+        this._wrapper = null;
+        this._backdrop = null;
+        this._container = null;
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = null;
+        clearInterval(this.shakeTimer);
+        this.shakeTimer = null;
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = null;
+    }
+    blink() {
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = setInterval(this.blinkToggle, WindowImpl.BLINK_DELAY);
+    }
+    shake() {
+        if (this.isShaking) {
+            return;
         }
+        this.isShaking = true;
+        clearInterval(this.shakeTimer);
+        this.shakeTimer = setInterval(this.stopShaking, WindowImpl.SHAKE_DELAY);
     }
-}
-WindowQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowQuestionComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-WindowQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowQuestionComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, 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>", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowQuestionComponent, decorators: [{
-            type: Component,
-            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 WindowCloseElementComponent extends WindowElement {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    setOnTop() {
+        this.isWasOnTop = this.isOnTop;
+        this.emit(WindowEvent.SET_ON_TOP);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //  Size 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);
+    getWidth() {
+        return this.width;
+    }
+    getHeight() {
+        return this.height;
+    }
+    setWidth(value, isNeedNotify = true) {
+        this.width = value;
+        if (isNeedNotify) {
+            this.resizeHandler();
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.close();
+    setHeight(value, isNeedNotify = true) {
+        this.height = value;
+        if (isNeedNotify) {
+            this.resizeHandler();
         }
     }
-}
-// --------------------------------------------------------------------------
-//
-// 	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 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);
-        };
+    setSize(width, height) {
+        this.setWidth(width, false);
+        this.setHeight(height, false);
+        this.resizeHandler();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    //  Move Methods
     //
     // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        super.commitWindowProperties();
-        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
-            if (event === WindowEvent.MINIMIZED_CHANGED) {
-                this.commitIconProperties();
-            }
-        });
+    getX() {
+        return this.x;
     }
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
+    setX(value, isNeedNotify = true) {
+        this.x = value;
+        if (isNeedNotify) {
+            this.emit(WindowEvent.MOVED);
         }
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+    }
+    getY() {
+        return this.y;
+    }
+    setY(value, isNeedNotify = true) {
+        this.y = value;
+        if (isNeedNotify) {
+            this.emit(WindowEvent.MOVED);
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+    }
+    move(x, y) {
+        this.setX(x, false);
+        this.setY(y, false);
+        this.emit(WindowEvent.MOVED);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.isMinimized = !this.window.isMinimized;
+    get isBlink() {
+        return this._isBlink;
+    }
+    set isBlink(value) {
+        if (value === this._isBlink) {
+            return;
         }
+        this._isBlink = value;
+        this.commitIsBlinkProperties();
     }
-}
-// --------------------------------------------------------------------------
-//
-// 	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 WindowResizeElementComponent extends WindowElement {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    get isShaking() {
+        return this._isShaking;
+    }
+    set isShaking(value) {
+        if (value === this._isShaking) {
+            return;
+        }
+        this._isShaking = value;
+        this.commitIsShakingProperties();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
+    get events() {
+        return this.observer.asObservable();
+    }
+    get config() {
+        return this.properties.config;
+    }
+    get content() {
+        return this.properties.reference ? this.properties.reference.componentInstance : null;
+    }
+    get container() {
+        return this._container;
+    }
+    get wrapper() {
+        return this._wrapper;
+    }
+    get backdrop() {
+        return this._backdrop;
+    }
+    get isOnTop() {
+        return this._isOnTop;
+    }
+    set isOnTop(value) {
+        if (value === this._isOnTop) {
+            return;
         }
-        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
+        this._isOnTop = value;
+        clearInterval(this.blinkTimer);
+        this.isBlink = false;
+    }
+    get isMinimized() {
+        return this._isMinimized;
+    }
+    set isMinimized(value) {
+        if (value === this._isMinimized) {
+            return;
         }
-        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
+        this._isMinimized = value;
+        this.commitIsMinimizedProperties();
+        this.emit(WindowEvent.MINIMIZED_CHANGED);
+        this.stopBlinkIfNeed();
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
+    get isDisabled() {
+        return this._isDisabled;
+    }
+    set isDisabled(value) {
+        if (value === this._isDisabled) {
+            return;
         }
+        this._isDisabled = value;
+        this.commitIsDisabledProperties();
+        this.emit(WindowEvent.DISABLED_CHANGED);
     }
 }
 // --------------------------------------------------------------------------
 //
-// 	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 }]; } });
+//  Constants
+//
+// --------------------------------------------------------------------------
+WindowImpl.BLINK_DELAY = 500;
+WindowImpl.SHAKE_DELAY = 500;
+WindowImpl.RESIZE_DELAY = 200;
 
 class WindowResizeable extends WindowImpl {
     // --------------------------------------------------------------------------
@@ -4916,19 +4559,11 @@ class WindowService extends Destroyable {
         this.language = language;
         this.observer = new Subject();
         this.properties = new PropertiesManager(cookies);
-        this.defaultFactory = new WindowFactory(WindowBaseComponent);
+        this.factory = new WindowFactory(WindowBaseComponent);
         this.questionComponent = WindowQuestionComponent;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
-    //
-    // --------------------------------------------------------------------------
-    getFactory(component, config) {
-        return this.defaultFactory;
-    }
-    // --------------------------------------------------------------------------
-    //
     // 	Private Methods
     //
     // --------------------------------------------------------------------------
@@ -5056,7 +4691,7 @@ class WindowService extends Destroyable {
         // let dialog = this.dialog as any;
         // dialog._getOverlayState = config.isModal ? dialog.getOverlayStateModal : dialog.getOverlayStateNonModal;
         let reference = this.dialog.open(component, config);
-        window = this.getFactory(component, config).create({ config, reference, overlay: reference._overlayRef });
+        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) {
@@ -5112,121 +4747,485 @@ class WindowService extends Destroyable {
         content.window.setOnTop();
         return true;
     }
-    removeAll() {
-        this.windowsArray.forEach(window => window.close());
+    removeAll() {
+        this.windowsArray.forEach(window => window.close());
+    }
+    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;
+        }
+        this.factory = null;
+        this.questionComponent = null;
+        this.dialog = null;
+        this.language = null;
+        this._windows = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Additional Methods
+    //
+    // --------------------------------------------------------------------------
+    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;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Properties
+    //
+    // --------------------------------------------------------------------------
+    get windowsArray() {
+        return Array.from(this.windows.values()).map(item => item.window);
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Properties
+    //
+    // --------------------------------------------------------------------------
+    get events() {
+        return this.observer.asObservable();
+    }
+    get windows() {
+        return this._windows;
+    }
+}
+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 }], 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 }]; } });
+class PropertiesManager extends Destroyable {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(cookies) {
+        super();
+        this.cookies = cookies;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    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;
+        }
+    }
+    save(name, window) {
+        this.cookies.putObject(name + 'Window', {
+            width: window.getWidth(),
+            height: window.getHeight()
+        });
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        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 = {}));
+
+class BottomSheetImpl extends DestroyableContainer {
+    // --------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    // --------------------------------------------------------------------------
+    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$1(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterDismissed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Elements 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;
+    }
+    setProperties() {
+        ViewUtil.addClass(this.container, 'vi-bottom-sheet');
+        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
+        if (!this.config.isModal) {
+            this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        }
+    }
+    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;
+        }
+        element.instance.clickHandler(event);
+        return true;
+    }
+    stopBlinkIfNeed() {
+        this.isBlink = false;
+        if (!this.blinkTimer) {
+            return;
+        }
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    mouseDownHandler(event) {
+        this.setOnTop();
+    }
+    mouseClickHandler(event) {
+        if (this.isNeedClickStopPropagation(event)) {
+            event.stopPropagation();
+        }
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    emit(event) {
+        this.observer.next(event);
+    }
+    close() {
+        this.getReference().dismiss();
     }
     destroy() {
         if (this.isDestroyed) {
             return;
         }
         super.destroy();
-        this.removeAll();
+        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;
         }
-        if (!_.isNil(this.properties)) {
-            this.properties.destroy();
-            this.properties = null;
-        }
-        this.defaultFactory = null;
-        this.questionComponent = null;
-        this.dialog = null;
-        this.language = null;
-        this._windows = 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() { }
     // --------------------------------------------------------------------------
     //
-    // 	Additional Methods
+    //  Size Methods
     //
     // --------------------------------------------------------------------------
-    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;
+    getWidth() {
+        return NaN;
     }
-    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;
+    getHeight() {
+        return NaN;
     }
+    setWidth(value, isNeedNotify = true) { }
+    setHeight(value, isNeedNotify = true) { }
+    setSize(width, height) { }
     // --------------------------------------------------------------------------
     //
-    // 	Private Properties
+    //  Move Methods
     //
     // --------------------------------------------------------------------------
-    get windowsArray() {
-        return Array.from(this.windows.values()).map(item => item.window);
+    getX() {
+        return NaN;
+    }
+    setX(value, isNeedNotify = true) { }
+    getY() {
+        return NaN;
+    }
+    setY(value, isNeedNotify = true) { }
+    move(x, y) { }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    get reference() {
+        return this.properties.reference;
+    }
+    get isBlink() {
+        return this._isBlink;
+    }
+    set isBlink(value) {
+        if (value === this._isBlink) {
+            return;
+        }
+        this._isBlink = value;
+        this.commitIsBlinkProperties();
+    }
+    get isShaking() {
+        return false;
     }
+    set isShaking(value) { }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
     get events() {
         return this.observer.asObservable();
     }
-    get windows() {
-        return this._windows;
+    get config() {
+        return this.properties.config;
+    }
+    get content() {
+        return !_.isNil(this.reference) ? this.reference.instance : null;
+    }
+    get container() {
+        return this._container;
+    }
+    get wrapper() {
+        return this._wrapper;
+    }
+    get backdrop() {
+        return this._backdrop;
+    }
+    get isOnTop() {
+        return false;
+    }
+    set isOnTop(value) { }
+    get isMinimized() {
+        return false;
+    }
+    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);
     }
 }
-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 }], 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 }]; } });
-class PropertiesManager extends Destroyable {
+// --------------------------------------------------------------------------
+//
+//  Constants
+//
+// --------------------------------------------------------------------------
+BottomSheetImpl.BLINK_DELAY = 500;
+BottomSheetImpl.SHAKE_DELAY = 500;
+
+class BottomSheetCloseElementComponent 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(BottomSheetCloseElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', BottomSheetCloseElementComponent.ICON_VALUE);
         }
-        if (item.hasOwnProperty('height')) {
-            config.defaultHeight = item.height;
+        if (!_.isNil(BottomSheetCloseElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, BottomSheetCloseElementComponent.ICON_CLASS);
         }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    save(name, window) {
-        this.cookies.putObject(name + 'Window', {
-            width: window.getWidth(),
-            height: window.getHeight()
-        });
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.close();
+        }
     }
-    destroy() {
-        if (this.isDestroyed) {
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+BottomSheetCloseElementComponent.ICON_CLASS = 'fas fa-times';
+BottomSheetCloseElementComponent.ICON_VALUE = null;
+BottomSheetCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BottomSheetCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomSheetCloseElementComponent, selector: "vi-bottom-sheet-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: BottomSheetCloseElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-bottom-sheet-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 BottomSheetBaseComponent extends BottomSheetImpl {
+    // --------------------------------------------------------------------------
+    //
+    //  Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    elementsCreate() {
+        super.elementsCreate();
+        if (!(this.content.container instanceof ViewContainerRef)) {
             return;
         }
-        super.destroy();
-        this.cookies = null;
+        if (!this.config.disableClose) {
+            this.elementAdd(this.content.container.createComponent(BottomSheetBaseComponent.CLOSE_COMPONENT));
+        }
+    }
+    commitIsBlinkProperties() {
+        ViewUtil.toggleClass(this.container, this.blinkClass, this.isBlink);
+    }
+    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);
+    }
+    commitIsShakingProperties() {
+        ViewUtil.toggleClass(this.container, this.shakingClass, this.isShaking);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Protected Properties
+    //
+    // --------------------------------------------------------------------------
+    get blinkClass() {
+        return 'vi-blink';
+    }
+    get disabledClass() {
+        return 'vi-disabled';
+    }
+    get minimizedClass() {
+        return 'vi-minimized';
+    }
+    get shakingClass() {
+        return 'shake-constant shake-horizontal';
     }
 }
-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 = {}));
+// --------------------------------------------------------------------------
+//
+//  Static Properties
+//
+// --------------------------------------------------------------------------
+BottomSheetBaseComponent.CLOSE_COMPONENT = BottomSheetCloseElementComponent;
 
 class BottomSheetService extends Destroyable {
     // --------------------------------------------------------------------------
@@ -5239,25 +5238,17 @@ class BottomSheetService extends Destroyable {
         this.dialog = dialog;
         this.language = language;
         this.observer = new Subject();
-        this.defaultFactory = new WindowFactory(BottomSheetBaseComponent);
+        this.factory = new WindowFactory(BottomSheetBaseComponent);
         this.questionComponent = WindowQuestionComponent;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
-    //
-    // --------------------------------------------------------------------------
-    getFactory(component, config) {
-        return this.defaultFactory;
-    }
-    // --------------------------------------------------------------------------
-    //
     // 	Public Methods
     //
     // --------------------------------------------------------------------------
     open(component, config) {
         let reference = this.dialog.open(component, config);
-        let window = this.getFactory(component, config).create({ config, reference: reference, overlay: reference._overlayRef });
+        let window = this.factory.create({ config, reference: reference, overlay: reference._overlayRef });
         this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
         let subscription = window.events.subscribe(event => {
             switch (event) {
@@ -5284,7 +5275,7 @@ class BottomSheetService extends Destroyable {
             this.observer.complete();
             this.observer = null;
         }
-        this.defaultFactory = null;
+        this.factory = null;
         this.questionComponent = null;
         this.dialog = null;
         this.language = null;