@ts-core/angular 13.0.65 → 13.1.2

package/fesm2020/ts-core-angular.mjs

@@ -1,29 +1,18 @@
 import * as i0 from '@angular/core';
 import { Component, ViewContainerRef, Injectable, Directive, Input, Pipe, NgModule, InjectionToken, EventEmitter, Output, HostListener, Optional, Inject, RendererStyleFlags2, NgModuleFactory } from '@angular/core';
-import { DestroyableContainer, LoadableEvent, Destroyable, IDestroyable, Loadable, LoadableStatus } from '@ts-core/common';
-import { PromiseHandler } from '@ts-core/common/promise';
+import { DestroyableContainer, PromiseHandler, ExtendedError, LoadableEvent, Destroyable, IDestroyable, DateUtil, ObservableData, ObjectUtil, ArrayUtil, RemoveFilterableCondition, GetFilterableCondition, Logger, LoggerLevel, DataSourceMapCollectionEvent, FilterableDataSourceMapCollection, PaginableDataSourceMapCollection, PaginableBookmarkDataSourceMapCollection, Loadable, LoadableStatus, TransportTimeoutError, TransportNoConnectionError, FilterableMapCollection, MapCollection, TransportEvent, TransportLocal } from '@ts-core/common';
 import * as _ from 'lodash';
-import { Assets } from '@ts-core/frontend/asset';
-import { AssetUrlProvider } from '@ts-core/frontend/asset/provider';
-import { takeUntil, filter, debounceTime as debounceTime$1, map } from 'rxjs/operators';
-import { ExtendedError } from '@ts-core/common/error';
+import * as i1$1 from '@ts-core/frontend';
+import { Assets, AssetUrlProvider, LanguageService, ThemeService, ThemeAssetService, LoadingService, NativeWindowService, ICookieOptions, DefaultLogger } from '@ts-core/frontend';
+import { takeUntil, Subject, filter, BehaviorSubject, distinctUntilChanged, debounceTime, fromEvent, of, map, merge } from 'rxjs';
 import moment from 'moment';
 import numeral from 'numeral';
-import { ObservableData } from '@ts-core/common/observer';
-import { DateUtil, ObjectUtil, ArrayUtil } from '@ts-core/common/util';
-import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, takeUntil as takeUntil$1, fromEvent, filter as filter$1, of, merge, map as map$1 } from 'rxjs';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogConfig, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i1$1 from '@ts-core/frontend/language';
-import { LanguageService } from '@ts-core/frontend/language';
 import * as i4 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, AsyncPipe, DatePipe } from '@angular/common';
 import * as i5 from '@angular/forms';
 import { FormsModule, Validators } from '@angular/forms';
-import { Logger, LoggerLevel } from '@ts-core/common/logger';
-import { ICookieOptions } from '@ts-core/frontend/cookie';
-import { DefaultLogger } from '@ts-core/frontend/logger';
-import { LoadingService, NativeWindowService } from '@ts-core/frontend/service';
 import * as Cookie from 'ngx-cookie';
 import { ResizeSensor } from 'css-element-queries';
 import * as interact from 'interactjs';
@@ -33,35 +22,28 @@ import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$2 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';
-import { ThemeService, ThemeAssetService } from '@ts-core/frontend/theme';
-import * as i1$5 from '@angular/material/menu';
+import * as i1$4 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
 import * as i2$1 from '@angular/material/form-field';
 import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$1 from '@angular/material/core';
-import * as i1$6 from '@angular/material/list';
+import * as i1$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$7 from '@angular/material/tabs';
+import * as i1$6 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import { DataSourceMapCollectionEvent, FilterableDataSourceMapCollection, PaginableDataSourceMapCollection, PaginableBookmarkDataSourceMapCollection } from '@ts-core/common/map/dataSource';
-import * as i1$8 from '@angular/material/table';
+import * as i1$7 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i2$2 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i3$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { TransportTimeoutError, TransportNoConnectionError, TransportEvent } from '@ts-core/common/transport';
-import * as i1$9 from '@angular/router';
+import * as i1$8 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ActivatedRoute } from '@angular/router';
-import { FilterableMapCollection, MapCollection } from '@ts-core/common/map';
-import * as i1$a from '@angular/cdk/layout';
-import { TransportLocal } from '@ts-core/common/transport/local';
+import * as i1$9 from '@angular/cdk/layout';
 
 class ApplicationBaseComponent extends DestroyableContainer {
     // --------------------------------------------------------------------------
@@ -1977,7 +1959,7 @@ class AspectRatioResizeDirective extends DestroyableContainer {
     ngAfterViewInit() {
         this.sensor = new ResizeManager(this.element);
         this.sensor.changed
-            .pipe(debounceTime(AspectRatioResizeDirective.UPDATE_DELAY), takeUntil$1(this.destroyed))
+            .pipe(debounceTime(AspectRatioResizeDirective.UPDATE_DELAY), takeUntil(this.destroyed))
             .subscribe(() => this.commitResizeProperties());
         if (_.isNaN(this.ratio)) {
             this.ratio = 4 / 3;
@@ -2583,66 +2565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['focus']
             }] } });
 
-class HTMLTitleDirective extends Destroyable {
-    // --------------------------------------------------------------------------
-    //
-    //	Constructor
-    //
-    // --------------------------------------------------------------------------
-    constructor(element) {
-        super();
-        this.element = element;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //	Private Methods
-    //
-    // --------------------------------------------------------------------------
-    commitValueProperties() {
-        ViewUtil.setProperty(this.element, 'title', LanguagePipe.removeTags(this.value));
-    }
-    // --------------------------------------------------------------------------
-    //
-    //	Public Methods
-    //
-    // --------------------------------------------------------------------------
-    destroy() {
-        if (this.isDestroyed) {
-            return;
-        }
-        super.destroy();
-        this._value = null;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //	Public Properties
-    //
-    // --------------------------------------------------------------------------
-    set value(value) {
-        if (value === this._value) {
-            return;
-        }
-        this._value = value;
-        if (!_.isNil(value)) {
-            this.commitValueProperties();
-        }
-    }
-    get value() {
-        return this._value;
-    }
-}
-HTMLTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HTMLTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-HTMLTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: HTMLTitleDirective, selector: "[vi-html-title]", inputs: { value: ["vi-html-title", "value"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HTMLTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[vi-html-title]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
-                type: Input,
-                args: ['vi-html-title']
-            }] } });
-
 class LanguagePipe extends DestroyableContainer {
     // --------------------------------------------------------------------------
     //
@@ -2708,6 +2630,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LanguageService }]; } });
 
+class HTMLTitleDirective extends Destroyable {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(element) {
+        super();
+        this.element = element;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Private Methods
+    //
+    // --------------------------------------------------------------------------
+    commitValueProperties() {
+        ViewUtil.setProperty(this.element, 'title', LanguagePipe.removeTags(this.value));
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Methods
+    //
+    // --------------------------------------------------------------------------
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        this._value = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //	Public Properties
+    //
+    // --------------------------------------------------------------------------
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        this._value = value;
+        if (!_.isNil(value)) {
+            this.commitValueProperties();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+}
+HTMLTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HTMLTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+HTMLTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: HTMLTitleDirective, selector: "[vi-html-title]", inputs: { value: ["vi-html-title", "value"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HTMLTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vi-html-title]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input,
+                args: ['vi-html-title']
+            }] } });
+
 class HTMLContentTitleDirective extends Destroyable {
     // --------------------------------------------------------------------------
     //
@@ -2859,7 +2841,7 @@ class ScrollCheckDirective extends DestroyableContainer {
         this.isExceedLimit = false;
         this._scrollValue = element.nativeElement.scrollTop;
         fromEvent(element.nativeElement, 'scroll')
-            .pipe(debounceTime$1(DateUtil.MILISECONDS_SECOND / 10), takeUntil(this.destroyed))
+            .pipe(debounceTime(DateUtil.MILISECONDS_SECOND / 10), takeUntil(this.destroyed))
             .subscribe(() => {
             this._scrollValue = element.nativeElement.scrollTop;
             this.check();
@@ -4120,10 +4102,10 @@ class WindowImpl extends WindowBase {
         this._backdrop = this.properties.overlay.backdropElement;
         this._container = this.properties.overlay.overlayElement;
         this.setProperties();
-        this.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterClosed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
+        this.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterClosed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
         this.events
-            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
+            .pipe(filter(event => event === WindowEvent.CONTENT_READY), takeUntil(this.destroyed))
             .subscribe(this.updatePosition);
     }
     // --------------------------------------------------------------------------
@@ -5029,8 +5011,8 @@ class BottomSheetImpl extends DestroyableContainer {
         this._container = this.properties.overlay.overlayElement;
         this.setProperties();
         this.elementsCreate();
-        this.getReference().afterOpened().pipe(takeUntil$1(this.destroyed)).subscribe(this.setOpened);
-        this.getReference().afterDismissed().pipe(takeUntil$1(this.destroyed)).subscribe(this.setClosed);
+        this.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterDismissed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
     }
     // --------------------------------------------------------------------------
     //
@@ -5447,10 +5429,10 @@ class NotificationImpl extends WindowBase {
         // 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.getReference().afterOpened().pipe(takeUntil(this.destroyed)).subscribe(this.setOpened);
+        this.getReference().afterClosed().pipe(takeUntil(this.destroyed)).subscribe(this.setClosed);
         this.observer
-            .pipe(filter$1(event => event === WindowEvent.CONTENT_READY), takeUntil$1(this.destroyed))
+            .pipe(filter(event => event === WindowEvent.CONTENT_READY), takeUntil(this.destroyed))
             .subscribe(this.updatePosition);
     }
     // --------------------------------------------------------------------------
@@ -6465,11 +6447,11 @@ class ThemeAssetDirective extends Destroyable {
         }
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeAssetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetDirective, inputs: { isSound: "isSound", isVideo: "isVideo", isFile: "isFile", isImage: "isImage", isBackground: "isBackground", isIgnoreTheme: "isIgnoreTheme", name: "name", extension: "extension" }, host: { listeners: { "error": "errorLoadingHandler($event)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; }, propDecorators: { errorLoadingHandler: [{
                 type: HostListener,
                 args: ['error', ['$event']]
             }], isSound: [{
@@ -6512,14 +6494,14 @@ class ThemeAssetBackgroundDirective extends ThemeAssetDirective {
         ViewUtil.removeStyle(this.element, 'backgroundImage');
     }
 }
-ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetBackgroundDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeAssetBackgroundDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetBackgroundDirective, selector: "[vi-theme-background]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetBackgroundDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-theme-background]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
 
 class ThemeAssetImageDirective extends ThemeAssetDirective {
     // --------------------------------------------------------------------------
@@ -6542,14 +6524,14 @@ class ThemeAssetImageDirective extends ThemeAssetDirective {
         this.element.src = null;
     }
 }
-ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.ThemeService }, { token: i1$4.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeAssetImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }, { token: i1$1.ThemeAssetService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeAssetImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeAssetImageDirective, selector: "[vi-theme-image]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeAssetImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-theme-image]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }, { type: i1$4.ThemeAssetService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }, { type: i1$1.ThemeAssetService }]; } });
 
 class ThemeToggleDirective extends Destroyable {
     // --------------------------------------------------------------------------
@@ -6597,14 +6579,14 @@ class ThemeToggleDirective extends Destroyable {
         this.theme = null;
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, deps: [{ token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeToggleDirective, selector: "[vi-theme-toggle]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-theme-toggle]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.ThemeService }]; }, propDecorators: { clickHandler: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ThemeService }]; }, propDecorators: { clickHandler: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -6701,14 +6683,14 @@ class ThemeStyleDirective extends Destroyable {
         }
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeStyleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleDirective, selector: "[vi-theme-style]", inputs: { flags: "flags", styleName: "styleName", key: ["vi-theme-style", "key"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-theme-style]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { flags: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { flags: [{
                 type: Input
             }], styleName: [{
                 type: Input
@@ -6804,14 +6786,14 @@ class ThemeStyleHoverDirective extends ThemeStyleDirective {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ThemeService }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeStyleHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ThemeStyleHoverDirective, selector: "[vi-theme-style-hover]", inputs: { key: ["vi-theme-style-hover", "key"], styleName: "styleName", flags: "flags" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ThemeStyleHoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vi-theme-style-hover]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.ThemeService }]; }, propDecorators: { key: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThemeService }]; }, propDecorators: { key: [{
                 type: Input,
                 args: ['vi-theme-style-hover']
             }], styleName: [{
@@ -7243,7 +7225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class MenuListComponent extends DestroyableContainer {
 }
 MenuListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MenuListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuListComponent, selector: "vi-menu-list", inputs: { list: "list" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of list?.filtered\">\n    <button mat-menu-item [ngClass]=\"item.className\" (click)=\"list?.actionItem(item)\">\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\"></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\"></span>\n    </button>\n</ng-container>\n", components: [{ type: i1$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MenuListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuListComponent, selector: "vi-menu-list", inputs: { list: "list" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of list?.filtered\">\n    <button mat-menu-item [ngClass]=\"item.className\" (click)=\"list?.actionItem(item)\">\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\"></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\"></span>\n    </button>\n</ng-container>\n", components: [{ type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-menu-list', template: "<ng-container *ngFor=\"let item of list?.filtered\">\n    <button mat-menu-item [ngClass]=\"item.className\" (click)=\"list?.actionItem(item)\">\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\"></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\"></span>\n    </button>\n</ng-container>\n" }]
@@ -7254,7 +7236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class SelectListComponent extends DestroyableContainer {
 }
 SelectListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SelectListComponent, selector: "vi-select-list", inputs: { list: "list" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of list?.collection\">\n\n    <mat-list-item [ngClass]=\"item.isSelected? item.selectedClassName : item.className\" *ngIf=\"item.isEnabled\" (click)=\"list.actionItem(item)\" >\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\" matListIcon></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\" matLine></span>\n    </mat-list-item>\n\n</ng-container>\n", components: [{ type: i1$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i4$1.MatLine, selector: "[mat-line], [matLine]" }] });
+SelectListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SelectListComponent, selector: "vi-select-list", inputs: { list: "list" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of list?.collection\">\n\n    <mat-list-item [ngClass]=\"item.isSelected? item.selectedClassName : item.className\" *ngIf=\"item.isEnabled\" (click)=\"list.actionItem(item)\" >\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\" matListIcon></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\" matLine></span>\n    </mat-list-item>\n\n</ng-container>\n", components: [{ type: i1$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i4$1.MatLine, selector: "[mat-line], [matLine]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SelectListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-select-list', template: "<ng-container *ngFor=\"let item of list?.collection\">\n\n    <mat-list-item [ngClass]=\"item.isSelected? item.selectedClassName : item.className\" *ngIf=\"item.isEnabled\" (click)=\"list.actionItem(item)\" >\n        <span [ngClass]=\"item.iconId\" *ngIf=\"item.iconId\" matListIcon></span>\n        <span [innerHTML]=\"item.label\" [title]=\"item.label\" matLine></span>\n    </mat-list-item>\n\n</ng-container>\n" }]
@@ -7317,7 +7299,7 @@ class TabGroupComponent extends DestroyableContainer {
     }
 }
 TabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabGroupComponent, selector: "vi-tab-group", inputs: { className: "className", list: "list" }, usesInheritance: true, ngImport: i0, template: "<mat-tab-group [ngClass]=\"className\" (selectedIndexChange)=\"list.selectedIndex = $event\" [selectedIndex]=\"list?.selectedIndex\"\n    (selectedTabChange)=\"selectedTabChange($event)\">\n    <ng-container *ngFor=\"let item of list?.collection\">\n        <mat-tab [ngClass]=\"item.className\" [label]=\"item.label\" [disabled]=\"!item.isEnabled\" (click)=\"list?.actionItem(item)\"></mat-tab>\n    </ng-container>\n</mat-tab-group>\n", components: [{ type: i1$7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+TabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabGroupComponent, selector: "vi-tab-group", inputs: { className: "className", list: "list" }, usesInheritance: true, ngImport: i0, template: "<mat-tab-group [ngClass]=\"className\" (selectedIndexChange)=\"list.selectedIndex = $event\" [selectedIndex]=\"list?.selectedIndex\"\n    (selectedTabChange)=\"selectedTabChange($event)\">\n    <ng-container *ngFor=\"let item of list?.collection\">\n        <mat-tab [ngClass]=\"item.className\" [label]=\"item.label\" [disabled]=\"!item.isEnabled\" (click)=\"list?.actionItem(item)\"></mat-tab>\n    </ng-container>\n</mat-tab-group>\n", components: [{ type: i1$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-tab-group', template: "<mat-tab-group [ngClass]=\"className\" (selectedIndexChange)=\"list.selectedIndex = $event\" [selectedIndex]=\"list?.selectedIndex\"\n    (selectedTabChange)=\"selectedTabChange($event)\">\n    <ng-container *ngFor=\"let item of list?.collection\">\n        <mat-tab [ngClass]=\"item.className\" [label]=\"item.label\" [disabled]=\"!item.isEnabled\" (click)=\"list?.actionItem(item)\"></mat-tab>\n    </ng-container>\n</mat-tab-group>\n" }]
@@ -7737,24 +7719,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
-class CdkTableCellValuePipe {
+class CdkTableCellValuePipe extends DestroyableContainer {
+    // --------------------------------------------------------------------------
+    //
+    //	Constructor
+    //
+    // --------------------------------------------------------------------------
+    constructor(detection) {
+        super();
+        this.detection = detection;
+    }
     // --------------------------------------------------------------------------
     //
     //	Public Methods
     //
     // --------------------------------------------------------------------------
     transform(item, column) {
-        return !_.isNil(column) && !_.isNil(column.format) ? column.format(item, column) : item[column.name];
+        if (_.isNil(column.format)) {
+            return item[column.name];
+        }
+        let result = column.format(item, column);
+        if (!(result instanceof Promise)) {
+            return result;
+        }
+        if (_.isNil(this.asyncPipe)) {
+            this.asyncPipe = new AsyncPipe(this.detection);
+        }
+        return this.asyncPipe.transform(result);
+    }
+    destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+        super.destroy();
+        if (!_.isNil(this.asyncPipe)) {
+            this.asyncPipe.ngOnDestroy();
+            this.asyncPipe = null;
+        }
+        this.detection = null;
     }
 }
-CdkTableCellValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableCellValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CdkTableCellValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableCellValuePipe, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
 CdkTableCellValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableCellValuePipe, name: "viCdkTableCellValue" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableCellValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'viCdkTableCellValue'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class CdkTableRowClassNamePipe {
     // --------------------------------------------------------------------------
@@ -7830,7 +7842,7 @@ class CdkTablePaginableComponent extends CdkTableBaseComponent {
     }
 }
 CdkTablePaginableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTablePaginableComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CdkTablePaginableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTablePaginableComponent, selector: "vi-cdk-table-paginable", inputs: { paginator: "paginator" }, usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [trackBy]=\"table.trackByFn\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n    \n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n    <mat-paginator\n        class=\"flex-shrink-0\"\n        [pageSize]=\"table?.pageSize\"\n        [pageIndex]=\"table?.pageIndex\"\n        [length]=\"table?.total\"\n        (page)=\"table?.pageEventHandler($event)\"\n        [pageSizeOptions]=\"paginator?.pageSizes\"\n        [showFirstLastButtons]=\"paginator?.showFirstLastButtons\"\n        [hidePageSize]=\"paginator?.hidePageSize\"\n        *ngIf=\"paginator\"\n    ></mat-paginator>\n</div>\n", components: [{ type: i1$8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$8.MatCellDef, selector: "[matCellDef]" }, { type: i1$8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
+CdkTablePaginableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTablePaginableComponent, selector: "vi-cdk-table-paginable", inputs: { paginator: "paginator" }, usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [trackBy]=\"table.trackByFn\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n    \n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n    <mat-paginator\n        class=\"flex-shrink-0\"\n        [pageSize]=\"table?.pageSize\"\n        [pageIndex]=\"table?.pageIndex\"\n        [length]=\"table?.total\"\n        (page)=\"table?.pageEventHandler($event)\"\n        [pageSizeOptions]=\"paginator?.pageSizes\"\n        [showFirstLastButtons]=\"paginator?.showFirstLastButtons\"\n        [hidePageSize]=\"paginator?.hidePageSize\"\n        *ngIf=\"paginator\"\n    ></mat-paginator>\n</div>\n", components: [{ type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatCellDef, selector: "[matCellDef]" }, { type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$7.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTablePaginableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-cdk-table-paginable', template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [trackBy]=\"table.trackByFn\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n    \n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n    <mat-paginator\n        class=\"flex-shrink-0\"\n        [pageSize]=\"table?.pageSize\"\n        [pageIndex]=\"table?.pageIndex\"\n        [length]=\"table?.total\"\n        (page)=\"table?.pageEventHandler($event)\"\n        [pageSizeOptions]=\"paginator?.pageSizes\"\n        [showFirstLastButtons]=\"paginator?.showFirstLastButtons\"\n        [hidePageSize]=\"paginator?.hidePageSize\"\n        *ngIf=\"paginator\"\n    ></mat-paginator>\n</div>\n" }]
@@ -7850,7 +7862,7 @@ class CdkTableFilterableComponent extends CdkTableBaseComponent {
     }
 }
 CdkTableFilterableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableFilterableComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CdkTableFilterableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTableFilterableComponent, selector: "vi-cdk-table-filterable", usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n</div>\n", components: [{ type: i1$8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$8.MatCellDef, selector: "[matCellDef]" }, { type: i1$8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
+CdkTableFilterableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTableFilterableComponent, selector: "vi-cdk-table-filterable", usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n</div>\n", components: [{ type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatCellDef, selector: "[matCellDef]" }, { type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$7.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTableFilterableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-cdk-table-filterable', template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n\n<div class=\"paginator-container d-flex align-items-center justify-content-end flex-shrink-0\">\n    <ng-content></ng-content>\n</div>\n" }]
@@ -7868,7 +7880,7 @@ class CdkTablePaginableBookmarkComponent extends CdkTableBaseComponent {
     }
 }
 CdkTablePaginableBookmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTablePaginableBookmarkComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-CdkTablePaginableBookmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTablePaginableBookmarkComponent, selector: "vi-cdk-table-paginable-bookmark", usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n", components: [{ type: i1$8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$8.MatCellDef, selector: "[matCellDef]" }, { type: i1$8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
+CdkTablePaginableBookmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CdkTablePaginableBookmarkComponent, selector: "vi-cdk-table-paginable-bookmark", usesInheritance: true, ngImport: i0, template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n", components: [{ type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatCellDef, selector: "[matCellDef]" }, { type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: HTMLContentTitleDirective, selector: "[vi-html-content-title]", inputs: ["vi-html-content-title"] }, { type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i1$7.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { type: LanguageDirective, selector: "[vi-translate]", inputs: ["isNeedTitle", "vi-translate", "params"] }], pipes: { "viTranslate": LanguagePipe, "viCdkTableColumnClassName": CdkTableColumnClassNamePipe, "viCdkTableColumnStyleName": CdkTableColumnStyleNamePipe, "viCdkTableCellClassName": CdkTableCellClassNamePipe, "viCdkTableCellStyleName": CdkTableCellStyleNamePipe, "viCdkTableCellValue": CdkTableCellValuePipe, "viCdkTableRowClassName": CdkTableRowClassNamePipe, "viCdkTableRowStyleName": CdkTableRowStyleNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CdkTablePaginableBookmarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vi-cdk-table-paginable-bookmark', template: "<mat-table\n    class=\"flex-grow-1 vertical-scroll-only\"\n    matSort\n    [dataSource]=\"table?.table?.dataSource\"\n    [matSortActive]=\"sortActive\"\n    [matSortDirection]=\"sortDirection\"\n    [class.mat-nav-list]=\"settings?.isInteractive\"\n    (matSortChange)=\"table.sortEventHandler($event)\"\n>\n    <ng-container *ngFor=\"let column of columns; trackBy: columnTrackBy\">\n        <ng-container [matColumnDef]=\"column.name\">\n            <mat-header-cell\n                class=\"px-2\"\n                mat-sort-header\n                [disableClear]=\"true\"\n                [disabled]=\"column.isDisableSort\"\n                [ngClass]=\"column.headerClassName\"\n                *matHeaderCellDef\n            >\n                <span [innerHTML]=\"column.headerId | viTranslate\"></span>\n            </mat-header-cell>\n            <mat-cell\n                class=\"p-2\"\n                (click)=\"cellClickHandler(row, column, $event)\"\n                *matCellDef=\"let row\"\n                [ngClass]=\"row | viCdkTableColumnClassName: column\"\n                [ngStyle]=\"row | viCdkTableColumnStyleName: column\"\n            >\n                <ng-container [ngSwitch]=\"column.isImage\">\n                    <img\n                        *ngSwitchCase=\"true\"\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [src]=\"row | viCdkTableCellValue: column\"\n                    />\n                    <span\n                        *ngSwitchDefault\n                        [ngClass]=\"row | viCdkTableCellClassName: column\"\n                        [ngStyle]=\"row | viCdkTableCellStyleName: column\"\n                        [vi-html-content-title]=\"row | viCdkTableCellValue: column\"\n                    ></span>\n                </ng-container>\n            </mat-cell>\n        </ng-container>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"columnNames\"></mat-header-row>\n\n    <mat-row\n        class=\"mat-list-item\"\n        *matRowDef=\"let row; columns: columnNames\"\n        [ngClass]=\"row | viCdkTableRowClassName: rows:selectedRows\"\n        [ngStyle]=\"row | viCdkTableRowStyleName: rows:selectedRows\"\n        (click)=\"rowClickHandler(row, $event)\"\n    ></mat-row>\n\n    <p class=\"p-3 flex-shrink-0 text-center mouse-inactive\" [vi-translate]=\"settings?.noDataId\" *matNoDataRow></p>\n</mat-table>\n\n<mat-progress-bar class=\"flex-shrink-0 border transparent\" [mode]=\"table?.isLoading ? 'indeterminate' : 'determinate'\"></mat-progress-bar>\n" }]
@@ -8518,7 +8530,7 @@ class LoginGuard extends LoginRequireResolver {
 //
 // --------------------------------------------------------------------------
 LoginGuard.redirectUrl = '/login';
-LoginGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginGuard, deps: [{ token: LoginBaseService }, { token: i1$9.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+LoginGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginGuard, deps: [{ token: LoginBaseService }, { token: i1$8.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 LoginGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginGuard, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginGuard, decorators: [{
             type: Injectable,
@@ -8526,7 +8538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LoginBaseService]
-                }] }, { type: i1$9.Router }]; } });
+                }] }, { type: i1$8.Router }]; } });
 
 class LoginNotGuard extends LoginRequireResolver {
     // --------------------------------------------------------------------------
@@ -8553,7 +8565,7 @@ class LoginNotGuard extends LoginRequireResolver {
 //
 // --------------------------------------------------------------------------
 LoginNotGuard.redirectUrl = '/';
-LoginNotGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginNotGuard, deps: [{ token: LoginBaseService }, { token: i1$9.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+LoginNotGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginNotGuard, deps: [{ token: LoginBaseService }, { token: i1$8.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 LoginNotGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginNotGuard, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginNotGuard, decorators: [{
             type: Injectable,
@@ -8561,7 +8573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LoginBaseService]
-                }] }, { type: i1$9.Router }]; } });
+                }] }, { type: i1$8.Router }]; } });
 
 class LoginIfCanGuard extends LoginGuard {
     // --------------------------------------------------------------------------
@@ -8601,7 +8613,7 @@ class LoginIfCanGuard extends LoginGuard {
         return super.canActivate(route, state);
     }
 }
-LoginIfCanGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginIfCanGuard, deps: [{ token: LoginBaseService }, { token: i1$9.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+LoginIfCanGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginIfCanGuard, deps: [{ token: LoginBaseService }, { token: i1$8.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 LoginIfCanGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginIfCanGuard, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginIfCanGuard, decorators: [{
             type: Injectable,
@@ -8609,7 +8621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LoginBaseService]
-                }] }, { type: i1$9.Router }]; } });
+                }] }, { type: i1$8.Router }]; } });
 
 class LoginResolver extends LoginRequireResolver {
     // --------------------------------------------------------------------------
@@ -9409,12 +9421,12 @@ BootstrapBreakpointService.DEFAULT_MD = 768;
 BootstrapBreakpointService.DEFAULT_LG = 992;
 BootstrapBreakpointService.DEFAULT_XL = 1200;
 BootstrapBreakpointService.DEFAULT_XXL = 1400;
-BootstrapBreakpointService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BootstrapBreakpointService, deps: [{ token: i1$a.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+BootstrapBreakpointService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BootstrapBreakpointService, deps: [{ token: i1$9.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 BootstrapBreakpointService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BootstrapBreakpointService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BootstrapBreakpointService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$a.BreakpointObserver }]; } });
+        }], ctorParameters: function () { return [{ type: i1$9.BreakpointObserver }]; } });
 var BootstrapBreakpointServiceEvent;
 (function (BootstrapBreakpointServiceEvent) {
     BootstrapBreakpointServiceEvent["CHANGED"] = "CHANGED";
@@ -9659,7 +9671,7 @@ class UserBaseService extends DestroyableContainer {
         if (this.login.isLoggedIn) {
             this.loginedHandler();
         }
-        this.login.events.pipe(takeUntil$1(this.destroyed)).subscribe(data => {
+        this.login.events.pipe(takeUntil(this.destroyed)).subscribe(data => {
             if (data.type === LoginBaseServiceEvent.LOGIN_COMPLETE) {
                 this.loginedHandler();
             }
@@ -9722,13 +9734,13 @@ class UserBaseService extends DestroyableContainer {
         return this.observer.asObservable();
     }
     get logined() {
-        return this.events.pipe(filter$1(item => item.type === UserBaseServiceEvent.LOGINED), map$1(item => item.data));
+        return this.events.pipe(filter(item => item.type === UserBaseServiceEvent.LOGINED), map(item => item.data));
     }
     get changed() {
-        return this.events.pipe(filter$1(item => item.type === UserBaseServiceEvent.CHANGED), map$1(item => item.data));
+        return this.events.pipe(filter(item => item.type === UserBaseServiceEvent.CHANGED), map(item => item.data));
     }
     get logouted() {
-        return this.events.pipe(filter$1(item => item.type === UserBaseServiceEvent.LOGOUTED), map$1(() => null));
+        return this.events.pipe(filter(item => item.type === UserBaseServiceEvent.LOGOUTED), map(() => null));
     }
     get hasUser() {
         return !_.isNil(this._user);
@@ -9964,7 +9976,7 @@ class TransportLazyModule {
     }
 }
 
-/* ======= */
+//
 
 /**
  * Generated bundle index. Do not edit.