@ts-core/angular 13.0.48 → 13.0.49

package/fesm2020/ts-core-angular.mjs

@@ -32,7 +32,7 @@ import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginato
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$2 from '@angular/material/bottom-sheet';
-import { MatBottomSheetModule, MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { RemoveFilterableCondition, GetFilterableCondition } from '@ts-core/common/dto';
 import * as i1$3 from '@angular/platform-browser';
 import * as i1$4 from '@ts-core/frontend/theme';
@@ -4151,13 +4151,13 @@ class WindowElement extends DestroyableContainer {
     // --------------------------------------------------------------------------
     checkWindowParent() {
         let container = this.getContainer();
-        if (container) {
+        if (!_.isNil(container)) {
             ViewUtil.appendChild(container, this.element.nativeElement);
         }
     }
     getContainer() {
         let item = ViewUtil.parseElement(this.element.nativeElement);
-        while (item && item.nodeName.toLowerCase() !== 'mat-dialog-container') {
+        while (!_.isNil(item) && item.nodeName.toLowerCase() !== 'mat-dialog-container') {
             item = item.parentElement;
         }
         return item;
@@ -4325,441 +4325,113 @@ class BottomSheetBaseComponent extends BottomSheetImpl {
 // --------------------------------------------------------------------------
 BottomSheetBaseComponent.CLOSE_COMPONENT = BottomSheetCloseElementComponent;
 
-class WindowService extends Destroyable {
+class IWindowContent extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(dialog, language, cookies) {
+    constructor(container) {
         super();
-        this.isNeedCheckPositionAfterOpen = true;
-        this.gapX = 25;
-        this.gapY = 25;
-        this.minWidth = 100;
-        this.minHeight = 100;
-        this.paddingTop = 25;
-        this.paddingLeft = 25;
-        this.paddingRight = 25;
-        this.paddingBottom = 25;
-        this.defaultVerticalAlign = WindowAlign.CENTER;
-        this.defaultHorizontalAlign = WindowAlign.CENTER;
-        this.topZIndex = 999;
-        this._windows = new Map();
-        this.dialog = dialog;
-        this.language = language;
-        this.observer = new Subject();
-        this.properties = new PropertiesManager(cookies);
+        this.container = container;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    sortFunction(first, second) {
-        let firstIndex = first.container ? parseInt(ViewUtil.getStyle(first.container.parentElement, 'zIndex'), 10) : -1;
-        let secondIndex = second.container ? parseInt(ViewUtil.getStyle(second.container.parentElement, 'zIndex'), 10) : -1;
-        return firstIndex > secondIndex ? -1 : 1;
+    commitWindowProperties() {
+        this.commitConfigProperties();
     }
-    updateTop() {
-        let zIndex = 0;
-        let topWindow = null;
-        for (let window of this.windowsArray) {
-            if (_.isNil(window.container)) {
-                continue;
-            }
-            let index = parseInt(ViewUtil.getStyle(window.container.parentElement, 'zIndex'), 10);
-            if (zIndex >= index) {
-                continue;
-            }
-            zIndex = index;
-            topWindow = window;
+    commitConfigProperties() { }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    ngAfterViewInit() {
+        this.emit(WindowEvent.CONTENT_READY);
+    }
+    ngOnDestroy() {
+        // do nothing, window will destroy content after closing
+    }
+    blink() {
+        if (!_.isNil(this.window)) {
+            this.window.blink();
         }
-        if (_.isNil(topWindow) || topWindow.isOnTop) {
-            return;
+    }
+    shake() {
+        if (!_.isNil(this.window)) {
+            this.window.shake();
         }
-        topWindow.isOnTop = true;
-        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
     }
-    setWindowOnTop(topWindow) {
-        let currentIndex = this.topZIndex - 2;
-        for (let window of this.windowsArray) {
-            if (_.isNil(window.container)) {
-                continue;
-            }
-            window.isOnTop = window === topWindow;
-            let zIndex = window.isOnTop ? this.topZIndex : currentIndex--;
-            ViewUtil.setStyle(window.backdrop, 'zIndex', zIndex);
-            ViewUtil.setStyle(window.wrapper, 'zIndex', zIndex);
+    emit(event) {
+        if (!_.isNil(this.window)) {
+            this.window.emit(event);
         }
-        this.windowsArray.sort(this.sortFunction);
-        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
     }
-    checkPosition(item) {
-        while (this.hasSamePosition(item)) {
-            item.move(item.getX() + this.gapX, item.getY() + this.gapY);
+    close() {
+        if (!_.isNil(this.window)) {
+            this.window.close();
         }
     }
-    hasSamePosition(itemWindow) {
-        let x = itemWindow.getX();
-        let y = itemWindow.getY();
-        let result = false;
-        this.windowsArray.forEach(window => {
-            if (window !== itemWindow && x === window.getX() && y === window.getY()) {
-                result = true;
-            }
-        });
-        return result;
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.window = null;
+        this.container = null;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Setters Methods
+    //  Proxy Public Properties
     //
     // --------------------------------------------------------------------------
-    add(config, content) {
-        this._windows.set(config, content);
-        this.observer.next(new ObservableData(WindowServiceEvent.OPENED, content.window));
+    get data() {
+        return !_.isNil(this.config) ? this.config.data : null;
     }
-    remove(config) {
-        let window = this._windows.get(config);
-        if (!window) {
-            return null;
-        }
-        window.close();
-        this._windows.delete(config);
-        this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window.window));
+    get isOnTop() {
+        return !_.isNil(this.window) ? this.window.isOnTop : false;
     }
-    getById(id) {
-        let item = _.find(Array.from(this._windows.values()), item => item.config.id === id);
-        return !_.isNil(item) ? item.window : null;
+    get isMinimized() {
+        return !_.isNil(this.window) ? this.window.isMinimized : false;
     }
-    setDefaultProperties(config) {
-        if (!config.verticalAlign) {
-            config.verticalAlign = this.defaultVerticalAlign;
-        }
-        if (!config.horizontalAlign) {
-            config.horizontalAlign = this.defaultHorizontalAlign;
-        }
-        if (_.isNaN(config.defaultMinWidth)) {
-            config.defaultMinWidth = this.minWidth;
-        }
-        if (_.isNaN(config.defaultMinHeight)) {
-            config.defaultMinHeight = this.minHeight;
-        }
-        if (_.isNaN(config.paddingTop)) {
-            config.paddingTop = this.paddingTop;
-        }
-        if (_.isNaN(config.paddingLeft)) {
-            config.paddingLeft = this.paddingLeft;
-        }
-        if (_.isNaN(config.paddingRight)) {
-            config.paddingRight = this.paddingRight;
-        }
-        if (_.isNaN(config.paddingBottom)) {
-            config.paddingBottom = this.paddingBottom;
-        }
-        if (config.propertiesId) {
-            this.properties.load(config.propertiesId, config);
+    get events() {
+        return !_.isNil(this.window) ? this.window.events : null;
+    }
+    get isDisabled() {
+        return !_.isNil(this.window) ? this.window.isDisabled : false;
+    }
+    set isDisabled(value) {
+        if (!_.isNil(this.window)) {
+            this.window.isDisabled = value;
         }
-        config.setDefaultProperties();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    open(component, config) {
-        let window = null;
-        if (config.id) {
-            window = this.getById(config.id);
-            if (window) {
-                return window.content;
-            }
-        }
-        this.setDefaultProperties(config);
-        // let dialog = this.dialog as any;
-        // dialog._getOverlayState = config.isModal ? dialog.getOverlayStateModal : dialog.getOverlayStateNonModal;
-        let reference = this.dialog.open(component, config);
-        window = this.factory.create({ config, reference, overlay: reference._overlayRef });
-        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
-        let subscription = window.events.subscribe(event => {
-            switch (event) {
-                case WindowEvent.OPENED:
-                    this.add(config, reference.componentInstance);
-                    this.setWindowOnTop(window);
-                    if (this.isNeedCheckPositionAfterOpen) {
-                        this.checkPosition(window);
-                    }
-                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
-                    break;
-                case WindowEvent.CLOSED:
-                    subscription.unsubscribe();
-                    this.remove(config);
-                    if (window.isOnTop && this.windows.size > 0) {
-                        this.updateTop();
-                    }
-                    break;
-                case WindowEvent.RESIZED:
-                    if (!_.isNil(config.propertiesId)) {
-                        this.properties.save(config.propertiesId, window);
-                    }
-                    break;
-                case WindowEvent.SET_ON_TOP:
-                    this.setWindowOnTop(window);
-                    break;
-            }
-        });
-        return window.content;
-    }
-    get(value) {
-        let id = value.toString();
-        if (value instanceof WindowConfig) {
-            id = value.id;
-        }
-        if (!id) {
-            return null;
-        }
-        let window = this.getById(id);
-        if (_.isNil(window)) {
+    get element() {
+        if (_.isNil(this.container)) {
             return null;
         }
-        return window.content;
-    }
-    has(value) {
-        return !_.isNil(this.get(value));
+        return this.container instanceof ViewContainerRef ? this.container.element : this.container;
     }
-    setOnTop(value) {
-        let content = this.get(value);
-        if (!content) {
-            return false;
-        }
-        content.window.setOnTop();
-        return true;
+    get config() {
+        return !_.isNil(this.window) ? this.window.config : null;
     }
-    removeAll() {
-        this.windowsArray.forEach(window => window.close());
+    get window() {
+        return this._window;
     }
-    destroy() {
-        if (this.isDestroyed) {
+    set window(value) {
+        if (value === this._window) {
             return;
         }
-        super.destroy();
-        this.removeAll();
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
-        }
-        if (!_.isNil(this.properties)) {
-            this.properties.destroy();
-            this.properties = null;
-        }
-        this.factory = null;
-        this.properties = null;
-        this.questionComponent = null;
-        this.dialog = null;
-        this.language = null;
-        this._windows = null;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Additional Methods
-    //
-    // --------------------------------------------------------------------------
-    info(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
-        return this.open(this.questionComponent, config).config.data;
-    }
-    question(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
-        return this.open(this.questionComponent, config).config.data;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Private Properties
-    //
-    // --------------------------------------------------------------------------
-    get windowsArray() {
-        return Array.from(this.windows.values()).map(item => item.window);
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
-    }
-    get windows() {
-        return this._windows;
-    }
-}
-WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, deps: [{ token: i1.MatDialog }, { token: i1$1.LanguageService }, { token: CookieService }], target: i0.ɵɵFactoryTarget.Injectable });
-WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.LanguageService }, { type: CookieService }]; } });
-class PropertiesManager extends Destroyable {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(cookies) {
-        super();
-        this.cookies = cookies;
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    load(name, config) {
-        let item = this.cookies.getObject(name + 'Window');
-        if (!item) {
-            return;
-        }
-        if (item.hasOwnProperty('width')) {
-            config.defaultWidth = item.width;
-        }
-        if (item.hasOwnProperty('height')) {
-            config.defaultHeight = item.height;
-        }
-    }
-    save(name, window) {
-        this.cookies.putObject(name + 'Window', {
-            width: window.getWidth(),
-            height: window.getHeight()
-        });
-    }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.cookies = null;
-    }
-}
-var WindowServiceEvent;
-(function (WindowServiceEvent) {
-    WindowServiceEvent["OPEN_STARTED"] = "OPEN_STARTED";
-    WindowServiceEvent["OPENED"] = "OPENED";
-    WindowServiceEvent["OPEN_FINISHED"] = "OPEN_FINISHED";
-    WindowServiceEvent["CLOSED"] = "CLOSED";
-    WindowServiceEvent["SETTED_ON_TOP"] = "SETTED_ON_TOP";
-})(WindowServiceEvent || (WindowServiceEvent = {}));
-
-class IWindowContent extends DestroyableContainer {
-    // --------------------------------------------------------------------------
-    //
-    //  Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(container) {
-        super();
-        this.container = container;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        this.commitConfigProperties();
-    }
-    commitConfigProperties() { }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.emit(WindowEvent.CONTENT_READY);
-    }
-    ngOnDestroy() {
-        // do nothing, window will destroy content after closing
-    }
-    blink() {
-        if (!_.isNil(this.window)) {
-            this.window.blink();
-        }
-    }
-    shake() {
-        if (!_.isNil(this.window)) {
-            this.window.shake();
-        }
-    }
-    emit(event) {
-        if (!_.isNil(this.window)) {
-            this.window.emit(event);
-        }
-    }
-    close() {
-        if (!_.isNil(this.window)) {
-            this.window.close();
-        }
-    }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.window = null;
-        this.container = null;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Proxy Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get data() {
-        return !_.isNil(this.config) ? this.config.data : null;
-    }
-    get isOnTop() {
-        return !_.isNil(this.window) ? this.window.isOnTop : false;
-    }
-    get isMinimized() {
-        return !_.isNil(this.window) ? this.window.isMinimized : false;
-    }
-    get events() {
-        return !_.isNil(this.window) ? this.window.events : null;
-    }
-    get isDisabled() {
-        return !_.isNil(this.window) ? this.window.isDisabled : false;
-    }
-    set isDisabled(value) {
-        if (!_.isNil(this.window)) {
-            this.window.isDisabled = value;
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get element() {
-        if (_.isNil(this.container)) {
-            return null;
-        }
-        return this.container instanceof ViewContainerRef ? this.container.element : this.container;
-    }
-    get config() {
-        return !_.isNil(this.window) ? this.window.config : null;
-    }
-    get window() {
-        return this._window;
-    }
-    set window(value) {
-        if (value === this._window) {
-            return;
-        }
-        this._window = value;
-        if (!_.isNil(value)) {
-            this.commitWindowProperties();
+        this._window = value;
+        if (!_.isNil(value)) {
+            this.commitWindowProperties();
         }
     }
 }
@@ -4838,1604 +4510,1791 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{ template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"text\"></p>\n\n<div class=\"text-center border-sm-top p-3\">\n\n    <button (click)=\"data?.closeClickHandler()\" mat-stroked-button *ngIf=\"data?.isInfo\">\n        <span [innerHTML]=\"data?.closeText\"></span>\n    </button>\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" color=\"primary\" mat-stroked-button *ngIf=\"data?.isQuestion\">\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" mat-stroked-button *ngIf=\"data?.isQuestion\">\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.LanguageService }]; } });
 
-class BottomSheetService extends Destroyable {
+class WindowCloseElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
     // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(dialog, language) {
-        super();
-        this.dialog = dialog;
-        this.language = language;
-        this.observer = new Subject();
-        this.defaultFactory = new WindowFactory(BottomSheetBaseComponent);
-        this.questionComponent = WindowQuestionComponent;
+    constructor(element) {
+        super(element);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    getFactory(component, config) {
-        return this.defaultFactory;
+    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);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    open(component, config) {
-        let reference = this.dialog.open(component, config);
-        let window = this.getFactory(component, config).create({ config, reference: reference, overlay: reference._overlayRef });
-        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
-        let subscription = window.events.subscribe(event => {
-            switch (event) {
-                case WindowServiceEvent.OPENED:
-                    this.observer.next(new ObservableData(WindowServiceEvent.OPENED, window));
-                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
-                    break;
-                case WindowServiceEvent.CLOSED:
-                    subscription.unsubscribe();
-                    this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window));
-                    break;
-            }
-        });
-        return window.content;
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.close();
+        }
     }
-    removeAll() { }
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.removeAll();
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
-        }
-        this.defaultFactory = null;
-        this.questionComponent = null;
-        this.dialog = null;
-        this.language = null;
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowCloseElementComponent.ICON_CLASS = 'fas fa-times';
+WindowCloseElementComponent.ICON_VALUE = null;
+WindowCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseElementComponent, selector: "vi-window-close-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-close-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowMinimizeElementComponent extends WindowElement {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element) {
+        super(element);
+        // --------------------------------------------------------------------------
+        //
+        // 	Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.commitIconProperties = () => {
+            let icon = this.window.isMinimized ? WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE : WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE;
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', icon);
+        };
     }
     // --------------------------------------------------------------------------
     //
-    // 	Additional Methods
+    // 	Protected Methods
     //
     // --------------------------------------------------------------------------
-    info(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
-        return this.open(this.questionComponent, config).config.data;
+    commitWindowProperties() {
+        super.commitWindowProperties();
+        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
+            if (event === WindowEvent.MINIMIZED_CHANGED) {
+                this.commitIconProperties();
+            }
+        });
     }
-    question(translationId, translation, questionOptions, configOptions) {
-        let text = this.language.translate(translationId, translation);
-        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
-        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
-        return this.open(this.questionComponent, config).config.data;
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
+        }
+        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+        }
+        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    get events() {
-        return this.observer.asObservable();
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+            this.window.isMinimized = !this.window.isMinimized;
+        }
     }
 }
-BottomSheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, deps: [{ token: i1$2.MatBottomSheet }, { token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Injectable });
-BottomSheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatBottomSheet }, { type: i1$1.LanguageService }]; } });
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowMinimizeElementComponent.ICON_CLASS = null;
+WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
+WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeElementComponent, selector: "vi-window-minimize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-minimize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-const IMPORTS$4 = [CommonModule, FormsModule, MatBottomSheetModule, MatButtonModule, LanguageModule];
-const ENTRY_COMPONENTS$3 = [BottomSheetCloseElementComponent];
-const DECLARATIONS$4 = [...ENTRY_COMPONENTS$3];
-const EXPORTS$3 = [...DECLARATIONS$4];
-class BottomSheetModule {
+class WindowResizeElementComponent extends WindowElement {
     // --------------------------------------------------------------------------
     //
-    // 	Static Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    static forRoot() {
-        return {
-            ngModule: BottomSheetService,
-            providers: [
-                {
-                    provide: BottomSheetService,
-                    deps: [MatBottomSheet, LanguageService],
-                    useClass: BottomSheetService
-                }
-            ]
-        };
+    constructor(element) {
+        super(element);
     }
-}
-BottomSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BottomSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, declarations: [BottomSheetCloseElementComponent], imports: [CommonModule, FormsModule, MatBottomSheetModule, MatButtonModule, LanguageModule], exports: [BottomSheetCloseElementComponent] });
-BottomSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, imports: [IMPORTS$4] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: IMPORTS$4,
-                    declarations: DECLARATIONS$4,
-                    exports: EXPORTS$3
-                }]
-        }] });
-
-class NotificationImpl extends WindowBase {
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    constructor(properties) {
-        super();
-        this.setClosed = () => {
-            this.emit(WindowEvent.CLOSED);
-            this.destroy();
-        };
-        this.setOpened = () => {
-            this.emit(WindowEvent.OPENED);
-        };
-        this.observer = new Subject();
-        this.properties = properties;
-        this.content.notification = this;
-        // Have to save for unsubscribe on destroy
-        this._container = this.properties.overlay.overlayElement;
-        this.setProperties();
-        this.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterClosed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
-        this.observer
-            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
-            .subscribe(this.updatePosition);
+    createChildren() {
+        super.createChildren();
+        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
+            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
+        }
+        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
+            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
+        }
+        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
     }
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    // 	Event Handlers
     //
     // --------------------------------------------------------------------------
-    setProperties() {
-        super.setProperties();
-        ViewUtil.addClass(this.container, 'vi-notification');
-    }
-    getConfig() {
-        return this.properties.config;
-    }
-    getContainer() {
-        return this.container;
-    }
-    getReference() {
-        return this.properties.reference;
+    clickHandler(event) {
+        super.clickHandler(event);
+        if (!_.isNil(this.window)) {
+        }
     }
+}
+// --------------------------------------------------------------------------
+//
+// 	Constants
+//
+// --------------------------------------------------------------------------
+WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
+WindowResizeElementComponent.ICON_VALUE = null;
+WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowResizeElementComponent, selector: "vi-window-resize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class WindowResizeable extends WindowImpl {
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    emit(event) {
-        this.observer.next(event);
-    }
-    close() {
-        this.getReference().close();
-    }
-    remove() {
-        this.close();
-        this.observer.next(NotificationEvent.REMOVED);
-    }
-    destroy() {
-        if (this.isDestroyed) {
+    setProperties() {
+        super.setProperties();
+        if (!this.config.isResizeable) {
             return;
         }
-        super.destroy();
-        if (!_.isNil(this.observer)) {
-            this.observer.complete();
-            this.observer = null;
+        ViewUtil.addClass(this.container, 'vi-resizeable');
+        if (_.isNil(this.resizeMoveHandlerProxy)) {
+            this.resizeMoveHandlerProxy = this.resizeMoveHandler.bind(this);
         }
-        this.properties = null;
-        this._container = null;
+        let edges = {};
+        edges.top = true;
+        edges.left = true;
+        edges.right = true;
+        edges.bottom = true;
+        let param = {};
+        param.edges = edges;
+        this.interactable.resizable(param);
+        this.interactable.on('resizemove', this.resizeMoveHandlerProxy);
     }
     // --------------------------------------------------------------------------
     //
-    //  Size Methods
+    //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    getWidth() {
-        return this.calculateWidth();
-    }
-    getHeight() {
-        return this.calculateHeight();
-    }
-    setWidth(value) {
-        this.width = value;
-    }
-    setHeight(value) {
-        this.height = value;
-    }
-    setSize(width, height) {
-        this.setWidth(width);
-        this.setHeight(height);
-    }
-    // --------------------------------------------------------------------------
+    resizeMoveHandler(event) {
+        if (this.isMinimized) {
+            return;
+        }
+        let isChanged = event.dx !== 0 || event.dy !== 0;
+        if (!isChanged) {
+            return;
+        }
+        if (event.dx !== 0) {
+            let width = this.getWidth();
+            if (_.isNaN(width)) {
+                width = this.calculateWidth();
+            }
+            this.setWidth(width + event.dx, false);
+        }
+        if (event.dy !== 0) {
+            let height = this.getHeight();
+            if (_.isNaN(height)) {
+                height = this.calculateHeight();
+            }
+            this.setHeight(height + event.dy, false);
+        }
+        this.resizeHandler();
+    }
+    // --------------------------------------------------------------------------
     //
-    //  Move Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    getX() {
-        return this.x;
-    }
-    setX(value) {
-        this.x = value;
-    }
-    getY() {
-        return this.y;
-    }
-    setY(value) {
-        this.y = value;
-    }
-    move(x, y) {
-        this.setX(x);
-        this.setY(y);
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.resizeMoveHandlerProxy = null;
+        if (!_.isNil(this._interactable)) {
+            this._interactable.unset();
+            this._interactable = null;
+        }
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    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 interactable() {
+        if (_.isNil(this._interactable)) {
+            this._interactable = interact.default(this.container);
+            // this._interactable.styleCursor(false);
+        }
+        return this._interactable;
     }
 }
 
-class NotificationBaseComponent extends NotificationImpl {
-}
-
-class INotificationContent extends DestroyableContainer {
+class WindowDragable extends WindowResizeable {
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Properties Methods
+        //
+        // --------------------------------------------------------------------------
+        super(...arguments);
+        this.isWasDragged = false;
+    }
     // --------------------------------------------------------------------------
     //
-    //  Constructor
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    constructor(container) {
-        super();
-        this.container = container;
-        this.timerHandler = () => this.handleCloseClick();
+    setProperties() {
+        super.setProperties();
+        if (this.config.isModal) {
+            return;
+        }
+        ViewUtil.addClass(this.container, 'vi-draggable');
+        if (!this.config.isContentDragable) {
+            return;
+        }
+        this.dragMoveHandlerProxy = this.dragMoveHandler.bind(this);
+        this.dragStartHandlerProxy = this.dragStartHandler.bind(this);
+        let param = {};
+        this.interactable.draggable(param);
+        this.interactable.on('dragmove', this.dragMoveHandlerProxy);
+        this.interactable.on('dragstart', this.dragStartHandlerProxy);
+    }
+    isNeedClickStopPropagation(event) {
+        return this.isWasDragged || super.isNeedClickStopPropagation(event);
     }
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    commitNotificationProperties() {
-        this.config = this.notification.config;
+    dragStartHandler(event) {
+        this.isWasDragged = true;
     }
-    commitConfigProperties() {
-        this.clearTimer();
-        if (this.config.closeDuration > 0) {
-            this.timer = setTimeout(this.timerHandler, this.config.closeDuration);
-        }
+    dragMoveHandler(event) {
+        let x = this.getX() + event.dx;
+        let y = this.getY() + event.dy;
+        this.move(x, y);
     }
-    clearTimer() {
-        if (!_.isNil(this.timer)) {
-            clearTimeout(this.timer);
-            this.timer = null;
-        }
+    mouseClickHandler(event) {
+        super.mouseClickHandler(event);
+        this.isWasDragged = false;
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    close() {
-        if (!_.isNil(this.notification)) {
-            this.notification.close();
-        }
-    }
-    remove() {
-        if (!_.isNil(this.notification)) {
-            this.notification.remove();
-        }
-    }
-    emit(event) {
-        if (!_.isNil(this.notification)) {
-            this.notification.emit(event);
-        }
-    }
     destroy() {
         if (this.isDestroyed) {
             return;
         }
         super.destroy();
-        this.clearTimer();
-        this.config = null;
-        this.notification = null;
+        this.dragMoveHandlerProxy = null;
+        this.dragStartHandlerProxy = null;
     }
+}
+
+class WindowBaseComponent extends WindowDragable {
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    ngAfterViewInit() {
-        this.emit(WindowEvent.CONTENT_READY);
-    }
-    handleCloseClick() {
-        this.clearTimer();
-        if (!_.isNil(this.config) && this.config.isRemoveAfterClose) {
-            this.remove();
+    elementsCreate() {
+        super.elementsCreate();
+        if (!(this.content.container instanceof ViewContainerRef)) {
+            return;
         }
-        else {
-            this.close();
+        if (!this.config.disableClose) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.CLOSE_COMPONENT));
+        }
+        if (this.config.isResizeable) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.RESIZE_COMPONENT));
+        }
+        if (this.config.isMinimizable) {
+            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.MINIMIZE_COMPONENT));
         }
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Proxy Public Properties
-    //
-    // --------------------------------------------------------------------------
-    get data() {
-        return this.config ? this.config.data : null;
+    commitIsBlinkProperties() {
+        ViewUtil.toggleClass(this.container, this.blinkClass, this.isBlink);
     }
-    get events() {
-        return this.notification ? this.notification.events : null;
+    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.toggleClasses(this.container, this.shakingClass, this.isShaking);
+    }
+    commitIsMinimizedProperties() {
+        ViewUtil.toggleClass(this.container, this.minimizedClass, this.isMinimized);
+        ViewUtil.toggleClass(this.content.element, this.minimizedClass, this.isMinimized);
+        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.minimizedClass, this.isMinimized);
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    //  Protected Properties
     //
     // --------------------------------------------------------------------------
-    get notification() {
-        return this._notification;
+    get blinkClass() {
+        return 'vi-blink';
     }
-    set notification(value) {
-        if (value === this._notification) {
-            return;
-        }
-        this._notification = value;
-        if (this._notification) {
-            this.commitNotificationProperties();
-        }
+    get disabledClass() {
+        return 'vi-disabled';
     }
-    set config(value) {
-        if (value === this._config) {
-            return;
-        }
-        this._config = value;
-        if (this._config) {
-            this.commitConfigProperties();
-        }
+    get minimizedClass() {
+        return 'vi-minimized';
     }
-    get config() {
-        return this._config;
+    get shakingClass() {
+        return 'shake-constant shake-horizontal';
     }
 }
-INotificationContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: INotificationContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-INotificationContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: INotificationContent, selector: "ng-component", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: INotificationContent, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { config: [{
-                type: Input
-            }] } });
+// --------------------------------------------------------------------------
+//
+//  Static Properties
+//
+// --------------------------------------------------------------------------
+WindowBaseComponent.CLOSE_COMPONENT = WindowCloseElementComponent;
+WindowBaseComponent.RESIZE_COMPONENT = WindowResizeElementComponent;
+WindowBaseComponent.MINIMIZE_COMPONENT = WindowMinimizeElementComponent;
 
-class NotificationQuestionBaseComponent extends INotificationContent {
+class WindowService extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    commitConfigProperties() {
-        super.commitConfigProperties();
-        if (this.isInfo) {
-            ViewUtil.addClass(this.container, 'mouse-active');
-        }
-        this.data.closePromise.then(() => {
-            if (!this.isDestroyed) {
-                this.remove();
-            }
-        });
-    }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler() {
-        if (this.isInfo) {
-            this.data.closeClickHandler();
-        }
+    constructor(dialog, language, cookies) {
+        super();
+        this.isNeedCheckPositionAfterOpen = true;
+        this.gapX = 25;
+        this.gapY = 25;
+        this.minWidth = 100;
+        this.minHeight = 100;
+        this.paddingTop = 25;
+        this.paddingLeft = 25;
+        this.paddingRight = 25;
+        this.paddingBottom = 25;
+        this.defaultVerticalAlign = WindowAlign.CENTER;
+        this.defaultHorizontalAlign = WindowAlign.CENTER;
+        this.topZIndex = 999;
+        this._windows = new Map();
+        this.dialog = dialog;
+        this.language = language;
+        this.observer = new Subject();
+        this.properties = new PropertiesManager(cookies);
+        this.defaultFactory = new WindowFactory(WindowBaseComponent);
+        this.questionComponent = WindowQuestionComponent;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Properties
+    // 	Protected Methods
     //
     // --------------------------------------------------------------------------
-    get isInfo() {
-        return this.data ? this.data.isInfo : false;
+    getFactory(component, config) {
+        return this.defaultFactory;
     }
-}
-NotificationQuestionBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationQuestionBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationQuestionBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NotificationQuestionBaseComponent, selector: "ng-component", host: { listeners: { "click": "clickHandler()" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationQuestionBaseComponent, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class NotificationComponent extends NotificationQuestionBaseComponent {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    constructor(container, language, notifications) {
-        super(container);
-        this.language = language;
-        this.notifications = notifications;
-        ViewUtil.addClasses(container.element, 'd-block');
-        ViewUtil.setAttribute(container.element, 'tabindex', '-1');
+    sortFunction(first, second) {
+        let firstIndex = first.container ? parseInt(ViewUtil.getStyle(first.container.parentElement, 'zIndex'), 10) : -1;
+        let secondIndex = second.container ? parseInt(ViewUtil.getStyle(second.container.parentElement, 'zIndex'), 10) : -1;
+        return firstIndex > secondIndex ? -1 : 1;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Protected Methods
-    //
-    // --------------------------------------------------------------------------
-    commitConfigProperties() {
-        super.commitConfigProperties();
-        if (this.language.isHasTranslation(this.data.options.yesTextId)) {
-            this.data.yesText = this.language.translate(this.data.options.yesTextId);
-        }
-        if (this.language.isHasTranslation(this.data.options.notTextId)) {
-            this.data.notText = this.language.translate(this.data.options.notTextId);
+    updateTop() {
+        let zIndex = 0;
+        let topWindow = null;
+        for (let window of this.windowsArray) {
+            if (_.isNil(window.container)) {
+                continue;
+            }
+            let index = parseInt(ViewUtil.getStyle(window.container.parentElement, 'zIndex'), 10);
+            if (zIndex >= index) {
+                continue;
+            }
+            zIndex = index;
+            topWindow = window;
         }
-        if (this.language.isHasTranslation(this.data.options.checkTextId)) {
-            this.data.checkText = this.language.translate(this.data.options.checkTextId);
+        if (_.isNil(topWindow) || topWindow.isOnTop) {
+            return;
         }
-        if (this.language.isHasTranslation(this.data.options.closeTextId)) {
-            this.data.closeText = this.language.translate(this.data.options.closeTextId);
+        topWindow.isOnTop = true;
+        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
+    }
+    setWindowOnTop(topWindow) {
+        let currentIndex = this.topZIndex - 2;
+        for (let window of this.windowsArray) {
+            if (_.isNil(window.container)) {
+                continue;
+            }
+            window.isOnTop = window === topWindow;
+            let zIndex = window.isOnTop ? this.topZIndex : currentIndex--;
+            ViewUtil.setStyle(window.backdrop, 'zIndex', zIndex);
+            ViewUtil.setStyle(window.wrapper, 'zIndex', zIndex);
         }
+        this.windowsArray.sort(this.sortFunction);
+        this.observer.next(new ObservableData(WindowServiceEvent.SETTED_ON_TOP, topWindow));
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    remove() {
-        super.remove();
-        if (_.isNil(this.notification)) {
-            this.notifications.remove(this.config);
+    checkPosition(item) {
+        while (this.hasSamePosition(item)) {
+            item.move(item.getX() + this.gapX, item.getY() + this.gapY);
         }
     }
-}
-NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.LanguageService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NotificationComponent, selector: "vi-notification", usesInheritance: true, ngImport: i0, template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"data?.text\"></p>\n\n<div class=\"text-center border-sm-top p-3\" *ngIf=\"data?.isQuestion\">\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" tabindex=\"-1\" color=\"primary\" mat-stroked-button>\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" tabindex=\"-1\" mat-stroked-button>\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>", styles: [":host{max-width:280px;min-width:200px;box-sizing:border-box}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-notification', template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"data?.text\"></p>\n\n<div class=\"text-center border-sm-top p-3\" *ngIf=\"data?.isQuestion\">\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" tabindex=\"-1\" color=\"primary\" mat-stroked-button>\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" tabindex=\"-1\" mat-stroked-button>\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>", styles: [":host{max-width:280px;min-width:200px;box-sizing:border-box}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.LanguageService }, { type: NotificationService }]; } });
-
-class NotificationFactory {
-    // --------------------------------------------------------------------------
-    //
-    // 	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(classType) {
-        this.classType = classType;
+    hasSamePosition(itemWindow) {
+        let x = itemWindow.getX();
+        let y = itemWindow.getY();
+        let result = false;
+        this.windowsArray.forEach(window => {
+            if (window !== itemWindow && x === window.getX() && y === window.getY()) {
+                result = true;
+            }
+        });
+        return result;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    // 	Setters Methods
     //
     // --------------------------------------------------------------------------
-    create(properties) {
-        return new this.classType(properties);
+    add(config, content) {
+        this._windows.set(config, content);
+        this.observer.next(new ObservableData(WindowServiceEvent.OPENED, content.window));
     }
-}
-
-const IMPORTS$3 = [CommonModule, FormsModule, MatDialogModule, MatButtonModule, LanguageModule];
-const ENTRY_COMPONENTS$2 = [];
-const DECLARATIONS$3 = [NotificationComponent, ...ENTRY_COMPONENTS$2];
-const EXPORTS$2 = [...DECLARATIONS$3];
-class NotificationModule {
-    // --------------------------------------------------------------------------
-    //
-    // 	Static Methods
-    //
-    // --------------------------------------------------------------------------
-    static forRoot() {
-        return {
-            ngModule: NotificationService,
-            providers: [
-                {
-                    provide: NotificationService,
-                    deps: [MatDialog, LanguageService],
-                    useFactory: notificationServiceFactory
-                }
-            ]
-        };
+    remove(config) {
+        let window = this._windows.get(config);
+        if (!window) {
+            return null;
+        }
+        window.close();
+        this._windows.delete(config);
+        this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window.window));
+    }
+    getById(id) {
+        let item = _.find(Array.from(this._windows.values()), item => item.config.id === id);
+        return !_.isNil(item) ? item.window : null;
+    }
+    setDefaultProperties(config) {
+        if (!config.verticalAlign) {
+            config.verticalAlign = this.defaultVerticalAlign;
+        }
+        if (!config.horizontalAlign) {
+            config.horizontalAlign = this.defaultHorizontalAlign;
+        }
+        if (_.isNaN(config.defaultMinWidth)) {
+            config.defaultMinWidth = this.minWidth;
+        }
+        if (_.isNaN(config.defaultMinHeight)) {
+            config.defaultMinHeight = this.minHeight;
+        }
+        if (_.isNaN(config.paddingTop)) {
+            config.paddingTop = this.paddingTop;
+        }
+        if (_.isNaN(config.paddingLeft)) {
+            config.paddingLeft = this.paddingLeft;
+        }
+        if (_.isNaN(config.paddingRight)) {
+            config.paddingRight = this.paddingRight;
+        }
+        if (_.isNaN(config.paddingBottom)) {
+            config.paddingBottom = this.paddingBottom;
+        }
+        if (config.propertiesId) {
+            this.properties.load(config.propertiesId, config);
+        }
+        config.setDefaultProperties();
     }
-}
-NotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, declarations: [NotificationComponent], imports: [CommonModule, FormsModule, MatDialogModule, MatButtonModule, LanguageModule], exports: [NotificationComponent] });
-NotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, imports: [IMPORTS$3] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: IMPORTS$3,
-                    declarations: DECLARATIONS$3,
-                    exports: EXPORTS$2
-                }]
-        }] });
-function notificationServiceFactory(dialog, language) {
-    let item = new NotificationService(dialog, language);
-    item.factory = new NotificationFactory(NotificationBaseComponent);
-    item.questionComponent = NotificationComponent;
-    return item;
-}
-
-class CamelCasePipe {
-    // --------------------------------------------------------------------------
-    //
-    //	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor() { }
     // --------------------------------------------------------------------------
     //
     // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    transform(value) {
-        if (!value) {
-            return '---';
+    open(component, config) {
+        let window = null;
+        if (config.id) {
+            window = this.getById(config.id);
+            if (window) {
+                return window.content;
+            }
         }
-        return _.camelCase(value);
+        this.setDefaultProperties(config);
+        // let dialog = this.dialog as any;
+        // dialog._getOverlayState = config.isModal ? dialog.getOverlayStateModal : dialog.getOverlayStateNonModal;
+        let reference = this.dialog.open(component, config);
+        window = this.getFactory(component, config).create({ config, reference, overlay: reference._overlayRef });
+        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
+        let subscription = window.events.subscribe(event => {
+            switch (event) {
+                case WindowEvent.OPENED:
+                    this.add(config, reference.componentInstance);
+                    this.setWindowOnTop(window);
+                    if (this.isNeedCheckPositionAfterOpen) {
+                        this.checkPosition(window);
+                    }
+                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
+                    break;
+                case WindowEvent.CLOSED:
+                    subscription.unsubscribe();
+                    this.remove(config);
+                    if (window.isOnTop && this.windows.size > 0) {
+                        this.updateTop();
+                    }
+                    break;
+                case WindowEvent.RESIZED:
+                    if (!_.isNil(config.propertiesId)) {
+                        this.properties.save(config.propertiesId, window);
+                    }
+                    break;
+                case WindowEvent.SET_ON_TOP:
+                    this.setWindowOnTop(window);
+                    break;
+            }
+        });
+        return window.content;
     }
-}
-CamelCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CamelCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, name: "viCamelCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viCamelCase'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class FinancePipe {
-    // --------------------------------------------------------------------------
-    //
-    //	Static Methods
-    //
-    // --------------------------------------------------------------------------
-    static format(value, format) {
-        value = Number(value);
-        try {
-            return numeral(value).format(format);
+    get(value) {
+        let id = value.toString();
+        if (value instanceof WindowConfig) {
+            id = value.id;
         }
-        catch (error) {
-            return value.toString();
+        if (!id) {
+            return null;
+        }
+        let window = this.getById(id);
+        if (_.isNil(window)) {
+            return null;
         }
+        return window.content;
     }
-    // --------------------------------------------------------------------------
-    //
-    //	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    transform(value, format, isNeedPlus = false) {
-        value = Number(value);
-        if (_.isNaN(value)) {
-            return '---';
+    has(value) {
+        return !_.isNil(this.get(value));
+    }
+    setOnTop(value) {
+        let content = this.get(value);
+        if (!content) {
+            return false;
         }
-        if (_.isNil(format)) {
-            format = FinancePipe.DEFAULT_FORMAT;
+        content.window.setOnTop();
+        return true;
+    }
+    removeAll() {
+        this.windowsArray.forEach(window => window.close());
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
-        if (isNeedPlus) {
-            format = '+' + format;
+        super.destroy();
+        this.removeAll();
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
         }
-        return FinancePipe.format(value, format);
+        if (!_.isNil(this.properties)) {
+            this.properties.destroy();
+            this.properties = null;
+        }
+        this.defaultFactory = null;
+        this.questionComponent = null;
+        this.dialog = null;
+        this.language = null;
+        this._windows = null;
     }
-}
-// --------------------------------------------------------------------------
-//
-//	Static Properties
-//
-// --------------------------------------------------------------------------
-FinancePipe.DEFAULT_FORMAT = '0,0';
-FinancePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FinancePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, name: "viFinance" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viFinance'
-                }]
-        }] });
-
-class MomentDatePipe {
     // --------------------------------------------------------------------------
     //
-    //	Static Methods
+    // 	Additional Methods
     //
     // --------------------------------------------------------------------------
-    static parseMoment(value, format) {
-        if (_.isDate(value)) {
-            return moment(value);
-        }
-        if (_.isString(value)) {
-            return moment(value, format);
-        }
-        if (_.isNumber(value)) {
-            return moment().milliseconds(value);
-        }
-        return value;
-    }
-    static fromNow(value, format = 'LLL') {
-        if (_.isNil(value)) {
-            return '---';
-        }
-        let item = MomentDatePipe.parseMoment(value);
-        let date = item.fromNow();
-        date = date.charAt(0).toUpperCase() + date.slice(1);
-        if (!_.isNil(format)) {
-            date += ' (' + item.format(format) + ')';
-        }
-        return date;
+    info(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
+        return this.open(this.questionComponent, config).config.data;
     }
-    static toConditionValue(value) {
-        if (_.isNil(value)) {
-            return undefined;
-        }
-        value = value.toString();
-        let item = MomentDatePipe.parseMoment(RemoveFilterableCondition(value));
-        return item.isValid() ? `${GetFilterableCondition(value) || '='}${item.toDate().toString()}` : undefined;
+    question(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
+        return this.open(this.questionComponent, config).config.data;
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Private Properties
     //
     // --------------------------------------------------------------------------
-    transform(value, format) {
-        if (_.isNil(value)) {
-            return '---';
-        }
-        let moment = MomentDatePipe.parseMoment(value);
-        return moment.format(format || MomentDatePipe.DEFAULT_FORMAT);
+    get windowsArray() {
+        return Array.from(this.windows.values()).map(item => item.window);
     }
-}
-// --------------------------------------------------------------------------
-//
-//	Constants
-//
-// --------------------------------------------------------------------------
-MomentDatePipe.DEFAULT_FORMAT = 'LLL';
-MomentDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MomentDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, name: "viMomentDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viMomentDate'
-                }]
-        }] });
-
-class MomentDateAdaptivePipe {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    transform(value) {
-        if (_.isNaN(value)) {
-            return '---';
-        }
-        let item = MomentDatePipe.parseMoment(value);
-        let duration = moment.duration(moment().diff(item));
-        let format = null;
-        if (Math.abs(duration.asYears()) >= 1) {
-            format = MomentDateAdaptivePipe.YEAR_FORMAT;
-        }
-        else if (Math.abs(duration.asMonths()) >= 1) {
-            format = MomentDateAdaptivePipe.MONTH_FORMAT;
-        }
-        else if (Math.abs(duration.asDays()) >= 1) {
-            format = MomentDateAdaptivePipe.DAY_FORMAT;
-        }
-        else {
-            format = MomentDateAdaptivePipe.HOUR_FORMAT;
-        }
-        return item.format(format);
+    get events() {
+        return this.observer.asObservable();
+    }
+    get windows() {
+        return this._windows;
     }
 }
-// --------------------------------------------------------------------------
-//
-//	Constants
-//
-// --------------------------------------------------------------------------
-MomentDateAdaptivePipe.HOUR_FORMAT = 'HH:ss';
-MomentDateAdaptivePipe.DAY_FORMAT = 'DD MMM HH:ss';
-MomentDateAdaptivePipe.MONTH_FORMAT = 'DD MMM HH:ss';
-MomentDateAdaptivePipe.YEAR_FORMAT = 'LLL';
-MomentDateAdaptivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MomentDateAdaptivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, name: "viMomentAdaptiveDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viMomentAdaptiveDate'
-                }]
-        }] });
-
-class MomentDateFromNowPipe {
+WindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, deps: [{ token: i1.MatDialog }, { token: i1$1.LanguageService }, { token: CookieService }], target: i0.ɵɵFactoryTarget.Injectable });
+WindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.LanguageService }, { type: CookieService }]; } });
+class PropertiesManager extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    transform(value, format) {
-        return MomentDatePipe.fromNow(value, format);
+    constructor(cookies) {
+        super();
+        this.cookies = cookies;
     }
-}
-MomentDateFromNowPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MomentDateFromNowPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, name: "viMomentDateFromNow" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viMomentDateFromNow'
-                }]
-        }] });
-
-class MomentTimePipe {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    transform(timeMilliseconds, format) {
-        if (_.isNil(timeMilliseconds)) {
-            return '---';
+    load(name, config) {
+        let item = this.cookies.getObject(name + 'Window');
+        if (!item) {
+            return;
         }
-        return moment()
-            .startOf('day')
-            .add(timeMilliseconds, 'milliseconds')
-            .format(format || MomentTimePipe.DEFAULT_FORMAT);
+        if (item.hasOwnProperty('width')) {
+            config.defaultWidth = item.width;
+        }
+        if (item.hasOwnProperty('height')) {
+            config.defaultHeight = item.height;
+        }
+    }
+    save(name, window) {
+        this.cookies.putObject(name + 'Window', {
+            width: window.getWidth(),
+            height: window.getHeight()
+        });
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this.cookies = null;
     }
 }
-// --------------------------------------------------------------------------
-//
-//	Constants
-//
-// --------------------------------------------------------------------------
-MomentTimePipe.DEFAULT_FORMAT = 'hh:mm:ss';
-MomentTimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MomentTimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, name: "viMomentTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viMomentTime'
-                }]
-        }] });
+var WindowServiceEvent;
+(function (WindowServiceEvent) {
+    WindowServiceEvent["OPEN_STARTED"] = "OPEN_STARTED";
+    WindowServiceEvent["OPENED"] = "OPENED";
+    WindowServiceEvent["OPEN_FINISHED"] = "OPEN_FINISHED";
+    WindowServiceEvent["CLOSED"] = "CLOSED";
+    WindowServiceEvent["SETTED_ON_TOP"] = "SETTED_ON_TOP";
+})(WindowServiceEvent || (WindowServiceEvent = {}));
 
-class NgModelErrorPipe {
+class BottomSheetService extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(language) {
+    constructor(dialog, language) {
+        super();
+        this.dialog = dialog;
         this.language = language;
+        this.observer = new Subject();
+        this.defaultFactory = new WindowFactory(BottomSheetBaseComponent);
+        this.questionComponent = WindowQuestionComponent;
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Protected Methods
     //
     // --------------------------------------------------------------------------
-    transform(value) {
-        if (_.isNil(value)) {
-            return null;
+    getFactory(component, config) {
+        return this.defaultFactory;
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    open(component, config) {
+        let reference = this.dialog.open(component, config);
+        let window = this.getFactory(component, config).create({ config, reference: reference, overlay: reference._overlayRef });
+        this.observer.next(new ObservableData(WindowServiceEvent.OPEN_STARTED, window));
+        let subscription = window.events.subscribe(event => {
+            switch (event) {
+                case WindowServiceEvent.OPENED:
+                    this.observer.next(new ObservableData(WindowServiceEvent.OPENED, window));
+                    this.observer.next(new ObservableData(WindowServiceEvent.OPEN_FINISHED, window));
+                    break;
+                case WindowServiceEvent.CLOSED:
+                    subscription.unsubscribe();
+                    this.observer.next(new ObservableData(WindowServiceEvent.CLOSED, window));
+                    break;
+            }
+        });
+        return window.content;
+    }
+    removeAll() { }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
-        let keys = _.keys(value);
-        if (_.isEmpty(keys)) {
-            return null;
+        super.destroy();
+        this.removeAll();
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
         }
-        let key = keys[0];
-        return this.translateError(key, value[key]);
+        this.defaultFactory = null;
+        this.questionComponent = null;
+        this.dialog = null;
+        this.language = null;
     }
-    translateError(key, value) {
-        return this.language.translate('error.form.' + key, value);
+    // --------------------------------------------------------------------------
+    //
+    // 	Additional Methods
+    //
+    // --------------------------------------------------------------------------
+    info(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.INFO, text }));
+        return this.open(this.questionComponent, config).config.data;
+    }
+    question(translationId, translation, questionOptions, configOptions) {
+        let text = this.language.translate(translationId, translation);
+        let config = _.assign(new WindowConfig(true, false, 450), configOptions);
+        config.data = new QuestionManager(_.assign(questionOptions, { mode: QuestionMode.QUESTION, text }));
+        return this.open(this.questionComponent, config).config.data;
     }
-}
-NgModelErrorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, deps: [{ token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
-NgModelErrorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, name: "viNgModelError" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viNgModelError'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LanguageService }]; } });
-
-class SanitizePipe {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    // 	Public Properties
     //
     // --------------------------------------------------------------------------
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
+    get events() {
+        return this.observer.asObservable();
     }
+}
+BottomSheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, deps: [{ token: i1$2.MatBottomSheet }, { token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Injectable });
+BottomSheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatBottomSheet }, { type: i1$1.LanguageService }]; } });
+
+const IMPORTS$4 = [CommonModule, FormsModule, MatBottomSheetModule, MatButtonModule, LanguageModule];
+const ENTRY_COMPONENTS$3 = [BottomSheetCloseElementComponent];
+const DECLARATIONS$4 = [...ENTRY_COMPONENTS$3];
+const EXPORTS$3 = [...DECLARATIONS$4];
+class BottomSheetModule {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    // 	Static Methods
     //
     // --------------------------------------------------------------------------
-    transform(value, type = 'html') {
-        if (_.isNil(value)) {
-            return null;
-        }
-        switch (type) {
-            case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-            case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
-            case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
-            case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
-            case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
-            default:
-                throw new Error('Invalid safe type specified: ' + type);
-        }
+    static forRoot() {
+        return {
+            ngModule: BottomSheetModule,
+            providers: [
+                BottomSheetService
+                /*
+                {
+                    provide: BottomSheetService,
+                    deps: [MatBottomSheet, LanguageService],
+                    useClass: BottomSheetService
+                }
+                */
+            ]
+        };
     }
 }
-SanitizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SanitizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, name: "viSanitize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, decorators: [{
-            type: Pipe,
+BottomSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BottomSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, declarations: [BottomSheetCloseElementComponent], imports: [CommonModule, FormsModule, MatBottomSheetModule, MatButtonModule, LanguageModule], exports: [BottomSheetCloseElementComponent] });
+BottomSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, imports: [IMPORTS$4] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomSheetModule, decorators: [{
+            type: NgModule,
             args: [{
-                    name: 'viSanitize'
+                    imports: IMPORTS$4,
+                    declarations: DECLARATIONS$4,
+                    exports: EXPORTS$3
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
+        }] });
 
-class StartCasePipe {
+class NotificationImpl extends WindowBase {
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    transform(value) {
-        if (!value) {
-            return '---';
-        }
-        return value.charAt(0).toUpperCase() + value.slice(1);
+    constructor(properties) {
+        super();
+        this.setClosed = () => {
+            this.emit(WindowEvent.CLOSED);
+            this.destroy();
+        };
+        this.setOpened = () => {
+            this.emit(WindowEvent.OPENED);
+        };
+        this.observer = new Subject();
+        this.properties = properties;
+        this.content.notification = this;
+        // Have to save for unsubscribe on destroy
+        this._container = this.properties.overlay.overlayElement;
+        this.setProperties();
+        this.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterClosed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
+        this.observer
+            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
+            .subscribe(this.updatePosition);
     }
-}
-StartCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-StartCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, name: "viStartCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viStartCase'
-                }]
-        }] });
-
-class TimePipe {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    //  Protected Methods
     //
     // --------------------------------------------------------------------------
-    transform(milliseconds, format) {
-        milliseconds = Number(milliseconds);
-        if (_.isNaN(milliseconds)) {
-            return '---';
+    setProperties() {
+        super.setProperties();
+        ViewUtil.addClass(this.container, 'vi-notification');
+    }
+    getConfig() {
+        return this.properties.config;
+    }
+    getContainer() {
+        return this.container;
+    }
+    getReference() {
+        return this.properties.reference;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    emit(event) {
+        this.observer.next(event);
+    }
+    close() {
+        this.getReference().close();
+    }
+    remove() {
+        this.close();
+        this.observer.next(NotificationEvent.REMOVED);
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
-        if (_.isNil(format)) {
-            format = TimePipe.DEFAULT_FORMAT;
+        super.destroy();
+        if (!_.isNil(this.observer)) {
+            this.observer.complete();
+            this.observer = null;
         }
-        return FinancePipe.format(milliseconds / DateUtil.MILISECONDS_SECOND, format);
+        this.properties = null;
+        this._container = null;
     }
-}
-// --------------------------------------------------------------------------
-//
-//	Static Properties
-//
-// --------------------------------------------------------------------------
-TimePipe.DEFAULT_FORMAT = '00:00:00';
-TimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, name: "viTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viTime'
-                }]
-        }] });
-
-class TruncatePipe {
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Size Methods
     //
     // --------------------------------------------------------------------------
-    transform(value, maxLength) {
-        if (!value) {
-            return '---';
-        }
-        return _.truncate(value, { length: maxLength });
+    getWidth() {
+        return this.calculateWidth();
+    }
+    getHeight() {
+        return this.calculateHeight();
+    }
+    setWidth(value) {
+        this.width = value;
+    }
+    setHeight(value) {
+        this.height = value;
+    }
+    setSize(width, height) {
+        this.setWidth(width);
+        this.setHeight(height);
     }
-}
-TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, name: "viTruncate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viTruncate'
-                }]
-        }] });
-
-class PrettifyPipe {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    //  Move Methods
     //
     // --------------------------------------------------------------------------
-    constructor() { }
+    getX() {
+        return this.x;
+    }
+    setX(value) {
+        this.x = value;
+    }
+    getY() {
+        return this.y;
+    }
+    setY(value) {
+        this.y = value;
+    }
+    move(x, y) {
+        this.setX(x);
+        this.setY(y);
+    }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    transform(value) {
-        let isNil = _.isNil(value);
-        if (!isNil && !_.isNumber(value)) {
-            isNil = _.isEmpty(value);
-        }
-        return !isNil ? value : PrettifyPipe.EMPTY_SYMBOL;
+    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;
     }
 }
-// --------------------------------------------------------------------------
-//
-// 	Static Properties
-//
-// --------------------------------------------------------------------------
-PrettifyPipe.EMPTY_SYMBOL = '-';
-PrettifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PrettifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, name: "viPrettify" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'viPrettify'
-                }]
-        }], ctorParameters: function () { return []; } });
 
-class ThemeAssetDirective extends Destroyable {
+class NotificationBaseComponent extends NotificationImpl {
+}
+
+class INotificationContent extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    //  Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme, themeAsset) {
+    constructor(container) {
         super();
-        this.theme = theme;
-        this.themeAsset = themeAsset;
-        this._extension = 'png';
-        this._isFile = false;
-        this._isImage = false;
-        this._isVideo = false;
-        this._isSound = false;
-        this._isBackground = false;
-        this._isIgnoreTheme = true;
-        this.element = ViewUtil.parseElement(element.nativeElement);
-        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => {
-            this.isTriedThemeDefault = false;
-            this.setSourceProperties();
-        });
+        this.container = container;
+        this.timerHandler = () => this.handleCloseClick();
     }
     // --------------------------------------------------------------------------
     //
-    //	Private Methods
+    //  Private Methods
     //
     // --------------------------------------------------------------------------
-    getSource(id) {
-        if (_.isNil(id)) {
-            return null;
-        }
-        if (this.isImage) {
-            return this.themeAsset.getImage(id, this.extension, this.isIgnoreTheme);
-        }
-        if (this.isBackground) {
-            return this.themeAsset.getBackground(id, this.extension, this.isIgnoreTheme);
-        }
-        if (this.isSound) {
-            return this.themeAsset.getSound(id, this.extension, this.isIgnoreTheme);
-        }
-        if (this.isVideo) {
-            return this.themeAsset.getVideo(id, this.extension, this.isIgnoreTheme);
+    commitNotificationProperties() {
+        this.config = this.notification.config;
+    }
+    commitConfigProperties() {
+        this.clearTimer();
+        if (this.config.closeDuration > 0) {
+            this.timer = setTimeout(this.timerHandler, this.config.closeDuration);
         }
-        if (this.isFile) {
-            return this.themeAsset.getFile(id, this.extension, this.isIgnoreTheme);
+    }
+    clearTimer() {
+        if (!_.isNil(this.timer)) {
+            clearTimeout(this.timer);
+            this.timer = null;
         }
-        return this.themeAsset.getIcon(id, this.extension, this.isIgnoreTheme);
     }
     // --------------------------------------------------------------------------
     //
-    //	Event Handlers
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
-    errorLoadingHandler(event) {
-        this.errorHandler(event);
+    close() {
+        if (!_.isNil(this.notification)) {
+            this.notification.close();
+        }
     }
-    errorHandler(event) {
-        if (this.isTriedThemeDefault) {
+    remove() {
+        if (!_.isNil(this.notification)) {
+            this.notification.remove();
+        }
+    }
+    emit(event) {
+        if (!_.isNil(this.notification)) {
+            this.notification.emit(event);
+        }
+    }
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        this.isTriedThemeDefault = true;
-        this.source = this.getSource(this.getDefaultSourceId());
-        this.commitSourceProperties();
+        super.destroy();
+        this.clearTimer();
+        this.config = null;
+        this.notification = null;
     }
     // --------------------------------------------------------------------------
     //
-    //	Protected Methods
+    //  Event Handlers
     //
     // --------------------------------------------------------------------------
-    setSourceProperties() {
-        this.source = this.getSource(this.getSourceId(this.theme.theme));
-        this.commitSourceProperties();
-    }
-    getSourceId(theme) {
-        return !_.isNil(theme) ? this.name + _.capitalize(theme.name) : null;
+    ngAfterViewInit() {
+        this.emit(WindowEvent.CONTENT_READY);
     }
-    getDefaultSourceId() {
-        return this.themeAsset.getName(this.name, this.isIgnoreTheme);
+    handleCloseClick() {
+        this.clearTimer();
+        if (!_.isNil(this.config) && this.config.isRemoveAfterClose) {
+            this.remove();
+        }
+        else {
+            this.close();
+        }
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    //  Proxy Public Properties
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.name = null;
-        this.theme = null;
-        this.element = null;
+    get data() {
+        return this.config ? this.config.data : null;
+    }
+    get events() {
+        return this.notification ? this.notification.events : null;
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Properties
+    //  Public Properties
     //
     // --------------------------------------------------------------------------
-    set isSound(value) {
-        if (value === this._isSound) {
-            return;
-        }
-        this._isSound = value;
-        this.setSourceProperties();
-    }
-    get isSound() {
-        return this._isSound;
+    get notification() {
+        return this._notification;
     }
-    set isVideo(value) {
-        if (value === this._isVideo) {
+    set notification(value) {
+        if (value === this._notification) {
             return;
         }
-        this._isVideo = value;
-        this.setSourceProperties();
-    }
-    get isVideo() {
-        return this._isVideo;
-    }
-    set isFile(value) {
-        if (value === this._isFile) {
-            return;
+        this._notification = value;
+        if (this._notification) {
+            this.commitNotificationProperties();
         }
-        this._isFile = value;
-        this.setSourceProperties();
     }
-    get isFile() {
-        return this._isFile;
-    }
-    set isImage(value) {
-        if (value === this._isImage) {
+    set config(value) {
+        if (value === this._config) {
             return;
         }
-        this._isImage = value;
-        this.setSourceProperties();
+        this._config = value;
+        if (this._config) {
+            this.commitConfigProperties();
+        }
     }
-    get isImage() {
-        return this._isImage;
+    get config() {
+        return this._config;
     }
-    set isBackground(value) {
-        if (value === this._isBackground) {
-            return;
+}
+INotificationContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: INotificationContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+INotificationContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: INotificationContent, selector: "ng-component", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: INotificationContent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class NotificationQuestionBaseComponent extends INotificationContent {
+    // --------------------------------------------------------------------------
+    //
+    // 	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    commitConfigProperties() {
+        super.commitConfigProperties();
+        if (this.isInfo) {
+            ViewUtil.addClass(this.container, 'mouse-active');
         }
-        this._isBackground = value;
-        this.setSourceProperties();
-    }
-    get isBackground() {
-        return this._isBackground;
+        this.data.closePromise.then(() => {
+            if (!this.isDestroyed) {
+                this.remove();
+            }
+        });
     }
-    set isIgnoreTheme(value) {
-        if (value === this._isIgnoreTheme) {
-            return;
+    // --------------------------------------------------------------------------
+    //
+    // 	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    clickHandler() {
+        if (this.isInfo) {
+            this.data.closeClickHandler();
         }
-        this._isIgnoreTheme = value;
-        this.setSourceProperties();
     }
-    get isIgnoreTheme() {
-        return this._isIgnoreTheme;
+    // --------------------------------------------------------------------------
+    //
+    // 	Protected Properties
+    //
+    // --------------------------------------------------------------------------
+    get isInfo() {
+        return this.data ? this.data.isInfo : false;
     }
-    get name() {
-        return this._name;
+}
+NotificationQuestionBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationQuestionBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NotificationQuestionBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NotificationQuestionBaseComponent, selector: "ng-component", host: { listeners: { "click": "clickHandler()" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationQuestionBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NotificationComponent extends NotificationQuestionBaseComponent {
+    // --------------------------------------------------------------------------
+    //
+    // 	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(container, language, notifications) {
+        super(container);
+        this.language = language;
+        this.notifications = notifications;
+        ViewUtil.addClasses(container.element, 'd-block');
+        ViewUtil.setAttribute(container.element, 'tabindex', '-1');
     }
-    set name(value) {
-        if (value === this._name) {
-            return;
+    // --------------------------------------------------------------------------
+    //
+    // 	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    commitConfigProperties() {
+        super.commitConfigProperties();
+        if (this.language.isHasTranslation(this.data.options.yesTextId)) {
+            this.data.yesText = this.language.translate(this.data.options.yesTextId);
         }
-        if (!_.isNil(this._name)) {
-            this.removeSourceProperties();
+        if (this.language.isHasTranslation(this.data.options.notTextId)) {
+            this.data.notText = this.language.translate(this.data.options.notTextId);
         }
-        this._name = value;
-        if (!_.isNil(value)) {
-            this.setSourceProperties();
+        if (this.language.isHasTranslation(this.data.options.checkTextId)) {
+            this.data.checkText = this.language.translate(this.data.options.checkTextId);
         }
-    }
-    get extension() {
-        return this._extension;
-    }
-    set extension(value) {
-        if (value === this._extension) {
-            return;
+        if (this.language.isHasTranslation(this.data.options.closeTextId)) {
+            this.data.closeText = this.language.translate(this.data.options.closeTextId);
         }
-        this._extension = value;
-        if (!_.isNil(value)) {
-            this.setSourceProperties();
+    }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    remove() {
+        super.remove();
+        if (_.isNil(this.notification)) {
+            this.notifications.remove(this.config);
         }
     }
 }
-ThemeAssetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetDirective, inputs: { isSound: "isSound", isVideo: "isVideo", isFile: "isFile", isImage: "isImage", isBackground: "isBackground", isIgnoreTheme: "isIgnoreTheme", name: "name", extension: "extension" }, host: { listeners: { "error": "errorLoadingHandler($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
-                type: HostListener,
-                args: ['error', ['$event']]
-            }], isSound: [{
-                type: Input
-            }], isVideo: [{
-                type: Input
-            }], isFile: [{
-                type: Input
-            }], isImage: [{
-                type: Input
-            }], isBackground: [{
-                type: Input
-            }], isIgnoreTheme: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], extension: [{
-                type: Input
-            }] } });
+NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.LanguageService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NotificationComponent, selector: "vi-notification", usesInheritance: true, ngImport: i0, template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"data?.text\"></p>\n\n<div class=\"text-center border-sm-top p-3\" *ngIf=\"data?.isQuestion\">\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" tabindex=\"-1\" color=\"primary\" mat-stroked-button>\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" tabindex=\"-1\" mat-stroked-button>\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>", styles: [":host{max-width:280px;min-width:200px;box-sizing:border-box}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vi-notification', template: "<p class=\"text m-4 text-center mouse-inactive text-word-wrap-break-word\" [innerHTML]=\"data?.text\"></p>\n\n<div class=\"text-center border-sm-top p-3\" *ngIf=\"data?.isQuestion\">\n\n    <button class=\"mr-3 me-3\" (click)=\"data?.yesClickHandler()\" tabindex=\"-1\" color=\"primary\" mat-stroked-button>\n        <span [innerHTML]=\"data?.yesText\"></span>\n    </button>\n\n    <button (click)=\"data?.notClickHandler()\" tabindex=\"-1\" mat-stroked-button>\n        <span [innerHTML]=\"data?.notText\"></span>\n    </button>\n\n</div>", styles: [":host{max-width:280px;min-width:200px;box-sizing:border-box}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.LanguageService }, { type: NotificationService }]; } });
 
-class ThemeAssetBackgroundDirective extends ThemeAssetDirective {
+class NotificationFactory {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme, themeAsset) {
-        super(element, theme, themeAsset);
+    constructor(classType) {
+        this.classType = classType;
     }
     // --------------------------------------------------------------------------
     //
-    //	Private Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    commitSourceProperties() {
-        let value = 'url(' + this.source + ')';
-        ViewUtil.setStyle(this.element, 'backgroundImage', value);
+    create(properties) {
+        return new this.classType(properties);
     }
-    removeSourceProperties() {
-        ViewUtil.removeStyle(this.element, 'backgroundImage');
+}
+
+const IMPORTS$3 = [CommonModule, FormsModule, MatDialogModule, MatButtonModule, LanguageModule];
+const ENTRY_COMPONENTS$2 = [];
+const DECLARATIONS$3 = [NotificationComponent, ...ENTRY_COMPONENTS$2];
+const EXPORTS$2 = [...DECLARATIONS$3];
+class NotificationModule {
+    // --------------------------------------------------------------------------
+    //
+    // 	Static Methods
+    //
+    // --------------------------------------------------------------------------
+    static forRoot() {
+        return {
+            ngModule: NotificationService,
+            providers: [
+                {
+                    provide: NotificationService,
+                    deps: [MatDialog, LanguageService],
+                    useFactory: notificationServiceFactory
+                }
+            ]
+        };
     }
 }
-ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetBackgroundDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetBackgroundDirective, selector: "[vi-theme-background]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, decorators: [{
-            type: Directive,
+NotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, declarations: [NotificationComponent], imports: [CommonModule, FormsModule, MatDialogModule, MatButtonModule, LanguageModule], exports: [NotificationComponent] });
+NotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, imports: [IMPORTS$3] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[vi-theme-background]'
+                    imports: IMPORTS$3,
+                    declarations: DECLARATIONS$3,
+                    exports: EXPORTS$2
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
+        }] });
+function notificationServiceFactory(dialog, language) {
+    let item = new NotificationService(dialog, language);
+    item.factory = new NotificationFactory(NotificationBaseComponent);
+    item.questionComponent = NotificationComponent;
+    return item;
+}
 
-class ThemeAssetImageDirective extends ThemeAssetDirective {
+class CamelCasePipe {
     // --------------------------------------------------------------------------
     //
     //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme, themeAsset) {
-        super(element, theme, themeAsset);
+    constructor() { }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    transform(value) {
+        if (!value) {
+            return '---';
+        }
+        return _.camelCase(value);
     }
+}
+CamelCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CamelCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, name: "viCamelCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamelCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viCamelCase'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class FinancePipe {
     // --------------------------------------------------------------------------
     //
-    //	Private Methods
+    //	Static Methods
     //
     // --------------------------------------------------------------------------
-    commitSourceProperties() {
-        this.element.src = this.source;
+    static format(value, format) {
+        value = Number(value);
+        try {
+            return numeral(value).format(format);
+        }
+        catch (error) {
+            return value.toString();
+        }
     }
-    removeSourceProperties() {
-        this.element.src = null;
+    // --------------------------------------------------------------------------
+    //
+    //	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);
     }
 }
-ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeAssetImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetImageDirective, selector: "[vi-theme-image]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, decorators: [{
-            type: Directive,
+// --------------------------------------------------------------------------
+//
+//	Static Properties
+//
+// --------------------------------------------------------------------------
+FinancePipe.DEFAULT_FORMAT = '0,0';
+FinancePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FinancePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, name: "viFinance" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FinancePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[vi-theme-image]'
+                    name: 'viFinance'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
+        }] });
 
-class ThemeToggleDirective extends Destroyable {
+class MomentDatePipe {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    //	Static Methods
     //
     // --------------------------------------------------------------------------
-    constructor(theme) {
-        super();
-        this.theme = theme;
+    static parseMoment(value, format) {
+        if (_.isDate(value)) {
+            return moment(value);
+        }
+        if (_.isString(value)) {
+            return moment(value, format);
+        }
+        if (_.isNumber(value)) {
+            return moment().milliseconds(value);
+        }
+        return value;
+    }
+    static fromNow(value, format = 'LLL') {
+        if (_.isNil(value)) {
+            return '---';
+        }
+        let item = MomentDatePipe.parseMoment(value);
+        let date = item.fromNow();
+        date = date.charAt(0).toUpperCase() + date.slice(1);
+        if (!_.isNil(format)) {
+            date += ' (' + item.format(format) + ')';
+        }
+        return date;
+    }
+    static toConditionValue(value) {
+        if (_.isNil(value)) {
+            return undefined;
+        }
+        value = value.toString();
+        let item = MomentDatePipe.parseMoment(RemoveFilterableCondition(value));
+        return item.isValid() ? `${GetFilterableCondition(value) || '='}${item.toDate().toString()}` : undefined;
     }
     // --------------------------------------------------------------------------
     //
-    //	Event Handlers
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        let themes = this.theme.themes.collection;
-        let length = themes.length;
-        if (length < 2) {
-            return;
-        }
-        let index = 0;
-        if (this.theme.theme) {
-            index = themes.indexOf(this.theme.theme);
-            if (index < length - 1) {
-                index++;
-            }
-            else {
-                index = 0;
-            }
+    transform(value, format) {
+        if (_.isNil(value)) {
+            return '---';
         }
-        this.theme.theme = themes[index];
+        let moment = MomentDatePipe.parseMoment(value);
+        return moment.format(format || MomentDatePipe.DEFAULT_FORMAT);
     }
+}
+// --------------------------------------------------------------------------
+//
+//	Constants
+//
+// --------------------------------------------------------------------------
+MomentDatePipe.DEFAULT_FORMAT = 'LLL';
+MomentDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MomentDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, name: "viMomentDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viMomentDate'
+                }]
+        }] });
+
+class MomentDateAdaptivePipe {
     // --------------------------------------------------------------------------
     //
     //	Public Methods
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
+    transform(value) {
+        if (_.isNaN(value)) {
+            return '---';
         }
-        super.destroy();
-        this.theme = null;
+        let item = MomentDatePipe.parseMoment(value);
+        let duration = moment.duration(moment().diff(item));
+        let format = null;
+        if (Math.abs(duration.asYears()) >= 1) {
+            format = MomentDateAdaptivePipe.YEAR_FORMAT;
+        }
+        else if (Math.abs(duration.asMonths()) >= 1) {
+            format = MomentDateAdaptivePipe.MONTH_FORMAT;
+        }
+        else if (Math.abs(duration.asDays()) >= 1) {
+            format = MomentDateAdaptivePipe.DAY_FORMAT;
+        }
+        else {
+            format = MomentDateAdaptivePipe.HOUR_FORMAT;
+        }
+        return item.format(format);
     }
 }
-ThemeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, deps: [{ token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeToggleDirective, selector: "[vi-theme-toggle]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, decorators: [{
-            type: Directive,
+// --------------------------------------------------------------------------
+//
+//	Constants
+//
+// --------------------------------------------------------------------------
+MomentDateAdaptivePipe.HOUR_FORMAT = 'HH:ss';
+MomentDateAdaptivePipe.DAY_FORMAT = 'DD MMM HH:ss';
+MomentDateAdaptivePipe.MONTH_FORMAT = 'DD MMM HH:ss';
+MomentDateAdaptivePipe.YEAR_FORMAT = 'LLL';
+MomentDateAdaptivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MomentDateAdaptivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, name: "viMomentAdaptiveDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateAdaptivePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[vi-theme-toggle]'
+                    name: 'viMomentAdaptiveDate'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.ThemeService }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }] });
 
-class ThemeStyleDirective extends Destroyable {
+class MomentDateFromNowPipe {
     // --------------------------------------------------------------------------
     //
-    //	Constructor
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme) {
-        super();
-        this.theme = theme;
-        this.element = ViewUtil.parseElement(element.nativeElement);
-        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesAdd());
+    transform(value, format) {
+        return MomentDatePipe.fromNow(value, format);
     }
+}
+MomentDateFromNowPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MomentDateFromNowPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, name: "viMomentDateFromNow" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentDateFromNowPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viMomentDateFromNow'
+                }]
+        }] });
+
+class MomentTimePipe {
     // --------------------------------------------------------------------------
     //
-    //	Protected Methods
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    commitStyleProperties(name, value) {
-        ViewUtil.setStyle(this.element, name, value, this.flags);
-    }
-    stylePropertiesCheck() {
-        if (this.isNeedStyleAdd()) {
-            this.stylePropertiesAdd();
-        }
-        else if (this.isNeedStyleRemove()) {
-            this.stylePropertiesRemove();
+    transform(timeMilliseconds, format) {
+        if (_.isNil(timeMilliseconds)) {
+            return '---';
         }
+        return moment()
+            .startOf('day')
+            .add(timeMilliseconds, 'milliseconds')
+            .format(format || MomentTimePipe.DEFAULT_FORMAT);
     }
-    stylePropertiesRemove() {
-        ViewUtil.removeStyle(this.element, this.styleName);
-    }
-    stylePropertiesAdd() {
-        this.commitStyleProperties(this.styleName, this.theme.getStyle(this.key));
-    }
-    isNeedStyleAdd() {
-        return !_.isNil(this.theme.theme) && !_.isNil(this.styleName);
-    }
-    isNeedStyleRemove() {
-        return !_.isNil(this.styleName);
-    }
+}
+// --------------------------------------------------------------------------
+//
+//	Constants
+//
+// --------------------------------------------------------------------------
+MomentTimePipe.DEFAULT_FORMAT = 'hh:mm:ss';
+MomentTimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MomentTimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, name: "viMomentTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MomentTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viMomentTime'
+                }]
+        }] });
+
+class NgModelErrorPipe {
     // --------------------------------------------------------------------------
     //
-    //	Public Methods
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this.key = null;
-        this.theme = null;
-        this.element = null;
+    constructor(language) {
+        this.language = language;
     }
     // --------------------------------------------------------------------------
     //
-    //	Public Properties
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    get flags() {
-        return this._flags;
-    }
-    set flags(value) {
-        if (value === this._flags) {
-            return;
+    transform(value) {
+        if (_.isNil(value)) {
+            return null;
         }
-        this._flags = value;
-        this.stylePropertiesCheck();
-    }
-    get styleName() {
-        return this._styleName;
-    }
-    set styleName(value) {
-        if (value === this._styleName) {
-            return;
+        let keys = _.keys(value);
+        if (_.isEmpty(keys)) {
+            return null;
         }
-        this._styleName = value;
-        this.stylePropertiesCheck();
-    }
-    get key() {
-        return this._key;
+        let key = keys[0];
+        return this.translateError(key, value[key]);
     }
-    set key(value) {
-        if (value === this._key) {
-            return;
-        }
-        this._key = value;
-        if (!_.isNil(value)) {
-            this.stylePropertiesCheck();
-        }
+    translateError(key, value) {
+        return this.language.translate('error.form.' + key, value);
     }
 }
-ThemeStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleDirective, selector: "[vi-theme-style]", inputs: { flags: "flags", styleName: "styleName", key: ["vi-theme-style", "key"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, decorators: [{
-            type: Directive,
+NgModelErrorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, deps: [{ token: i1$1.LanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
+NgModelErrorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, name: "viNgModelError" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgModelErrorPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[vi-theme-style]'
+                    name: 'viNgModelError'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { flags: [{
-                type: Input
-            }], styleName: [{
-                type: Input
-            }], key: [{
-                type: Input,
-                args: ['vi-theme-style']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.LanguageService }]; } });
 
-class ThemeStyleHoverDirective extends ThemeStyleDirective {
+class SanitizePipe {
     // --------------------------------------------------------------------------
     //
     //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element, theme) {
-        super(element, theme);
-        // --------------------------------------------------------------------------
-        //
-        //	Properties
-        //
-        // --------------------------------------------------------------------------
-        this._isHover = false;
-        // --------------------------------------------------------------------------
-        //
-        //	Event Handlers
-        //
-        // --------------------------------------------------------------------------
-        this.mouseEnter = (event) => {
-            this.isHover = true;
-        };
-        this.mouseLeave = (event) => {
-            this.isHover = false;
-        };
-        this.flags = RendererStyleFlags2.Important;
-        this.element.addEventListener('mouseenter', this.mouseEnter, false);
-        this.element.addEventListener('mouseleave', this.mouseLeave, false);
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    transform(value, type = 'html') {
+        if (_.isNil(value)) {
+            return null;
+        }
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error('Invalid safe type specified: ' + type);
+        }
     }
+}
+SanitizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SanitizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, name: "viSanitize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viSanitize'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
+
+class StartCasePipe {
     // --------------------------------------------------------------------------
     //
-    //	Protected Methods
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    isNeedStyleAdd() {
-        return this.isHover && super.isNeedStyleAdd();
-    }
-    isNeedStyleRemove() {
-        return !this.isHover || super.isNeedStyleRemove();
+    transform(value) {
+        if (!value) {
+            return '---';
+        }
+        return value.charAt(0).toUpperCase() + value.slice(1);
     }
+}
+StartCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+StartCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, name: "viStartCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StartCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viStartCase'
+                }]
+        }] });
+
+class TimePipe {
     // --------------------------------------------------------------------------
     //
     //	Public Methods
     //
     // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
+    transform(milliseconds, format) {
+        milliseconds = Number(milliseconds);
+        if (_.isNaN(milliseconds)) {
+            return '---';
         }
-        this.element.removeEventListener('mouseenter', this.mouseEnter, false);
-        this.element.removeEventListener('mouseleave', this.mouseLeave, false);
-        super.destroy();
+        if (_.isNil(format)) {
+            format = TimePipe.DEFAULT_FORMAT;
+        }
+        return FinancePipe.format(milliseconds / DateUtil.MILISECONDS_SECOND, format);
     }
+}
+// --------------------------------------------------------------------------
+//
+//	Static Properties
+//
+// --------------------------------------------------------------------------
+TimePipe.DEFAULT_FORMAT = '00:00:00';
+TimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, name: "viTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'viTime'
+                }]
+        }] });
+
+class TruncatePipe {
     // --------------------------------------------------------------------------
     //
-    //	Public Properties
+    // 	Public Methods
     //
     // --------------------------------------------------------------------------
-    get isHover() {
-        return this._isHover;
-    }
-    set isHover(value) {
-        if (value === this._isHover) {
-            return;
+    transform(value, maxLength) {
+        if (!value) {
+            return '---';
         }
-        this._isHover = value;
-        this.stylePropertiesCheck();
-    }
-    get key() {
-        return super.key;
-    }
-    set key(value) {
-        super.key = value;
-    }
-    get styleName() {
-        return super.styleName;
-    }
-    set styleName(value) {
-        super.styleName = value;
-    }
-    get flags() {
-        return super.flags;
-    }
-    set flags(value) {
-        super.flags = value;
+        return _.truncate(value, { length: maxLength });
     }
 }
-ThemeStyleHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-ThemeStyleHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleHoverDirective, selector: "[vi-theme-style-hover]", inputs: { key: ["vi-theme-style-hover", "key"], styleName: "styleName", flags: "flags" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, decorators: [{
-            type: Directive,
+TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, name: "viTruncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[vi-theme-style-hover]'
+                    name: 'viTruncate'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { key: [{
-                type: Input,
-                args: ['vi-theme-style-hover']
-            }], styleName: [{
-                type: Input
-            }], flags: [{
-                type: Input
-            }] } });
+        }] });
 
-let declarations = [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective];
-class ThemeModule {
+class PrettifyPipe {
     // --------------------------------------------------------------------------
     //
-    // 	Static Methods
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    static forRoot(options) {
-        return {
-            ngModule: ThemeModule,
-            providers: [
-                {
-                    provide: THEME_OPTIONS,
-                    useValue: options || {}
-                },
-                {
-                    provide: ThemeService,
-                    deps: [CookieService, THEME_OPTIONS],
-                    useFactory: themeServiceFactory
-                },
-                {
-                    provide: ThemeAssetService,
-                    deps: [ThemeService],
-                    useFactory: themeAssetServiceFactory
-                }
-            ]
-        };
+    constructor() { }
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    transform(value) {
+        let isNil = _.isNil(value);
+        if (!isNil && !_.isNumber(value)) {
+            isNil = _.isEmpty(value);
+        }
+        return !isNil ? value : PrettifyPipe.EMPTY_SYMBOL;
     }
 }
-ThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, declarations: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective], imports: [CookieModule], exports: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective] });
-ThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, imports: [[CookieModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, decorators: [{
-            type: NgModule,
+// --------------------------------------------------------------------------
+//
+// 	Static Properties
+//
+// --------------------------------------------------------------------------
+PrettifyPipe.EMPTY_SYMBOL = '-';
+PrettifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PrettifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, name: "viPrettify" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PrettifyPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    imports: [CookieModule],
-                    declarations,
-                    exports: declarations
+                    name: 'viPrettify'
                 }]
-        }] });
-function themeServiceFactory(cookie, options) {
-    if (!_.isNil(options) && _.isNil(options.service)) {
-        options.service = cookie;
-    }
-    return new ThemeService(options);
-}
-function themeAssetServiceFactory(theme) {
-    return new ThemeAssetService(theme);
-}
-const THEME_OPTIONS = new InjectionToken(`THEME_OPTIONS`);
+        }], ctorParameters: function () { return []; } });
 
-class WindowDragAreaDirective extends Destroyable {
+class ThemeAssetDirective extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
+    constructor(element, theme, themeAsset) {
         super();
-        this.element = element;
-        // --------------------------------------------------------------------------
-        //
-        // 	Event Handlers
-        //
-        // --------------------------------------------------------------------------
-        this.dragStartHandler = (event) => {
-            this._window.dragStartHandler(event);
-        };
-        this.dragMoveHandler = (event) => {
-            this._window.dragMoveHandler(event);
-        };
+        this.theme = theme;
+        this.themeAsset = themeAsset;
+        this._extension = 'png';
+        this._isFile = false;
+        this._isImage = false;
+        this._isVideo = false;
+        this._isSound = false;
+        this._isBackground = false;
+        this._isIgnoreTheme = true;
+        this.element = ViewUtil.parseElement(element.nativeElement);
+        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            this.isTriedThemeDefault = false;
+            this.setSourceProperties();
+        });
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    getSource(id) {
+        if (_.isNil(id)) {
+            return null;
+        }
+        if (this.isImage) {
+            return this.themeAsset.getImage(id, this.extension, this.isIgnoreTheme);
+        }
+        if (this.isBackground) {
+            return this.themeAsset.getBackground(id, this.extension, this.isIgnoreTheme);
+        }
+        if (this.isSound) {
+            return this.themeAsset.getSound(id, this.extension, this.isIgnoreTheme);
+        }
+        if (this.isVideo) {
+            return this.themeAsset.getVideo(id, this.extension, this.isIgnoreTheme);
+        }
+        if (this.isFile) {
+            return this.themeAsset.getFile(id, this.extension, this.isIgnoreTheme);
+        }
+        return this.themeAsset.getIcon(id, this.extension, this.isIgnoreTheme);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Event Handlers
+    //
+    // --------------------------------------------------------------------------
+    errorLoadingHandler(event) {
+        this.errorHandler(event);
+    }
+    errorHandler(event) {
+        if (this.isTriedThemeDefault) {
+            return;
+        }
+        this.isTriedThemeDefault = true;
+        this.source = this.getSource(this.getDefaultSourceId());
+        this.commitSourceProperties();
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Methods
+    //	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    setSourceProperties() {
+        this.source = this.getSource(this.getSourceId(this.theme.theme));
+        this.commitSourceProperties();
+    }
+    getSourceId(theme) {
+        return !_.isNil(theme) ? this.name + _.capitalize(theme.name) : null;
+    }
+    getDefaultSourceId() {
+        return this.themeAsset.getName(this.name, this.isIgnoreTheme);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
     destroy() {
@@ -6443,368 +6302,529 @@ class WindowDragAreaDirective extends Destroyable {
             return;
         }
         super.destroy();
-        if (!_.isNil(this._interactable)) {
-            this._interactable.unset();
-            this._interactable = null;
-        }
+        this.name = null;
+        this.theme = null;
         this.element = null;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //	Public Properties
     //
     // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        if (!this.window.config || this.window.config.isModal) {
+    set isSound(value) {
+        if (value === this._isSound) {
             return;
         }
-        this.interactable.draggable(true);
-        this.interactable.on('dragmove', this.dragMoveHandler);
-        this.interactable.on('dragstart', this.dragStartHandler);
+        this._isSound = value;
+        this.setSourceProperties();
+    }
+    get isSound() {
+        return this._isSound;
+    }
+    set isVideo(value) {
+        if (value === this._isVideo) {
+            return;
+        }
+        this._isVideo = value;
+        this.setSourceProperties();
+    }
+    get isVideo() {
+        return this._isVideo;
+    }
+    set isFile(value) {
+        if (value === this._isFile) {
+            return;
+        }
+        this._isFile = value;
+        this.setSourceProperties();
+    }
+    get isFile() {
+        return this._isFile;
+    }
+    set isImage(value) {
+        if (value === this._isImage) {
+            return;
+        }
+        this._isImage = value;
+        this.setSourceProperties();
+    }
+    get isImage() {
+        return this._isImage;
+    }
+    set isBackground(value) {
+        if (value === this._isBackground) {
+            return;
+        }
+        this._isBackground = value;
+        this.setSourceProperties();
+    }
+    get isBackground() {
+        return this._isBackground;
+    }
+    set isIgnoreTheme(value) {
+        if (value === this._isIgnoreTheme) {
+            return;
+        }
+        this._isIgnoreTheme = value;
+        this.setSourceProperties();
+    }
+    get isIgnoreTheme() {
+        return this._isIgnoreTheme;
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (value === this._name) {
+            return;
+        }
+        if (!_.isNil(this._name)) {
+            this.removeSourceProperties();
+        }
+        this._name = value;
+        if (!_.isNil(value)) {
+            this.setSourceProperties();
+        }
+    }
+    get extension() {
+        return this._extension;
+    }
+    set extension(value) {
+        if (value === this._extension) {
+            return;
+        }
+        this._extension = value;
+        if (!_.isNil(value)) {
+            this.setSourceProperties();
+        }
     }
+}
+ThemeAssetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetDirective, inputs: { isSound: "isSound", isVideo: "isVideo", isFile: "isFile", isImage: "isImage", isBackground: "isBackground", isIgnoreTheme: "isIgnoreTheme", name: "name", extension: "extension" }, host: { listeners: { "error": "errorLoadingHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
+                type: HostListener,
+                args: ['error', ['$event']]
+            }], isSound: [{
+                type: Input
+            }], isVideo: [{
+                type: Input
+            }], isFile: [{
+                type: Input
+            }], isImage: [{
+                type: Input
+            }], isBackground: [{
+                type: Input
+            }], isIgnoreTheme: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], extension: [{
+                type: Input
+            }] } });
+
+class ThemeAssetBackgroundDirective extends ThemeAssetDirective {
     // --------------------------------------------------------------------------
     //
-    //  Private Properties
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    get interactable() {
-        if (!this._interactable) {
-            this._interactable = interact.default(this.element.nativeElement);
-            //this._interactable.styleCursor(false);
-        }
-        return this._interactable;
+    constructor(element, theme, themeAsset) {
+        super(element, theme, themeAsset);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Public Properties
+    //	Private Methods
     //
     // --------------------------------------------------------------------------
-    set window(value) {
-        if (value === this._window) {
-            return;
-        }
-        this._window = value;
-        if (this._window) {
-            this.commitWindowProperties();
-        }
+    commitSourceProperties() {
+        let value = 'url(' + this.source + ')';
+        ViewUtil.setStyle(this.element, 'backgroundImage', value);
     }
-    get window() {
-        return this._window;
+    removeSourceProperties() {
+        ViewUtil.removeStyle(this.element, 'backgroundImage');
     }
 }
-WindowDragAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowDragAreaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-WindowDragAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: WindowDragAreaDirective, selector: "[vi-window-drag-area]", inputs: { window: ["vi-window-drag-area", "window"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowDragAreaDirective, decorators: [{
+ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetBackgroundDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetBackgroundDirective, selector: "[vi-theme-background]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[vi-window-drag-area]'
+                    selector: '[vi-theme-background]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { window: [{
-                type: Input,
-                args: ['vi-window-drag-area']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
 
-class WindowCloseElementComponent extends WindowElement {
+class ThemeAssetImageDirective extends ThemeAssetDirective {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    constructor(element, theme, themeAsset) {
+        super(element, theme, themeAsset);
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //	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);
-        }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
+    commitSourceProperties() {
+        this.element.src = this.source;
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.close();
-        }
+    removeSourceProperties() {
+        this.element.src = null;
     }
 }
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowCloseElementComponent.ICON_CLASS = 'fas fa-times';
-WindowCloseElementComponent.ICON_VALUE = null;
-WindowCloseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowCloseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowCloseElementComponent, selector: "vi-window-close-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowCloseElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-close-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetImageDirective, selector: "[vi-theme-image]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-image]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
 
-class WindowResizeElementComponent extends WindowElement {
+class ThemeToggleDirective extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
+    constructor(theme) {
+        super();
+        this.theme = theme;
     }
     // --------------------------------------------------------------------------
     //
-    // 	Private Methods
+    //	Event Handlers
     //
     // --------------------------------------------------------------------------
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowResizeElementComponent.ICON_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowResizeElementComponent.ICON_VALUE);
+    clickHandler(event) {
+        let themes = this.theme.themes.collection;
+        let length = themes.length;
+        if (length < 2) {
+            return;
         }
-        if (!_.isNil(WindowResizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowResizeElementComponent.ICON_CLASS);
+        let index = 0;
+        if (this.theme.theme) {
+            index = themes.indexOf(this.theme.theme);
+            if (index < length - 1) {
+                index++;
+            }
+            else {
+                index = 0;
+            }
         }
-        ViewUtil.setStyle(this.nativeElement, 'cursor', 'pointer');
+        this.theme.theme = themes[index];
     }
     // --------------------------------------------------------------------------
     //
-    // 	Event Handlers
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
+    destroy() {
+        if (this.isDestroyed) {
+            return;
         }
+        super.destroy();
+        this.theme = null;
     }
 }
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowResizeElementComponent.ICON_CLASS = 'fas fa-arrows-alt';
-WindowResizeElementComponent.ICON_VALUE = null;
-WindowResizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowResizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowResizeElementComponent, selector: "vi-window-resize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowResizeElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-resize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+ThemeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, deps: [{ token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeToggleDirective, selector: "[vi-theme-toggle]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-toggle]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.ThemeService }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
-class WindowMinimizeElementComponent extends WindowElement {
+class ThemeStyleDirective extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    // 	Constructor
+    //	Constructor
     //
     // --------------------------------------------------------------------------
-    constructor(element) {
-        super(element);
-        // --------------------------------------------------------------------------
-        //
-        // 	Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.commitIconProperties = () => {
-            let icon = this.window.isMinimized ? WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE : WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE;
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', icon);
-        };
+    constructor(element, theme) {
+        super();
+        this.theme = theme;
+        this.element = ViewUtil.parseElement(element.nativeElement);
+        this.theme.changed.pipe(takeUntil(this.destroyed)).subscribe(() => this.stylePropertiesAdd());
     }
     // --------------------------------------------------------------------------
     //
-    // 	Protected Methods
+    //	Protected Methods
     //
     // --------------------------------------------------------------------------
-    commitWindowProperties() {
-        super.commitWindowProperties();
-        this.window.events.pipe(takeUntil(this.destroyed)).subscribe(event => {
-            if (event === WindowEvent.MINIMIZED_CHANGED) {
-                this.commitIconProperties();
-            }
-        });
+    commitStyleProperties(name, value) {
+        ViewUtil.setStyle(this.element, name, value, this.flags);
     }
-    createChildren() {
-        super.createChildren();
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE)) {
-            ViewUtil.setProperty(this.nativeElement, 'innerHTML', WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE);
+    stylePropertiesCheck() {
+        if (this.isNeedStyleAdd()) {
+            this.stylePropertiesAdd();
         }
-        if (!_.isNil(WindowMinimizeElementComponent.ICON_CLASS)) {
-            ViewUtil.addClasses(this.nativeElement, WindowMinimizeElementComponent.ICON_CLASS);
+        else if (this.isNeedStyleRemove()) {
+            this.stylePropertiesRemove();
         }
-        ViewUtil.addClass(this.nativeElement, 'mouse-active');
     }
-    // --------------------------------------------------------------------------
-    //
-    // 	Event Handlers
-    //
-    // --------------------------------------------------------------------------
-    clickHandler(event) {
-        super.clickHandler(event);
-        if (!_.isNil(this.window)) {
-            this.window.isMinimized = !this.window.isMinimized;
-        }
+    stylePropertiesRemove() {
+        ViewUtil.removeStyle(this.element, this.styleName);
+    }
+    stylePropertiesAdd() {
+        this.commitStyleProperties(this.styleName, this.theme.getStyle(this.key));
+    }
+    isNeedStyleAdd() {
+        return !_.isNil(this.theme.theme) && !_.isNil(this.styleName);
+    }
+    isNeedStyleRemove() {
+        return !_.isNil(this.styleName);
     }
-}
-// --------------------------------------------------------------------------
-//
-// 	Constants
-//
-// --------------------------------------------------------------------------
-WindowMinimizeElementComponent.ICON_CLASS = null;
-WindowMinimizeElementComponent.ICON_MINIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ICON_MAXIMIZE_VALUE = null;
-WindowMinimizeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-WindowMinimizeElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WindowMinimizeElementComponent, selector: "vi-window-minimize-element", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowMinimizeElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vi-window-minimize-element', template: '', styles: [":host{display:block;position:absolute;color:#fff;background-color:#0006;border-radius:50%;padding:8px;font-size:14px;font-weight:700;text-align:center}:host:hover{background-color:#0009}:host.small{font-size:10px;padding:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class WindowResizeable extends WindowImpl {
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
-    setProperties() {
-        super.setProperties();
-        if (!this.config.isResizeable) {
+    destroy() {
+        if (this.isDestroyed) {
             return;
         }
-        ViewUtil.addClass(this.container, 'vi-resizeable');
-        if (_.isNil(this.resizeMoveHandlerProxy)) {
-            this.resizeMoveHandlerProxy = this.resizeMoveHandler.bind(this);
-        }
-        let edges = {};
-        edges.top = true;
-        edges.left = true;
-        edges.right = true;
-        edges.bottom = true;
-        let param = {};
-        param.edges = edges;
-        this.interactable.resizable(param);
-        this.interactable.on('resizemove', this.resizeMoveHandlerProxy);
+        super.destroy();
+        this.key = null;
+        this.theme = null;
+        this.element = null;
     }
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    //	Public Properties
     //
     // --------------------------------------------------------------------------
-    resizeMoveHandler(event) {
-        if (this.isMinimized) {
+    get flags() {
+        return this._flags;
+    }
+    set flags(value) {
+        if (value === this._flags) {
             return;
         }
-        let isChanged = event.dx !== 0 || event.dy !== 0;
-        if (!isChanged) {
+        this._flags = value;
+        this.stylePropertiesCheck();
+    }
+    get styleName() {
+        return this._styleName;
+    }
+    set styleName(value) {
+        if (value === this._styleName) {
             return;
         }
-        if (event.dx !== 0) {
-            let width = this.getWidth();
-            if (_.isNaN(width)) {
-                width = this.calculateWidth();
-            }
-            this.setWidth(width + event.dx, false);
+        this._styleName = value;
+        this.stylePropertiesCheck();
+    }
+    get key() {
+        return this._key;
+    }
+    set key(value) {
+        if (value === this._key) {
+            return;
         }
-        if (event.dy !== 0) {
-            let height = this.getHeight();
-            if (_.isNaN(height)) {
-                height = this.calculateHeight();
-            }
-            this.setHeight(height + event.dy, false);
+        this._key = value;
+        if (!_.isNil(value)) {
+            this.stylePropertiesCheck();
         }
-        this.resizeHandler();
+    }
+}
+ThemeStyleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleDirective, selector: "[vi-theme-style]", inputs: { flags: "flags", styleName: "styleName", key: ["vi-theme-style", "key"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-style]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { flags: [{
+                type: Input
+            }], styleName: [{
+                type: Input
+            }], key: [{
+                type: Input,
+                args: ['vi-theme-style']
+            }] } });
+
+class ThemeStyleHoverDirective extends ThemeStyleDirective {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element, theme) {
+        super(element, theme);
+        // --------------------------------------------------------------------------
+        //
+        //	Properties
+        //
+        // --------------------------------------------------------------------------
+        this._isHover = false;
+        // --------------------------------------------------------------------------
+        //
+        //	Event Handlers
+        //
+        // --------------------------------------------------------------------------
+        this.mouseEnter = (event) => {
+            this.isHover = true;
+        };
+        this.mouseLeave = (event) => {
+            this.isHover = false;
+        };
+        this.flags = RendererStyleFlags2.Important;
+        this.element.addEventListener('mouseenter', this.mouseEnter, false);
+        this.element.addEventListener('mouseleave', this.mouseLeave, false);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Protected Methods
+    //
+    // --------------------------------------------------------------------------
+    isNeedStyleAdd() {
+        return this.isHover && super.isNeedStyleAdd();
+    }
+    isNeedStyleRemove() {
+        return !this.isHover || super.isNeedStyleRemove();
     }
     // --------------------------------------------------------------------------
     //
-    //  Public Properties
+    //	Public Methods
     //
     // --------------------------------------------------------------------------
     destroy() {
         if (this.isDestroyed) {
             return;
         }
+        this.element.removeEventListener('mouseenter', this.mouseEnter, false);
+        this.element.removeEventListener('mouseleave', this.mouseLeave, false);
         super.destroy();
-        this.resizeMoveHandlerProxy = null;
-        if (!_.isNil(this._interactable)) {
-            this._interactable.unset();
-            this._interactable = null;
-        }
     }
     // --------------------------------------------------------------------------
     //
-    //  Private Properties
+    //	Public Properties
     //
     // --------------------------------------------------------------------------
-    get interactable() {
-        if (_.isNil(this._interactable)) {
-            this._interactable = interact.default(this.container);
-            // this._interactable.styleCursor(false);
+    get isHover() {
+        return this._isHover;
+    }
+    set isHover(value) {
+        if (value === this._isHover) {
+            return;
         }
-        return this._interactable;
+        this._isHover = value;
+        this.stylePropertiesCheck();
+    }
+    get key() {
+        return super.key;
+    }
+    set key(value) {
+        super.key = value;
+    }
+    get styleName() {
+        return super.styleName;
+    }
+    set styleName(value) {
+        super.styleName = value;
+    }
+    get flags() {
+        return super.flags;
+    }
+    set flags(value) {
+        super.flags = value;
     }
 }
+ThemeStyleHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeStyleHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleHoverDirective, selector: "[vi-theme-style-hover]", inputs: { key: ["vi-theme-style-hover", "key"], styleName: "styleName", flags: "flags" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-theme-style-hover]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { key: [{
+                type: Input,
+                args: ['vi-theme-style-hover']
+            }], styleName: [{
+                type: Input
+            }], flags: [{
+                type: Input
+            }] } });
 
-class WindowDragable extends WindowResizeable {
-    constructor() {
-        // --------------------------------------------------------------------------
-        //
-        //  Properties Methods
-        //
-        // --------------------------------------------------------------------------
-        super(...arguments);
-        this.isWasDragged = false;
-    }
+let declarations = [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective];
+class ThemeModule {
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    // 	Static Methods
     //
     // --------------------------------------------------------------------------
-    setProperties() {
-        super.setProperties();
-        if (this.config.isModal) {
-            return;
-        }
-        ViewUtil.addClass(this.container, 'vi-draggable');
-        if (!this.config.isContentDragable) {
-            return;
-        }
-        this.dragMoveHandlerProxy = this.dragMoveHandler.bind(this);
-        this.dragStartHandlerProxy = this.dragStartHandler.bind(this);
-        let param = {};
-        this.interactable.draggable(param);
-        this.interactable.on('dragmove', this.dragMoveHandlerProxy);
-        this.interactable.on('dragstart', this.dragStartHandlerProxy);
+    static forRoot(options) {
+        return {
+            ngModule: ThemeModule,
+            providers: [
+                {
+                    provide: THEME_OPTIONS,
+                    useValue: options || {}
+                },
+                {
+                    provide: ThemeService,
+                    deps: [CookieService, THEME_OPTIONS],
+                    useFactory: themeServiceFactory
+                },
+                {
+                    provide: ThemeAssetService,
+                    deps: [ThemeService],
+                    useFactory: themeAssetServiceFactory
+                }
+            ]
+        };
     }
-    isNeedClickStopPropagation(event) {
-        return this.isWasDragged || super.isNeedClickStopPropagation(event);
+}
+ThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, declarations: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective], imports: [CookieModule], exports: [ThemeToggleDirective, ThemeAssetImageDirective, ThemeAssetBackgroundDirective, ThemeStyleDirective, ThemeStyleHoverDirective] });
+ThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, imports: [[CookieModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CookieModule],
+                    declarations,
+                    exports: declarations
+                }]
+        }] });
+function themeServiceFactory(cookie, options) {
+    if (!_.isNil(options) && _.isNil(options.service)) {
+        options.service = cookie;
     }
+    return new ThemeService(options);
+}
+function themeAssetServiceFactory(theme) {
+    return new ThemeAssetService(theme);
+}
+const THEME_OPTIONS = new InjectionToken(`THEME_OPTIONS`);
+
+class WindowDragAreaDirective extends Destroyable {
     // --------------------------------------------------------------------------
     //
-    //  Event Handlers
+    // 	Constructor
     //
     // --------------------------------------------------------------------------
-    dragStartHandler(event) {
-        this.isWasDragged = true;
-    }
-    dragMoveHandler(event) {
-        let x = this.getX() + event.dx;
-        let y = this.getY() + event.dy;
-        this.move(x, y);
-    }
-    mouseClickHandler(event) {
-        super.mouseClickHandler(event);
-        this.isWasDragged = false;
+    constructor(element) {
+        super();
+        this.element = element;
+        // --------------------------------------------------------------------------
+        //
+        // 	Event Handlers
+        //
+        // --------------------------------------------------------------------------
+        this.dragStartHandler = (event) => {
+            this._window.dragStartHandler(event);
+        };
+        this.dragMoveHandler = (event) => {
+            this._window.dragMoveHandler(event);
+        };
     }
     // --------------------------------------------------------------------------
     //
@@ -6816,74 +6836,66 @@ class WindowDragable extends WindowResizeable {
             return;
         }
         super.destroy();
-        this.dragMoveHandlerProxy = null;
-        this.dragStartHandlerProxy = null;
+        if (!_.isNil(this._interactable)) {
+            this._interactable.unset();
+            this._interactable = null;
+        }
+        this.element = null;
     }
-}
-
-class WindowBaseComponent extends WindowDragable {
     // --------------------------------------------------------------------------
     //
-    //  Protected Methods
+    // 	Private Methods
     //
     // --------------------------------------------------------------------------
-    elementsCreate() {
-        super.elementsCreate();
-        if (!(this.content.container instanceof ViewContainerRef)) {
+    commitWindowProperties() {
+        if (!this.window.config || this.window.config.isModal) {
             return;
         }
-        if (!this.config.disableClose) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.CLOSE_COMPONENT));
-        }
-        if (this.config.isResizeable) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.RESIZE_COMPONENT));
-        }
-        if (this.config.isMinimizable) {
-            this.elementAdd(this.content.container.createComponent(WindowBaseComponent.MINIMIZE_COMPONENT));
-        }
-    }
-    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.toggleClasses(this.container, this.shakingClass, this.isShaking);
-    }
-    commitIsMinimizedProperties() {
-        ViewUtil.toggleClass(this.container, this.minimizedClass, this.isMinimized);
-        ViewUtil.toggleClass(this.content.element, this.minimizedClass, this.isMinimized);
-        ViewUtil.toggleClass(this.content.element.nativeElement.parentElement, this.minimizedClass, this.isMinimized);
+        this.interactable.draggable(true);
+        this.interactable.on('dragmove', this.dragMoveHandler);
+        this.interactable.on('dragstart', this.dragStartHandler);
     }
     // --------------------------------------------------------------------------
     //
-    //  Protected Properties
+    //  Private Properties
     //
     // --------------------------------------------------------------------------
-    get blinkClass() {
-        return 'vi-blink';
-    }
-    get disabledClass() {
-        return 'vi-disabled';
+    get interactable() {
+        if (!this._interactable) {
+            this._interactable = interact.default(this.element.nativeElement);
+            //this._interactable.styleCursor(false);
+        }
+        return this._interactable;
     }
-    get minimizedClass() {
-        return 'vi-minimized';
+    // --------------------------------------------------------------------------
+    //
+    // 	Public Properties
+    //
+    // --------------------------------------------------------------------------
+    set window(value) {
+        if (value === this._window) {
+            return;
+        }
+        this._window = value;
+        if (this._window) {
+            this.commitWindowProperties();
+        }
     }
-    get shakingClass() {
-        return 'shake-constant shake-horizontal';
+    get window() {
+        return this._window;
     }
 }
-// --------------------------------------------------------------------------
-//
-//  Static Properties
-//
-// --------------------------------------------------------------------------
-WindowBaseComponent.CLOSE_COMPONENT = WindowCloseElementComponent;
-WindowBaseComponent.RESIZE_COMPONENT = WindowResizeElementComponent;
-WindowBaseComponent.MINIMIZE_COMPONENT = WindowMinimizeElementComponent;
+WindowDragAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowDragAreaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+WindowDragAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: WindowDragAreaDirective, selector: "[vi-window-drag-area]", inputs: { window: ["vi-window-drag-area", "window"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WindowDragAreaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-window-drag-area]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { window: [{
+                type: Input,
+                args: ['vi-window-drag-area']
+            }] } });
 
 const IMPORTS$2 = [CommonModule, FormsModule, MatButtonModule, MatDialogModule, CookieModule, LanguageModule];
 const ENTRY_COMPONENTS$1 = [WindowQuestionComponent, WindowCloseElementComponent, WindowResizeElementComponent, WindowMinimizeElementComponent];
@@ -6898,6 +6910,8 @@ class WindowModule {
     static forRoot() {
         return {
             ngModule: WindowModule,
+            providers: [WindowService]
+            /*
             providers: [
                 {
                     provide: WindowService,
@@ -6905,6 +6919,7 @@ class WindowModule {
                     useFactory: windowServiceFactory
                 }
             ]
+            */
         };
     }
 }
@@ -6919,12 +6934,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     exports: EXPORTS$1
                 }]
         }] });
-function windowServiceFactory(dialog, language, cookies) {
-    let item = new WindowService(dialog, language, cookies);
-    item.factory = new WindowFactory(WindowBaseComponent);
-    item.questionComponent = WindowQuestionComponent;
-    return item;
-}
 
 class MenuTriggerForDirective extends MatMenuTrigger {
     //--------------------------------------------------------------------------
@@ -9890,5 +9899,5 @@ class TransportLazyModule {
  * Generated bundle index. Do not edit.
  */
 
-export { APPLICATION_INJECTOR, ApplicationBaseComponent, ApplicationComponent, AspectRatioResizeDirective, AssetBackgroundDirective, AssetBackgroundPipe, AssetFilePipe, AssetIconPipe, AssetImagePipe, AssetModule, AssetSoundPipe, AssetVideoPipe, AutoScrollBottomDirective, BootstrapBreakpoint, BootstrapBreakpointService, BootstrapBreakpointServiceEvent, BottomSheetService, COOKIE_OPTIONS, CamelCasePipe, CanDeactivateGuard, CdkTableBaseComponent, CdkTableCellClassNamePipe, CdkTableCellStyleNamePipe, CdkTableCellValuePipe, CdkTableColumnClassNamePipe, CdkTableColumnStyleNamePipe, CdkTableDataSource, CdkTableFilterableComponent, CdkTableFilterableMapCollection, CdkTablePaginableBookmarkComponent, CdkTablePaginableBookmarkMapCollection, CdkTablePaginableComponent, CdkTablePaginableMapCollection, CdkTableRowClassNamePipe, CdkTableRowStyleNamePipe, ClickToCopyDirective, ClickToSelectDirective, CookieModule, CookieOptions, CookieService, Direction, FinancePipe, FocusDirective, FocusManager, FormElementAsync, FormElementSync, HTMLContentTitleDirective, HTMLTitleDirective, INotification, INotificationContent, IUser, IVICommonOptions, IWindow, IWindowContent, InfiniteScrollDirective, LANGUAGE_OPTIONS, LanguageDirective, LanguageHasDirective, LanguageMatPaginatorIntl, LanguageModule, LanguageMomentDateAdapter, LanguagePipe, LanguagePipeHas, LanguagePipeHasPure, LanguagePipePure, LanguageRequireResolver, LanguageResolver, LanguageSelectorComponent, LazyModuleLoader, ListItem, ListItems, LoginBaseService, LoginBaseServiceEvent, LoginGuard, LoginIfCanGuard, LoginNotGuard, LoginRequireResolver, LoginResolver, MenuItem, MenuItemBase, MenuItems, MenuListComponent, MenuTriggerForDirective, MessageBaseComponent, MomentDateAdaptivePipe, MomentDateFromNowPipe, MomentDatePipe, MomentTimePipe, NavigationMenuItem, NgModelErrorPipe, NotificationBaseComponent, NotificationComponent, NotificationConfig, NotificationEvent, NotificationFactory, NotificationModule, NotificationService, NotificationServiceEvent, PipeBaseService, PrettifyPipe, PropertiesManager, QuestionEvent, QuestionManager, QuestionMode, ResizeDirective, ResizeManager, RouterBaseService, SanitizePipe, ScrollCheckDirective, ScrollDirective, SelectListComponent, SelectListItem, SelectListItems, SelectOnFocusDirective, ShellBaseComponent, StartCasePipe, THEME_OPTIONS, TabGroupComponent, ThemeAssetBackgroundDirective, ThemeAssetDirective, ThemeAssetImageDirective, ThemeModule, ThemeStyleDirective, ThemeStyleHoverDirective, ThemeToggleDirective, TimePipe, TransportLazy, TransportLazyModule, TransportLazyModuleLoadedEvent, TruncatePipe, UserBaseService, UserBaseServiceEvent, VICommonModule, VIComponentModule, VI_ANGULAR_OPTIONS, ViewUtil, WINDOW_CONTENT_CONTAINER, WindowAlign, WindowBase, WindowBaseComponent, WindowCloseElementComponent, WindowConfig, WindowDragAreaDirective, WindowEvent, WindowFactory, WindowImpl, WindowMinimizeElementComponent, WindowModule, WindowQuestionBaseComponent, WindowQuestionComponent, WindowResizeElementComponent, WindowService, WindowServiceEvent, cookieServiceFactory, languageServiceFactory, loggerServiceFactory, notificationServiceFactory, themeAssetServiceFactory, themeServiceFactory, windowServiceFactory };
+export { APPLICATION_INJECTOR, ApplicationBaseComponent, ApplicationComponent, AspectRatioResizeDirective, AssetBackgroundDirective, AssetBackgroundPipe, AssetFilePipe, AssetIconPipe, AssetImagePipe, AssetModule, AssetSoundPipe, AssetVideoPipe, AutoScrollBottomDirective, BootstrapBreakpoint, BootstrapBreakpointService, BootstrapBreakpointServiceEvent, BottomSheetBaseComponent, BottomSheetService, COOKIE_OPTIONS, CamelCasePipe, CanDeactivateGuard, CdkTableBaseComponent, CdkTableCellClassNamePipe, CdkTableCellStyleNamePipe, CdkTableCellValuePipe, CdkTableColumnClassNamePipe, CdkTableColumnStyleNamePipe, CdkTableDataSource, CdkTableFilterableComponent, CdkTableFilterableMapCollection, CdkTablePaginableBookmarkComponent, CdkTablePaginableBookmarkMapCollection, CdkTablePaginableComponent, CdkTablePaginableMapCollection, CdkTableRowClassNamePipe, CdkTableRowStyleNamePipe, ClickToCopyDirective, ClickToSelectDirective, CookieModule, CookieOptions, CookieService, Direction, FinancePipe, FocusDirective, FocusManager, FormElementAsync, FormElementSync, HTMLContentTitleDirective, HTMLTitleDirective, INotification, INotificationContent, IUser, IVICommonOptions, IWindow, IWindowContent, InfiniteScrollDirective, LANGUAGE_OPTIONS, LanguageDirective, LanguageHasDirective, LanguageMatPaginatorIntl, LanguageModule, LanguageMomentDateAdapter, LanguagePipe, LanguagePipeHas, LanguagePipeHasPure, LanguagePipePure, LanguageRequireResolver, LanguageResolver, LanguageSelectorComponent, LazyModuleLoader, ListItem, ListItems, LoginBaseService, LoginBaseServiceEvent, LoginGuard, LoginIfCanGuard, LoginNotGuard, LoginRequireResolver, LoginResolver, MenuItem, MenuItemBase, MenuItems, MenuListComponent, MenuTriggerForDirective, MessageBaseComponent, MomentDateAdaptivePipe, MomentDateFromNowPipe, MomentDatePipe, MomentTimePipe, NavigationMenuItem, NgModelErrorPipe, NotificationBaseComponent, NotificationComponent, NotificationConfig, NotificationEvent, NotificationFactory, NotificationModule, NotificationService, NotificationServiceEvent, PipeBaseService, PrettifyPipe, PropertiesManager, QuestionEvent, QuestionManager, QuestionMode, ResizeDirective, ResizeManager, RouterBaseService, SanitizePipe, ScrollCheckDirective, ScrollDirective, SelectListComponent, SelectListItem, SelectListItems, SelectOnFocusDirective, ShellBaseComponent, StartCasePipe, THEME_OPTIONS, TabGroupComponent, ThemeAssetBackgroundDirective, ThemeAssetDirective, ThemeAssetImageDirective, ThemeModule, ThemeStyleDirective, ThemeStyleHoverDirective, ThemeToggleDirective, TimePipe, TransportLazy, TransportLazyModule, TransportLazyModuleLoadedEvent, TruncatePipe, UserBaseService, UserBaseServiceEvent, VICommonModule, VIComponentModule, VI_ANGULAR_OPTIONS, ViewUtil, WINDOW_CONTENT_CONTAINER, WindowAlign, WindowBase, WindowBaseComponent, WindowCloseElementComponent, WindowConfig, WindowDragAreaDirective, WindowElement, WindowEvent, WindowFactory, WindowImpl, WindowMinimizeElementComponent, WindowModule, WindowQuestionBaseComponent, WindowQuestionComponent, WindowResizeElementComponent, WindowService, WindowServiceEvent, cookieServiceFactory, languageServiceFactory, loggerServiceFactory, notificationServiceFactory, themeAssetServiceFactory, themeServiceFactory };
 //# sourceMappingURL=ts-core-angular.mjs.map