@ts-core/angular 15.0.1 → 15.0.2

package/fesm2020/ts-core-angular.mjs

@@ -358,6 +358,7 @@ var WindowEvent;
     WindowEvent["RESIZED"] = "RESIZED";
     WindowEvent["DISABLED_CHANGED"] = "DISABLED_CHANGED";
     WindowEvent["MINIMIZED_CHANGED"] = "MINIMIZED_CHANGED";
+    WindowEvent["IS_ON_TOP_CHANGED"] = "IS_ON_TOP_CHANGED";
     WindowEvent["EXPAND"] = "EXPAND";
     WindowEvent["SET_ON_TOP"] = "SET_ON_TOP";
 })(WindowEvent || (WindowEvent = {}));
@@ -1224,7 +1225,7 @@ class NotificationService {
         }
         this.setDefaultProperties(config);
         let reference = this.dialog.open(component, config);
-        notification = this.factory.create({ config, reference, overlay: reference._overlayRef });
+        notification = this.factory.create({ config, reference, overlay: reference['_ref'].overlayRef });
         let subscription = notification.events.subscribe(event => {
             switch (event) {
                 case WindowEvent.OPENED:
@@ -1951,7 +1952,7 @@ class ResizeManager {
         //  Event Handlers
         //
         // --------------------------------------------------------------------------
-        this.handler = (item) => {
+        this.handlerItem = (item) => {
             if (!ResizeManager.isSizeValid(item)) {
                 return;
             }
@@ -1963,12 +1964,11 @@ class ResizeManager {
         };
         this.handler2 = (items) => {
             if (!_.isEmpty(items)) {
-                this.handler(items[0].contentRect);
+                this.handlerItem(items[0].contentRect);
             }
         };
         this.element = ViewUtil.parseElement(element);
         this.subject = new BehaviorSubject({ width: ViewUtil.getWidth(this.element), height: ViewUtil.getHeight(this.element) });
-        // this.sensor = new ResizeSensor(this.element, this.handler);
         // Could be undefined in ssr
         try {
             this.sensor = new ResizeObserver(this.handler2);
@@ -2008,13 +2008,6 @@ class ResizeManager {
             this.sensor.unobserve(this.element);
             this.sensor.disconnect();
             this.sensor = null;
-            /*
-            this.sensor.detach(this.handler);
-            try {
-                this.sensor.reset();
-            } catch (error) {}
-            this.sensor = null;
-            */
         }
         if (!_.isNil(this.subject)) {
             this.subject.complete();
@@ -2365,7 +2358,7 @@ class AutoScrollBottomDirective extends InfiniteScrollDirective {
     //
     // --------------------------------------------------------------------------
     initialize() {
-        if (!this._scrollValue) {
+        if (this._scrollValue) {
             this._scrollValue = this.scrollHeight;
         }
         super.initialize();
@@ -2642,7 +2635,7 @@ class SelectOnFocusDirective extends Destroyable {
     //
     // --------------------------------------------------------------------------
     focusHandler() {
-        ViewUtil.selectContent(this.element.nativeElement);
+        ViewUtil.selectContent(this.element);
     }
     // --------------------------------------------------------------------------
     //
@@ -2875,7 +2868,7 @@ class ResizeDirective extends Destroyable {
         //	Properties
         //
         // --------------------------------------------------------------------------
-        this.resize = new EventEmitter();
+        this.resized = new EventEmitter();
         this.isTop = false;
         this.isLeft = false;
         this.isRight = false;
@@ -2887,7 +2880,7 @@ class ResizeDirective extends Destroyable {
         // --------------------------------------------------------------------------
         this.resizeHandler = (event) => {
             if (event.dx !== 0 || event.dy !== 0) {
-                this.resize.emit(event);
+                this.resized.emit(event);
             }
         };
         this.interactable = interact.default(ViewUtil.parseElement(element));
@@ -2917,13 +2910,13 @@ class ResizeDirective extends Destroyable {
     }
 }
 ResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ResizeDirective, selector: "[vi-resize]", inputs: { isTop: "isTop", isLeft: "isLeft", isRight: "isRight", isBottom: "isBottom" }, outputs: { resize: "resize" }, usesInheritance: true, ngImport: i0 });
+ResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ResizeDirective, selector: "[vi-resize]", inputs: { isTop: "isTop", isLeft: "isLeft", isRight: "isRight", isBottom: "isBottom" }, outputs: { resized: "resized" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-resize]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { resize: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { resized: [{
                 type: Output
             }], isTop: [{
                 type: Input
@@ -3032,6 +3025,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['vi-scroll-check']
             }] } });
 
+class FinancePipe {
+    // --------------------------------------------------------------------------
+    //
+    //	Static Methods
+    //
+    // --------------------------------------------------------------------------
+    static format(value, format) {
+        value = Number(value);
+        try {
+            return numeral(value).format(format);
+        }
+        catch (error) {
+            return value.toString();
+        }
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    transform(value, format, isNeedPlus = false) {
+        value = Number(value);
+        if (_.isNaN(value)) {
+            return '---';
+        }
+        if (_.isNil(format)) {
+            format = FinancePipe.DEFAULT_FORMAT;
+        }
+        if (isNeedPlus) {
+            format = '+' + format;
+        }
+        return FinancePipe.format(value, format);
+    }
+}
+// --------------------------------------------------------------------------
+//
+//	Static Properties
+//
+// --------------------------------------------------------------------------
+FinancePipe.DEFAULT_FORMAT = '0,0';
+FinancePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FinancePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, name: "viFinance" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viFinance'
+                }]
+        }] });
+
 class LanguageMatPaginatorIntl extends MatPaginatorIntl {
     // --------------------------------------------------------------------------
     //
@@ -3043,16 +3085,13 @@ class LanguageMatPaginatorIntl extends MatPaginatorIntl {
         this.language = language;
         this.languageRangeLabel = (page, pageSize, length) => {
             let translation = { current: '0', total: '0' };
-            if (length === 0 || pageSize === 0) {
-                translation.total = length.toString();
-            }
-            else {
+            if (length > 0 && pageSize > 0) {
                 length = Math.max(length, 0);
                 let startIndex = page * pageSize;
                 let endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
                 translation.current = `${startIndex + 1} – ${endIndex}`;
-                translation.total = length.toString();
             }
+            translation.total = FinancePipe.format(length, FinancePipe.DEFAULT_FORMAT);
             return this.language.translate('paginator.pageRange', translation);
         };
         this.commitLanguageProperties();
@@ -3064,12 +3103,12 @@ class LanguageMatPaginatorIntl extends MatPaginatorIntl {
     //
     // --------------------------------------------------------------------------
     commitLanguageProperties() {
+        this.getRangeLabel = this.languageRangeLabel;
         this.lastPageLabel = this.language.translate('paginator.lastPage');
         this.nextPageLabel = this.language.translate('paginator.nextPage');
         this.firstPageLabel = this.language.translate('paginator.firstPage');
         this.previousPageLabel = this.language.translate('paginator.previousPage');
         this.itemsPerPageLabel = this.language.translate('paginator.itemsPerPage');
-        this.getRangeLabel = this.languageRangeLabel;
     }
     // --------------------------------------------------------------------------
     //
@@ -3717,1098 +3756,1047 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             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 WindowBase extends DestroyableContainer {
+class BottomSheetImpl extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    constructor() {
+    constructor(properties) {
         super();
+        this._isDisabled = false;
         // --------------------------------------------------------------------------
         //
-        // 	Properties
+        //  Protected Methods
         //
         // --------------------------------------------------------------------------
-        this._x = NaN;
-        this._width = NaN;
-        this._y = NaN;
-        this._height = NaN;
-        this.updatePosition = () => this.setPosition();
+        this.setClosed = () => {
+            this.emit(WindowEvent.CLOSED);
+            this.destroy();
+        };
+        this.setOpened = () => {
+            this.emit(WindowEvent.OPENED);
+        };
+        this.mouseDownHandlerProxy = (event) => {
+            this.mouseDownHandler(event);
+        };
+        this.mouseClickHandlerProxy = (event) => {
+            this.mouseClickHandler(event);
+        };
+        this.observer = new Subject();
+        this.properties = properties;
+        this.content.window = this;
+        // Have to save for unsubscribe on destroy
+        this._wrapper = this.properties.overlay.hostElement;
+        this._backdrop = this.properties.overlay.backdropElement;
+        this._container = this.properties.overlay.overlayElement;
+        this.setProperties();
+        this.elementsCreate();
+        this.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterDismissed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  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() {
-        let config = this.getConfig();
-        if (!_.isNaN(config.defaultWidth)) {
-            this.width = config.defaultWidth;
-        }
-        if (!_.isNaN(config.defaultHeight)) {
-            this.height = config.defaultHeight;
+        ViewUtil.addClass(this.container, 'vi-bottom-sheet');
+        ViewUtil.toggleClass(this.container, 'vi-modal', this.config.isModal);
+        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
+        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        /*
+        if (!this.config.isModal) {
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
         }
+        */
     }
-    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;
-        }
+    commitIsDisabledProperties() { }
+    getConfig() {
+        return this.properties.config;
     }
-    clearSize() {
-        this._x = NaN;
-        this._y = NaN;
-        this._width = NaN;
-        this._height = NaN;
+    getContainer() {
+        return this.container;
     }
-    commitSizeProperties() {
-        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
-        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
-        this.getReference().updateSize(width, height);
+    getReference() {
+        return this.properties.reference;
     }
-    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';
+    isNeedClickStopPropagation(event) {
+        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
+        if (_.isNil(element)) {
+            return false;
         }
-        this.getReference().updatePosition(position);
+        element.instance.clickHandler(event);
+        return true;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    calculateWidth() {
-        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
+    mouseDownHandler(event) {
+        this.setOnTop();
     }
-    calculateHeight() {
-        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
+    mouseClickHandler(event) {
+        if (this.isNeedClickStopPropagation(event)) {
+            event.stopPropagation();
+        }
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Properties
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        value = this.getConfig().parseWidth(value);
-        if (value === this._width) {
-            return;
-        }
-        this._width = value;
-        this.commitSizeProperties();
+    emit(event) {
+        this.observer.next(event);
     }
-    get height() {
-        return this._height;
+    close() {
+        this.getReference().dismiss();
     }
-    set height(value) {
-        value = this.getConfig().parseHeight(value);
-        if (value === this._height) {
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        this._height = value;
-        this.commitSizeProperties();
+        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;
     }
+    blink() { }
+    shake() { }
+    setOnTop() { }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    //  Size Methods
     //
     // --------------------------------------------------------------------------
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        value = this.getConfig().parseX(value);
-        if (value === this._x) {
-            return;
-        }
-        this._x = value;
-        this.commitPositionProperties();
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        value = this.getConfig().parseY(value);
-        if (value === this._y) {
-            return;
-        }
-        this._y = value;
-        this.commitPositionProperties();
-    }
-    get paddingTop() {
-        return this.getConfig().paddingTop;
+    getWidth() {
+        return NaN;
     }
-    get paddingLeft() {
-        return this.getConfig().paddingLeft;
+    getHeight() {
+        return NaN;
     }
-    get paddingRight() {
-        return this.getConfig().paddingRight;
+    setWidth(value, isNeedNotify = true) { }
+    setHeight(value, isNeedNotify = true) { }
+    setSize(width, height) { }
+    // --------------------------------------------------------------------------
+    //
+    //  Move Methods
+    //
+    // --------------------------------------------------------------------------
+    getX() {
+        return NaN;
     }
-    get paddingBottom() {
-        return this.getConfig().paddingBottom;
+    setX(value, isNeedNotify = true) { }
+    getY() {
+        return NaN;
     }
-}
-
-class WindowImpl extends WindowBase {
+    setY(value, isNeedNotify = true) { }
+    move(x, y) { }
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    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(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterClosed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
-        this.events
-            .pipe(filter(event => event === WindowEvent.CONTENT_READY), takeUntil(this.destroyed))
-            .subscribe(this.updatePosition);
+    get reference() {
+        return this.properties.reference;
     }
     // --------------------------------------------------------------------------
     //
-    //  Elements Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    elementsCreate() {
-        this.elements = new Array();
-    }
-    elementsDestroy() {
-        this.elements.forEach(item => this.elementDestroy(item));
-        this.elements = null;
+    get events() {
+        return this.observer.asObservable();
     }
-    elementAdd(item) {
-        this.elements.push(item);
-        item.instance.window = this;
-        return item;
+    get config() {
+        return this.properties.config;
     }
-    elementRemove(item) {
-        ArrayUtil.remove(this.elements, item);
-        this.elementDestroy(item);
-        return item;
+    get content() {
+        return !_.isNil(this.reference) ? this.reference.instance : null;
     }
-    elementDestroy(item) {
-        item.instance.window = null;
-        item.destroy();
-        return item;
+    get container() {
+        return this._container;
     }
-    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);
-        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
-        /*
-        if (!this.config.isModal) {
-            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
-        }
-        */
-        this.elementsCreate();
+    get wrapper() {
+        return this._wrapper;
     }
-    commitIsBlinkProperties() { }
-    commitIsShakingProperties() { }
-    commitIsDisabledProperties() { }
-    commitIsMinimizedProperties() { }
-    getConfig() {
-        return this.properties.config;
+    get backdrop() {
+        return this._backdrop;
     }
-    getContainer() {
-        return this.container;
+    get isOnTop() {
+        return false;
     }
-    getReference() {
-        return this.properties.reference;
+    set isOnTop(value) { }
+    get isMinimized() {
+        return false;
     }
-    isNeedClickStopPropagation(event) {
-        if (!this.isWasOnTop) {
-            return true;
-        }
-        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
-        if (_.isNil(element)) {
-            return false;
-        }
-        element.instance.clickHandler(event);
-        return true;
+    set isMinimized(value) { }
+    get isDisabled() {
+        return this._isDisabled;
     }
-    stopBlinkIfNeed() {
-        this.isBlink = false;
-        if (!this.blinkTimer) {
+    set isDisabled(value) {
+        if (value === this._isDisabled) {
             return;
         }
-        clearInterval(this.blinkTimer);
-        this.blinkTimer = null;
+        this._isDisabled = value;
+        this.commitIsDisabledProperties();
+        this.emit(WindowEvent.DISABLED_CHANGED);
     }
-    mouseDownHandler(event) {
-        this.setOnTop();
+}
+
+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: "15.0.4", ngImport: i0, type: WindowElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WindowElement, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", 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 WindowExpandElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    // 	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(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterDismissed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
+    constructor(element) {
+        super(element);
     }
     // --------------------------------------------------------------------------
     //
-    //  Elements Methods
+    // 	Private 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);
-        this.container.addEventListener('click', this.mouseClickHandlerProxy, true);
-        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
-        /*
-        if (!this.config.isModal) {
-            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;
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowExpandElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowExpandElementComponent.ICON_VALUE);
+        }
+        if (!_.isNil(WindowExpandElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowExpandElementComponent.ICON_CLASS);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    mouseDownHandler(event) {
-        this.setOnTop();
-    }
-    mouseClickHandler(event) {
-        if (this.isNeedClickStopPropagation(event)) {
-            event.stopPropagation();
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.emit(WindowEvent.EXPAND);
         }
     }
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowExpandElementComponent.ICON_CLASS = 'fas fa-angle-double-up';
+WindowExpandElementComponent.ICON_VALUE = null;
+WindowExpandElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowExpandElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowExpandElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WindowExpandElementComponent, selector: "vi-window-expand-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowExpandElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-expand-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowResizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    emit(event) {
-        this.observer.next(event);
-    }
-    close() {
-        this.getReference().dismiss();
+    constructor(element) {
+        super(element);
     }
-    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();
+    // --------------------------------------------------------------------------
+    //
+    // 	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
         }
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
+        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
         }
-        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);
+        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
     }
-    shake() { }
-    setOnTop() { }
     // --------------------------------------------------------------------------
     //
-    //  Size Methods
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    getWidth() {
-        return NaN;
-    }
-    getHeight() {
-        return NaN;
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.emit(WindowEvent.EXPAND);
+        }
     }
-    setWidth(value, isNeedNotify = true) { }
-    setHeight(value, isNeedNotify = true) { }
-    setSize(width, height) { }
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
+WindowResizeElementComponent.ICON_VALUE = null;
+WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowMinimizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    //  Move Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    getX() {
-        return NaN;
-    }
-    setX(value, isNeedNotify = true) { }
-    getY() {
-        return NaN;
+    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);
+        };
     }
-    setY(value, isNeedNotify = true) { }
-    move(x, y) { }
     // --------------------------------------------------------------------------
     //
-    //  Private Properties
+    // 	Protected Methods
     //
     // --------------------------------------------------------------------------
-    get reference() {
-        return this.properties.reference;
-    }
-    get isBlink() {
-        return this._isBlink;
+    commitWindowProperties() {
+        super.commitWindowProperties();
+        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
+            if (event === WindowEvent.MINIMIZED_CHANGED) {
+                this.commitIconProperties();
+            }
+        });
     }
-    set isBlink(value) {
-        if (value === this._isBlink) {
-            return;
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
         }
-        this._isBlink = value;
-        this.commitIsBlinkProperties();
-    }
-    get isShaking() {
-        return false;
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    set isShaking(value) { }
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    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;
+WindowMinimizeElementComponent.ICON_CLASS = null;
+WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", 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 WindowElement extends DestroyableContainer {
+class WindowBase extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
+    constructor() {
         super();
-        this.element = element;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    checkWindowParent() {
-        let container = this.getContainer();
-        if (!_.isNil(container)) {
-            ViewUtil.appendChild(container, this.element.nativeElement);
+        // --------------------------------------------------------------------------
+        //
+        // 	Properties
+        //
+        // --------------------------------------------------------------------------
+        this._x = NaN;
+        this._width = NaN;
+        this._y = NaN;
+        this._height = NaN;
+        this.updatePosition = () => this.setPosition();
+    }
+    setProperties() {
+        let config = this.getConfig();
+        if (!_.isNaN(config.defaultWidth)) {
+            this.width = config.defaultWidth;
+        }
+        if (!_.isNaN(config.defaultHeight)) {
+            this.height = config.defaultHeight;
         }
     }
-    getContainer() {
-        let item = ViewUtil.parseElement(this.element.nativeElement);
-        while (!_.isNil(item) && item.nodeName.toLowerCase() !== 'mat-dialog-container') {
-            item = item.parentElement;
+    setPosition() {
+        let config = this.getConfig();
+        switch (config.horizontalAlign) {
+            case WindowAlign.START:
+                this.x = !_.isNaN(this.paddingLeft) ? this.paddingLeft : 0;
+                break;
+            case WindowAlign.END:
+                let value = ViewUtil.getStageWidth() - this.calculateWidth();
+                if (!_.isNaN(this.paddingRight)) {
+                    value -= this.paddingRight;
+                }
+                this.x = value;
+                break;
+            default:
+                this.x = (ViewUtil.getStageWidth() - this.calculateWidth()) / 2;
+                break;
+        }
+        switch (config.verticalAlign) {
+            case WindowAlign.START:
+                this.y = !_.isNaN(this.paddingTop) ? this.paddingTop : 0;
+                break;
+            case WindowAlign.END:
+                let value = ViewUtil.getStageHeight() - this.calculateHeight();
+                if (!_.isNaN(this.paddingBottom)) {
+                    value -= this.paddingBottom;
+                }
+                this.y = value;
+                break;
+            default:
+                this.y = (ViewUtil.getStageHeight() - this.calculateHeight()) / 2;
+                break;
         }
-        return item;
     }
-    createChildren() { }
-    destroyChildren() { }
-    commitWindowProperties() { }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.createChildren();
-        this.checkWindowParent();
+    clearSize() {
+        this._x = NaN;
+        this._y = NaN;
+        this._width = NaN;
+        this._height = NaN;
     }
-    destroy() {
-        if (this.isDestroyed) {
+    commitSizeProperties() {
+        let width = !_.isNaN(this.width) ? this.width + 'px' : 'auto';
+        let height = !_.isNaN(this.height) ? this.height + 'px' : 'auto';
+        this.getReference().updateSize(width, height);
+    }
+    commitPositionProperties() {
+        if (_.isNaN(this._x) && _.isNaN(this._y)) {
             return;
         }
-        super.destroy();
-        this.destroyChildren();
-        this.element = null;
-        this.window = null;
+        let position = {};
+        if (!_.isNaN(this._y)) {
+            position.top = this._y + 'px';
+        }
+        if (!_.isNaN(this._x)) {
+            position.left = this._x + 'px';
+        }
+        this.getReference().updatePosition(position);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        event.stopPropagation();
+    calculateWidth() {
+        return !_.isNaN(this.width) ? this.width : ViewUtil.getWidth(this.getContainer());
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Protected Properties
-    //
-    // --------------------------------------------------------------------------
-    get nativeElement() {
-        return this.element ? this.element.nativeElement : null;
+    calculateHeight() {
+        return !_.isNaN(this.height) ? this.height : ViewUtil.getHeight(this.getContainer());
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    // 	Private Properties
     //
     // --------------------------------------------------------------------------
-    get window() {
-        return this._window;
+    get width() {
+        return this._width;
     }
-    set window(value) {
-        if (value === this._window) {
+    set width(value) {
+        value = this.getConfig().parseWidth(value);
+        if (value === this._width) {
             return;
         }
-        this._window = value;
-        if (this.window) {
-            this.commitWindowProperties();
+        this._width = value;
+        this.commitSizeProperties();
+    }
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        value = this.getConfig().parseHeight(value);
+        if (value === this._height) {
+            return;
         }
+        this._height = value;
+        this.commitSizeProperties();
     }
-}
-WindowElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WindowElement, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowElement, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowCloseElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    get x() {
+        return this._x;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowCloseElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowCloseElementComponent.ICON_VALUE);
-        }
-        if (!_.isNil(WindowCloseElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowCloseElementComponent.ICON_CLASS);
+    set x(value) {
+        value = this.getConfig().parseX(value);
+        if (value === this._x) {
+            return;
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+        this._x = value;
+        this.commitPositionProperties();
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.close();
+    get y() {
+        return this._y;
+    }
+    set y(value) {
+        value = this.getConfig().parseY(value);
+        if (value === this._y) {
+            return;
         }
+        this._y = value;
+        this.commitPositionProperties();
+    }
+    get paddingTop() {
+        return this.getConfig().paddingTop;
+    }
+    get paddingLeft() {
+        return this.getConfig().paddingLeft;
+    }
+    get paddingRight() {
+        return this.getConfig().paddingRight;
+    }
+    get paddingBottom() {
+        return this.getConfig().paddingBottom;
     }
 }
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowCloseElementComponent.ICON_CLASS = 'fas fa-times';
-WindowCloseElementComponent.ICON_VALUE = null;
-WindowCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", ngImport: i0, type: WindowCloseElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-close-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-class WindowExpandElementComponent extends WindowElement {
+class WindowImpl extends WindowBase {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    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(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterClosed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
+        this.events
+            .pipe(filter(event => event === WindowEvent.CONTENT_READY), takeUntil(this.destroyed))
+            .subscribe(this.updatePosition);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //  Elements Methods
     //
     // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowExpandElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowExpandElementComponent.ICON_VALUE);
+    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);
+        this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
+        /*
+        if (!this.config.isModal) {
+            this.container.addEventListener('mousedown', this.mouseDownHandlerProxy);
         }
-        if (!_.isNil(WindowExpandElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowExpandElementComponent.ICON_CLASS);
+        */
+        this.elementsCreate();
+    }
+    commitIsBlinkProperties() { }
+    commitIsShakingProperties() { }
+    commitIsDisabledProperties() { }
+    commitIsOnTopProperties() {
+        this.isBlink = false;
+    }
+    commitIsMinimizedProperties() {
+        this.isBlink = false;
+    }
+    getConfig() {
+        return this.properties.config;
+    }
+    getContainer() {
+        return this.container;
+    }
+    getReference() {
+        return this.properties.reference;
+    }
+    isNeedClickStopPropagation(event) {
+        if (!this.isWasOnTop) {
+            return true;
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+        let element = _.find(this.elements, item => item.location.nativeElement === event.target);
+        if (_.isNil(element)) {
+            return false;
+        }
+        element.instance.clickHandler(event);
+        return true;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.emit(WindowEvent.EXPAND);
+    mouseDownHandler(event) {
+        this.setOnTop();
+    }
+    mouseClickHandler(event) {
+        if (this.isNeedClickStopPropagation(event)) {
+            event.stopPropagation();
+        }
+        if (!this.isWasOnTop) {
+            this.isWasOnTop = true;
         }
     }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowExpandElementComponent.ICON_CLASS = 'fas fa-angle-double-up';
-WindowExpandElementComponent.ICON_VALUE = null;
-WindowExpandElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowExpandElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowExpandElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: WindowExpandElementComponent, selector: "vi-window-expand-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowExpandElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-expand-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowResizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    emit(event) {
+        this.observer.next(event);
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
+    close() {
+        this.getReference().close();
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
-        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
+        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.shakeTimer);
+        this.shakeTimer = null;
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = null;
+    }
+    blink() {
+        this.isBlink = true;
+    }
+    shake() {
+        if (this.isShaking) {
+            return;
         }
-        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
+        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);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    //  Size Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.emit(WindowEvent.EXPAND);
+    getWidth() {
+        return this.width;
+    }
+    getHeight() {
+        return this.height;
+    }
+    setWidth(value, isNeedNotify = true) {
+        this.width = value;
+        if (isNeedNotify) {
+            this.resizeHandler();
         }
     }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
-WindowResizeElementComponent.ICON_VALUE = null;
-WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowMinimizeElementComponent extends WindowElement {
+    setHeight(value, isNeedNotify = true) {
+        this.height = value;
+        if (isNeedNotify) {
+            this.resizeHandler();
+        }
+    }
+    setSize(width, height) {
+        this.setWidth(width, false);
+        this.setHeight(height, false);
+        this.resizeHandler();
+    }
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Move Methods
     //
     // --------------------------------------------------------------------------
-    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);
-        };
+    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);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        super.commitWindowProperties();
-        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
-            if (event === WindowEvent.MINIMIZED_CHANGED) {
-                this.commitIconProperties();
-            }
-        });
+    get isBlink() {
+        return this._isBlink;
     }
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
+    set isBlink(value) {
+        if (value === this._isBlink) {
+            return;
         }
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+        this._isBlink = value;
+        this.commitIsBlinkProperties();
+    }
+    get isShaking() {
+        return this._isShaking;
+    }
+    set isShaking(value) {
+        if (value === this._isShaking) {
+            return;
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+        this._isShaking = value;
+        this.commitIsShakingProperties();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.isMinimized = !this.window.isMinimized;
+    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;
+        }
+        this._isOnTop = value;
+        this.commitIsOnTopProperties();
+        this.emit(WindowEvent.IS_ON_TOP_CHANGED);
+    }
+    get isMinimized() {
+        return this._isMinimized;
+    }
+    set isMinimized(value) {
+        if (value === this._isMinimized) {
+            return;
+        }
+        this._isMinimized = value;
+        this.commitIsMinimizedProperties();
+        this.emit(WindowEvent.MINIMIZED_CHANGED);
+    }
+    get isDisabled() {
+        return this._isDisabled;
+    }
+    set isDisabled(value) {
+        if (value === this._isDisabled) {
+            return;
         }
+        this._isDisabled = value;
+        this.commitIsDisabledProperties();
+        this.emit(WindowEvent.DISABLED_CHANGED);
     }
 }
 // --------------------------------------------------------------------------
 //
-// 	Constants
+//  Constants
 //
 // --------------------------------------------------------------------------
-WindowMinimizeElementComponent.ICON_CLASS = null;
-WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", 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 }]; } });
+WindowImpl.BLINK_DELAY = 500;
+WindowImpl.SHAKE_DELAY = 500;
+WindowImpl.RESIZE_DELAY = 200;
 
 class WindowResizeable extends WindowImpl {
     // --------------------------------------------------------------------------
@@ -5047,34 +5035,19 @@ class BottomSheetBaseComponent extends BottomSheetImpl {
             this.elementAdd(this.content.container.createComponent(BottomSheetBaseComponent.EXPAND_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';
-    }
 }
 // --------------------------------------------------------------------------
 //
@@ -5105,7 +5078,7 @@ class BottomSheetService extends Destroyable {
     // --------------------------------------------------------------------------
     open(component, config) {
         let reference = this.dialog.open(component, config);
-        let window = this.factory.create({ config, reference: reference, overlay: reference._overlayRef });
+        let window = this.factory.create({ config, reference: reference, overlay: reference['_ref'].overlayRef });
         this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
         let subscription = window.events.subscribe(event => {
             switch (event) {
@@ -5654,55 +5627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-class FinancePipe {
-    // --------------------------------------------------------------------------
-    //
-    //	Static Methods
-    //
-    // --------------------------------------------------------------------------
-    static format(value, format) {
-        value = Number(value);
-        try {
-            return numeral(value).format(format);
-        }
-        catch (error) {
-            return value.toString();
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    transform(value, format, isNeedPlus = false) {
-        value = Number(value);
-        if (_.isNaN(value)) {
-            return '---';
-        }
-        if (_.isNil(format)) {
-            format = FinancePipe.DEFAULT_FORMAT;
-        }
-        if (isNeedPlus) {
-            format = '+' + format;
-        }
-        return FinancePipe.format(value, format);
-    }
-}
-// --------------------------------------------------------------------------
-//
-//	Static Properties
-//
-// --------------------------------------------------------------------------
-FinancePipe.DEFAULT_FORMAT = '0,0';
-FinancePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FinancePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, name: "viFinance" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FinancePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viFinance'
-                }]
-        }] });
-
 class MomentDatePipe {
     // --------------------------------------------------------------------------
     //
@@ -6472,7 +6396,7 @@ class ThemeStyleDirective extends Destroyable {
         super();
         this.theme = theme;
         this.element = ViewUtil.parseElement(element.nativeElement);
-        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesAdd());
+        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesCheck());
     }
     // --------------------------------------------------------------------------
     //
@@ -6918,7 +6842,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.factory.create({ config, reference, overlay: reference._overlayRef });
+        window = this.factory.create({ config, reference, overlay: reference['_ref'].overlayRef });
         this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
         let subscription = window.events.subscribe(event => {
             switch (event) {
@@ -7272,8 +7196,9 @@ class MenuTriggerForDirective extends MatMenuTrigger {
     //
     //--------------------------------------------------------------------------
     openMenuOn(target) {
-        if (_.isNil(target))
+        if (_.isNil(target)) {
             return;
+        }
         this.openMenu();
         let strategy = this.getPositionStrategy();
         if (strategy instanceof FlexibleConnectedPositionStrategy) {
@@ -7287,7 +7212,8 @@ class MenuTriggerForDirective extends MatMenuTrigger {
     //
     //--------------------------------------------------------------------------
     getPositionStrategy() {
-        return !_.isNil(this['_overlayRef']) ? this['_overlayRef'].getConfig().positionStrategy : null;
+        let reference = this['_overlayRef'];
+        return !_.isNil(reference) ? reference.getConfig().positionStrategy : null;
     }
     //--------------------------------------------------------------------------
     //
@@ -7543,6 +7469,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class TabGroupComponent extends DestroyableContainer {
+    constructor() {
+        super(...arguments);
+        this.isStretch = true;
+    }
     // --------------------------------------------------------------------------
     //
     // 	Protected Methods
@@ -7554,7 +7484,12 @@ class TabGroupComponent extends DestroyableContainer {
     // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    selectedTabChange(event) {
+    selectedIndexChanged(event) {
+        if (!_.isNil(this.list)) {
+            this.list.selectedIndex = event;
+        }
+    }
+    selectedTabChanged(event) {
         if (_.isNil(this.list)) {
             return;
         }
@@ -7597,12 +7532,14 @@ class TabGroupComponent extends DestroyableContainer {
     }
 }
 TabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabGroupComponent, selector: "vi-tab-group", inputs: { className: "className", list: "list" }, usesInheritance: true, ngImport: i0, template: "<mat-tab-group [ngClass]=\"className\" (selectedIndexChange)=\"list.selectedIndex = $event\" [selectedIndex]=\"list?.selectedIndex\"\n    (selectedTabChange)=\"selectedTabChange($event)\">\n    <ng-container *ngFor=\"let item of list?.collection\">\n        <mat-tab [ngClass]=\"item.className\" [label]=\"item.label\" [disabled]=\"!item.isEnabled\" (click)=\"list?.actionItem(item)\"></mat-tab>\n    </ng-container>\n</mat-tab-group>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+TabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabGroupComponent, selector: "vi-tab-group", inputs: { className: "className", isStretch: "isStretch", list: "list" }, usesInheritance: true, ngImport: i0, template: "<mat-tab-group\n    [ngClass]=\"className\"\n    [mat-stretch-tabs]=\"isStretch\"\n    [selectedIndex]=\"list?.selectedIndex\"\n    (selectedIndexChange)=\"selectedIndexChanged($event)\"\n    (selectedTabChange)=\"selectedTabChanged($event)\"\n>\n    <mat-tab\n        [ngClass]=\"item.className\"\n        [label]=\"item.label\"\n        [disabled]=\"!item.isEnabled\"\n        (click)=\"list?.actionItem(item)\"\n        *ngFor=\"let item of list?.collection\"\n    ></mat-tab>\n</mat-tab-group>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vi-tab-group', template: "<mat-tab-group [ngClass]=\"className\" (selectedIndexChange)=\"list.selectedIndex = $event\" [selectedIndex]=\"list?.selectedIndex\"\n    (selectedTabChange)=\"selectedTabChange($event)\">\n    <ng-container *ngFor=\"let item of list?.collection\">\n        <mat-tab [ngClass]=\"item.className\" [label]=\"item.label\" [disabled]=\"!item.isEnabled\" (click)=\"list?.actionItem(item)\"></mat-tab>\n    </ng-container>\n</mat-tab-group>\n" }]
+            args: [{ selector: 'vi-tab-group', template: "<mat-tab-group\n    [ngClass]=\"className\"\n    [mat-stretch-tabs]=\"isStretch\"\n    [selectedIndex]=\"list?.selectedIndex\"\n    (selectedIndexChange)=\"selectedIndexChanged($event)\"\n    (selectedTabChange)=\"selectedTabChanged($event)\"\n>\n    <mat-tab\n        [ngClass]=\"item.className\"\n        [label]=\"item.label\"\n        [disabled]=\"!item.isEnabled\"\n        (click)=\"list?.actionItem(item)\"\n        *ngFor=\"let item of list?.collection\"\n    ></mat-tab>\n</mat-tab-group>\n" }]
         }], propDecorators: { className: [{
                 type: Input
+            }], isStretch: [{
+                type: Input
             }], list: [{
                 type: Input
             }] } });
@@ -10328,4 +10265,3 @@ class TransportLazyModule {
 
 export { APPLICATION_INJECTOR, ApplicationBaseComponent, ApplicationComponent, AspectRatioResizeDirective, AssetBackgroundDirective, AssetBackgroundPipe, AssetFilePipe, AssetIconPipe, AssetImagePipe, AssetModule, AssetSoundPipe, AssetVideoPipe, AutoScrollBottomDirective, BootstrapBreakpoint, BootstrapBreakpointService, BootstrapBreakpointServiceEvent, BottomSheetBaseComponent, BottomSheetModule, BottomSheetService, COOKIE_OPTIONS, CamelCasePipe, CanDeactivateGuard, CdkTableBaseComponent, CdkTableCellClassNamePipe, CdkTableCellStyleNamePipe, CdkTableCellValuePipe, CdkTableCellValuePipePure, CdkTableColumnClassNamePipe, CdkTableColumnStyleNamePipe, CdkTableDataSource, CdkTableFilterableComponent, CdkTableFilterableMapCollection, CdkTablePaginableBookmarkComponent, CdkTablePaginableBookmarkMapCollection, CdkTablePaginableComponent, CdkTablePaginableMapCollection, CdkTableRowClassNamePipe, CdkTableRowStyleNamePipe, ClickToCopyDirective, ClickToSelectDirective, CookieModule, CookieOptions, CookieService, Direction, FinancePipe, FocusDirective, FocusManager, FormElementAsync, FormElementSync, HTMLContentTitleDirective, HTMLTitleDirective, INotification, INotificationContent, IUser, IVICommonOptions, IWindow, IWindowContent, InfiniteScrollDirective, IsBrowserDirective, IsServerDirective, LANGUAGE_OPTIONS, LanguageDirective, LanguageHasDirective, LanguageMatPaginatorIntl, LanguageModule, LanguageMomentDateAdapter, LanguagePipe, LanguagePipeHas, LanguagePipeHasPure, LanguagePipePure, LanguageRequireResolver, LanguageResolver, LanguageSelectorComponent, LazyModuleLoader, ListItem, ListItems, LoginBaseService, LoginBaseServiceEvent, LoginGuard, LoginIfCanGuard, LoginNotGuard, LoginRequireResolver, LoginResolver, MenuItem, MenuItemBase, MenuItems, MenuListComponent, MenuTriggerForDirective, MessageBaseComponent, MomentDateAdaptivePipe, MomentDateFromNowPipe, MomentDatePipe, MomentTimePipe, NavigationMenuItem, NgModelErrorPipe, NotificationBaseComponent, NotificationComponent, NotificationConfig, NotificationEvent, NotificationFactory, NotificationModule, NotificationService, NotificationServiceEvent, PipeBaseService, PlatformService, PrettifyPipe, PropertiesManager, QuestionEvent, QuestionManager, QuestionMode, ResizeDirective, ResizeManager, RouterBaseService, SanitizePipe, ScrollCheckDirective, ScrollDirective, SelectListComponent, SelectListItem, SelectListItems, SelectOnFocusDirective, ShellBaseComponent, StartCasePipe, THEME_OPTIONS, TabGroupComponent, ThemeAssetBackgroundDirective, ThemeAssetDirective, ThemeAssetIconDirective, ThemeAssetImageDirective, ThemeModule, ThemeStyleDirective, ThemeStyleHoverDirective, ThemeToggleDirective, TimePipe, TransportLazy, TransportLazyModule, TransportLazyModuleLoadedEvent, TruncatePipe, UserBaseService, UserBaseServiceEvent, VICommonModule, VIComponentModule, VI_ANGULAR_OPTIONS, ViewUtil, WINDOW_CONTENT_CONTAINER, WindowAlign, WindowBase, WindowBaseComponent, WindowCloseElementComponent, WindowClosedError, WindowConfig, WindowDragAreaDirective, WindowElement, WindowEvent, WindowExpandElementComponent, WindowFactory, WindowImpl, WindowMinimizeElementComponent, WindowModule, WindowQuestionBaseComponent, WindowQuestionComponent, WindowResizeElementComponent, WindowService, WindowServiceEvent, cookieServiceFactory, initializerFactory, languageServiceFactory, loggerServiceFactory, nativeWindowServiceFactory, notificationServiceFactory, themeAssetServiceFactory, themeServiceFactory };
 //# sourceMappingURL=ts-core-angular.mjs.map
-//# sourceMappingURL=ts-core-angular.mjs.map