x-tql-component 1.19.6 → 1.19.7

package/fesm2022/x-tql-component.mjs

@@ -48,10 +48,10 @@ class TqlUrlSafePipe {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlUrlSafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlUrlSafePipe, isStandalone: false, name: "tqlUrlSafe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlUrlSafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlUrlSafePipe, isStandalone: false, name: "tqlUrlSafe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlUrlSafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlUrlSafePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tqlUrlSafe',
@@ -79,10 +79,10 @@ class TqlHighlightPipe {
          */
         return value.replace(value === search ? value : new RegExp(search + '(?!.*' + search + ')'), replace);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlHighlightPipe, isStandalone: false, name: "tqlHighlight" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlHighlightPipe, isStandalone: false, name: "tqlHighlight" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHighlightPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tqlHighlight',
@@ -94,10 +94,10 @@ class TqlOrderByPipe {
     transform(value, key) {
         return ___default.orderBy(value, TqlUtilsService.toArray(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlOrderByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlOrderByPipe, isStandalone: false, name: "tqlOrderBy" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlOrderByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlOrderByPipe, isStandalone: false, name: "tqlOrderBy" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlOrderByPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlOrderByPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tqlOrderBy',
@@ -147,10 +147,10 @@ class TqlKeyValueOrderPipe {
             return obj;
         }, {});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlKeyValueOrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlKeyValueOrderPipe, isStandalone: false, name: "tqlKeyValueOrder" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlKeyValueOrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlKeyValueOrderPipe, isStandalone: false, name: "tqlKeyValueOrder" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlKeyValueOrderPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlKeyValueOrderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tqlKeyValueOrder',
@@ -159,17 +159,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class PipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: PipesModule, declarations: [TqlUrlSafePipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: PipesModule, declarations: [TqlUrlSafePipe,
             TqlHighlightPipe,
             TqlOrderByPipe,
             TqlKeyValueOrderPipe], imports: [CommonModule], exports: [TqlUrlSafePipe,
             TqlHighlightPipe,
             TqlOrderByPipe,
             TqlKeyValueOrderPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -678,10 +678,10 @@ class TqlInputComponent {
     onDataChanged($event) {
         this.changed.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlInputComponent, isStandalone: false, selector: "tql-input", inputs: { icon: "icon", readonly: "readonly", placeholder: "placeholder", className: "className", wrapperClassName: "wrapperClassName", inputWrapperClassName: "inputWrapperClassName", type: "type", theme: "theme", disabled: "disabled", checkError: "checkError", label: "label", labelClassName: "labelClassName", labelCustomTemplate: "labelCustomTemplate", fileContentFC: "fileContentFC", fileAccepts: "fileAccepts", filePreviewTemplate: "filePreviewTemplate", isShowPreview: "isShowPreview", checkboxLabel: "checkboxLabel", radioItems: "radioItems", templateRadio: "templateRadio", min: "min", max: "max", isAreaNonResize: "isAreaNonResize", isPreventPaste: "isPreventPaste", direction: "direction", input: "input" }, outputs: { onFileContentChange: "onFileContentChange", onFileChange: "onFileChange", blur: "blur", changed: "changed" }, ngImport: i0, template: "<div class=\" tql-input-wrapper d-flex flex-gap-2 {{directionClassName}} {{wrapperClassName}}\" [attr.type]=\"type\">\n    <ng-container *ngIf=\"label\">\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n    </ng-container>\n    <div #ref [class.d-none]=\"ref?.childNodes?.length == 0\">\n        <ng-content></ng-content>\n    </div>\n    <ng-container [ngSwitch]=\"type\" *ngIf=\"ref?.childNodes?.length == 0\">\n        <div class=\"input-wrapper {{inputWrapperClassName}}\">\n            <ng-container *ngSwitchCase=\"[TYPES.TEXT, TYPES.PASSWORD].includes(type) ? type : null\">\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.NUMBER === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"numberType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.TEXT_AREA === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"textarea\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.FILE_BROWSE === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"browseFile\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.CHECKBOX === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.RADIO === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched && checkError\">\n        <div class=\"font-size-12px text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"labelCustomTemplate\">\n        <ng-container\n            *ngTemplateOutlet=\"labelCustomTemplate;context:{label:label,isRequired:isRequired}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!labelCustomTemplate\">\n        <div class=\"label text-nowrap {{labelClassName}}\">{{ label }}<span\n            class=\"ml-1 color-radical-red\">{{ isRequired ? '*' : '' }}</span>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #defaultType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\" autocomplete=\"{{!isPreventPaste?'on':'off'}}/\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #numberType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\"\n           autocomplete=\"{{!isPreventPaste?'on':'off'}}/\"\n           [min]=\"min\"\n           [max]=\"max\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #browseFile>\n    <div (click)=\"fileInput.value = null; fileInput.click()\" class=\"cursor-pointer\">\n        <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n               [class.has-icon]=\"true\" [class.error]=\"_input?.invalid && _input?.touched\" (blur)=\"blur.emit($event)\"\n               class=\"w-100 font-size-14px pointer-events-none {{ className }} {{theme}}\"\n               (ngModelChange)=\"onDataChanged($event)\" [readonly]=\"readonly\" />\n        <ng-container>\n            <i class=\"icon {{ icon || 'fal fa-upload'}}\"></i>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!filePreviewTemplate && isShowPreview\">\n        <textarea *ngIf=\"fileContentFC\" [formControl]=\"fileContentFC\" class=\"w-100 font-size-14px mt-3 {{theme}}\"\n                  readonly></textarea>\n    </div>\n    <div *ngIf=\"filePreviewTemplate && isShowPreview\">\n        <ng-container *ngTemplateOutlet=\"filePreviewTemplate\"></ng-container>\n    </div>\n    <input type=\"file\" #fileInput (change)=\"onBrowseFile($event)\" accept=\"{{fileAccepts?.join('|')}}\" />\n</ng-template>\n<ng-template #textarea>\n    <textarea [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n              [class.error]=\"_input?.invalid && _input?.touched\" [class.textarea--resize-none]=\"isAreaNonResize\"\n              (blur)=\"blur.emit($event)\"\n              (ngModelChange)=\"onDataChanged($event)\"\n              class=\"w-100 font-size-14px {{ className }} {{theme}}\" [readonly]=\"readonly\"></textarea>\n</ng-template>\n<ng-template #checkbox>\n    <mat-checkbox [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                  [class.error]=\"_input?.invalid && _input?.touched\"\n                  (ngModelChange)=\"onDataChanged($event)\"\n                  (blur)=\"blur.emit($event)\">{{checkboxLabel}}</mat-checkbox>\n</ng-template>\n\n<ng-template #radio>\n    <mat-radio-group [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                     (ngModelChange)=\"onDataChanged($event)\"\n                     [class.error]=\"_input?.invalid && _input?.touched\" (change)=\"blur.emit($event?.value)\">\n        <mat-radio-button class=\"mr-2\" [value]=\"item?.data\" *ngFor=\"let item of radioItems\">\n            <ng-container *ngIf=\"item?.template\">\n                <ng-container *ngTemplateOutlet=\"item?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.template\">\n                {{item?.name}}\n            </ng-container>\n        </mat-radio-button>\n    </mat-radio-group>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-dark .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-dark .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-dark .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-light .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-light .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-light .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-custom .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-custom .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-custom .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .border-error{border:1px solid #ff5455}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlInputComponent, isStandalone: false, selector: "tql-input", inputs: { icon: "icon", readonly: "readonly", placeholder: "placeholder", className: "className", wrapperClassName: "wrapperClassName", inputWrapperClassName: "inputWrapperClassName", type: "type", theme: "theme", disabled: "disabled", checkError: "checkError", label: "label", labelClassName: "labelClassName", labelCustomTemplate: "labelCustomTemplate", fileContentFC: "fileContentFC", fileAccepts: "fileAccepts", filePreviewTemplate: "filePreviewTemplate", isShowPreview: "isShowPreview", checkboxLabel: "checkboxLabel", radioItems: "radioItems", templateRadio: "templateRadio", min: "min", max: "max", isAreaNonResize: "isAreaNonResize", isPreventPaste: "isPreventPaste", direction: "direction", input: "input" }, outputs: { onFileContentChange: "onFileContentChange", onFileChange: "onFileChange", blur: "blur", changed: "changed" }, ngImport: i0, template: "<div class=\" tql-input-wrapper d-flex flex-gap-2 {{directionClassName}} {{wrapperClassName}}\" [attr.type]=\"type\">\n    <ng-container *ngIf=\"label\">\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n    </ng-container>\n    <div #ref [class.d-none]=\"ref?.childNodes?.length == 0\">\n        <ng-content></ng-content>\n    </div>\n    <ng-container [ngSwitch]=\"type\" *ngIf=\"ref?.childNodes?.length == 0\">\n        <div class=\"input-wrapper {{inputWrapperClassName}}\">\n            <ng-container *ngSwitchCase=\"[TYPES.TEXT, TYPES.PASSWORD].includes(type) ? type : null\">\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.NUMBER === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"numberType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.TEXT_AREA === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"textarea\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.FILE_BROWSE === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"browseFile\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.CHECKBOX === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.RADIO === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched && checkError\">\n        <div class=\"font-size-12px text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"labelCustomTemplate\">\n        <ng-container\n            *ngTemplateOutlet=\"labelCustomTemplate;context:{label:label,isRequired:isRequired}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!labelCustomTemplate\">\n        <div class=\"label text-nowrap {{labelClassName}}\">{{ label }}<span\n            class=\"ml-1 color-radical-red\">{{ isRequired ? '*' : '' }}</span>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #defaultType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\" autocomplete=\"{{!isPreventPaste?'on':'off'}}/\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #numberType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\"\n           autocomplete=\"{{!isPreventPaste?'on':'off'}}/\"\n           [min]=\"min\"\n           [max]=\"max\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #browseFile>\n    <div (click)=\"fileInput.value = null; fileInput.click()\" class=\"cursor-pointer\">\n        <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n               [class.has-icon]=\"true\" [class.error]=\"_input?.invalid && _input?.touched\" (blur)=\"blur.emit($event)\"\n               class=\"w-100 font-size-14px pointer-events-none {{ className }} {{theme}}\"\n               (ngModelChange)=\"onDataChanged($event)\" [readonly]=\"readonly\" />\n        <ng-container>\n            <i class=\"icon {{ icon || 'fal fa-upload'}}\"></i>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!filePreviewTemplate && isShowPreview\">\n        <textarea *ngIf=\"fileContentFC\" [formControl]=\"fileContentFC\" class=\"w-100 font-size-14px mt-3 {{theme}}\"\n                  readonly></textarea>\n    </div>\n    <div *ngIf=\"filePreviewTemplate && isShowPreview\">\n        <ng-container *ngTemplateOutlet=\"filePreviewTemplate\"></ng-container>\n    </div>\n    <input type=\"file\" #fileInput (change)=\"onBrowseFile($event)\" accept=\"{{fileAccepts?.join('|')}}\" />\n</ng-template>\n<ng-template #textarea>\n    <textarea [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n              [class.error]=\"_input?.invalid && _input?.touched\" [class.textarea--resize-none]=\"isAreaNonResize\"\n              (blur)=\"blur.emit($event)\"\n              (ngModelChange)=\"onDataChanged($event)\"\n              class=\"w-100 font-size-14px {{ className }} {{theme}}\" [readonly]=\"readonly\"></textarea>\n</ng-template>\n<ng-template #checkbox>\n    <mat-checkbox [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                  [class.error]=\"_input?.invalid && _input?.touched\"\n                  (ngModelChange)=\"onDataChanged($event)\"\n                  (blur)=\"blur.emit($event)\">{{checkboxLabel}}</mat-checkbox>\n</ng-template>\n\n<ng-template #radio>\n    <mat-radio-group [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                     (ngModelChange)=\"onDataChanged($event)\"\n                     [class.error]=\"_input?.invalid && _input?.touched\" (change)=\"blur.emit($event?.value)\">\n        <mat-radio-button class=\"mr-2\" [value]=\"item?.data\" *ngFor=\"let item of radioItems\">\n            <ng-container *ngIf=\"item?.template\">\n                <ng-container *ngTemplateOutlet=\"item?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.template\">\n                {{item?.name}}\n            </ng-container>\n        </mat-radio-button>\n    </mat-radio-group>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-dark .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-dark .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-dark .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-light .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-light .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-light .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-custom .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-custom .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-custom .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .border-error{border:1px solid #ff5455}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-input', standalone: false, template: "<div class=\" tql-input-wrapper d-flex flex-gap-2 {{directionClassName}} {{wrapperClassName}}\" [attr.type]=\"type\">\n    <ng-container *ngIf=\"label\">\n        <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n    </ng-container>\n    <div #ref [class.d-none]=\"ref?.childNodes?.length == 0\">\n        <ng-content></ng-content>\n    </div>\n    <ng-container [ngSwitch]=\"type\" *ngIf=\"ref?.childNodes?.length == 0\">\n        <div class=\"input-wrapper {{inputWrapperClassName}}\">\n            <ng-container *ngSwitchCase=\"[TYPES.TEXT, TYPES.PASSWORD].includes(type) ? type : null\">\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.NUMBER === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"numberType\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.TEXT_AREA === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"textarea\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.FILE_BROWSE === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"browseFile\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.CHECKBOX === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"TYPES.RADIO === type ? type : null\">\n                <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngTemplateOutlet=\"defaultType\"></ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched && checkError\">\n        <div class=\"font-size-12px text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n<ng-template #labelTemplate>\n    <ng-container *ngIf=\"labelCustomTemplate\">\n        <ng-container\n            *ngTemplateOutlet=\"labelCustomTemplate;context:{label:label,isRequired:isRequired}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!labelCustomTemplate\">\n        <div class=\"label text-nowrap {{labelClassName}}\">{{ label }}<span\n            class=\"ml-1 color-radical-red\">{{ isRequired ? '*' : '' }}</span>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #defaultType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\" autocomplete=\"{{!isPreventPaste?'on':'off'}}/\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #numberType>\n    <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n           [class.has-icon]=\"icon\" [class.error]=\"_input?.invalid && _input?.touched\"\n           class=\"w-100 font-size-14px {{ className }} {{theme}}\" (paste)=\"noPaste()\" (drop)=\"noPaste()\"\n           (ngModelChange)=\"onDataChanged($event)\"\n           (blur)=\"blur.emit($event)\"\n           autocomplete=\"{{!isPreventPaste?'on':'off'}}/\"\n           [min]=\"min\"\n           [max]=\"max\" [readonly]=\"readonly\" />\n    <ng-container *ngIf=\"icon\">\n        <i class=\"icon {{ icon }}\"></i>\n    </ng-container>\n</ng-template>\n<ng-template #browseFile>\n    <div (click)=\"fileInput.value = null; fileInput.click()\" class=\"cursor-pointer\">\n        <input [type]=\"type\" [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n               [class.has-icon]=\"true\" [class.error]=\"_input?.invalid && _input?.touched\" (blur)=\"blur.emit($event)\"\n               class=\"w-100 font-size-14px pointer-events-none {{ className }} {{theme}}\"\n               (ngModelChange)=\"onDataChanged($event)\" [readonly]=\"readonly\" />\n        <ng-container>\n            <i class=\"icon {{ icon || 'fal fa-upload'}}\"></i>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!filePreviewTemplate && isShowPreview\">\n        <textarea *ngIf=\"fileContentFC\" [formControl]=\"fileContentFC\" class=\"w-100 font-size-14px mt-3 {{theme}}\"\n                  readonly></textarea>\n    </div>\n    <div *ngIf=\"filePreviewTemplate && isShowPreview\">\n        <ng-container *ngTemplateOutlet=\"filePreviewTemplate\"></ng-container>\n    </div>\n    <input type=\"file\" #fileInput (change)=\"onBrowseFile($event)\" accept=\"{{fileAccepts?.join('|')}}\" />\n</ng-template>\n<ng-template #textarea>\n    <textarea [placeholder]=\"placeholder\" [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n              [class.error]=\"_input?.invalid && _input?.touched\" [class.textarea--resize-none]=\"isAreaNonResize\"\n              (blur)=\"blur.emit($event)\"\n              (ngModelChange)=\"onDataChanged($event)\"\n              class=\"w-100 font-size-14px {{ className }} {{theme}}\" [readonly]=\"readonly\"></textarea>\n</ng-template>\n<ng-template #checkbox>\n    <mat-checkbox [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                  [class.error]=\"_input?.invalid && _input?.touched\"\n                  (ngModelChange)=\"onDataChanged($event)\"\n                  (blur)=\"blur.emit($event)\">{{checkboxLabel}}</mat-checkbox>\n</ng-template>\n\n<ng-template #radio>\n    <mat-radio-group [formControl]=\"_input\" [class.disabled-half]=\"disabled\"\n                     (ngModelChange)=\"onDataChanged($event)\"\n                     [class.error]=\"_input?.invalid && _input?.touched\" (change)=\"blur.emit($event?.value)\">\n        <mat-radio-button class=\"mr-2\" [value]=\"item?.data\" *ngFor=\"let item of radioItems\">\n            <ng-container *ngIf=\"item?.template\">\n                <ng-container *ngTemplateOutlet=\"item?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.template\">\n                {{item?.name}}\n            </ng-container>\n        </mat-radio-button>\n    </mat-radio-group>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-dark .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-dark .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-dark .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-dark .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-dark .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-light .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-light .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-light .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-light .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-light .tql-input-wrapper .border-error{border:1px solid #ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper{position:relative}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon{position:absolute;right:12px;line-height:36px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper .icon:after{content:\"\";position:absolute;height:24px;width:1px;right:28px;top:6px;background-color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:36px;background-color:#072a43;border-radius:2px;border:1px solid #072a43;padding:0 10px;color:#b4d2e8}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon{padding-right:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left{padding-right:10px;padding-left:45px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon{left:12px;right:initial!important}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.has-icon.left+.icon:after,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.has-icon.left+.icon:after{left:28px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.dark,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.dark{background-color:#0d3755}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.darker,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.darker{background-color:#001d31}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:focus,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.focus{border-color:#23bfff}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.error,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea.error{border-color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::placeholder{color:#5f8198;font-style:italic;opacity:1}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input:-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea:-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input::-ms-input-placeholder,::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea::-ms-input-placeholder{color:#5f8198}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input[type=file],::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea[type=file]{position:absolute;height:0;width:0;opacity:0}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper input.small{max-width:100px;height:24px;font-size:12px!important;padding:0 6px}::ng-deep html.theme-custom .tql-input-wrapper .input-wrapper textarea{height:100px;padding-top:10px}::ng-deep html.theme-custom .tql-input-wrapper .label{color:#fff}::ng-deep html.theme-custom .tql-input-wrapper .textarea--resize-none{resize:none}::ng-deep html.theme-custom .tql-input-wrapper .text-error{color:#ff5455}::ng-deep html.theme-custom .tql-input-wrapper .border-error{border:1px solid #ff5455}\n"] }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
@@ -961,10 +961,10 @@ class TqlSelectComponent extends DefaultComponent {
     onOpened() {
         this._input?.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlSelectComponent, isStandalone: false, selector: "tql-select", inputs: { mappingName: "mappingName", mappingValue: "mappingValue", disabled: "disabled", className: "className", placeholder: "placeholder", icon: "icon", multiple: "multiple", options: "options", input: "input" }, outputs: { inputValueChanged: "inputValueChanged" }, viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"select-box-container w-100\"\n     matTooltip=\"No Data\"\n     [matTooltipDisabled]=\"options?.length > 0\"\n>\n    <div\n        class=\"w-100 select-box pl-10px pr-10px align-items-center d-flex cursor-pointer {{className}}\"\n        [class.disabled-half]=\"disabled || !options?.length\"\n        [class.error]=\"_input?.invalid && _input?.touched\"\n        [matMenuTriggerFor]=\"menu\"\n        (menuOpened)=\"onOpened()\"\n    >\n        <div *ngIf=\"!!icon\" class=\"input-icon mr-10px d-flex align-items-center\">\n            <i [class]=\"icon\"></i>\n            <div class=\"line ml-10px\"></div>\n        </div>\n        <div\n            class=\"d-flex flex-shrink-1 flex-grow-1 flex-gap-3 justify-content-between align-items-center overflow-hidden\">\n            <div class=\" color-soft-blue text-truncate\" *ngIf=\"value; else placeholderTemplate\"\n                 [title]=\"value\"\n                 [innerHTML]=\"value\"></div>\n            <i class=\"fas fa-caret-down color-soft-blue\"></i>\n        </div>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"select-box-panel\" class=\"tql-select-menu-wrapper\"\n              (closed)=\"onClosed($event)\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"disabled || item?.disabled\"\n                [class.disabled-half]=\"disabled || item?.disabled\"\n                (click)=\"$event.stopPropagation();select(!item.isChecked, [item])\">\n            <div class=\"d-flex\">\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item.label\"\n                     [innerHTML]=\"item.label\"></div>\n                <div class=\"flex-grow-1\"></div>\n                <div *ngIf=\"item?.isChecked\">\n                    <i class=\"fal fa-check font-size-16px color-white ml-3\"></i>\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n    <ng-template #placeholderTemplate>\n        <span class=\" text-placeholder font-italic\">{{ placeholder }}</span>\n    </ng-template>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched\">\n        <div class=\"font-size-12px mt-1 text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n\n\n<!-- <div class=\"select-box d-flex justify-content-between align-items-center\" [ngClass]=\"classes\"\n     *ngIf=\"!icon\"\n     [matMenuTriggerFor]=\"menu\"\n     (menuOpened)=\"menuOpened()\"\n     [class.placeholder]=\"!selected || !selected.length\" [class.theme-blue]=\"color == 'blue'\"\n     [class.border-box]=\"border\">\n  <span class=\"selected-text\">\n    <ng-container *ngIf=\"!multiple\">{{ selected ? selected : placeHolder }}</ng-container>\n    <ng-container\n        *ngIf=\"multiple\">{{generatePlaceholder()}}</ng-container>\n  </span>\n    <i class=\"fa fa-chevron-down ml-3 icon mr-n2\"></i>\n</div>\n<ng-container *ngIf=\"icon\">\n    <button class=\"\" mat-icon-button [matMenuTriggerFor]=\"menu\"\n            (menuOpened)=\"menuOpened()\">\n        <i class=\"{{icon}}\"></i>\n    </button>\n</ng-container>\n<mat-menu #menu=\"matMenu\" class=\"select-box-menu mat-elevation-z2\" (closed)=\"onClose($event)\">\n    <ng-template [ngTemplateOutlet]=\"itemList\"></ng-template>\n</mat-menu>\n\n<ng-template #itemList>\n    <ng-container *ngIf=\"internalItems?.length >= 5\">\n        <div (click)=\"stopPropagation($event)\" class=\"input-search\" [class.disabled-half]=\"disabled\">\n            <input autofocus type=\"text\" [formControl]=\"searchControl\" (click)=\"stopPropagation($event)\"\n                   placeholder=\"Type to search\"/>\n        </div>\n        <div class=\"actions-group d-flex\" *ngIf=\"multiple && multipleSelect && internalItems.length > 1\"\n             [class.disabled-half]=\"disabled\">\n            <div class=\"action\" (click)=\"selectAll($event)\">\n                Select all\n            </div>\n            <div class=\"mx-1\">|</div>\n            <div class=\"action\" (click)=\"unSelectAll($event)\">\n                UnSelect all\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"action\" (click)=\"clearAll($event)\" [class.disabled-half]=\"searchControl.value.length === 0\">\n                Clear\n            </div>\n        </div>\n        <div class=\"divider\"></div>\n    </ng-container>\n    <div class=\"item-list\" [class.disabled-half]=\"disabled\">\n        <ng-container *ngFor=\"let item of internalItems | searchBy: searchControl.value:'label'\">\n            <ng-template\n                [ngTemplateOutlet]=\"multiple ? defaultMultipleSelectTemplate : itemTemplate || defaultItemTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item }\">\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"internalItems?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || defaultEmptyTemplate\"></ng-template>\n        </ng-container>\n        <ng-container\n            *ngIf=\"internalItems?.length != 0 && (internalItems | searchBy: searchControl.value:'label')?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || noSearchResultTemplate\"></ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultItemTemplate let-item=\"item\">\n    <div class=\"d-flex align-items-center pl-0 pr-10\" [class.d-none]=\"item?.isHidden\" mat-menu-item>\n        <button class=\"item bg-transparent\" (click)=\"onChange(item)\" mat-menu-item>\n            <span class=\"text\"\n                  title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        </button>\n        <span class=\"item-check\" [class.disable]>\n      <i *ngIf=\"item.label == selected\" class=\"fal fa-check\"></i>\n    </span>\n    </div>\n</ng-template>\n\n<ng-template #defaultMultipleSelectTemplate let-item=\"item\">\n    <button mat-menu-item class=\"item d-flex justify-content-between\" (click)=\"onItemCheck($event, item)\">\n        <span class=\"text\"\n              title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        <span class=\"item-check\">\n      <i *ngIf=\"item.checked\" class=\"fal fa-check\"></i>\n    </span>\n    </button>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No Item Available</button>\n</ng-template>\n\n<ng-template #noSearchResultTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No result for '{{searchControl.value}}'</button>\n</ng-template> -->\n", styles: ["::ng-deep html.theme-dark .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-dark .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-dark .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-dark .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-dark .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .select-box-check-panel{transition:none}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-light .select-box-container .select-box{background-color:#f4f5f7;height:36px;border-radius:2px;border:1px solid #F4F5F7}::ng-deep html.theme-light .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-light .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-light .select-box-container .select-box .text-placeholder{color:#fff;pointer-events:none}::ng-deep html.theme-light .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#0d3755}::ng-deep html.theme-light .select-box-panel{transition:none;color:#0d3755}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .select-box-check-panel{transition:none}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-custom .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-custom .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-custom .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-custom .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-custom .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .select-box-check-panel{transition:none}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .tql-select-menu-wrapper{min-width:100px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlSelectComponent, isStandalone: false, selector: "tql-select", inputs: { mappingName: "mappingName", mappingValue: "mappingValue", disabled: "disabled", className: "className", placeholder: "placeholder", icon: "icon", multiple: "multiple", options: "options", input: "input" }, outputs: { inputValueChanged: "inputValueChanged" }, viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"select-box-container w-100\"\n     matTooltip=\"No Data\"\n     [matTooltipDisabled]=\"options?.length > 0\"\n>\n    <div\n        class=\"w-100 select-box pl-10px pr-10px align-items-center d-flex cursor-pointer {{className}}\"\n        [class.disabled-half]=\"disabled || !options?.length\"\n        [class.error]=\"_input?.invalid && _input?.touched\"\n        [matMenuTriggerFor]=\"menu\"\n        (menuOpened)=\"onOpened()\"\n    >\n        <div *ngIf=\"!!icon\" class=\"input-icon mr-10px d-flex align-items-center\">\n            <i [class]=\"icon\"></i>\n            <div class=\"line ml-10px\"></div>\n        </div>\n        <div\n            class=\"d-flex flex-shrink-1 flex-grow-1 flex-gap-3 justify-content-between align-items-center overflow-hidden\">\n            <div class=\" color-soft-blue text-truncate\" *ngIf=\"value; else placeholderTemplate\"\n                 [title]=\"value\"\n                 [innerHTML]=\"value\"></div>\n            <i class=\"fas fa-caret-down color-soft-blue\"></i>\n        </div>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"select-box-panel\" class=\"tql-select-menu-wrapper\"\n              (closed)=\"onClosed($event)\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"disabled || item?.disabled\"\n                [class.disabled-half]=\"disabled || item?.disabled\"\n                (click)=\"$event.stopPropagation();select(!item.isChecked, [item])\">\n            <div class=\"d-flex\">\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item.label\"\n                     [innerHTML]=\"item.label\"></div>\n                <div class=\"flex-grow-1\"></div>\n                <div *ngIf=\"item?.isChecked\">\n                    <i class=\"fal fa-check font-size-16px color-white ml-3\"></i>\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n    <ng-template #placeholderTemplate>\n        <span class=\" text-placeholder font-italic\">{{ placeholder }}</span>\n    </ng-template>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched\">\n        <div class=\"font-size-12px mt-1 text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n\n\n<!-- <div class=\"select-box d-flex justify-content-between align-items-center\" [ngClass]=\"classes\"\n     *ngIf=\"!icon\"\n     [matMenuTriggerFor]=\"menu\"\n     (menuOpened)=\"menuOpened()\"\n     [class.placeholder]=\"!selected || !selected.length\" [class.theme-blue]=\"color == 'blue'\"\n     [class.border-box]=\"border\">\n  <span class=\"selected-text\">\n    <ng-container *ngIf=\"!multiple\">{{ selected ? selected : placeHolder }}</ng-container>\n    <ng-container\n        *ngIf=\"multiple\">{{generatePlaceholder()}}</ng-container>\n  </span>\n    <i class=\"fa fa-chevron-down ml-3 icon mr-n2\"></i>\n</div>\n<ng-container *ngIf=\"icon\">\n    <button class=\"\" mat-icon-button [matMenuTriggerFor]=\"menu\"\n            (menuOpened)=\"menuOpened()\">\n        <i class=\"{{icon}}\"></i>\n    </button>\n</ng-container>\n<mat-menu #menu=\"matMenu\" class=\"select-box-menu mat-elevation-z2\" (closed)=\"onClose($event)\">\n    <ng-template [ngTemplateOutlet]=\"itemList\"></ng-template>\n</mat-menu>\n\n<ng-template #itemList>\n    <ng-container *ngIf=\"internalItems?.length >= 5\">\n        <div (click)=\"stopPropagation($event)\" class=\"input-search\" [class.disabled-half]=\"disabled\">\n            <input autofocus type=\"text\" [formControl]=\"searchControl\" (click)=\"stopPropagation($event)\"\n                   placeholder=\"Type to search\"/>\n        </div>\n        <div class=\"actions-group d-flex\" *ngIf=\"multiple && multipleSelect && internalItems.length > 1\"\n             [class.disabled-half]=\"disabled\">\n            <div class=\"action\" (click)=\"selectAll($event)\">\n                Select all\n            </div>\n            <div class=\"mx-1\">|</div>\n            <div class=\"action\" (click)=\"unSelectAll($event)\">\n                UnSelect all\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"action\" (click)=\"clearAll($event)\" [class.disabled-half]=\"searchControl.value.length === 0\">\n                Clear\n            </div>\n        </div>\n        <div class=\"divider\"></div>\n    </ng-container>\n    <div class=\"item-list\" [class.disabled-half]=\"disabled\">\n        <ng-container *ngFor=\"let item of internalItems | searchBy: searchControl.value:'label'\">\n            <ng-template\n                [ngTemplateOutlet]=\"multiple ? defaultMultipleSelectTemplate : itemTemplate || defaultItemTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item }\">\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"internalItems?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || defaultEmptyTemplate\"></ng-template>\n        </ng-container>\n        <ng-container\n            *ngIf=\"internalItems?.length != 0 && (internalItems | searchBy: searchControl.value:'label')?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || noSearchResultTemplate\"></ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultItemTemplate let-item=\"item\">\n    <div class=\"d-flex align-items-center pl-0 pr-10\" [class.d-none]=\"item?.isHidden\" mat-menu-item>\n        <button class=\"item bg-transparent\" (click)=\"onChange(item)\" mat-menu-item>\n            <span class=\"text\"\n                  title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        </button>\n        <span class=\"item-check\" [class.disable]>\n      <i *ngIf=\"item.label == selected\" class=\"fal fa-check\"></i>\n    </span>\n    </div>\n</ng-template>\n\n<ng-template #defaultMultipleSelectTemplate let-item=\"item\">\n    <button mat-menu-item class=\"item d-flex justify-content-between\" (click)=\"onItemCheck($event, item)\">\n        <span class=\"text\"\n              title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        <span class=\"item-check\">\n      <i *ngIf=\"item.checked\" class=\"fal fa-check\"></i>\n    </span>\n    </button>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No Item Available</button>\n</ng-template>\n\n<ng-template #noSearchResultTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No result for '{{searchControl.value}}'</button>\n</ng-template> -->\n", styles: ["::ng-deep html.theme-dark .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-dark .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-dark .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-dark .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-dark .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .select-box-check-panel{transition:none}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-light .select-box-container .select-box{background-color:#f4f5f7;height:36px;border-radius:2px;border:1px solid #F4F5F7}::ng-deep html.theme-light .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-light .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-light .select-box-container .select-box .text-placeholder{color:#fff;pointer-events:none}::ng-deep html.theme-light .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#0d3755}::ng-deep html.theme-light .select-box-panel{transition:none;color:#0d3755}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .select-box-check-panel{transition:none}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-custom .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-custom .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-custom .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-custom .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-custom .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .select-box-check-panel{transition:none}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .tql-select-menu-wrapper{min-width:100px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-select', standalone: false, template: "<div class=\"select-box-container w-100\"\n     matTooltip=\"No Data\"\n     [matTooltipDisabled]=\"options?.length > 0\"\n>\n    <div\n        class=\"w-100 select-box pl-10px pr-10px align-items-center d-flex cursor-pointer {{className}}\"\n        [class.disabled-half]=\"disabled || !options?.length\"\n        [class.error]=\"_input?.invalid && _input?.touched\"\n        [matMenuTriggerFor]=\"menu\"\n        (menuOpened)=\"onOpened()\"\n    >\n        <div *ngIf=\"!!icon\" class=\"input-icon mr-10px d-flex align-items-center\">\n            <i [class]=\"icon\"></i>\n            <div class=\"line ml-10px\"></div>\n        </div>\n        <div\n            class=\"d-flex flex-shrink-1 flex-grow-1 flex-gap-3 justify-content-between align-items-center overflow-hidden\">\n            <div class=\" color-soft-blue text-truncate\" *ngIf=\"value; else placeholderTemplate\"\n                 [title]=\"value\"\n                 [innerHTML]=\"value\"></div>\n            <i class=\"fas fa-caret-down color-soft-blue\"></i>\n        </div>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"select-box-panel\" class=\"tql-select-menu-wrapper\"\n              (closed)=\"onClosed($event)\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"disabled || item?.disabled\"\n                [class.disabled-half]=\"disabled || item?.disabled\"\n                (click)=\"$event.stopPropagation();select(!item.isChecked, [item])\">\n            <div class=\"d-flex\">\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item.label\"\n                     [innerHTML]=\"item.label\"></div>\n                <div class=\"flex-grow-1\"></div>\n                <div *ngIf=\"item?.isChecked\">\n                    <i class=\"fal fa-check font-size-16px color-white ml-3\"></i>\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n    <ng-template #placeholderTemplate>\n        <span class=\" text-placeholder font-italic\">{{ placeholder }}</span>\n    </ng-template>\n    <ng-container *ngIf=\"_input && _input?.invalid && _input?.touched\">\n        <div class=\"font-size-12px mt-1 text-left text-error\">{{ getErrorMessage() }}</div>\n    </ng-container>\n</div>\n\n\n<!-- <div class=\"select-box d-flex justify-content-between align-items-center\" [ngClass]=\"classes\"\n     *ngIf=\"!icon\"\n     [matMenuTriggerFor]=\"menu\"\n     (menuOpened)=\"menuOpened()\"\n     [class.placeholder]=\"!selected || !selected.length\" [class.theme-blue]=\"color == 'blue'\"\n     [class.border-box]=\"border\">\n  <span class=\"selected-text\">\n    <ng-container *ngIf=\"!multiple\">{{ selected ? selected : placeHolder }}</ng-container>\n    <ng-container\n        *ngIf=\"multiple\">{{generatePlaceholder()}}</ng-container>\n  </span>\n    <i class=\"fa fa-chevron-down ml-3 icon mr-n2\"></i>\n</div>\n<ng-container *ngIf=\"icon\">\n    <button class=\"\" mat-icon-button [matMenuTriggerFor]=\"menu\"\n            (menuOpened)=\"menuOpened()\">\n        <i class=\"{{icon}}\"></i>\n    </button>\n</ng-container>\n<mat-menu #menu=\"matMenu\" class=\"select-box-menu mat-elevation-z2\" (closed)=\"onClose($event)\">\n    <ng-template [ngTemplateOutlet]=\"itemList\"></ng-template>\n</mat-menu>\n\n<ng-template #itemList>\n    <ng-container *ngIf=\"internalItems?.length >= 5\">\n        <div (click)=\"stopPropagation($event)\" class=\"input-search\" [class.disabled-half]=\"disabled\">\n            <input autofocus type=\"text\" [formControl]=\"searchControl\" (click)=\"stopPropagation($event)\"\n                   placeholder=\"Type to search\"/>\n        </div>\n        <div class=\"actions-group d-flex\" *ngIf=\"multiple && multipleSelect && internalItems.length > 1\"\n             [class.disabled-half]=\"disabled\">\n            <div class=\"action\" (click)=\"selectAll($event)\">\n                Select all\n            </div>\n            <div class=\"mx-1\">|</div>\n            <div class=\"action\" (click)=\"unSelectAll($event)\">\n                UnSelect all\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"action\" (click)=\"clearAll($event)\" [class.disabled-half]=\"searchControl.value.length === 0\">\n                Clear\n            </div>\n        </div>\n        <div class=\"divider\"></div>\n    </ng-container>\n    <div class=\"item-list\" [class.disabled-half]=\"disabled\">\n        <ng-container *ngFor=\"let item of internalItems | searchBy: searchControl.value:'label'\">\n            <ng-template\n                [ngTemplateOutlet]=\"multiple ? defaultMultipleSelectTemplate : itemTemplate || defaultItemTemplate\"\n                [ngTemplateOutletContext]=\"{ item: item }\">\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"internalItems?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || defaultEmptyTemplate\"></ng-template>\n        </ng-container>\n        <ng-container\n            *ngIf=\"internalItems?.length != 0 && (internalItems | searchBy: searchControl.value:'label')?.length == 0\">\n            <ng-template [ngTemplateOutlet]=\"emptyTemplate || noSearchResultTemplate\"></ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultItemTemplate let-item=\"item\">\n    <div class=\"d-flex align-items-center pl-0 pr-10\" [class.d-none]=\"item?.isHidden\" mat-menu-item>\n        <button class=\"item bg-transparent\" (click)=\"onChange(item)\" mat-menu-item>\n            <span class=\"text\"\n                  title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        </button>\n        <span class=\"item-check\" [class.disable]>\n      <i *ngIf=\"item.label == selected\" class=\"fal fa-check\"></i>\n    </span>\n    </div>\n</ng-template>\n\n<ng-template #defaultMultipleSelectTemplate let-item=\"item\">\n    <button mat-menu-item class=\"item d-flex justify-content-between\" (click)=\"onItemCheck($event, item)\">\n        <span class=\"text\"\n              title=\"{{ item.label }}\">{{ noMappingLabel ? item.label : (item.label | mappingLabel) }}</span>\n        <span class=\"item-check\">\n      <i *ngIf=\"item.checked\" class=\"fal fa-check\"></i>\n    </span>\n    </button>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No Item Available</button>\n</ng-template>\n\n<ng-template #noSearchResultTemplate let-item=\"item\">\n    <button mat-menu-item class=\"disabled\">No result for '{{searchControl.value}}'</button>\n</ng-template> -->\n", styles: ["::ng-deep html.theme-dark .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-dark .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-dark .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-dark .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-dark .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .select-box-check-panel{transition:none}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-dark .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-dark .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-dark .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-light .select-box-container .select-box{background-color:#f4f5f7;height:36px;border-radius:2px;border:1px solid #F4F5F7}::ng-deep html.theme-light .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-light .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-light .select-box-container .select-box .text-placeholder{color:#fff;pointer-events:none}::ng-deep html.theme-light .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#0d3755}::ng-deep html.theme-light .select-box-panel{transition:none;color:#0d3755}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .select-box-check-panel{transition:none}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#fff}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-light .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-light .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-light .tql-select-menu-wrapper{min-width:100px!important}::ng-deep html.theme-custom .select-box-container .select-box{background-color:#072a43;height:36px;border-radius:2px;border:1px solid #072a43}::ng-deep html.theme-custom .select-box-container .select-box.error{border-color:#ff5455}::ng-deep html.theme-custom .select-box-container .select-box.small{height:24px;font-size:12px!important;padding:0 6px!important}::ng-deep html.theme-custom .select-box-container .select-box .text-placeholder{color:#5f8198;pointer-events:none}::ng-deep html.theme-custom .select-box-container .select-box .input-icon .line{width:1px;height:24px;background-color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel{transition:none;color:#b4d2e8}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:0;min-height:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mdc-list-item__primary-text,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mdc-list-item__primary-text{width:100%}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item{border-radius:0!important;padding:0 10px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .mat-menu-item.active,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-panel+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .select-box-check-panel{transition:none}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane{max-height:350px;background-color:#215d87}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel{max-width:100%;background-color:transparent;border-radius:0;min-width:180px!important;min-height:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content{height:100%;padding:0}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item{border-radius:0!important;padding:0 15px;line-height:40px;height:40px}::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item:hover,::ng-deep html.theme-custom .select-box-check-panel+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item.active{background-color:#001d3133}::ng-deep html.theme-custom .select-box-check-panel.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:#0006}::ng-deep html.theme-custom .tql-select-menu-wrapper{min-width:100px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matMenuTrigger: [{
@@ -1031,10 +1031,10 @@ class TqlHeaderControllerService {
         }
         return of(new Date());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderControllerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1079,10 +1079,10 @@ class TqlNavbarControllerService {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarControllerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1108,10 +1108,10 @@ class TqlCollapseControllerService {
             status: TqlCollapseControllerService.ENUM_COLLAPSE_STATUS.EXPAND,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseControllerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1146,10 +1146,10 @@ class TqlDynamicControllerService {
         }
         return of(new Date());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicControllerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1210,10 +1210,10 @@ class TqlCollapseComponent extends DefaultComponent {
         }
         return style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseComponent, deps: [{ token: TqlCollapseControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlCollapseComponent, isStandalone: false, selector: "tql-collapse", inputs: { name: "name", label: "label", labelClassName: "labelClassName", hasLine: "hasLine", hideIconWhenCollapsed: "hideIconWhenCollapsed", hideIcon: "hideIcon", isCollapse: "isCollapse", offset: "offset", direction: "direction" }, outputs: { event: "event" }, host: { properties: { "class.tql-collapse-wrapper": "this.initializeClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex collapse-icon align-items-center flex-gap-2 cursor-pointer\" matRipple\n     (click)=\"toggleCollapse();$event.stopPropagation();\"\n     *ngIf=\"!hideIcon\"\n     [class.hide-on-collapsed]=\"hideIconWhenCollapsed\"\n     [style]=\"generateOffset()\"\n     [class.px-2]=\"label\">\n    <div class=\"d-flex align-items-center justify-content-center\">\n        <ng-container [ngSwitch]=\"direction\">\n            <i *ngSwitchCase=\"directions.RIGHT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-right' : 'fa-angle-left' }}\"></i>\n            <i *ngSwitchCase=\"directions.LEFT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-left' : 'fa-angle-right' }}\"></i>\n            <i *ngSwitchCase=\"directions.TOP\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-up' : 'fa-angle-down' }}\"></i>\n            <i *ngSwitchCase=\"directions.BOTTOM\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-down' : 'fa-angle-up' }}\"></i>\n        </ng-container>\n    </div>\n    <div class=\"{{labelClassName}}\" *ngIf=\"label\">{{label}}</div>\n</div>\n<div class=\"line\" *ngIf=\"hasLine\"></div>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-dark .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-dark .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-light .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-light .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-light .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#fff;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-custom .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-custom .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseComponent, deps: [{ token: TqlCollapseControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlCollapseComponent, isStandalone: false, selector: "tql-collapse", inputs: { name: "name", label: "label", labelClassName: "labelClassName", hasLine: "hasLine", hideIconWhenCollapsed: "hideIconWhenCollapsed", hideIcon: "hideIcon", isCollapse: "isCollapse", offset: "offset", direction: "direction" }, outputs: { event: "event" }, host: { properties: { "class.tql-collapse-wrapper": "this.initializeClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex collapse-icon align-items-center flex-gap-2 cursor-pointer\" matRipple\n     (click)=\"toggleCollapse();$event.stopPropagation();\"\n     *ngIf=\"!hideIcon\"\n     [class.hide-on-collapsed]=\"hideIconWhenCollapsed\"\n     [style]=\"generateOffset()\"\n     [class.px-2]=\"label\">\n    <div class=\"d-flex align-items-center justify-content-center\">\n        <ng-container [ngSwitch]=\"direction\">\n            <i *ngSwitchCase=\"directions.RIGHT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-right' : 'fa-angle-left' }}\"></i>\n            <i *ngSwitchCase=\"directions.LEFT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-left' : 'fa-angle-right' }}\"></i>\n            <i *ngSwitchCase=\"directions.TOP\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-up' : 'fa-angle-down' }}\"></i>\n            <i *ngSwitchCase=\"directions.BOTTOM\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-down' : 'fa-angle-up' }}\"></i>\n        </ng-container>\n    </div>\n    <div class=\"{{labelClassName}}\" *ngIf=\"label\">{{label}}</div>\n</div>\n<div class=\"line\" *ngIf=\"hasLine\"></div>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-dark .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-dark .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-light .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-light .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-light .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#fff;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-custom .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-custom .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-collapse', standalone: false, template: "<div class=\"d-flex collapse-icon align-items-center flex-gap-2 cursor-pointer\" matRipple\n     (click)=\"toggleCollapse();$event.stopPropagation();\"\n     *ngIf=\"!hideIcon\"\n     [class.hide-on-collapsed]=\"hideIconWhenCollapsed\"\n     [style]=\"generateOffset()\"\n     [class.px-2]=\"label\">\n    <div class=\"d-flex align-items-center justify-content-center\">\n        <ng-container [ngSwitch]=\"direction\">\n            <i *ngSwitchCase=\"directions.RIGHT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-right' : 'fa-angle-left' }}\"></i>\n            <i *ngSwitchCase=\"directions.LEFT\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-left' : 'fa-angle-right' }}\"></i>\n            <i *ngSwitchCase=\"directions.TOP\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-up' : 'fa-angle-down' }}\"></i>\n            <i *ngSwitchCase=\"directions.BOTTOM\"\n               class=\"fal icon font-18 {{ isCollapse ? 'fa-angle-down' : 'fa-angle-up' }}\"></i>\n        </ng-container>\n    </div>\n    <div class=\"{{labelClassName}}\" *ngIf=\"label\">{{label}}</div>\n</div>\n<div class=\"line\" *ngIf=\"hasLine\"></div>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-dark .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-dark .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-dark .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-dark .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-dark .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-dark .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-dark .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-light .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-light .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-light .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-light .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-light .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-light .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-light .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#fff;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-light .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container{display:flex;align-items:center}::ng-deep html.theme-custom .tql-collapse-container.animation{transition:all .5s}::ng-deep html.theme-custom .tql-collapse-container:not(:hover) .collapse-icon.hide-on-collapsed{opacity:0!important}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;left:-12px}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.left.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .collapse-icon{opacity:0;left:-24px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.left.collapsed{width:0!important;min-width:0;margin-right:12px}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper{top:0;left:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.left .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;right:-12px}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.right.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .collapse-icon{opacity:0;right:-24px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.right.collapsed{width:0!important;min-width:0;margin-left:12px}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper{top:0;right:0;height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line{height:100%}::ng-deep html.theme-custom .tql-collapse-container.right .tql-collapse-wrapper .line:before{height:100%;width:1px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;bottom:-12px}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.top.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .collapse-icon{opacity:0;bottom:-24px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.top.collapsed{height:0!important;min-height:0!important;margin-bottom:12px}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper{top:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.top .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon{opacity:1;top:-12px}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .collapse-icon .icon,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .collapse-icon .icon{color:#fff}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom:hover .tql-collapse-wrapper .line,::ng-deep html.theme-custom .tql-collapse-container.bottom.always-icon .tql-collapse-wrapper .line{opacity:1}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .collapse-icon{opacity:0;top:-24px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{opacity:0}::ng-deep html.theme-custom .tql-collapse-container.bottom.collapsed{height:0!important;min-height:0!important;margin-top:12px}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper{bottom:0;left:0;width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line{width:100%}::ng-deep html.theme-custom .tql-collapse-container.bottom .tql-collapse-wrapper .line:before{bottom:0;top:0;height:1px;width:100%}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper{position:absolute;z-index:11}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon{border:0;position:absolute;transition:all .4s;transition-delay:.2s;z-index:11;min-width:24px!important;height:24px!important;border-radius:24px;background-color:#215d87;display:flex;align-items:center;justify-content:center}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .collapse-icon:hover{background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line{transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .tql-collapse-container .tql-collapse-wrapper .line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .tql-collapse-container .show-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .hide-on-collapsed{display:none}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed{display:block;position:relative}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed:hover{background-color:#215d874d}::ng-deep html.theme-custom .tql-collapse-container.collapsed .show-on-collapsed .has-group-hint{position:absolute;right:5px;top:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: TqlCollapseControllerService }], propDecorators: { name: [{
@@ -1261,10 +1261,10 @@ class TqlLoadingBarComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlLoadingBarComponent, deps: [{ token: i1$2.ThemeControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlLoadingBarComponent, isStandalone: false, selector: "tql-loading-bar", inputs: { color: "color", hasSpinner: "hasSpinner", isFixed: "isFixed" }, ngImport: i0, template: "<ngx-loading-bar [includeSpinner]=\"hasSpinner\" [color]=\"color\" height=\"3px\" [fixed]=\"isFixed\"></ngx-loading-bar>\n\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.LoadingBarComponent, selector: "ngx-loading-bar" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlLoadingBarComponent, deps: [{ token: i1$2.ThemeControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlLoadingBarComponent, isStandalone: false, selector: "tql-loading-bar", inputs: { color: "color", hasSpinner: "hasSpinner", isFixed: "isFixed" }, ngImport: i0, template: "<ngx-loading-bar [includeSpinner]=\"hasSpinner\" [color]=\"color\" height=\"3px\" [fixed]=\"isFixed\"></ngx-loading-bar>\n\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.LoadingBarComponent, selector: "ngx-loading-bar" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlLoadingBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlLoadingBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-loading-bar', standalone: false, template: "<ngx-loading-bar [includeSpinner]=\"hasSpinner\" [color]=\"color\" height=\"3px\" [fixed]=\"isFixed\"></ngx-loading-bar>\n\n" }]
         }], ctorParameters: () => [{ type: i1$2.ThemeControllerService }], propDecorators: { color: [{
@@ -1285,10 +1285,10 @@ class TqlTabComponent {
         this.tabGroup._tabs = _.cloneDeep(this.tabContent);
         this._ChangeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlTabComponent, isStandalone: false, selector: "tql-tab", outputs: { selectedTabChange: "selectedTabChange" }, queries: [{ propertyName: "tabContent", predicate: MatTab }], viewQueries: [{ propertyName: "tabGroup", first: true, predicate: MatTabGroup, descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group class=\"tql-tab\" (selectedIndexChange)=\"selectedTabChange.emit($event)\">\n    <ng-content></ng-content>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlTabComponent, isStandalone: false, selector: "tql-tab", outputs: { selectedTabChange: "selectedTabChange" }, queries: [{ propertyName: "tabContent", predicate: MatTab }], viewQueries: [{ propertyName: "tabGroup", first: true, predicate: MatTabGroup, descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group class=\"tql-tab\" (selectedIndexChange)=\"selectedTabChange.emit($event)\">\n    <ng-content></ng-content>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-tab', standalone: false, template: "<mat-tab-group class=\"tql-tab\" (selectedIndexChange)=\"selectedTabChange.emit($event)\">\n    <ng-content></ng-content>\n</mat-tab-group>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabGroup: [{
@@ -1399,10 +1399,10 @@ class TqlResizableComponent {
             return $event.clientY;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlResizableComponent, isStandalone: false, selector: "tql-resizable", inputs: { parentElement: "parentElement", directions: "directions" }, host: { listeners: { "window:mousemove": "resize($event)", "window:mouseup": "stopResize($event)" }, properties: { "class.resizable-group": "this.initializeClass" } }, ngImport: i0, template: "<div *ngFor=\"let dir of directions\" class=\"resizable-bar {{dir}}\">\n    <div class=\"resizable-line\" (mousedown)=\"onResizeStart($event,dir)\"></div>\n</div>\n", styles: ["::ng-deep html.theme-dark .resizable-container.resizing{transition:none!important}::ng-deep html.theme-dark .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-container.resizing{transition:none!important}::ng-deep html.theme-light .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-container.resizing{transition:none!important}::ng-deep html.theme-custom .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlResizableComponent, isStandalone: false, selector: "tql-resizable", inputs: { parentElement: "parentElement", directions: "directions" }, host: { listeners: { "window:mousemove": "resize($event)", "window:mouseup": "stopResize($event)" }, properties: { "class.resizable-group": "this.initializeClass" } }, ngImport: i0, template: "<div *ngFor=\"let dir of directions\" class=\"resizable-bar {{dir}}\">\n    <div class=\"resizable-line\" (mousedown)=\"onResizeStart($event,dir)\"></div>\n</div>\n", styles: ["::ng-deep html.theme-dark .resizable-container.resizing{transition:none!important}::ng-deep html.theme-dark .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-container.resizing{transition:none!important}::ng-deep html.theme-light .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-container.resizing{transition:none!important}::ng-deep html.theme-custom .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-resizable', standalone: false, template: "<div *ngFor=\"let dir of directions\" class=\"resizable-bar {{dir}}\">\n    <div class=\"resizable-line\" (mousedown)=\"onResizeStart($event,dir)\"></div>\n</div>\n", styles: ["::ng-deep html.theme-dark .resizable-container.resizing{transition:none!important}::ng-deep html.theme-dark .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-dark .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-dark .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-dark .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-container.resizing{transition:none!important}::ng-deep html.theme-light .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#fff}::ng-deep html.theme-light .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-light .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-light .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-container.resizing{transition:none!important}::ng-deep html.theme-custom .resizable-group .resizable-bar{position:absolute;z-index:10}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line{width:100%;height:100%;transition:all .4s;transition-delay:.2s}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:before{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar .resizable-line:after{content:\"\";position:absolute;background-color:#119ed9}::ng-deep html.theme-custom .resizable-group .resizable-bar.top{width:100%;height:20px;top:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.top:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:before{bottom:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.top .resizable-line:after{left:0;bottom:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom{width:100%;height:20px;bottom:-20px;left:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom:hover{cursor:n-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:before{top:-4px;left:calc(50% - 10px);width:20px;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.bottom .resizable-line:after{left:0;top:0;width:100%;height:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left{height:100%;width:20px;left:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.left:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:before{right:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.left .resizable-line:after{right:0;top:0;height:100%;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right{height:100%;width:20px;right:-20px;top:0}::ng-deep html.theme-custom .resizable-group .resizable-bar.right:hover{cursor:e-resize}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:before{left:-4px;top:calc(50% - 10px);height:20px;width:1px}::ng-deep html.theme-custom .resizable-group .resizable-bar.right .resizable-line:after{left:0;top:0;height:100%;width:1px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { parentElement: [{
@@ -1435,10 +1435,10 @@ class TqlSpinnerComponent {
         this.diameter = 10;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlSpinnerComponent, isStandalone: false, selector: "tql-spinner", inputs: { color: "color", diameter: "diameter" }, ngImport: i0, template: "<div class=\"tql-spinner\" [class.tql-spinner-customClr]=\"color\" style=\"--clr:{{color}}\">\n    <mat-spinner [diameter]=\"diameter\"></mat-spinner>\n</div>\n", styles: ["div{margin-bottom:20px}::ng-deep .tql-spinner-customClr .mat-progress-spinner svg circle{stroke:var(--clr)}\n"], dependencies: [{ kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlSpinnerComponent, isStandalone: false, selector: "tql-spinner", inputs: { color: "color", diameter: "diameter" }, ngImport: i0, template: "<div class=\"tql-spinner\" [class.tql-spinner-customClr]=\"color\" style=\"--clr:{{color}}\">\n    <mat-spinner [diameter]=\"diameter\"></mat-spinner>\n</div>\n", styles: ["div{margin-bottom:20px}::ng-deep .tql-spinner-customClr .mat-progress-spinner svg circle{stroke:var(--clr)}\n"], dependencies: [{ kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-spinner', standalone: false, template: "<div class=\"tql-spinner\" [class.tql-spinner-customClr]=\"color\" style=\"--clr:{{color}}\">\n    <mat-spinner [diameter]=\"diameter\"></mat-spinner>\n</div>\n", styles: ["div{margin-bottom:20px}::ng-deep .tql-spinner-customClr .mat-progress-spinner svg circle{stroke:var(--clr)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{
@@ -1597,10 +1597,10 @@ class TqlTableFilterWidgetComponent extends DefaultComponent {
         this.isOpened = false;
         console.log('close');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableFilterWidgetComponent, deps: [{ token: i1$4.TqlTableControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlTableFilterWidgetComponent, isStandalone: false, selector: "lib-tql-table-filter-widget", inputs: { hasSort: "hasSort", filterKey: "filterKey", iconClassName: "iconClassName", emptyLabel: "emptyLabel", list: "list" }, outputs: { event: "event" }, usesInheritance: true, ngImport: i0, template: "<button mat-icon-button class=\"small icon\" [matMenuTriggerFor]=\"filterMenu\" [class.showed]=\"hasFilter() || isOpened\"\n        (menuOpened)=\"onOpened()\"\n        (menuClosed)=\"onClosed()\">\n    <i class=\"fa-light fa-filter font-size-12px filtered\" *ngIf=\"hasFilter()\" matTooltip=\"filtered\"></i>\n    <i class=\"{{iconClassName}} \" *ngIf=\"!hasFilter()\"></i>\n</button>\n<mat-menu #filterMenu=\"matMenu\" backdropClass=\"table-filter-menu-wrapper\">\n    <div class=\"d-flex flex-column overflow-hidden h-100\" (click)=\"$event.stopPropagation();\">\n        <div class=\"d-flex flex-column sort-group\" *ngIf=\"hasSort\">\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.ASC === sort\"\n                 (click)=\"toggleSort(sortDirections.ASC)\">Sort <span class=\"font-weight-bold\">A - Z</span></div>\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.DES === sort\"\n                 (click)=\"toggleSort(sortDirections.DES)\">Sort <span class=\"font-weight-bold\">Z - A</span></div>\n        </div>\n        <div class=\"filter-group d-flex flex-column overflow-hidden\">\n            <div class=\"px-3 mt-2\">\n                <tql-input icon=\"fa-light fa-magnifying-glass\" class=\"search-box\" placeholder=\"Search\"\n                           (changed)=\"onSearchChanged($event)\"\n                           [input]=\"searchFC\"></tql-input>\n            </div>\n            <div class=\"d-flex px-3 py-2\">\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"d-flex flex-gap-1\">\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === list?.length\"\n                         (click)=\"selectAll($event)\">\n                        Select all\n                    </div>\n                    <div class=\"mx-1\">|</div>\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === 0\"\n                         (click)=\"unSelectAll($event)\">\n                        Clear\n                    </div>\n                </div>\n            </div>\n            <div class=\"px-3 pb-2\">\n                <hr>\n            </div>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <div class=\"d-flex flex-column h-100 overflow-y-auto\">\n                    <div *ngFor=\"let item of sortDisplayedList()\"\n                         class=\"item d-flex flex-gap-2 px-3 py-2 align-items-center cursor-pointer\"\n                         [class.selected]=\"selectedList?.includes(item)\"\n                         (click)=\"toggleFilter([item])\"\n                         matRipple>\n                        <div class=\"flex-grow-1 text-truncate\">\n                            <ng-container *ngTemplateOutlet=\"labelTemp;context:{label:item?.label}\"></ng-container>\n                        </div>\n                        <div class=\"icon\">\n                            <i class=\"fa-light fa-check\"></i>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</mat-menu>\n\n<ng-template #labelTemp let-label=\"label\">\n    <span\n        [title]=\"(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label\">\n        {{(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label}}\n    </span>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#0d3755;width:240px;height:350px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: TqlInputComponent, selector: "tql-input", inputs: ["icon", "readonly", "placeholder", "className", "wrapperClassName", "inputWrapperClassName", "type", "theme", "disabled", "checkError", "label", "labelClassName", "labelCustomTemplate", "fileContentFC", "fileAccepts", "filePreviewTemplate", "isShowPreview", "checkboxLabel", "radioItems", "templateRadio", "min", "max", "isAreaNonResize", "isPreventPaste", "direction", "input"], outputs: ["onFileContentChange", "onFileChange", "blur", "changed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableFilterWidgetComponent, deps: [{ token: i1$4.TqlTableControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlTableFilterWidgetComponent, isStandalone: false, selector: "lib-tql-table-filter-widget", inputs: { hasSort: "hasSort", filterKey: "filterKey", iconClassName: "iconClassName", emptyLabel: "emptyLabel", list: "list" }, outputs: { event: "event" }, usesInheritance: true, ngImport: i0, template: "<button mat-icon-button class=\"small icon\" [matMenuTriggerFor]=\"filterMenu\" [class.showed]=\"hasFilter() || isOpened\"\n        (menuOpened)=\"onOpened()\"\n        (menuClosed)=\"onClosed()\">\n    <i class=\"fa-light fa-filter font-size-12px filtered\" *ngIf=\"hasFilter()\" matTooltip=\"filtered\"></i>\n    <i class=\"{{iconClassName}} \" *ngIf=\"!hasFilter()\"></i>\n</button>\n<mat-menu #filterMenu=\"matMenu\" backdropClass=\"table-filter-menu-wrapper\">\n    <div class=\"d-flex flex-column overflow-hidden h-100\" (click)=\"$event.stopPropagation();\">\n        <div class=\"d-flex flex-column sort-group\" *ngIf=\"hasSort\">\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.ASC === sort\"\n                 (click)=\"toggleSort(sortDirections.ASC)\">Sort <span class=\"font-weight-bold\">A - Z</span></div>\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.DES === sort\"\n                 (click)=\"toggleSort(sortDirections.DES)\">Sort <span class=\"font-weight-bold\">Z - A</span></div>\n        </div>\n        <div class=\"filter-group d-flex flex-column overflow-hidden\">\n            <div class=\"px-3 mt-2\">\n                <tql-input icon=\"fa-light fa-magnifying-glass\" class=\"search-box\" placeholder=\"Search\"\n                           (changed)=\"onSearchChanged($event)\"\n                           [input]=\"searchFC\"></tql-input>\n            </div>\n            <div class=\"d-flex px-3 py-2\">\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"d-flex flex-gap-1\">\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === list?.length\"\n                         (click)=\"selectAll($event)\">\n                        Select all\n                    </div>\n                    <div class=\"mx-1\">|</div>\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === 0\"\n                         (click)=\"unSelectAll($event)\">\n                        Clear\n                    </div>\n                </div>\n            </div>\n            <div class=\"px-3 pb-2\">\n                <hr>\n            </div>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <div class=\"d-flex flex-column h-100 overflow-y-auto\">\n                    <div *ngFor=\"let item of sortDisplayedList()\"\n                         class=\"item d-flex flex-gap-2 px-3 py-2 align-items-center cursor-pointer\"\n                         [class.selected]=\"selectedList?.includes(item)\"\n                         (click)=\"toggleFilter([item])\"\n                         matRipple>\n                        <div class=\"flex-grow-1 text-truncate\">\n                            <ng-container *ngTemplateOutlet=\"labelTemp;context:{label:item?.label}\"></ng-container>\n                        </div>\n                        <div class=\"icon\">\n                            <i class=\"fa-light fa-check\"></i>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</mat-menu>\n\n<ng-template #labelTemp let-label=\"label\">\n    <span\n        [title]=\"(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label\">\n        {{(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label}}\n    </span>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#0d3755;width:240px;height:350px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: TqlInputComponent, selector: "tql-input", inputs: ["icon", "readonly", "placeholder", "className", "wrapperClassName", "inputWrapperClassName", "type", "theme", "disabled", "checkError", "label", "labelClassName", "labelCustomTemplate", "fileContentFC", "fileAccepts", "filePreviewTemplate", "isShowPreview", "checkboxLabel", "radioItems", "templateRadio", "min", "max", "isAreaNonResize", "isPreventPaste", "direction", "input"], outputs: ["onFileContentChange", "onFileChange", "blur", "changed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableFilterWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableFilterWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tql-table-filter-widget', standalone: false, template: "<button mat-icon-button class=\"small icon\" [matMenuTriggerFor]=\"filterMenu\" [class.showed]=\"hasFilter() || isOpened\"\n        (menuOpened)=\"onOpened()\"\n        (menuClosed)=\"onClosed()\">\n    <i class=\"fa-light fa-filter font-size-12px filtered\" *ngIf=\"hasFilter()\" matTooltip=\"filtered\"></i>\n    <i class=\"{{iconClassName}} \" *ngIf=\"!hasFilter()\"></i>\n</button>\n<mat-menu #filterMenu=\"matMenu\" backdropClass=\"table-filter-menu-wrapper\">\n    <div class=\"d-flex flex-column overflow-hidden h-100\" (click)=\"$event.stopPropagation();\">\n        <div class=\"d-flex flex-column sort-group\" *ngIf=\"hasSort\">\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.ASC === sort\"\n                 (click)=\"toggleSort(sortDirections.ASC)\">Sort <span class=\"font-weight-bold\">A - Z</span></div>\n            <div class=\"px-3 py-2 cursor-pointer\" matRipple\n                 [class.selected]=\"sortDirections.DES === sort\"\n                 (click)=\"toggleSort(sortDirections.DES)\">Sort <span class=\"font-weight-bold\">Z - A</span></div>\n        </div>\n        <div class=\"filter-group d-flex flex-column overflow-hidden\">\n            <div class=\"px-3 mt-2\">\n                <tql-input icon=\"fa-light fa-magnifying-glass\" class=\"search-box\" placeholder=\"Search\"\n                           (changed)=\"onSearchChanged($event)\"\n                           [input]=\"searchFC\"></tql-input>\n            </div>\n            <div class=\"d-flex px-3 py-2\">\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"d-flex flex-gap-1\">\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === list?.length\"\n                         (click)=\"selectAll($event)\">\n                        Select all\n                    </div>\n                    <div class=\"mx-1\">|</div>\n                    <div class=\"action cursor-pointer\"\n                         [class.disabled-half]=\"list?.length <= 0 || selectedList?.length === 0\"\n                         (click)=\"unSelectAll($event)\">\n                        Clear\n                    </div>\n                </div>\n            </div>\n            <div class=\"px-3 pb-2\">\n                <hr>\n            </div>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <div class=\"d-flex flex-column h-100 overflow-y-auto\">\n                    <div *ngFor=\"let item of sortDisplayedList()\"\n                         class=\"item d-flex flex-gap-2 px-3 py-2 align-items-center cursor-pointer\"\n                         [class.selected]=\"selectedList?.includes(item)\"\n                         (click)=\"toggleFilter([item])\"\n                         matRipple>\n                        <div class=\"flex-grow-1 text-truncate\">\n                            <ng-container *ngTemplateOutlet=\"labelTemp;context:{label:item?.label}\"></ng-container>\n                        </div>\n                        <div class=\"icon\">\n                            <i class=\"fa-light fa-check\"></i>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</mat-menu>\n\n<ng-template #labelTemp let-label=\"label\">\n    <span\n        [title]=\"(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label\">\n        {{(emptyLabel && (label === null || label === undefined)) ? emptyLabel : label}}\n    </span>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-dark .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-dark .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-light .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#0d3755;width:240px;height:350px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-light .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon{opacity:0;pointer-events:none;display:none}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content .icon.showed{opacity:1;pointer-events:initial;display:initial}::ng-deep html.theme-custom .tql-table-filter-widget-wrapper>.content:hover .icon{display:initial;opacity:1;pointer-events:initial}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel{background-color:#215d87}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content{color:#b4d2e8;width:240px;height:350px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .sort-group>*.selected,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .sort-group>*.selected{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box input,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box input{height:30px;background-color:#0d3755;border-width:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon{line-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .search-box .icon:after,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .search-box .icon:after{opacity:0}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content hr,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content hr{background-color:#b4d2e8}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .action,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .action{color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item{height:30px;min-height:30px}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item:hover,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item:hover{background-color:#1a4f75;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item .icon{opacity:0;color:#fff}::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-menu-content .filter-group .item.selected .icon,::ng-deep html.theme-custom .table-filter-menu-wrapper+div .cdk-overlay-pane .mat-mdc-menu-panel .mat-mdc-menu-content .filter-group .item.selected .icon{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.TqlTableControllerService }], propDecorators: { event: [{
@@ -1626,8 +1626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 })(TqlTableFilterWidgetComponent || (TqlTableFilterWidgetComponent = {}));
 
 class BasicModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: BasicModule, declarations: [TqlInputComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: BasicModule, declarations: [TqlInputComponent,
             TqlSelectComponent,
             TqlCollapseComponent,
             TqlLoadingBarComponent,
@@ -1642,9 +1642,9 @@ class BasicModule {
             TqlResizableComponent,
             TqlSpinnerComponent,
             TqlTableFilterWidgetComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BasicModule, imports: [CommonModule, MaterialsModule, LoadingBarHttpClientModule, LoadingBarModule, ReactiveFormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasicModule, imports: [CommonModule, MaterialsModule, LoadingBarHttpClientModule, LoadingBarModule, ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BasicModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasicModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1691,10 +1691,10 @@ class NgVarDirective {
         };
         this.hasView = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: NgVarDirective, isStandalone: false, selector: "[ngVar]", inputs: { ngVar: "ngVar" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: NgVarDirective, isStandalone: false, selector: "[ngVar]", inputs: { ngVar: "ngVar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgVarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgVarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngVar]',
@@ -1726,10 +1726,10 @@ class TqlHelperService {
         }
         return { compressed: compressGroup, uncompressed: notCompressGroup };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHelperService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHelperService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1751,10 +1751,10 @@ class TqlActionBarMenuComponent {
             trigger.closeMenu();
         }, 50);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionBarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlActionBarMenuComponent, isStandalone: false, selector: "tql-action-bar-menu", inputs: { item: "item", data: "data" }, ngImport: i0, template: "<ng-template #itemTemp let-item=\"item\">\n    <ng-container *ngIf=\"item?.template\">\n        <ng-container *ngTemplateOutlet=\"item.template;context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!item?.template\">\n        <i *ngIf=\"item?.iconClassName\" class=\"{{ item?.iconClassName }}\"></i>\n        <div class=\"got-14 font-weight-normal ml-2 flex-grow-1\">{{ item?.name }}</div>\n    </ng-container>\n</ng-template>\n<ng-template #menuItem>\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            (click)=\"item?.onClick(data)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n    </button>\n</ng-template>\n<ng-container *ngIf=\"item?.children?.length > 0;else menuItem\">\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            [matMenuTriggerFor]=\"submenu\"\n            #menuTrigger=\"matMenuTrigger\"\n            (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n        <mat-menu #submenu=\"matMenu\">\n            <div (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\">\n                <ng-container *ngFor=\"let subItem of item?.children\">\n                    <tql-action-bar-menu [item]=\"subItem\"></tql-action-bar-menu>\n                </ng-container>\n            </div>\n        </mat-menu>\n    </button>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: TqlActionBarMenuComponent, selector: "tql-action-bar-menu", inputs: ["item", "data"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionBarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlActionBarMenuComponent, isStandalone: false, selector: "tql-action-bar-menu", inputs: { item: "item", data: "data" }, ngImport: i0, template: "<ng-template #itemTemp let-item=\"item\">\n    <ng-container *ngIf=\"item?.template\">\n        <ng-container *ngTemplateOutlet=\"item.template;context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!item?.template\">\n        <i *ngIf=\"item?.iconClassName\" class=\"{{ item?.iconClassName }}\"></i>\n        <div class=\"got-14 font-weight-normal ml-2 flex-grow-1\">{{ item?.name }}</div>\n    </ng-container>\n</ng-template>\n<ng-template #menuItem>\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            (click)=\"item?.onClick(data)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n    </button>\n</ng-template>\n<ng-container *ngIf=\"item?.children?.length > 0;else menuItem\">\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            [matMenuTriggerFor]=\"submenu\"\n            #menuTrigger=\"matMenuTrigger\"\n            (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n        <mat-menu #submenu=\"matMenu\">\n            <div (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\">\n                <ng-container *ngFor=\"let subItem of item?.children\">\n                    <tql-action-bar-menu [item]=\"subItem\"></tql-action-bar-menu>\n                </ng-container>\n            </div>\n        </mat-menu>\n    </button>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: TqlActionBarMenuComponent, selector: "tql-action-bar-menu", inputs: ["item", "data"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionBarMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionBarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-action-bar-menu', standalone: false, template: "<ng-template #itemTemp let-item=\"item\">\n    <ng-container *ngIf=\"item?.template\">\n        <ng-container *ngTemplateOutlet=\"item.template;context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!item?.template\">\n        <i *ngIf=\"item?.iconClassName\" class=\"{{ item?.iconClassName }}\"></i>\n        <div class=\"got-14 font-weight-normal ml-2 flex-grow-1\">{{ item?.name }}</div>\n    </ng-container>\n</ng-template>\n<ng-template #menuItem>\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            (click)=\"item?.onClick(data)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n    </button>\n</ng-template>\n<ng-container *ngIf=\"item?.children?.length > 0;else menuItem\">\n    <button mat-menu-item\n            class=\"{{item?.className}}\"\n            *ngIf=\"item?.hidden !== true\"\n            [matMenuTriggerFor]=\"submenu\"\n            #menuTrigger=\"matMenuTrigger\"\n            (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\"\n            [class.disabled-half]=\"item?.disabled\">\n        <div class=\"d-flex align-items-center\">\n            <ng-container *ngTemplateOutlet=\"itemTemp; context: {item: item}\"></ng-container>\n        </div>\n        <mat-menu #submenu=\"matMenu\">\n            <div (mouseenter)=\"mouseEnter(menuTrigger)\" (mouseleave)=\"mouseLeave(menuTrigger)\">\n                <ng-container *ngFor=\"let subItem of item?.children\">\n                    <tql-action-bar-menu [item]=\"subItem\"></tql-action-bar-menu>\n                </ng-container>\n            </div>\n        </mat-menu>\n    </button>\n\n</ng-container>\n" }]
         }], propDecorators: { item: [{
@@ -1790,10 +1790,10 @@ class TqlActionBarComponent {
         this.compressedGroup = newGroup.compressed;
         this.unCompressedGroup = newGroup.uncompressed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlActionBarComponent, isStandalone: false, selector: "tql-action-bar", inputs: { data: "data", notCompressMin: "notCompressMin", action: "action", listStyle: "listStyle", list: "list" }, ngImport: i0, template: "<div class=\"d-flex align-items-center\" *ngIf=\"list?.length\">\n    <!--unCompressedGroup-->\n    <ng-container *ngFor=\"let item of unCompressedGroup\">\n        <button mat-icon-button\n                *ngIf=\"item?.hidden !== true\"\n                class=\"{{item?.className}}\"\n                [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n                [class.disabled-half]=\"item?.disabled\"\n                (click)=\"$event.stopPropagation();item?.onClick(data)\"\n                [matTooltip]=\"item?.name\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-container>\n    <!--compressedGroup-->\n    <button mat-icon-button\n            class=\"{{action?.className}}\"\n            *ngIf=\"compressedGroup?.length\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n            (click)=\"$event.stopPropagation()\"\n            #self=\"matMenuTrigger\"\n            [class.showed]=\"self?.menuOpen || !action?.showWhenHover\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            [matTooltip]=\"action?.name\">\n        <i class=\"{{action?.iconClassName}} \"></i>\n    </button>\n    <mat-menu #toggleMenus=\"matMenu\" class=\"min-w-200px\" backdropClass=\"mat-menu-default\">\n        <ng-container *ngFor=\"let item of compressedGroup\">\n            <tql-action-bar-menu [item]=\"item\" [data]=\"data\"></tql-action-bar-menu>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TqlActionBarMenuComponent, selector: "tql-action-bar-menu", inputs: ["item", "data"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlActionBarComponent, isStandalone: false, selector: "tql-action-bar", inputs: { data: "data", notCompressMin: "notCompressMin", action: "action", listStyle: "listStyle", list: "list" }, ngImport: i0, template: "<div class=\"d-flex align-items-center\" *ngIf=\"list?.length\">\n    <!--unCompressedGroup-->\n    <ng-container *ngFor=\"let item of unCompressedGroup\">\n        <button mat-icon-button\n                *ngIf=\"item?.hidden !== true\"\n                class=\"{{item?.className}}\"\n                [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n                [class.disabled-half]=\"item?.disabled\"\n                (click)=\"$event.stopPropagation();item?.onClick(data)\"\n                [matTooltip]=\"item?.name\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-container>\n    <!--compressedGroup-->\n    <button mat-icon-button\n            class=\"{{action?.className}}\"\n            *ngIf=\"compressedGroup?.length\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n            (click)=\"$event.stopPropagation()\"\n            #self=\"matMenuTrigger\"\n            [class.showed]=\"self?.menuOpen || !action?.showWhenHover\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            [matTooltip]=\"action?.name\">\n        <i class=\"{{action?.iconClassName}} \"></i>\n    </button>\n    <mat-menu #toggleMenus=\"matMenu\" class=\"min-w-200px\" backdropClass=\"mat-menu-default\">\n        <ng-container *ngFor=\"let item of compressedGroup\">\n            <tql-action-bar-menu [item]=\"item\" [data]=\"data\"></tql-action-bar-menu>\n        </ng-container>\n    </mat-menu>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TqlActionBarMenuComponent, selector: "tql-action-bar-menu", inputs: ["item", "data"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-action-bar', standalone: false, template: "<div class=\"d-flex align-items-center\" *ngIf=\"list?.length\">\n    <!--unCompressedGroup-->\n    <ng-container *ngFor=\"let item of unCompressedGroup\">\n        <button mat-icon-button\n                *ngIf=\"item?.hidden !== true\"\n                class=\"{{item?.className}}\"\n                [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n                [class.disabled-half]=\"item?.disabled\"\n                (click)=\"$event.stopPropagation();item?.onClick(data)\"\n                [matTooltip]=\"item?.name\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-container>\n    <!--compressedGroup-->\n    <button mat-icon-button\n            class=\"{{action?.className}}\"\n            *ngIf=\"compressedGroup?.length\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n            (click)=\"$event.stopPropagation()\"\n            #self=\"matMenuTrigger\"\n            [class.showed]=\"self?.menuOpen || !action?.showWhenHover\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            [matTooltip]=\"action?.name\">\n        <i class=\"{{action?.iconClassName}} \"></i>\n    </button>\n    <mat-menu #toggleMenus=\"matMenu\" class=\"min-w-200px\" backdropClass=\"mat-menu-default\">\n        <ng-container *ngFor=\"let item of compressedGroup\">\n            <tql-action-bar-menu [item]=\"item\" [data]=\"data\"></tql-action-bar-menu>\n        </ng-container>\n    </mat-menu>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { data: [{
@@ -1913,10 +1913,10 @@ class TqlSimpleListComponent extends DefaultComponent {
             ? this.DEFAULT_ITEM__SMALL_HEIGHT
             : this.DEFAULT_ITEM_HEIGHT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSimpleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlSimpleListComponent, isStandalone: false, selector: "tql-simple-list", inputs: { nameTemplate: "nameTemplate", listStyle: "listStyle", hasConnectedLines: "hasConnectedLines", level: "level", items: "items", theme: "theme", noActive: "noActive", activeClassName: "activeClassName", hasBorderBottom: "hasBorderBottom", collapsingIconPosition: "collapsingIconPosition", draggable: "draggable", dragHandlerPosition: "dragHandlerPosition", dropIds: "dropIds", inNavbar: "inNavbar", navbarClass: "navbarClass", itemStyle: "itemStyle", moreAction: "moreAction" }, outputs: { onDragStart: "onDragStart", onDragEnd: "onDragEnd" }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!------RENDER------>\n<div class=\"simple-list-wrapper {{theme}}\"\n     matRipple\n     [class.draggable]=\"draggable\"\n     [class.dragging]=\"dragging\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"onDrop($event)\">\n\n    <!--Template for each ITEM-->\n    <ng-template #itemTemplate let-item=\"item\">\n        <!-- if route or onclick-->\n        <ng-template #routeOrClick>\n            <ng-container\n                *ngTemplateOutlet=\"item?.route?.length?itemRouteNavTemplate:itemOnClickNavTemplate; context: {item: item}\"></ng-container>\n        </ng-template>\n\n        <!-- if menu or other-->\n        <ng-container\n            *ngTemplateOutlet=\"item?.route?.length || item?.onClick ? routeOrClick:itemMenuNavTemplate; context: {item: item}\"></ng-container>\n\n    </ng-template>\n\n    <!--Template for ITEM-MENU-->\n\n    <ng-template #itemMenuTemplate let-item=\"item\">\n        <!--toggle menus-->\n        <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n            <button mat-menu-item *ngFor=\"let child of item?.children\"\n                    [class.disabled-half]=\"child?.disabled\"\n                    (click)=\"child?.onClick()\">\n                <div class=\"d-flex align-items-center \">\n                    <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                    <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                </div>\n            </button>\n        </mat-menu>\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemMenuNavTemplate let-item=\"item\">\n\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <!--toggle menus-->\n                <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n                    <button mat-menu-item *ngFor=\"let child of item?.children\"\n                            [class.disabled-half]=\"child?.disabled\"\n                            (click)=\"child?.onClick()\">\n                        <div class=\"d-flex align-items-center \">\n                            <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                            <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                        </div>\n                    </button>\n                </mat-menu>\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     [matMenuTriggerFor]=\"toggleMenus\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ROUTE-->\n    <ng-template #itemRouteTemplate let-item=\"item\">\n        <div *ngVar=\"{activeClass:item?.activeClassName || activeClassName || 'active'} as vars\"\n             class=\"d-flex item cursor-pointer   align-items-center  {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n             [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n             style=\"{{itemStyle}}\"\n             [routerLink]=\"item.route\"\n             [routerLinkActive]=\"noActive?'': vars.activeClass\"\n             [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [queryParamsHandling]=\"item?.queryParamsHandling || ''\"\n             [class.disabled-half]=\"item?.disabled\"\n             [class.border-bottom]=\"hasBorderBottom\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemRouteNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n\n                     [matTooltip]=\"item?.name\"\n                     [routerLink]=\"item.route\"\n                     [routerLinkActive]=\"noActive?'':(activeClassName?activeClassName:'active')\"\n                     [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n                     [queryParams]=\"item?.routeQueryParams || {}\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ONCLICK-->\n    <ng-template #itemOnClickTemplate let-item=\"item\">\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            (click)=\"item.onClick(item)\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [class.active]=\"item?.active\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            (cdkDragMoved)=\"onDragMove()\"\n            [cdkDragDisabled]=\"!draggable || (item?.disabled === true)\"\n            (mouseenter)=\"dragHover(item)\" (mouseleave)=\"dragHoverEnd()\"\n            (cdkDragStarted)=\"dragStart(item)\" (cdkDragReleased)=\"dragEnd()\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <div class=\"draggable-icon\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.LEFT\"\n                         matTooltip=\"Draggable\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <div *cdkDragPreview\n                         class=\"ml-2 p-2 color-white tql-simple-list-drag-preview-wrapper d-flex flex-gap-3\">\n                        <div class=\"text-truncate flex-grow-1\" [title]=\"item?.name\">{{ item?.name }}</div>\n                        <i class=\"fal fa-grip-lines-vertical\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options}\"></ng-container>\n                    <div class=\"draggable-icon pr-3\"\n                         matTooltip=\"Draggable\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.RIGHT\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemOnClickNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     (click)=\"item?.onClick()\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM_CUSTOM-NAME-->\n    <ng-template #itemCustomNameTemplate let-item=\"item\">\n        <div class=\"flex-grow-1 text-truncate {{item?.labelClassName || ''}}\"\n             *ngVar=\"{template:nameTemplate || item?.template} as vars\">\n            <ng-container *ngIf=\"vars?.template\">\n                <ng-container\n                    *ngTemplateOutlet=\"vars?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!vars?.template\">\n                {{ item?.name }}\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-container *ngFor=\"let item of items\">\n        <!--loop-->\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {item: item}\"></ng-container>\n    </ng-container>\n</div>\n\n<!------TEMPLATE------>\n<!--Template for lines-->\n<ng-template #linesTemplate let-item=\"item\">\n    <div class=\"connected-lines\" *ngIf=\"hasConnectedLines\"\n         [style.top]=\"calculateConnectedLinesTop()\"\n         [style.height]=\"calculateConnectedLinesHeight(item)\"></div>\n    <div class=\"connected-nod\" *ngIf=\"hasConnectedLines && level > 0\"\n         [style.top]=\"calculateConnectedNodTop()\"></div>\n</ng-template>\n<!--Template for ICON-->\n<ng-template #iconTemplate let-item=\"item\">\n    <div class=\" d-flex align-items-center justify-content-center icon-wrapper m-auto\" *ngIf=\"item?.iconClassName\">\n        <i class=\"icon {{item?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n\n<!--Template for OPTIONS-->\n<ng-template #optionTemplate let-options=\"options\" let-item=\"item\">\n    <!--    <div class=\"d-flex align-items-center\">-->\n    <!--        <button mat-icon-button *ngFor=\"let item of options\" class=\"{{item?.className || ''}}\"-->\n    <!--                [matTooltip]=\"item?.name\"-->\n    <!--                (click)=\"$event.stopPropagation();item?.onClick(item)\">-->\n    <!--            <i class=\"{{item?.iconClassName}}\"></i>-->\n    <!--        </button>-->\n    <!--        -->\n    <!--    </div>-->\n    <div class=\"actions-group\">\n        <tql-action-bar [list]=\"options\" [action]=\"moreAction\" *ngIf=\"options?.length\" [data]=\"item\"\n                        [listStyle]=\"listStyle\"></tql-action-bar>\n    </div>\n</ng-template>\n\n\n", styles: ["::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-dark .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-dark .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-dark .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-dark .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-dark .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-dark .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-dark .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-light .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-light .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-light .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-light .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-light .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-light .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-light .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-light .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-light .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-custom .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-custom .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-custom .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-custom .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-custom .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-custom .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-custom .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSimpleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlSimpleListComponent, isStandalone: false, selector: "tql-simple-list", inputs: { nameTemplate: "nameTemplate", listStyle: "listStyle", hasConnectedLines: "hasConnectedLines", level: "level", items: "items", theme: "theme", noActive: "noActive", activeClassName: "activeClassName", hasBorderBottom: "hasBorderBottom", collapsingIconPosition: "collapsingIconPosition", draggable: "draggable", dragHandlerPosition: "dragHandlerPosition", dropIds: "dropIds", inNavbar: "inNavbar", navbarClass: "navbarClass", itemStyle: "itemStyle", moreAction: "moreAction" }, outputs: { onDragStart: "onDragStart", onDragEnd: "onDragEnd" }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!------RENDER------>\n<div class=\"simple-list-wrapper {{theme}}\"\n     matRipple\n     [class.draggable]=\"draggable\"\n     [class.dragging]=\"dragging\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"onDrop($event)\">\n\n    <!--Template for each ITEM-->\n    <ng-template #itemTemplate let-item=\"item\">\n        <!-- if route or onclick-->\n        <ng-template #routeOrClick>\n            <ng-container\n                *ngTemplateOutlet=\"item?.route?.length?itemRouteNavTemplate:itemOnClickNavTemplate; context: {item: item}\"></ng-container>\n        </ng-template>\n\n        <!-- if menu or other-->\n        <ng-container\n            *ngTemplateOutlet=\"item?.route?.length || item?.onClick ? routeOrClick:itemMenuNavTemplate; context: {item: item}\"></ng-container>\n\n    </ng-template>\n\n    <!--Template for ITEM-MENU-->\n\n    <ng-template #itemMenuTemplate let-item=\"item\">\n        <!--toggle menus-->\n        <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n            <button mat-menu-item *ngFor=\"let child of item?.children\"\n                    [class.disabled-half]=\"child?.disabled\"\n                    (click)=\"child?.onClick()\">\n                <div class=\"d-flex align-items-center \">\n                    <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                    <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                </div>\n            </button>\n        </mat-menu>\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemMenuNavTemplate let-item=\"item\">\n\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <!--toggle menus-->\n                <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n                    <button mat-menu-item *ngFor=\"let child of item?.children\"\n                            [class.disabled-half]=\"child?.disabled\"\n                            (click)=\"child?.onClick()\">\n                        <div class=\"d-flex align-items-center \">\n                            <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                            <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                        </div>\n                    </button>\n                </mat-menu>\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     [matMenuTriggerFor]=\"toggleMenus\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ROUTE-->\n    <ng-template #itemRouteTemplate let-item=\"item\">\n        <div *ngVar=\"{activeClass:item?.activeClassName || activeClassName || 'active'} as vars\"\n             class=\"d-flex item cursor-pointer   align-items-center  {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n             [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n             style=\"{{itemStyle}}\"\n             [routerLink]=\"item.route\"\n             [routerLinkActive]=\"noActive?'': vars.activeClass\"\n             [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [queryParamsHandling]=\"item?.queryParamsHandling || ''\"\n             [class.disabled-half]=\"item?.disabled\"\n             [class.border-bottom]=\"hasBorderBottom\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemRouteNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n\n                     [matTooltip]=\"item?.name\"\n                     [routerLink]=\"item.route\"\n                     [routerLinkActive]=\"noActive?'':(activeClassName?activeClassName:'active')\"\n                     [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n                     [queryParams]=\"item?.routeQueryParams || {}\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ONCLICK-->\n    <ng-template #itemOnClickTemplate let-item=\"item\">\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            (click)=\"item.onClick(item)\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [class.active]=\"item?.active\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            (cdkDragMoved)=\"onDragMove()\"\n            [cdkDragDisabled]=\"!draggable || (item?.disabled === true)\"\n            (mouseenter)=\"dragHover(item)\" (mouseleave)=\"dragHoverEnd()\"\n            (cdkDragStarted)=\"dragStart(item)\" (cdkDragReleased)=\"dragEnd()\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <div class=\"draggable-icon\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.LEFT\"\n                         matTooltip=\"Draggable\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <div *cdkDragPreview\n                         class=\"ml-2 p-2 color-white tql-simple-list-drag-preview-wrapper d-flex flex-gap-3\">\n                        <div class=\"text-truncate flex-grow-1\" [title]=\"item?.name\">{{ item?.name }}</div>\n                        <i class=\"fal fa-grip-lines-vertical\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options}\"></ng-container>\n                    <div class=\"draggable-icon pr-3\"\n                         matTooltip=\"Draggable\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.RIGHT\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemOnClickNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     (click)=\"item?.onClick()\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM_CUSTOM-NAME-->\n    <ng-template #itemCustomNameTemplate let-item=\"item\">\n        <div class=\"flex-grow-1 text-truncate {{item?.labelClassName || ''}}\"\n             *ngVar=\"{template:nameTemplate || item?.template} as vars\">\n            <ng-container *ngIf=\"vars?.template\">\n                <ng-container\n                    *ngTemplateOutlet=\"vars?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!vars?.template\">\n                {{ item?.name }}\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-container *ngFor=\"let item of items\">\n        <!--loop-->\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {item: item}\"></ng-container>\n    </ng-container>\n</div>\n\n<!------TEMPLATE------>\n<!--Template for lines-->\n<ng-template #linesTemplate let-item=\"item\">\n    <div class=\"connected-lines\" *ngIf=\"hasConnectedLines\"\n         [style.top]=\"calculateConnectedLinesTop()\"\n         [style.height]=\"calculateConnectedLinesHeight(item)\"></div>\n    <div class=\"connected-nod\" *ngIf=\"hasConnectedLines && level > 0\"\n         [style.top]=\"calculateConnectedNodTop()\"></div>\n</ng-template>\n<!--Template for ICON-->\n<ng-template #iconTemplate let-item=\"item\">\n    <div class=\" d-flex align-items-center justify-content-center icon-wrapper m-auto\" *ngIf=\"item?.iconClassName\">\n        <i class=\"icon {{item?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n\n<!--Template for OPTIONS-->\n<ng-template #optionTemplate let-options=\"options\" let-item=\"item\">\n    <!--    <div class=\"d-flex align-items-center\">-->\n    <!--        <button mat-icon-button *ngFor=\"let item of options\" class=\"{{item?.className || ''}}\"-->\n    <!--                [matTooltip]=\"item?.name\"-->\n    <!--                (click)=\"$event.stopPropagation();item?.onClick(item)\">-->\n    <!--            <i class=\"{{item?.iconClassName}}\"></i>-->\n    <!--        </button>-->\n    <!--        -->\n    <!--    </div>-->\n    <div class=\"actions-group\">\n        <tql-action-bar [list]=\"options\" [action]=\"moreAction\" *ngIf=\"options?.length\" [data]=\"item\"\n                        [listStyle]=\"listStyle\"></tql-action-bar>\n    </div>\n</ng-template>\n\n\n", styles: ["::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-dark .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-dark .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-dark .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-dark .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-dark .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-dark .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-dark .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-light .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-light .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-light .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-light .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-light .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-light .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-light .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-light .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-light .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-custom .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-custom .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-custom .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-custom .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-custom .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-custom .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-custom .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSimpleListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSimpleListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-simple-list', standalone: false, template: "<!------RENDER------>\n<div class=\"simple-list-wrapper {{theme}}\"\n     matRipple\n     [class.draggable]=\"draggable\"\n     [class.dragging]=\"dragging\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"onDrop($event)\">\n\n    <!--Template for each ITEM-->\n    <ng-template #itemTemplate let-item=\"item\">\n        <!-- if route or onclick-->\n        <ng-template #routeOrClick>\n            <ng-container\n                *ngTemplateOutlet=\"item?.route?.length?itemRouteNavTemplate:itemOnClickNavTemplate; context: {item: item}\"></ng-container>\n        </ng-template>\n\n        <!-- if menu or other-->\n        <ng-container\n            *ngTemplateOutlet=\"item?.route?.length || item?.onClick ? routeOrClick:itemMenuNavTemplate; context: {item: item}\"></ng-container>\n\n    </ng-template>\n\n    <!--Template for ITEM-MENU-->\n\n    <ng-template #itemMenuTemplate let-item=\"item\">\n        <!--toggle menus-->\n        <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n            <button mat-menu-item *ngFor=\"let child of item?.children\"\n                    [class.disabled-half]=\"child?.disabled\"\n                    (click)=\"child?.onClick()\">\n                <div class=\"d-flex align-items-center \">\n                    <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                    <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                </div>\n            </button>\n        </mat-menu>\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [matMenuTriggerFor]=\"toggleMenus\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemMenuNavTemplate let-item=\"item\">\n\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemMenuTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <!--toggle menus-->\n                <mat-menu #toggleMenus=\"matMenu\" class=\"menu-default min-w-200px\">\n                    <button mat-menu-item *ngFor=\"let child of item?.children\"\n                            [class.disabled-half]=\"child?.disabled\"\n                            (click)=\"child?.onClick()\">\n                        <div class=\"d-flex align-items-center \">\n                            <i *ngIf=\"child?.iconClassName\" class=\"{{ child?.iconClassName }}\"></i>\n                            <span class=\"got-14 font-weight-normal ml-2\">{{ child?.name }}</span>\n                        </div>\n                    </button>\n                </mat-menu>\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     [matMenuTriggerFor]=\"toggleMenus\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ROUTE-->\n    <ng-template #itemRouteTemplate let-item=\"item\">\n        <div *ngVar=\"{activeClass:item?.activeClassName || activeClassName || 'active'} as vars\"\n             class=\"d-flex item cursor-pointer   align-items-center  {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n             [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n             style=\"{{itemStyle}}\"\n             [routerLink]=\"item.route\"\n             [routerLinkActive]=\"noActive?'': vars.activeClass\"\n             [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [queryParamsHandling]=\"item?.queryParamsHandling || ''\"\n             [class.disabled-half]=\"item?.disabled\"\n             [class.border-bottom]=\"hasBorderBottom\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options, item:item}\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemRouteNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemRouteTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n\n                     [matTooltip]=\"item?.name\"\n                     [routerLink]=\"item.route\"\n                     [routerLinkActive]=\"noActive?'':(activeClassName?activeClassName:'active')\"\n                     [routerLinkActiveOptions]=\"item?.routerActiveOptions || {exact: false}\"\n                     [queryParams]=\"item?.routeQueryParams || {}\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM-ONCLICK-->\n    <ng-template #itemOnClickTemplate let-item=\"item\">\n        <div\n            class=\"d-flex item cursor-pointer align-items-center {{item?.className || ''}} {{inNavbar?navbarClass:''}}\"\n            [class.small]=\"listStyle === ENUM_STYLE.SMALL\"\n            style=\"{{itemStyle}}\"\n            (click)=\"item.onClick(item)\"\n            [class.disabled-half]=\"item?.disabled\"\n            [class.border-bottom]=\"hasBorderBottom\"\n            [class.active]=\"item?.active\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            (cdkDragMoved)=\"onDragMove()\"\n            [cdkDragDisabled]=\"!draggable || (item?.disabled === true)\"\n            (mouseenter)=\"dragHover(item)\" (mouseleave)=\"dragHoverEnd()\"\n            (cdkDragStarted)=\"dragStart(item)\" (cdkDragReleased)=\"dragEnd()\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsOnlyCollapse:[], item:item}\"></ng-container>\n            <div [class.has-connected-lines]=\"hasConnectedLines\" class=\"w-100\">\n                <ng-container *ngTemplateOutlet=\"linesTemplate;context:{item:item}\">\n                </ng-container>\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\" >\n                    <div class=\"draggable-icon\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.LEFT\"\n                         matTooltip=\"Draggable\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"iconTemplate;context:{item:item}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"itemCustomNameTemplate;context:{item:item}\"></ng-container>\n                    <div *cdkDragPreview\n                         class=\"ml-2 p-2 color-white tql-simple-list-drag-preview-wrapper d-flex flex-gap-3\">\n                        <div class=\"text-truncate flex-grow-1\" [title]=\"item?.name\">{{ item?.name }}</div>\n                        <i class=\"fal fa-grip-lines-vertical\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"optionTemplate;context:{options:collapsingIconPosition === ENUM_HANDLER_POSITION.LEFT?item?.optionsWithoutCollapse:item?.options}\"></ng-container>\n                    <div class=\"draggable-icon pr-3\"\n                         matTooltip=\"Draggable\"\n                         *ngIf=\"draggable && dragHandlerPosition == ENUM_HANDLER_POSITION.RIGHT\">\n                        <i class=\"icon fal fa-grip-lines-vertical\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template #itemOnClickNavTemplate let-item=\"item\">\n        <!--not in navbar-->\n        <ng-container *ngIf=\"!inNavbar\">\n            <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n        </ng-container>\n\n        <!--in navbar-->\n        <ng-container *ngIf=\"inNavbar\">\n\n            <!--in navbar-->\n            <div class=\"hide-on-collapsed\">\n                <ng-container *ngTemplateOutlet=\"itemOnClickTemplate; context: { item: item }\"></ng-container>\n            </div>\n            <div class=\"show-on-collapsed\" [class.disabled-half]=\"item?.disabled\">\n                <div class=\"d-flex align-items-center justify-content-center parent p-0 cursor-pointer item\"\n                     [matTooltip]=\"item?.name\"\n                     (click)=\"item?.onClick()\">\n                    <i class=\"{{item?.iconClassName || 'far fa-circle'}}\"></i>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n\n    <!--Template for ITEM_CUSTOM-NAME-->\n    <ng-template #itemCustomNameTemplate let-item=\"item\">\n        <div class=\"flex-grow-1 text-truncate {{item?.labelClassName || ''}}\"\n             *ngVar=\"{template:nameTemplate || item?.template} as vars\">\n            <ng-container *ngIf=\"vars?.template\">\n                <ng-container\n                    *ngTemplateOutlet=\"vars?.template;context:{item:item}\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!vars?.template\">\n                {{ item?.name }}\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-container *ngFor=\"let item of items\">\n        <!--loop-->\n        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {item: item}\"></ng-container>\n    </ng-container>\n</div>\n\n<!------TEMPLATE------>\n<!--Template for lines-->\n<ng-template #linesTemplate let-item=\"item\">\n    <div class=\"connected-lines\" *ngIf=\"hasConnectedLines\"\n         [style.top]=\"calculateConnectedLinesTop()\"\n         [style.height]=\"calculateConnectedLinesHeight(item)\"></div>\n    <div class=\"connected-nod\" *ngIf=\"hasConnectedLines && level > 0\"\n         [style.top]=\"calculateConnectedNodTop()\"></div>\n</ng-template>\n<!--Template for ICON-->\n<ng-template #iconTemplate let-item=\"item\">\n    <div class=\" d-flex align-items-center justify-content-center icon-wrapper m-auto\" *ngIf=\"item?.iconClassName\">\n        <i class=\"icon {{item?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n\n<!--Template for OPTIONS-->\n<ng-template #optionTemplate let-options=\"options\" let-item=\"item\">\n    <!--    <div class=\"d-flex align-items-center\">-->\n    <!--        <button mat-icon-button *ngFor=\"let item of options\" class=\"{{item?.className || ''}}\"-->\n    <!--                [matTooltip]=\"item?.name\"-->\n    <!--                (click)=\"$event.stopPropagation();item?.onClick(item)\">-->\n    <!--            <i class=\"{{item?.iconClassName}}\"></i>-->\n    <!--        </button>-->\n    <!--        -->\n    <!--    </div>-->\n    <div class=\"actions-group\">\n        <tql-action-bar [list]=\"options\" [action]=\"moreAction\" *ngIf=\"options?.length\" [data]=\"item\"\n                        [listStyle]=\"listStyle\"></tql-action-bar>\n    </div>\n</ng-template>\n\n\n", styles: ["::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-dark .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-dark .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-dark .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-dark .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-dark .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-dark .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-dark .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-dark .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-dark .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-light .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-light .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-light .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-light .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-light .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-light .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-light .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-light .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-light .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-light .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .simple-list-wrapper .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .simple-list-wrapper:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item .draggable-icon{display:none}::ng-deep html.theme-custom .simple-list-wrapper.draggable .item:hover .draggable-icon{display:inherit}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .simple-list-wrapper.draggable.cdk-drop-list-dragging>.item:last-child.border-bottom{border-bottom-width:0!important}::ng-deep html.theme-custom .simple-list-wrapper .item{line-height:40px;min-height:40px;padding:0 0 0 1rem;color:#b4d2e8}::ng-deep html.theme-custom .simple-list-wrapper .item .icon-wrapper{min-width:20px}::ng-deep html.theme-custom .simple-list-wrapper .item.border-bottom{border-bottom:1px solid #215d87!important}::ng-deep html.theme-custom .simple-list-wrapper .item:hover{background-color:#215d874d}::ng-deep html.theme-custom .simple-list-wrapper .item.small{line-height:32px;min-height:32px}::ng-deep html.theme-custom .simple-list-wrapper.light .item.active{background-color:#119ed9;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper.dark .item.active{background-color:#072a43;color:#fff}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines{position:relative}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-lines{position:absolute;top:40px;left:10px;width:1px;height:0;border-left:1px solid}::ng-deep html.theme-custom .simple-list-wrapper .has-connected-lines .connected-nod{position:absolute;width:10px;height:1px;border-top:1px solid;left:-20px;top:-20px}::ng-deep html.theme-custom .tql-simple-list-drag-preview-wrapper{background-color:#119ed9}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ripple: [{
@@ -2188,10 +2188,10 @@ class TqlCollapseDirective {
             this.instance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlCollapseDirective, isStandalone: false, selector: "[tqlCollapse]", inputs: { name: "name", label: "label", labelClassName: "labelClassName", collapsedClassName: "collapsedClassName", hasLine: "hasLine", hasShadow: "hasShadow", alwaysShowIcon: "alwaysShowIcon", collapseTrigger: "collapseTrigger", offset: "offset", hideIconWhenCollapsed: "hideIconWhenCollapsed", hideIcon: "hideIcon", direction: "direction", alwaysCollapsed: "alwaysCollapsed", initialCollapsed: "initialCollapsed" }, outputs: { init: "init", onChangeCollapse: "onChangeCollapse" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlCollapseDirective, isStandalone: false, selector: "[tqlCollapse]", inputs: { name: "name", label: "label", labelClassName: "labelClassName", collapsedClassName: "collapsedClassName", hasLine: "hasLine", hasShadow: "hasShadow", alwaysShowIcon: "alwaysShowIcon", collapseTrigger: "collapseTrigger", offset: "offset", hideIconWhenCollapsed: "hideIconWhenCollapsed", hideIcon: "hideIcon", direction: "direction", alwaysCollapsed: "alwaysCollapsed", initialCollapsed: "initialCollapsed" }, outputs: { init: "init", onChangeCollapse: "onChangeCollapse" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tqlCollapse]',
@@ -2283,10 +2283,10 @@ class TqlResizableDirective {
             this.instance = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizableDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlResizableDirective, isStandalone: false, selector: "[tqlResizable]", inputs: { resizable: "resizable" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizableDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlResizableDirective, isStandalone: false, selector: "[tqlResizable]", inputs: { resizable: "resizable" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tqlResizable]',
@@ -2335,10 +2335,10 @@ class TqlActionDrawerComponent {
             item.onClick();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlActionDrawerComponent, isStandalone: false, selector: "tql-action-drawer", inputs: { width: "width", isResizable: "isResizable", leftActions: "leftActions", rightActions: "rightActions", headingClass: "headingClass" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"isResizable\">\n    <ng-container *ngSwitchCase=\"true\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse tqlResizable>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\" d-flex flex-column overflow-hidden h-100 w-100\">\n        <div class=\"action-group d-flex\">\n            <ng-container *ngFor=\"let item of _leftActions\">\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context:{item:item}\"></ng-container>\n            </ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <tql-action-bar [list]=\"_rightActions\" [notCompressMin]=\"2\" [action]=\"moreAction\"></tql-action-bar>\n        </div>\n        <div class=\"flex-grow-1 overflow-auto\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\">\n    <ng-container *ngIf=\"item?.template; else noTemplate\">\n        <ng-container *ngTemplateOutlet=\"item?.template; context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-template #noTemplate>\n        <button mat-icon-button\n                [class.disabled-half]=\"item?.disabled\"\n                [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-template>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-dark .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-light .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-light .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-custom .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-custom .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-drawer-wrapper .icon{font-size:16px;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: TqlCollapseDirective, selector: "[tqlCollapse]", inputs: ["name", "label", "labelClassName", "collapsedClassName", "hasLine", "hasShadow", "alwaysShowIcon", "collapseTrigger", "offset", "hideIconWhenCollapsed", "hideIcon", "direction", "alwaysCollapsed", "initialCollapsed"], outputs: ["init", "onChangeCollapse"] }, { kind: "directive", type: TqlResizableDirective, selector: "[tqlResizable]", inputs: ["resizable"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlActionDrawerComponent, isStandalone: false, selector: "tql-action-drawer", inputs: { width: "width", isResizable: "isResizable", leftActions: "leftActions", rightActions: "rightActions", headingClass: "headingClass" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"isResizable\">\n    <ng-container *ngSwitchCase=\"true\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse tqlResizable>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\" d-flex flex-column overflow-hidden h-100 w-100\">\n        <div class=\"action-group d-flex\">\n            <ng-container *ngFor=\"let item of _leftActions\">\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context:{item:item}\"></ng-container>\n            </ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <tql-action-bar [list]=\"_rightActions\" [notCompressMin]=\"2\" [action]=\"moreAction\"></tql-action-bar>\n        </div>\n        <div class=\"flex-grow-1 overflow-auto\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\">\n    <ng-container *ngIf=\"item?.template; else noTemplate\">\n        <ng-container *ngTemplateOutlet=\"item?.template; context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-template #noTemplate>\n        <button mat-icon-button\n                [class.disabled-half]=\"item?.disabled\"\n                [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-template>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-dark .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-light .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-light .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-custom .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-custom .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-drawer-wrapper .icon{font-size:16px;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: TqlCollapseDirective, selector: "[tqlCollapse]", inputs: ["name", "label", "labelClassName", "collapsedClassName", "hasLine", "hasShadow", "alwaysShowIcon", "collapseTrigger", "offset", "hideIconWhenCollapsed", "hideIcon", "direction", "alwaysCollapsed", "initialCollapsed"], outputs: ["init", "onChangeCollapse"] }, { kind: "directive", type: TqlResizableDirective, selector: "[tqlResizable]", inputs: ["resizable"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlActionDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlActionDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-action-drawer', standalone: false, template: "<ng-container [ngSwitch]=\"isResizable\">\n    <ng-container *ngSwitchCase=\"true\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse tqlResizable>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n        <div class=\"tql-drawer-wrapper h-100 {{headingClass}}\" [style.width]=\"width+'px'\" tqlCollapse>\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\" d-flex flex-column overflow-hidden h-100 w-100\">\n        <div class=\"action-group d-flex\">\n            <ng-container *ngFor=\"let item of _leftActions\">\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context:{item:item}\"></ng-container>\n            </ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <tql-action-bar [list]=\"_rightActions\" [notCompressMin]=\"2\" [action]=\"moreAction\"></tql-action-bar>\n        </div>\n        <div class=\"flex-grow-1 overflow-auto\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\">\n    <ng-container *ngIf=\"item?.template; else noTemplate\">\n        <ng-container *ngTemplateOutlet=\"item?.template; context:{item:item}\"></ng-container>\n    </ng-container>\n    <ng-template #noTemplate>\n        <button mat-icon-button\n                [class.disabled-half]=\"item?.disabled\"\n                [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n            <i class=\"{{item?.iconClassName}}\"></i>\n        </button>\n    </ng-template>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-dark .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-light .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-light .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-drawer-wrapper .icon{font-size:16px;color:#fff}::ng-deep html.theme-custom .tql-drawer-wrapper{background-color:#072a43}::ng-deep html.theme-custom .tql-drawer-wrapper .action-group{height:40px;border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-drawer-wrapper .icon{font-size:16px;color:#fff}\n"] }]
         }], ctorParameters: () => [], propDecorators: { width: [{
@@ -2419,10 +2419,10 @@ class TqlPanelComponent {
     hasTitle() {
         return this.panelTitle !== null || !___default.isEmpty(this.data) || !!this.panelTitleTemplate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlPanelComponent, isStandalone: false, selector: "tql-panel", inputs: { panelTitle: "panelTitle", panelTitleTemplate: "panelTitleTemplate", data: "data", theme: "theme", style: "style", headingClassName: "headingClassName", contentClassName: "contentClassName", hasBorder: "hasBorder", hasFullScreen: "hasFullScreen", hasCollapse: "hasCollapse", hasOverflowXAuto: "hasOverflowXAuto", hasOverflowYAuto: "hasOverflowYAuto", hasAction: "hasAction", isCollapsed: "isCollapsed", hintMenu: "hintMenu" }, ngImport: i0, template: "<div class=\"tql-panel-wrapper h-100 {{style}} {{theme}}\"\n     [class.full]=\"isFullScreen\"\n     [class.no-title]=\"!hasTitle()\"\n     [class.bordered]=\"hasBorder\">\n    <div class=\"heading d-flex flex-gap-3 d-flex align-items-center {{headingClassName}}\"\n         *ngIf=\"hasTitle()\">\n        <div class=\"color-white text-truncate flex-grow-1 pl-3 {{data?.className}}\" [title]=\"panelTitle || data?.name\"\n             *ngIf=\"!panelTitleTemplate; else titleTemplate\">\n            {{panelTitle || data?.name}}\n        </div>\n        <ng-template #titleTemplate>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <ng-container *ngTemplateOutlet=\"panelTitleTemplate\"></ng-container>\n            </div>\n        </ng-template>\n        <div class=\"d-flex align-items-center\" *ngIf=\"hasAction\">\n            <ng-container *ngFor=\"let item of data?.options\">\n                <button mat-icon-button\n                        *ngIf=\"!!item?.iconClassName; else regularBtn\"\n                        class=\"{{item?.className}}\"\n                        [class.disabled-half]=\"item.disabled\"\n                        [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <ng-template #regularBtn>\n                    <button mat-button\n                            class=\"{{item?.className}}\"\n                            [class.disabled-half]=\"item.disabled\"\n                            (click)=\"triggerAction(item)\">\n                        {{ item?.name }}\n                    </button>\n                </ng-template>\n            </ng-container>\n            <button mat-icon-button *ngIf=\"hasCollapse\" (click)=\"toggleCollapse()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-angle-down]=\"!isCollapsed\"\n                   [class.fa-angle-up]=\"isCollapsed\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hintMenu\" [matMenuTriggerFor]=\"hintMenu\" matTooltip=\"Hint\">\n                <i class=\"fas fa-info-circle text-white font-size-18px\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hasFullScreen\" (click)=\"toggleFullScreen()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-expand]=\"!isFullScreen\"\n                   [class.fa-compress]=\"isFullScreen\"></i>\n            </button>\n        </div>\n    </div>\n    <div class=\"content {{contentClassName}}\"\n         [class.overflow-x-auto]=\"hasOverflowXAuto\"\n         [class.overflow-y-auto]=\"hasOverflowYAuto\"\n         *ngIf=\"!isCollapsed\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-dark .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-dark .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-dark .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-dark .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-dark .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-light .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-light .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-light .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-light .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-light .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-light .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-custom .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-custom .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-custom .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-custom .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-custom .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlPanelComponent, isStandalone: false, selector: "tql-panel", inputs: { panelTitle: "panelTitle", panelTitleTemplate: "panelTitleTemplate", data: "data", theme: "theme", style: "style", headingClassName: "headingClassName", contentClassName: "contentClassName", hasBorder: "hasBorder", hasFullScreen: "hasFullScreen", hasCollapse: "hasCollapse", hasOverflowXAuto: "hasOverflowXAuto", hasOverflowYAuto: "hasOverflowYAuto", hasAction: "hasAction", isCollapsed: "isCollapsed", hintMenu: "hintMenu" }, ngImport: i0, template: "<div class=\"tql-panel-wrapper h-100 {{style}} {{theme}}\"\n     [class.full]=\"isFullScreen\"\n     [class.no-title]=\"!hasTitle()\"\n     [class.bordered]=\"hasBorder\">\n    <div class=\"heading d-flex flex-gap-3 d-flex align-items-center {{headingClassName}}\"\n         *ngIf=\"hasTitle()\">\n        <div class=\"color-white text-truncate flex-grow-1 pl-3 {{data?.className}}\" [title]=\"panelTitle || data?.name\"\n             *ngIf=\"!panelTitleTemplate; else titleTemplate\">\n            {{panelTitle || data?.name}}\n        </div>\n        <ng-template #titleTemplate>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <ng-container *ngTemplateOutlet=\"panelTitleTemplate\"></ng-container>\n            </div>\n        </ng-template>\n        <div class=\"d-flex align-items-center\" *ngIf=\"hasAction\">\n            <ng-container *ngFor=\"let item of data?.options\">\n                <button mat-icon-button\n                        *ngIf=\"!!item?.iconClassName; else regularBtn\"\n                        class=\"{{item?.className}}\"\n                        [class.disabled-half]=\"item.disabled\"\n                        [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <ng-template #regularBtn>\n                    <button mat-button\n                            class=\"{{item?.className}}\"\n                            [class.disabled-half]=\"item.disabled\"\n                            (click)=\"triggerAction(item)\">\n                        {{ item?.name }}\n                    </button>\n                </ng-template>\n            </ng-container>\n            <button mat-icon-button *ngIf=\"hasCollapse\" (click)=\"toggleCollapse()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-angle-down]=\"!isCollapsed\"\n                   [class.fa-angle-up]=\"isCollapsed\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hintMenu\" [matMenuTriggerFor]=\"hintMenu\" matTooltip=\"Hint\">\n                <i class=\"fas fa-info-circle text-white font-size-18px\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hasFullScreen\" (click)=\"toggleFullScreen()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-expand]=\"!isFullScreen\"\n                   [class.fa-compress]=\"isFullScreen\"></i>\n            </button>\n        </div>\n    </div>\n    <div class=\"content {{contentClassName}}\"\n         [class.overflow-x-auto]=\"hasOverflowXAuto\"\n         [class.overflow-y-auto]=\"hasOverflowYAuto\"\n         *ngIf=\"!isCollapsed\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-dark .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-dark .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-dark .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-dark .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-dark .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-light .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-light .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-light .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-light .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-light .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-light .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-custom .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-custom .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-custom .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-custom .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-custom .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-panel', standalone: false, template: "<div class=\"tql-panel-wrapper h-100 {{style}} {{theme}}\"\n     [class.full]=\"isFullScreen\"\n     [class.no-title]=\"!hasTitle()\"\n     [class.bordered]=\"hasBorder\">\n    <div class=\"heading d-flex flex-gap-3 d-flex align-items-center {{headingClassName}}\"\n         *ngIf=\"hasTitle()\">\n        <div class=\"color-white text-truncate flex-grow-1 pl-3 {{data?.className}}\" [title]=\"panelTitle || data?.name\"\n             *ngIf=\"!panelTitleTemplate; else titleTemplate\">\n            {{panelTitle || data?.name}}\n        </div>\n        <ng-template #titleTemplate>\n            <div class=\"flex-grow-1 overflow-hidden\">\n                <ng-container *ngTemplateOutlet=\"panelTitleTemplate\"></ng-container>\n            </div>\n        </ng-template>\n        <div class=\"d-flex align-items-center\" *ngIf=\"hasAction\">\n            <ng-container *ngFor=\"let item of data?.options\">\n                <button mat-icon-button\n                        *ngIf=\"!!item?.iconClassName; else regularBtn\"\n                        class=\"{{item?.className}}\"\n                        [class.disabled-half]=\"item.disabled\"\n                        [matTooltip]=\"item?.name\" (click)=\"triggerAction(item)\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <ng-template #regularBtn>\n                    <button mat-button\n                            class=\"{{item?.className}}\"\n                            [class.disabled-half]=\"item.disabled\"\n                            (click)=\"triggerAction(item)\">\n                        {{ item?.name }}\n                    </button>\n                </ng-template>\n            </ng-container>\n            <button mat-icon-button *ngIf=\"hasCollapse\" (click)=\"toggleCollapse()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-angle-down]=\"!isCollapsed\"\n                   [class.fa-angle-up]=\"isCollapsed\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hintMenu\" [matMenuTriggerFor]=\"hintMenu\" matTooltip=\"Hint\">\n                <i class=\"fas fa-info-circle text-white font-size-18px\"></i>\n            </button>\n            <button mat-icon-button *ngIf=\"hasFullScreen\" (click)=\"toggleFullScreen()\"\n                    [matTooltip]=\"!isFullScreen?'Expand':'Compress'\">\n                <i class=\"fal  text-white\"\n                   [class.fa-expand]=\"!isFullScreen\"\n                   [class.fa-compress]=\"isFullScreen\"></i>\n            </button>\n        </div>\n    </div>\n    <div class=\"content {{contentClassName}}\"\n         [class.overflow-x-auto]=\"hasOverflowXAuto\"\n         [class.overflow-y-auto]=\"hasOverflowYAuto\"\n         *ngIf=\"!isCollapsed\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-dark .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-dark .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-dark .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-dark .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-dark .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-dark .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-dark .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-dark .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-light .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-light .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-light .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-light .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-light .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-light .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-light .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-light .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-light .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-panel-wrapper>.heading{height:40px}::ng-deep html.theme-custom .tql-panel-wrapper>.content{background-color:#072a43;height:calc(100% - 40px);overflow:hidden}::ng-deep html.theme-custom .tql-panel-wrapper.small>.heading{height:30px}::ng-deep html.theme-custom .tql-panel-wrapper.small>.content{height:calc(100% - 30px)}::ng-deep html.theme-custom .tql-panel-wrapper.full{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100}::ng-deep html.theme-custom .tql-panel-wrapper.no-title>.content{height:100%}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.heading{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.normal>.content{background-color:#072a43}::ng-deep html.theme-custom .tql-panel-wrapper.black>.heading{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black>.content{background-color:#001d31}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.heading{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.black-blue>.content{background-color:#0d3755}::ng-deep html.theme-custom .tql-panel-wrapper.bordered{border:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper.bordered .heading{border-bottom:1px solid #215d87}::ng-deep html.theme-custom .tql-panel-wrapper .cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .cdk-drop-list-receiving>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .cdk-drop-list-dragging>.tql-panel-wrapper{border:1px solid transparent;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C2D94C' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelTitle: [{
@@ -2549,10 +2549,10 @@ class TqlBreadcrumbComponent {
     goTo(url) {
         this._Router.navigateByUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlBreadcrumbComponent, deps: [{ token: i1$5.Router }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlBreadcrumbComponent, isStandalone: false, selector: "tql-breadcrumb", inputs: { hasPrefix: "hasPrefix", noTranslate: "noTranslate" }, ngImport: i0, template: "<div class=\"d-flex align-items-center flex-gap-3 breadcrumb-wrapper\">\n    <div *ngIf=\"breadcrumbList && breadcrumbList.length && hasPrefix\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    <ng-container *ngFor=\"let breadcrumb of breadcrumbList; let $last = last;\">\n        <div class=\"cursor-pointer\" [class.current]=\"$last\"\n             [routerLink]=\"breadcrumb?.url.substring(1)\">\n            <ng-container *ngIf=\"!noTranslate\">{{breadcrumb?.label | translate}}</ng-container>\n            <ng-container *ngIf=\"noTranslate\">{{breadcrumb?.label}}</ng-container>\n        </div>\n        <div *ngIf=\"!$last\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-light .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-custom .breadcrumb-wrapper .current{color:#fff;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlBreadcrumbComponent, deps: [{ token: i1$5.Router }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlBreadcrumbComponent, isStandalone: false, selector: "tql-breadcrumb", inputs: { hasPrefix: "hasPrefix", noTranslate: "noTranslate" }, ngImport: i0, template: "<div class=\"d-flex align-items-center flex-gap-3 breadcrumb-wrapper\">\n    <div *ngIf=\"breadcrumbList && breadcrumbList.length && hasPrefix\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    <ng-container *ngFor=\"let breadcrumb of breadcrumbList; let $last = last;\">\n        <div class=\"cursor-pointer\" [class.current]=\"$last\"\n             [routerLink]=\"breadcrumb?.url.substring(1)\">\n            <ng-container *ngIf=\"!noTranslate\">{{breadcrumb?.label | translate}}</ng-container>\n            <ng-container *ngIf=\"noTranslate\">{{breadcrumb?.label}}</ng-container>\n        </div>\n        <div *ngIf=\"!$last\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-light .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-custom .breadcrumb-wrapper .current{color:#fff;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-breadcrumb', standalone: false, template: "<div class=\"d-flex align-items-center flex-gap-3 breadcrumb-wrapper\">\n    <div *ngIf=\"breadcrumbList && breadcrumbList.length && hasPrefix\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    <ng-container *ngFor=\"let breadcrumb of breadcrumbList; let $last = last;\">\n        <div class=\"cursor-pointer\" [class.current]=\"$last\"\n             [routerLink]=\"breadcrumb?.url.substring(1)\">\n            <ng-container *ngIf=\"!noTranslate\">{{breadcrumb?.label | translate}}</ng-container>\n            <ng-container *ngIf=\"noTranslate\">{{breadcrumb?.label}}</ng-container>\n        </div>\n        <div *ngIf=\"!$last\"><i class=\"fal fa-long-arrow-right\"></i></div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-light .breadcrumb-wrapper .current{color:#fff;font-weight:500}::ng-deep html.theme-custom .breadcrumb-wrapper .current{color:#fff;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Router }, { type: i1$5.ActivatedRoute }], propDecorators: { hasPrefix: [{
@@ -2707,10 +2707,10 @@ class TqlClickOutsideDirective {
             window.removeEventListener('blur', this._onWindowBlur);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlClickOutsideDirective, isStandalone: false, selector: "[clickOutside]", inputs: { clickOutsideEnabled: "clickOutsideEnabled", attachOutsideOnClick: "attachOutsideOnClick", delayClickOutsideInit: "delayClickOutsideInit", emitOnBlur: "emitOnBlur", exclude: "exclude", excludeBeforeClick: "excludeBeforeClick", clickOutsideEvents: "clickOutsideEvents" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[clickOutside]',
@@ -2863,10 +2863,10 @@ class TqlNavbarComponent extends DefaultComponent {
             this.toggleCollapse(!isHovered);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarComponent, deps: [{ token: i1$5.Router }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlNavbarComponent, isStandalone: false, selector: "tql-navbar", inputs: { isOverlappedStyle: "isOverlappedStyle", hiddenWhenCollapse: "hiddenWhenCollapse", resizable: "resizable", initialCollapsed: "initialCollapsed", expandWhenHover: "expandWhenHover", IconOffsetTop: "IconOffsetTop", collapse: "collapse", alwaysCollapsed: "alwaysCollapsed" }, host: { properties: { "class.overlapped": "this.isOverlappedStyle" } }, viewQueries: [{ propertyName: "tqlNavbar", first: true, predicate: ["tqlNavbar"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div #tqlNavbar\n     [id]=\"id\"\n     class=\"nav-layout-container d-flex flex-column tql-navbar-wrapper\"\n     (window:resize)=\"onResize($event)\"\n     (clickOutside)=\"onClickedOutside($event)\"\n     (click)=\"onClickedInside();$event.stopPropagation();\"\n     [hasLine]=\"false\"\n     [collapseTrigger]=\"collapseEmit\"\n     [hideIconWhenCollapsed]=\"true\"\n     (onChangeCollapse)=\"onChangeCollapse($event)\"\n     [offset]=\"IconOffsetTop\"\n     [alwaysCollapsed]=\"_alwaysCollapse\"\n     [initialCollapsed]=\"initialCollapsed\"\n     [hideIcon]=\"expandWhenHover\"\n     (mouseenter)=\"onHover(true)\" (mouseleave)=\"onHover(false)\"\n     tqlCollapse>\n\n    <div class=\"preview-wrapper mat-elevation-z8\" [style.top]=\"navBarPreviewTop\" (clickOutside)=\"onClosePreview()\">\n        <ng-container [ngTemplateOutlet]=\"navBarPreview.template\" *ngIf=\"navBarPreview\"></ng-container>\n    </div>\n\n    <div class=\"flex-grow-1 w-100 h-100 overflow-hidden\" *ngIf=\"!(_collapse && hiddenWhenCollapse)\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host.overlapped{min-width:60px!important;position:relative;display:inline-block;z-index:1000;height:100%}:host.overlapped .nav-layout-container{position:absolute!important}::ng-deep html.theme-dark .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-dark .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-dark .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-dark .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-dark .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-dark .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-dark .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-dark .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-dark .nav-layout-container .logo{text-align:center}::ng-deep html.theme-dark .nav-layout-container .logo img{height:32px}::ng-deep html.theme-dark .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-dark .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-dark .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-dark .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-light .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-light .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-light .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-light .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-light .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-light .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-light .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-light .nav-layout-container .logo{text-align:center}::ng-deep html.theme-light .nav-layout-container .logo img{height:32px}::ng-deep html.theme-light .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-light .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-light .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-light .collapse-status-list-wrapper{color:#0d3755}::ng-deep html.theme-light .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-custom .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-custom .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-custom .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-custom .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-custom .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-custom .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-custom .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-custom .nav-layout-container .logo{text-align:center}::ng-deep html.theme-custom .nav-layout-container .logo img{height:32px}::ng-deep html.theme-custom .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-custom .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-custom .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-custom .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TqlCollapseDirective, selector: "[tqlCollapse]", inputs: ["name", "label", "labelClassName", "collapsedClassName", "hasLine", "hasShadow", "alwaysShowIcon", "collapseTrigger", "offset", "hideIconWhenCollapsed", "hideIcon", "direction", "alwaysCollapsed", "initialCollapsed"], outputs: ["init", "onChangeCollapse"] }, { kind: "directive", type: TqlClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarComponent, deps: [{ token: i1$5.Router }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlNavbarComponent, isStandalone: false, selector: "tql-navbar", inputs: { isOverlappedStyle: "isOverlappedStyle", hiddenWhenCollapse: "hiddenWhenCollapse", resizable: "resizable", initialCollapsed: "initialCollapsed", expandWhenHover: "expandWhenHover", IconOffsetTop: "IconOffsetTop", collapse: "collapse", alwaysCollapsed: "alwaysCollapsed" }, host: { properties: { "class.overlapped": "this.isOverlappedStyle" } }, viewQueries: [{ propertyName: "tqlNavbar", first: true, predicate: ["tqlNavbar"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div #tqlNavbar\n     [id]=\"id\"\n     class=\"nav-layout-container d-flex flex-column tql-navbar-wrapper\"\n     (window:resize)=\"onResize($event)\"\n     (clickOutside)=\"onClickedOutside($event)\"\n     (click)=\"onClickedInside();$event.stopPropagation();\"\n     [hasLine]=\"false\"\n     [collapseTrigger]=\"collapseEmit\"\n     [hideIconWhenCollapsed]=\"true\"\n     (onChangeCollapse)=\"onChangeCollapse($event)\"\n     [offset]=\"IconOffsetTop\"\n     [alwaysCollapsed]=\"_alwaysCollapse\"\n     [initialCollapsed]=\"initialCollapsed\"\n     [hideIcon]=\"expandWhenHover\"\n     (mouseenter)=\"onHover(true)\" (mouseleave)=\"onHover(false)\"\n     tqlCollapse>\n\n    <div class=\"preview-wrapper mat-elevation-z8\" [style.top]=\"navBarPreviewTop\" (clickOutside)=\"onClosePreview()\">\n        <ng-container [ngTemplateOutlet]=\"navBarPreview.template\" *ngIf=\"navBarPreview\"></ng-container>\n    </div>\n\n    <div class=\"flex-grow-1 w-100 h-100 overflow-hidden\" *ngIf=\"!(_collapse && hiddenWhenCollapse)\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host.overlapped{min-width:60px!important;position:relative;display:inline-block;z-index:1000;height:100%}:host.overlapped .nav-layout-container{position:absolute!important}::ng-deep html.theme-dark .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-dark .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-dark .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-dark .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-dark .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-dark .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-dark .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-dark .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-dark .nav-layout-container .logo{text-align:center}::ng-deep html.theme-dark .nav-layout-container .logo img{height:32px}::ng-deep html.theme-dark .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-dark .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-dark .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-dark .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-light .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-light .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-light .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-light .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-light .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-light .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-light .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-light .nav-layout-container .logo{text-align:center}::ng-deep html.theme-light .nav-layout-container .logo img{height:32px}::ng-deep html.theme-light .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-light .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-light .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-light .collapse-status-list-wrapper{color:#0d3755}::ng-deep html.theme-light .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-custom .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-custom .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-custom .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-custom .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-custom .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-custom .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-custom .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-custom .nav-layout-container .logo{text-align:center}::ng-deep html.theme-custom .nav-layout-container .logo img{height:32px}::ng-deep html.theme-custom .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-custom .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-custom .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-custom .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TqlCollapseDirective, selector: "[tqlCollapse]", inputs: ["name", "label", "labelClassName", "collapsedClassName", "hasLine", "hasShadow", "alwaysShowIcon", "collapseTrigger", "offset", "hideIconWhenCollapsed", "hideIcon", "direction", "alwaysCollapsed", "initialCollapsed"], outputs: ["init", "onChangeCollapse"] }, { kind: "directive", type: TqlClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-navbar', standalone: false, template: "<div #tqlNavbar\n     [id]=\"id\"\n     class=\"nav-layout-container d-flex flex-column tql-navbar-wrapper\"\n     (window:resize)=\"onResize($event)\"\n     (clickOutside)=\"onClickedOutside($event)\"\n     (click)=\"onClickedInside();$event.stopPropagation();\"\n     [hasLine]=\"false\"\n     [collapseTrigger]=\"collapseEmit\"\n     [hideIconWhenCollapsed]=\"true\"\n     (onChangeCollapse)=\"onChangeCollapse($event)\"\n     [offset]=\"IconOffsetTop\"\n     [alwaysCollapsed]=\"_alwaysCollapse\"\n     [initialCollapsed]=\"initialCollapsed\"\n     [hideIcon]=\"expandWhenHover\"\n     (mouseenter)=\"onHover(true)\" (mouseleave)=\"onHover(false)\"\n     tqlCollapse>\n\n    <div class=\"preview-wrapper mat-elevation-z8\" [style.top]=\"navBarPreviewTop\" (clickOutside)=\"onClosePreview()\">\n        <ng-container [ngTemplateOutlet]=\"navBarPreview.template\" *ngIf=\"navBarPreview\"></ng-container>\n    </div>\n\n    <div class=\"flex-grow-1 w-100 h-100 overflow-hidden\" *ngIf=\"!(_collapse && hiddenWhenCollapse)\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host.overlapped{min-width:60px!important;position:relative;display:inline-block;z-index:1000;height:100%}:host.overlapped .nav-layout-container{position:absolute!important}::ng-deep html.theme-dark .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-dark .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-dark .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-dark .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-dark .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-dark .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-dark .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-dark .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-dark .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-dark .nav-layout-container .logo{text-align:center}::ng-deep html.theme-dark .nav-layout-container .logo img{height:32px}::ng-deep html.theme-dark .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-dark .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-dark .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-dark .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-dark .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-light .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-light .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-light .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-light .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-light .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-light .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-light .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-light .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-light .nav-layout-container .logo{text-align:center}::ng-deep html.theme-light .nav-layout-container .logo img{height:32px}::ng-deep html.theme-light .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-light .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-light .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-light .collapse-status-list-wrapper{color:#0d3755}::ng-deep html.theme-light .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-light .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected{color:#fff}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-light .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .nav-layout-container{position:relative;width:260px;height:100%;min-width:60px!important;background-color:#0d3755}::ng-deep html.theme-custom .nav-layout-container.collapsed{margin-left:0!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-hide{display:none!important}::ng-deep html.theme-custom .nav-layout-container.collapsed .collapse-show{display:initial;margin:auto}::ng-deep html.theme-custom .nav-layout-container.collapsed .side-padding{padding-left:10px!important;padding-right:10px!important;gap:0}::ng-deep html.theme-custom .nav-layout-container.collapsed hr{width:calc(100% - 20px);margin-left:10px}::ng-deep html.theme-custom .nav-layout-container .preview-wrapper{position:absolute;left:calc(100% + 2px);background-color:#0d3755;top:0;z-index:2}::ng-deep html.theme-custom .nav-layout-container .collapse-hide{display:initial}::ng-deep html.theme-custom .nav-layout-container .collapse-show{display:none}::ng-deep html.theme-custom .nav-layout-container .side-padding{transition:all .5s;padding-left:30px!important;padding-right:30px!important}::ng-deep html.theme-custom .nav-layout-container .logo{text-align:center}::ng-deep html.theme-custom .nav-layout-container .logo img{height:32px}::ng-deep html.theme-custom .nav-layout-container hr{width:calc(100% - 60px);margin-left:30px}::ng-deep html.theme-custom .nav-layout-container .account{height:70px;position:relative}::ng-deep html.theme-custom .nav-layout-container .account img{width:24px;height:24px;border-radius:50%}::ng-deep html.theme-custom .collapse-status-list-wrapper{color:#b4d2e8}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .parent-icon{width:16px}::ng-deep html.theme-custom .collapse-status-list-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item{height:40px}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item .selected-icon{opacity:0;width:16px;color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected{color:#23bfff}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .collapse-status-list-wrapper .children-group .item:not(.selected):hover .selected-icon{opacity:.3}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Router }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: TqlNavbarControllerService }], propDecorators: { isOverlappedStyle: [{
@@ -2896,10 +2896,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class TqlNavbarLogoComponent {
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlNavbarLogoComponent, isStandalone: false, selector: "tql-navbar-logo", inputs: { logo: "logo", logoRoute: "logoRoute", collapseLogo: "collapseLogo", width: "width", height: "height" }, ngImport: i0, template: "<div [routerLink]=\"logoRoute\" class=\"w-100 logo d-flex align-items-center side-padding cursor-pointer\">\n    <img class=\"logo collapse-hide\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"logo\" alt=\"Atomiton Icon\"/>\n    <img class=\"logo collapse-show\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"collapseLogo\" alt=\"Atomiton Icon\"/>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlNavbarLogoComponent, isStandalone: false, selector: "tql-navbar-logo", inputs: { logo: "logo", logoRoute: "logoRoute", collapseLogo: "collapseLogo", width: "width", height: "height" }, ngImport: i0, template: "<div [routerLink]=\"logoRoute\" class=\"w-100 logo d-flex align-items-center side-padding cursor-pointer\">\n    <img class=\"logo collapse-hide\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"logo\" alt=\"Atomiton Icon\"/>\n    <img class=\"logo collapse-show\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"collapseLogo\" alt=\"Atomiton Icon\"/>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarLogoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-navbar-logo', standalone: false, template: "<div [routerLink]=\"logoRoute\" class=\"w-100 logo d-flex align-items-center side-padding cursor-pointer\">\n    <img class=\"logo collapse-hide\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"logo\" alt=\"Atomiton Icon\"/>\n    <img class=\"logo collapse-show\" [style.width]=\"width\" [style.height]=\"height\" [src]=\"collapseLogo\" alt=\"Atomiton Icon\"/>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { logo: [{
@@ -2936,10 +2936,10 @@ class TqlNavbarTitleComponent {
             this.title.onClick();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlNavbarTitleComponent, isStandalone: false, selector: "tql-navbar-title", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"title-group d-flex flex-gap-2 side-padding pt-1 pb-2 align-items-center\"\n     *ngIf=\"title\">\n    <div class=\"title text-truncate font-weight-light collapse-hide cursor-pointer {{title?.className}}\"\n         [routerLink]=\"title?.route\"\n         [title]=\"title?.name\">{{title?.name}}</div>\n    <div class=\"flex-grow-1 d-flex justify-content-end\">\n        <ng-container *ngIf=\"title?.onClick; else optionTemplate\">\n            <ng-container *ngTemplateOutlet=\"onCLickTemplate\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n<!-- on-click template-->\n<ng-template #onCLickTemplate>\n    <div class=\"settings cursor-pointer\" (click)=\"onClick()\"\n         [class.disabled-half]=\"!title?.onClick || title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n<!-- option template-->\n<ng-template #optionTemplate>\n    <div class=\"settings cursor-pointer\" [matMenuTriggerFor]=\"menu\"\n         [class.disabled-half]=\"title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"mat-menu-default\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"item?.disabled\"\n                [class.disabled-half]=\" item?.disabled\">\n            <div class=\"d-flex flex-gap-2\"\n                 [routerLink]=\"item?.route\">\n                <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item?.name\">\n                    {{item?.name}}\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-dark .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-dark .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-dark .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-dark .nav-layout-container .title-group .settings .active{background-color:#119ed9}::ng-deep html.theme-light .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-light .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-light .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#f4f5f7;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-light .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-light .nav-layout-container .title-group .settings .active{background-color:#fff}::ng-deep html.theme-custom .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-custom .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-custom .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-custom .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-custom .nav-layout-container .title-group .settings .active{background-color:#119ed9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlNavbarTitleComponent, isStandalone: false, selector: "tql-navbar-title", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"title-group d-flex flex-gap-2 side-padding pt-1 pb-2 align-items-center\"\n     *ngIf=\"title\">\n    <div class=\"title text-truncate font-weight-light collapse-hide cursor-pointer {{title?.className}}\"\n         [routerLink]=\"title?.route\"\n         [title]=\"title?.name\">{{title?.name}}</div>\n    <div class=\"flex-grow-1 d-flex justify-content-end\">\n        <ng-container *ngIf=\"title?.onClick; else optionTemplate\">\n            <ng-container *ngTemplateOutlet=\"onCLickTemplate\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n<!-- on-click template-->\n<ng-template #onCLickTemplate>\n    <div class=\"settings cursor-pointer\" (click)=\"onClick()\"\n         [class.disabled-half]=\"!title?.onClick || title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n<!-- option template-->\n<ng-template #optionTemplate>\n    <div class=\"settings cursor-pointer\" [matMenuTriggerFor]=\"menu\"\n         [class.disabled-half]=\"title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"mat-menu-default\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"item?.disabled\"\n                [class.disabled-half]=\" item?.disabled\">\n            <div class=\"d-flex flex-gap-2\"\n                 [routerLink]=\"item?.route\">\n                <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item?.name\">\n                    {{item?.name}}\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-dark .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-dark .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-dark .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-dark .nav-layout-container .title-group .settings .active{background-color:#119ed9}::ng-deep html.theme-light .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-light .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-light .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#f4f5f7;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-light .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-light .nav-layout-container .title-group .settings .active{background-color:#fff}::ng-deep html.theme-custom .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-custom .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-custom .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-custom .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-custom .nav-layout-container .title-group .settings .active{background-color:#119ed9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-navbar-title', standalone: false, template: "<div class=\"title-group d-flex flex-gap-2 side-padding pt-1 pb-2 align-items-center\"\n     *ngIf=\"title\">\n    <div class=\"title text-truncate font-weight-light collapse-hide cursor-pointer {{title?.className}}\"\n         [routerLink]=\"title?.route\"\n         [title]=\"title?.name\">{{title?.name}}</div>\n    <div class=\"flex-grow-1 d-flex justify-content-end\">\n        <ng-container *ngIf=\"title?.onClick; else optionTemplate\">\n            <ng-container *ngTemplateOutlet=\"onCLickTemplate\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n<!-- on-click template-->\n<ng-template #onCLickTemplate>\n    <div class=\"settings cursor-pointer\" (click)=\"onClick()\"\n         [class.disabled-half]=\"!title?.onClick || title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n</ng-template>\n<!-- option template-->\n<ng-template #optionTemplate>\n    <div class=\"settings cursor-pointer\" [matMenuTriggerFor]=\"menu\"\n         [class.disabled-half]=\"title.disabled\">\n        <i class=\"icon {{title?.iconClassName}}\"></i>\n    </div>\n    <mat-menu #menu=\"matMenu\" backdropClass=\"mat-menu-default\">\n        <button mat-menu-item *ngFor=\"let item of options\"\n                [disabled]=\"item?.disabled\"\n                [class.disabled-half]=\" item?.disabled\">\n            <div class=\"d-flex flex-gap-2\"\n                 [routerLink]=\"item?.route\">\n                <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                <div class=\"color-soft-blue text-truncate\"\n                     [title]=\"item?.name\">\n                    {{item?.name}}\n                </div>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-dark .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-dark .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-dark .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-dark .nav-layout-container .title-group .settings .active{background-color:#119ed9}::ng-deep html.theme-light .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-light .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-light .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#f4f5f7;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-light .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-light .nav-layout-container .title-group .settings .active{background-color:#fff}::ng-deep html.theme-custom .nav-layout-container.collapsed .title-group .settings{margin-right:0}::ng-deep html.theme-custom .nav-layout-container .title-group{color:#fff}::ng-deep html.theme-custom .nav-layout-container .title-group .settings{margin-right:-30px;width:50px;min-width:50px;background-color:#072a43;padding:7px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px}::ng-deep html.theme-custom .nav-layout-container .title-group .settings:hover,::ng-deep html.theme-custom .nav-layout-container .title-group .settings .active{background-color:#119ed9}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
@@ -2950,10 +2950,10 @@ class TqlDynamicComponentHostDirective {
     constructor(_ViewContainerRef) {
         this._ViewContainerRef = _ViewContainerRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlDynamicComponentHostDirective, isStandalone: false, selector: "[libTqlDynamicComponentHost]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicComponentHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlDynamicComponentHostDirective, isStandalone: false, selector: "[libTqlDynamicComponentHost]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicComponentHostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicComponentHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[libTqlDynamicComponentHost]',
@@ -2971,10 +2971,10 @@ class TqlHoverClassDirective {
     onMouseLeave() {
         this.elementRef.nativeElement.classList.remove(this.hoverClass);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlHoverClassDirective, isStandalone: false, selector: "[tql-hover-class]", inputs: { hoverClass: ["tql-hover-class", "hoverClass"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlHoverClassDirective, isStandalone: false, selector: "[tql-hover-class]", inputs: { hoverClass: ["tql-hover-class", "hoverClass"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHoverClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHoverClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tql-hover-class]',
@@ -3202,10 +3202,10 @@ class TqlTableFilterWidgetDirective extends DefaultComponent {
         });
         return filterData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableFilterWidgetDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1$4.TqlTableControllerService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlTableFilterWidgetDirective, isStandalone: false, selector: "[tqlTableFilterWidget]", inputs: { emptyLabel: "emptyLabel", singleSort: "singleSort", hasSort: "hasSort", defaultSort: "defaultSort", filter: "filter", filterKey: "filterKey", iconClassName: "iconClassName", labelKey: "labelKey", data: "data", filterChanged$: "filterChanged$", filterValues: "filterValues" }, outputs: { filterChange: "filterChange" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableFilterWidgetDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1$4.TqlTableControllerService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlTableFilterWidgetDirective, isStandalone: false, selector: "[tqlTableFilterWidget]", inputs: { emptyLabel: "emptyLabel", singleSort: "singleSort", hasSort: "hasSort", defaultSort: "defaultSort", filter: "filter", filterKey: "filterKey", iconClassName: "iconClassName", labelKey: "labelKey", data: "data", filterChanged$: "filterChanged$", filterValues: "filterValues" }, outputs: { filterChange: "filterChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableFilterWidgetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableFilterWidgetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tqlTableFilterWidget]',
@@ -3270,10 +3270,10 @@ class TqlResizedDirective extends DefaultComponent {
         this.oldRect = domSize.contentRect;
         this.resized.emit(resizedEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizedDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlResizedDirective, isStandalone: false, selector: "[tqlResized]", outputs: { resized: "resized" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizedDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlResizedDirective, isStandalone: false, selector: "[tqlResized]", outputs: { resized: "resized" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlResizedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlResizedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tqlResized]',
@@ -3288,10 +3288,10 @@ class TqlSimpleCardComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSimpleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlSimpleCardComponent, isStandalone: false, selector: "tql-simple-card", inputs: { item: "item", class: "class" }, ngImport: i0, template: "<div class=\"card-simple-wrapper d-flex flex-column {{class}}\">\n    <div class=\"d-flex justify-content-end\">\n        <ng-container *ngTemplateOutlet=\"moreOptionTemplate;context:{array:item?.children}\">\n        </ng-container>\n    </div>\n    <div class=\"d-flex flex-column align-items-center flex-grow-1\">\n        <i class=\"{{ item?.iconClassName }} font-size-36px primary-icon-theme mb-15px\"></i>\n        <div class=\"font-size-20px text-white mb-10px text-center text-truncate w-100\">{{ item?.name }}</div>\n        <div class=\"color-soft-blue text-center mb-20px flex-grow-1\">{{ item?.description }}</div>\n        <ng-container *ngIf=\"item.route\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               [routerLink]=\"item.route\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.onClick\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               (click)=\"item?.onClick()\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n\n    </div>\n</div>\n\n<ng-template #moreOptionTemplate let-array=\"array\">\n    <button mat-icon-button class=\"mr-n3 mt-n2\"\n            [class.disabled-half]=\"!array || !array.length\"\n            [matMenuTriggerFor]=\"tqlConsoleMenu\">\n        <i class=\"fal fa-ellipsis-v font-size-21px color-soft-blue\"></i>\n    </button>\n    <mat-menu #tqlConsoleMenu=\"matMenu\" class=\"menu-default\">\n        <button mat-menu-item *ngFor=\"let item of array\"\n                [routerLink]=\"item?.route\">\n            <div class=\"d-flex align-items-center\">\n                <i class=\"{{item?.iconClass}} font-size-18px\"></i>\n                <span class=\" ml-2\">{{item?.label}}</span>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-light .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-custom .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSimpleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlSimpleCardComponent, isStandalone: false, selector: "tql-simple-card", inputs: { item: "item", class: "class" }, ngImport: i0, template: "<div class=\"card-simple-wrapper d-flex flex-column {{class}}\">\n    <div class=\"d-flex justify-content-end\">\n        <ng-container *ngTemplateOutlet=\"moreOptionTemplate;context:{array:item?.children}\">\n        </ng-container>\n    </div>\n    <div class=\"d-flex flex-column align-items-center flex-grow-1\">\n        <i class=\"{{ item?.iconClassName }} font-size-36px primary-icon-theme mb-15px\"></i>\n        <div class=\"font-size-20px text-white mb-10px text-center text-truncate w-100\">{{ item?.name }}</div>\n        <div class=\"color-soft-blue text-center mb-20px flex-grow-1\">{{ item?.description }}</div>\n        <ng-container *ngIf=\"item.route\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               [routerLink]=\"item.route\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.onClick\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               (click)=\"item?.onClick()\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n\n    </div>\n</div>\n\n<ng-template #moreOptionTemplate let-array=\"array\">\n    <button mat-icon-button class=\"mr-n3 mt-n2\"\n            [class.disabled-half]=\"!array || !array.length\"\n            [matMenuTriggerFor]=\"tqlConsoleMenu\">\n        <i class=\"fal fa-ellipsis-v font-size-21px color-soft-blue\"></i>\n    </button>\n    <mat-menu #tqlConsoleMenu=\"matMenu\" class=\"menu-default\">\n        <button mat-menu-item *ngFor=\"let item of array\"\n                [routerLink]=\"item?.route\">\n            <div class=\"d-flex align-items-center\">\n                <i class=\"{{item?.iconClass}} font-size-18px\"></i>\n                <span class=\" ml-2\">{{item?.label}}</span>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-light .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-custom .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSimpleCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSimpleCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-simple-card', standalone: false, template: "<div class=\"card-simple-wrapper d-flex flex-column {{class}}\">\n    <div class=\"d-flex justify-content-end\">\n        <ng-container *ngTemplateOutlet=\"moreOptionTemplate;context:{array:item?.children}\">\n        </ng-container>\n    </div>\n    <div class=\"d-flex flex-column align-items-center flex-grow-1\">\n        <i class=\"{{ item?.iconClassName }} font-size-36px primary-icon-theme mb-15px\"></i>\n        <div class=\"font-size-20px text-white mb-10px text-center text-truncate w-100\">{{ item?.name }}</div>\n        <div class=\"color-soft-blue text-center mb-20px flex-grow-1\">{{ item?.description }}</div>\n        <ng-container *ngIf=\"item.route\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               [routerLink]=\"item.route\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.onClick\">\n            <a mat-button class=\"w-100 {{ item?.className }}\"\n               (click)=\"item?.onClick()\"\n               [class.disabled-half]=\"item?.disabled\">\n                <span class=\"font-weight-medium text-white\">{{item?.actionName}}</span>\n            </a>\n        </ng-container>\n\n    </div>\n</div>\n\n<ng-template #moreOptionTemplate let-array=\"array\">\n    <button mat-icon-button class=\"mr-n3 mt-n2\"\n            [class.disabled-half]=\"!array || !array.length\"\n            [matMenuTriggerFor]=\"tqlConsoleMenu\">\n        <i class=\"fal fa-ellipsis-v font-size-21px color-soft-blue\"></i>\n    </button>\n    <mat-menu #tqlConsoleMenu=\"matMenu\" class=\"menu-default\">\n        <button mat-menu-item *ngFor=\"let item of array\"\n                [routerLink]=\"item?.route\">\n            <div class=\"d-flex align-items-center\">\n                <i class=\"{{item?.iconClass}} font-size-18px\"></i>\n                <span class=\" ml-2\">{{item?.label}}</span>\n            </div>\n        </button>\n    </mat-menu>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-light .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}::ng-deep html.theme-custom .card-simple-wrapper{padding:15px 20px 25px;background-color:#0d3755;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [], propDecorators: { item: [{
@@ -3304,10 +3304,10 @@ class TqlHeaderComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlHeaderComponent, isStandalone: false, selector: "tql-header", ngImport: i0, template: "<div></div>\n<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlHeaderComponent, isStandalone: false, selector: "tql-header", ngImport: i0, template: "<div></div>\n<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-header', standalone: false, template: "<div></div>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [] });
@@ -3355,10 +3355,10 @@ class TqlCollapseGroupComponent extends DefaultComponent {
             this._TqlNavbarControllerService._Observable_Current_Preview_Item.next(this.navBarPreview);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseGroupComponent, deps: [{ token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlCollapseGroupComponent, isStandalone: false, selector: "tql-collapse-group", inputs: { headingClassName: "headingClassName", data: "data", inNavbar: "inNavbar", navbarClass: "navbarClass" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--not in navbar-->\n<ng-container *ngIf=\"!inNavbar\">\n    <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n</ng-container>\n<!--in navbar-->\n<ng-container *ngIf=\"inNavbar\">\n    <div class=\"hide-on-collapsed\">\n        <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n    </div>\n    <div class=\"show-on-collapsed\">\n        <div class=\"d-flex align-items-center justify-content-center h-40px parent p-0 cursor-pointer\" matRipple\n             [matTooltip]=\"data?.name\"\n             (click)=\"onShowContent($event)\">\n            <i class=\"{{data?.iconClassName || 'far fa-circle'}}\"></i>\n            <div class=\"d-flex has-group-hint align-items-center\">\n                <i class=\"fal fa-angle-right font-size-12px \"></i>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\"tql-collapse-group-wrapper\" *ngIf=\"data\">\n        <div\n            class=\"d-flex flex-gap-3 align-items-center justify-content-center cursor-pointer parent {{headingClassName}} {{inNavbar?navbarClass:''}}\"\n            matRipple\n            (click)=\"isCollapse = !isCollapse\">\n            <ng-container *ngIf=\"data?.template; else noTemplate\">\n                <ng-container *ngTemplateOutlet=\"data?.template\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplate>\n                <div class=\"d-flex align-items-center overflow-hidden\">\n                    <div class=\"parent-icon\"><i class=\"{{data?.iconClassName}}\"></i></div>\n                    <div class=\"title flex-shrink-1 flex-grow-1 flex-basis-0 text-truncate {{data?.className}}\"\n                         [title]=\"data?.name\">{{data?.name}}</div>\n                </div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"px-3\">\n                    <i class=\"fal \" [class.fa-angle-down]=\"!isCollapse\" [class.fa-angle-up]=\"isCollapse\"></i>\n                </div>\n            </ng-template>\n        </div>\n\n        <div [class.collapsed]=\"isCollapse\" class=\"d-flex flex-column children-group\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseGroupComponent, deps: [{ token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlCollapseGroupComponent, isStandalone: false, selector: "tql-collapse-group", inputs: { headingClassName: "headingClassName", data: "data", inNavbar: "inNavbar", navbarClass: "navbarClass" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--not in navbar-->\n<ng-container *ngIf=\"!inNavbar\">\n    <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n</ng-container>\n<!--in navbar-->\n<ng-container *ngIf=\"inNavbar\">\n    <div class=\"hide-on-collapsed\">\n        <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n    </div>\n    <div class=\"show-on-collapsed\">\n        <div class=\"d-flex align-items-center justify-content-center h-40px parent p-0 cursor-pointer\" matRipple\n             [matTooltip]=\"data?.name\"\n             (click)=\"onShowContent($event)\">\n            <i class=\"{{data?.iconClassName || 'far fa-circle'}}\"></i>\n            <div class=\"d-flex has-group-hint align-items-center\">\n                <i class=\"fal fa-angle-right font-size-12px \"></i>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\"tql-collapse-group-wrapper\" *ngIf=\"data\">\n        <div\n            class=\"d-flex flex-gap-3 align-items-center justify-content-center cursor-pointer parent {{headingClassName}} {{inNavbar?navbarClass:''}}\"\n            matRipple\n            (click)=\"isCollapse = !isCollapse\">\n            <ng-container *ngIf=\"data?.template; else noTemplate\">\n                <ng-container *ngTemplateOutlet=\"data?.template\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplate>\n                <div class=\"d-flex align-items-center overflow-hidden\">\n                    <div class=\"parent-icon\"><i class=\"{{data?.iconClassName}}\"></i></div>\n                    <div class=\"title flex-shrink-1 flex-grow-1 flex-basis-0 text-truncate {{data?.className}}\"\n                         [title]=\"data?.name\">{{data?.name}}</div>\n                </div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"px-3\">\n                    <i class=\"fal \" [class.fa-angle-down]=\"!isCollapse\" [class.fa-angle-up]=\"isCollapse\"></i>\n                </div>\n            </ng-template>\n        </div>\n\n        <div [class.collapsed]=\"isCollapse\" class=\"d-flex flex-column children-group\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCollapseGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCollapseGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-collapse-group', standalone: false, template: "<!--not in navbar-->\n<ng-container *ngIf=\"!inNavbar\">\n    <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n</ng-container>\n<!--in navbar-->\n<ng-container *ngIf=\"inNavbar\">\n    <div class=\"hide-on-collapsed\">\n        <ng-container [ngTemplateOutlet]=\"showNavBarPreview.template\" *ngIf=\"showNavBarPreview\"></ng-container>\n    </div>\n    <div class=\"show-on-collapsed\">\n        <div class=\"d-flex align-items-center justify-content-center h-40px parent p-0 cursor-pointer\" matRipple\n             [matTooltip]=\"data?.name\"\n             (click)=\"onShowContent($event)\">\n            <i class=\"{{data?.iconClassName || 'far fa-circle'}}\"></i>\n            <div class=\"d-flex has-group-hint align-items-center\">\n                <i class=\"fal fa-angle-right font-size-12px \"></i>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-template #contentTemplate>\n    <div class=\"tql-collapse-group-wrapper\" *ngIf=\"data\">\n        <div\n            class=\"d-flex flex-gap-3 align-items-center justify-content-center cursor-pointer parent {{headingClassName}} {{inNavbar?navbarClass:''}}\"\n            matRipple\n            (click)=\"isCollapse = !isCollapse\">\n            <ng-container *ngIf=\"data?.template; else noTemplate\">\n                <ng-container *ngTemplateOutlet=\"data?.template\"></ng-container>\n            </ng-container>\n            <ng-template #noTemplate>\n                <div class=\"d-flex align-items-center overflow-hidden\">\n                    <div class=\"parent-icon\"><i class=\"{{data?.iconClassName}}\"></i></div>\n                    <div class=\"title flex-shrink-1 flex-grow-1 flex-basis-0 text-truncate {{data?.className}}\"\n                         [title]=\"data?.name\">{{data?.name}}</div>\n                </div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"px-3\">\n                    <i class=\"fal \" [class.fa-angle-down]=\"!isCollapse\" [class.fa-angle-up]=\"isCollapse\"></i>\n                </div>\n            </ng-template>\n        </div>\n\n        <div [class.collapsed]=\"isCollapse\" class=\"d-flex flex-column children-group\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-dark .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-dark .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-dark .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-light .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-light .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-light .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent{height:40px;padding-left:.5rem}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .parent-icon{width:32px}::ng-deep html.theme-custom .tql-collapse-group-wrapper .parent .title{color:#fff}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group{overflow:hidden;transition:max-height .3s;max-height:100vh}::ng-deep html.theme-custom .tql-collapse-group-wrapper .children-group.collapsed{max-height:0}::ng-deep html.theme-custom .tql-collapse-container:not(.collapsed) .tql-collapse-group-wrapper .parent{padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: TqlNavbarControllerService }], propDecorators: { contentTemplate: [{
@@ -3378,10 +3378,10 @@ class TqlHighlightListComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHighlightListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlHighlightListComponent, isStandalone: false, selector: "lib-tql-highlight-list", ngImport: i0, template: "<p>tql-highlight-list works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHighlightListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlHighlightListComponent, isStandalone: false, selector: "lib-tql-highlight-list", ngImport: i0, template: "<p>tql-highlight-list works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHighlightListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHighlightListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tql-highlight-list', standalone: false, template: "<p>tql-highlight-list works!</p>\n" }]
         }], ctorParameters: () => [] });
@@ -3396,10 +3396,10 @@ class TqlStatusListComponent {
         this.selectedItem = item;
         this.onChange.emit(this.selectedItem);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlStatusListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlStatusListComponent, isStandalone: false, selector: "tql-status-list", inputs: { items: "items" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"status-list-wrapper\">\n    <ng-container *ngFor=\"let item of items\">\n        <ng-container\n            *ngIf=\"item?.route; then routerLinkList else defaultList\"></ng-container>\n        <ng-template #routerLinkList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [routerLink]=\"item?.route\"\n                 [routerLinkActive]=\"'selected'\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template #defaultList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [class.selected]=\"selectedItem === item\"\n                 (click)=\"onSelect(item)\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .status-list-wrapper .item{height:40px}::ng-deep html.theme-dark .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .status-list-wrapper .item{height:40px}::ng-deep html.theme-light .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected{color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-light .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .status-list-wrapper .item{height:40px}::ng-deep html.theme-custom .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlStatusListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlStatusListComponent, isStandalone: false, selector: "tql-status-list", inputs: { items: "items" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"status-list-wrapper\">\n    <ng-container *ngFor=\"let item of items\">\n        <ng-container\n            *ngIf=\"item?.route; then routerLinkList else defaultList\"></ng-container>\n        <ng-template #routerLinkList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [routerLink]=\"item?.route\"\n                 [routerLinkActive]=\"'selected'\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template #defaultList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [class.selected]=\"selectedItem === item\"\n                 (click)=\"onSelect(item)\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .status-list-wrapper .item{height:40px}::ng-deep html.theme-dark .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .status-list-wrapper .item{height:40px}::ng-deep html.theme-light .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected{color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-light .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .status-list-wrapper .item{height:40px}::ng-deep html.theme-custom .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlStatusListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlStatusListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-status-list', standalone: false, template: "<div class=\"status-list-wrapper\">\n    <ng-container *ngFor=\"let item of items\">\n        <ng-container\n            *ngIf=\"item?.route; then routerLinkList else defaultList\"></ng-container>\n        <ng-template #routerLinkList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [routerLink]=\"item?.route\"\n                 [routerLinkActive]=\"'selected'\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template #defaultList>\n            <div class=\"d-flex side-padding item cursor-pointer align-items-center\"\n                 matRipple\n                 [class.selected]=\"selectedItem === item\"\n                 (click)=\"onSelect(item)\">\n                <div class=\"d-flex align-items-center justify-content-center selected-icon\"><i\n                    class=\" fas fa-circle font-size-7px\"></i></div>\n                <div class=\"text-truncate\">{{item?.name}}</div>\n                <div class=\"flex-grow-1\"></div>\n                <div class=\"status-icon px-3 font-size-8px\">\n                    <i class=\"fal fa-circle\"></i>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: ["::ng-deep html.theme-dark .status-list-wrapper .item{height:40px}::ng-deep html.theme-dark .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-dark .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-dark .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-dark .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-light .status-list-wrapper .item{height:40px}::ng-deep html.theme-light .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected{color:#fff}::ng-deep html.theme-light .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-light .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-light .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}::ng-deep html.theme-custom .status-list-wrapper .item{height:40px}::ng-deep html.theme-custom .status-list-wrapper .item .selected-icon{opacity:0;width:30px;color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected{color:#23bfff}::ng-deep html.theme-custom .status-list-wrapper .item.selected .selected-icon{opacity:1}::ng-deep html.theme-custom .status-list-wrapper .item:hover{background:#ffffff0a}::ng-deep html.theme-custom .status-list-wrapper .item:not(.selected):hover .selected-icon{opacity:.3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{
@@ -3652,10 +3652,10 @@ class TqlTreeCore {
             this.onEmitEvent(TqlTreeCore.ExpandEvent, { node: node });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTreeCore, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlTreeCore, isStandalone: false, inputs: { id: "id", collapseClassName: "collapseClassName", expandClassName: "expandClassName", alwaysShowExpandCollapseIcon: "alwaysShowExpandCollapseIcon", styles: "styles", data: "data", readonly: "readonly", selectable: "selectable", isToggleSelect: "isToggleSelect", draggable: "draggable", dropIds: "dropIds" }, outputs: { init: "init", onEventChange: "onEventChange", onSwapChange: "onSwapChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTreeCore, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlTreeCore, isStandalone: false, inputs: { id: "id", collapseClassName: "collapseClassName", expandClassName: "expandClassName", alwaysShowExpandCollapseIcon: "alwaysShowExpandCollapseIcon", styles: "styles", data: "data", readonly: "readonly", selectable: "selectable", isToggleSelect: "isToggleSelect", draggable: "draggable", dropIds: "dropIds" }, outputs: { init: "init", onEventChange: "onEventChange", onSwapChange: "onSwapChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTreeCore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTreeCore, decorators: [{
             type: Directive,
             args: [{
                     standalone: false,
@@ -3736,10 +3736,10 @@ class TqlTreeComponent extends TqlTreeCore {
             node?.onClick(this.selected);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTreeComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlTreeComponent, isStandalone: false, selector: "tql-tree", inputs: { selected: "selected" }, outputs: { selectedChanged: "selectedChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTreeComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlTreeComponent, isStandalone: false, selector: "tql-tree", inputs: { selected: "selected" }, outputs: { selectedChanged: "selectedChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-tree', standalone: false, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Router }], propDecorators: { selectedChanged: [{
@@ -3752,10 +3752,10 @@ class TqlRouteTreeComponent extends TqlTreeCore {
         super(_Router);
         this.treeType = TqlTreeCore.ENUM_TYPES.ROUTE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlRouteTreeComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlRouteTreeComponent, isStandalone: false, selector: "tql-route-tree", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlRouteTreeComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlRouteTreeComponent, isStandalone: false, selector: "tql-route-tree", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i4$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i4$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i4$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlRouteTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlRouteTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-route-tree', standalone: false, template: "<div class=\"w-100 overflow-auto tql-tree-wrapper\"\n     [class.dragging]=\"dragging\"\n     [id]=\"id\"\n     cdkDropList\n     [cdkDropListSortingDisabled]=\"true\"\n     [cdkDropListConnectedTo]=\"dropIds\"\n     (cdkDropListDropped)=\"drop($event)\">\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"\"\n              [class.row-highlight-when-select]=\"styles.includes(STYLES.ROW_HIGHLIGHT_WHEN_SELECT)\">\n        <!-- This is the tree node template for leaf nodes -->\n        <!-- There is inline padding applied to this node using styles.\n          This padding value depends on the mat-icon-button width. -->\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle\n                       [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                       cdkDrag\n                       [cdkDragData]=\"node\"\n                       (cdkDragMoved)=\"onDragMove()\"\n                       [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                       (mouseenter)=\"dragHover(node)\"\n                       (mouseleave)=\"dragHoverEnd()\"\n                       (cdkDragStarted)=\"dragStart()\"\n                       (cdkDragReleased)=\"dragRelease($event)\"\n                       (mouseup)=\"dropOnItem(node)\"\n        >\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2\">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:true};\"></ng-container>\n        </mat-tree-node>\n\n        <!-- This is the tree node template for expandable nodes -->\n        <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\"\n                              [class.cursor-move]=\"node?.draggable && !node?.disabled\"\n                              cdkDrag\n                              [cdkDragData]=\"node\"\n                              (cdkDragMoved)=\"onDragMove()\"\n                              [cdkDragDisabled]=\"!node?.draggable || node?.disabled\"\n                              (mouseenter)=\"dragHover(node)\"\n                              (mouseleave)=\"dragHoverEnd()\"\n                              (cdkDragStarted)=\"dragStart()\"\n                              (cdkDragReleased)=\"dragRelease($event)\"\n                              (mouseup)=\"dropOnItem(node)\">\n            <div *cdkDragPreview\n                 class=\"ml-2 p-2 color-white tql-tree-drag-preview-wrapper d-flex flex-gap-3 align-items-center mat-elevation-z2 multiple \">\n                <div class=\"d-flex flex-gap-2 align-items-center flex-grow-1 overflow-hidden\">\n                    <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                        <i class=\"{{node?.iconClassName}}\"></i>\n                    </div>\n                    <div class=\"text-truncate flex-grow-1\" [title]=\"node?.name\">{{node?.name}}</div>\n                </div>\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </div>\n            <div class=\"mat-tree-node\" matRipple\n                 [class.disabled-half]=\"node?.disabled\"\n                 [class.selected]=\"selected === node\"\n            >\n                <div class=\"d-flex align-items-center w-100\">\n                    <div class=\"collapse-icon d-flex align-items-center cursor-pointer pl-2 pr-2\"\n                         [class.ml-2]=\"node?.level === 0\"\n                         (click)=\"toggleCollapseExpand(node)\">\n                        <i class=\"{{treeControl.isExpanded(node)?expandClassName:collapseClassName}}\"></i>\n                    </div>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTypeTemplate; context:{node:node,isLeaf:false};\"></ng-container>\n                </div>\n            </div>\n            <!-- There is inline padding applied to this div using styles.\n                This padding value depends on the mat-icon-button width.  -->\n            <div [class.d-none]=\"!treeControl.isExpanded(node)\"\n                 [class.disabled-half]=\"node?.disabled\"\n                 class=\"branch\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <ng-template #optionsTemplate let-node=\"node\">\n        <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n            <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n        </div>\n    </ng-template>\n    <ng-template #draggableTemplate let-node=\"node\">\n        <div *ngIf=\"!readonly && node?.draggable && !node?.disabled\"\n             class=\"action drag-icon\"\n             [class.show-on-hover]=\"true\"\n        >\n            <button mat-icon-button\n                    class=\"small\"\n                    [matTooltip]=\"'Draggable'\">\n                <i class=\"fal fa-grip-lines-vertical\"></i>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #nodeTypeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.ROUTE\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.cursor-pointer]=\"node?.route\"\n                     [class.clickable]=\"node?.route\"\n                     [class.disabled-half]=\"node?.disabled\"\n                     [routerLink]=\"node?.route\"\n                     [routerLinkActive]=\"node?.route?'selected':''\"\n                     [state]=\"node?.routeState\"\n                     [routerLinkActiveOptions]=\"node?.routerActiveOptions || {exact: false}\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"treeType === treeTypes.DEFAULT\">\n                <div class=\"mat-tree-node\" matRipple\n                     [class.leaf]=\"isLeaf\"\n                     [class.selected]=\"selected === node && node?.selectable\"\n                     [class.cursor-pointer]=\"node?.selectable || node?.onClick\"\n                     [class.clickable]=\"node?.selectable || node?.onClick\"\n                     (click)=\"onSelectNode(node)\"\n                     [class.disabled-half]=\"node?.disabled\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeTemplate; context:{node:node,isLeaf:isLeaf};\"></ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n\n</div>\n\n<ng-template #nodeTemplate let-node=\"node\" let-isLeaf=\"isLeaf\">\n    <!--    <ng-container [ngSwitch]=\"true\">-->\n    <div class=\"d-flex align-items-center w-100 h-100\"\n    >\n        <div\n            class=\"collapse-icon d-flex align-items-center cursor-pointer opacity-30 {{isLeaf?'ml-2 pl-2 pr-2':''}}\"\n            *ngIf=\"isLeaf && node?.level === 0 && !(isSingleLevelTree && !alwaysShowExpandCollapseIcon)\">\n            <i class=\"{{collapseClassName}}\"></i>\n        </div>\n        <div *ngIf=\"isLeaf && node?.level === 0 && (isSingleLevelTree && !alwaysShowExpandCollapseIcon)\"\n             class=\"ml-2 pl-2 \">\n        </div>\n\n        <div class=\"d-flex align-items-center w-100 h-100 flex-gap-2\">\n            <div class=\"icon d-flex align-items-center\" *ngIf=\"node?.iconClassName\">\n                <i class=\"{{node?.iconClassName}}\"></i>\n            </div>\n            <div class=\"title\" *ngIf=\"node?.title\">{{node?.title}}</div>\n            <div class=\"text-truncate name {{node?.className}}\"\n                 [title]=\"node?.name\"\n                 [innerHTML]=\"node?.name\">\n            </div>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <!--    </ng-container>-->\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-dark .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-dark .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-dark .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-dark .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-dark .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-dark .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-light .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-light .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-light .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-light .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-light .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-light .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-light .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}::ng-deep html.theme-custom .tql-tree-wrapper.cdk-drop-list-dragging{background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23119ED9' stroke-width='2' stroke-dasharray='3%2c6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .mat-tree-node.selected .icon{color:#23bfff}::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .name,::ng-deep html.theme-custom .tql-tree-wrapper .clickable:hover:not(.selected) .icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder{display:block!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder>*{opacity:.3!important}::ng-deep html.theme-custom .tql-tree-wrapper.dragging .cdk-drag.cdk-drag-placeholder .drag-icon{display:initial!important}::ng-deep html.theme-custom .tql-tree-wrapper:not(.dragging) .cdk-drag.cdk-drag-placeholder{display:none!important}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node:not(.leaf):hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .name,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .icon,::ng-deep html.theme-custom .tql-tree-wrapper .row-highlight-when-select .mat-tree-node.selected .collapse-icon{color:#fff}::ng-deep html.theme-custom .tql-tree-wrapper .collapse-icon{font-size:16px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper{background-color:#215d87;padding:10px!important;max-width:200px}::ng-deep html.theme-custom .cdk-drag-preview.tql-tree-drag-preview-wrapper.multiple{box-shadow:3px 3px #888}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Router }] });
@@ -3783,10 +3783,10 @@ class TqlImageCardComponent {
     onLivePreviewClick() {
         this.onLivePreviewClicked.emit(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlImageCardComponent, isStandalone: false, selector: "tql-image-card", inputs: { urlImage: "urlImage", titleString: "titleString", description: "description", isSelected: "isSelected" }, outputs: { isSelectedChange: "isSelectedChange", onDetailClicked: "onDetailClicked", onLivePreviewClicked: "onLivePreviewClicked" }, ngImport: i0, template: "<div class=\"image-card\">\n    <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + urlImage + ')'}\">\n        <div class=\"image-card-btn-group w-100 h-100 d-flex justify-content-center align-items-center\">\n            <button mat-button class=\"btn btn-sky-blue text-white\" (click)=\"onDetailClick()\">\n                <span class=\"font-size-14px\">Detail</span>\n            </button>\n            <button mat-button class=\"btn ml-20px btn-live-preview\" (click)=\"onLivePreviewClick()\">\n                <span class=\"font-size-14px\">Live Preview</span>\n            </button>\n        </div>\n    </div>\n    <div class=\"highlight-box pl-20px pr-20px pb-20px\">\n        <div class=\"highlight-header d-flex justify-content-between align-items-center\">\n            <div class=\"font-size-20px color-sky-blue text-capitalize\">{{ titleString }}</div>\n            <i class=\"fad fa-check-circle font-size-18px tick cursor-pointer\" (click)=\"toggleSelect()\" [class.active]=\"isSelected\"></i>\n        </div>\n        <div class=\"font-size-14px color-soft-blue font-weight-light highlight-des\">{{ description }}</div>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-dark .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-dark .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-dark .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-dark .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-dark .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-light .image-card{width:440px;background-color:#f4f5f7}::ng-deep html.theme-light .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-light .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-light .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-light .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-light .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#fff;--fa-secondary-opacity: 1}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-light .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-custom .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-custom .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-custom .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-custom .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-custom .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-custom .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlImageCardComponent, isStandalone: false, selector: "tql-image-card", inputs: { urlImage: "urlImage", titleString: "titleString", description: "description", isSelected: "isSelected" }, outputs: { isSelectedChange: "isSelectedChange", onDetailClicked: "onDetailClicked", onLivePreviewClicked: "onLivePreviewClicked" }, ngImport: i0, template: "<div class=\"image-card\">\n    <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + urlImage + ')'}\">\n        <div class=\"image-card-btn-group w-100 h-100 d-flex justify-content-center align-items-center\">\n            <button mat-button class=\"btn btn-sky-blue text-white\" (click)=\"onDetailClick()\">\n                <span class=\"font-size-14px\">Detail</span>\n            </button>\n            <button mat-button class=\"btn ml-20px btn-live-preview\" (click)=\"onLivePreviewClick()\">\n                <span class=\"font-size-14px\">Live Preview</span>\n            </button>\n        </div>\n    </div>\n    <div class=\"highlight-box pl-20px pr-20px pb-20px\">\n        <div class=\"highlight-header d-flex justify-content-between align-items-center\">\n            <div class=\"font-size-20px color-sky-blue text-capitalize\">{{ titleString }}</div>\n            <i class=\"fad fa-check-circle font-size-18px tick cursor-pointer\" (click)=\"toggleSelect()\" [class.active]=\"isSelected\"></i>\n        </div>\n        <div class=\"font-size-14px color-soft-blue font-weight-light highlight-des\">{{ description }}</div>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-dark .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-dark .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-dark .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-dark .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-dark .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-light .image-card{width:440px;background-color:#f4f5f7}::ng-deep html.theme-light .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-light .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-light .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-light .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-light .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#fff;--fa-secondary-opacity: 1}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-light .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-custom .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-custom .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-custom .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-custom .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-custom .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-custom .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlImageCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlImageCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-image-card', standalone: false, template: "<div class=\"image-card\">\n    <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + urlImage + ')'}\">\n        <div class=\"image-card-btn-group w-100 h-100 d-flex justify-content-center align-items-center\">\n            <button mat-button class=\"btn btn-sky-blue text-white\" (click)=\"onDetailClick()\">\n                <span class=\"font-size-14px\">Detail</span>\n            </button>\n            <button mat-button class=\"btn ml-20px btn-live-preview\" (click)=\"onLivePreviewClick()\">\n                <span class=\"font-size-14px\">Live Preview</span>\n            </button>\n        </div>\n    </div>\n    <div class=\"highlight-box pl-20px pr-20px pb-20px\">\n        <div class=\"highlight-header d-flex justify-content-between align-items-center\">\n            <div class=\"font-size-20px color-sky-blue text-capitalize\">{{ titleString }}</div>\n            <i class=\"fad fa-check-circle font-size-18px tick cursor-pointer\" (click)=\"toggleSelect()\" [class.active]=\"isSelected\"></i>\n        </div>\n        <div class=\"font-size-14px color-soft-blue font-weight-light highlight-des\">{{ description }}</div>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-dark .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-dark .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-dark .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-dark .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-dark .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-dark .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-dark .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-light .image-card{width:440px;background-color:#f4f5f7}::ng-deep html.theme-light .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-light .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-light .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-light .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-light .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-light .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#fff;--fa-secondary-opacity: 1}::ng-deep html.theme-light .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-light .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}::ng-deep html.theme-custom .image-card{width:440px;background-color:#072a43}::ng-deep html.theme-custom .image-card .img{height:240px;border:1px solid #0d3755;background-size:100% 100%;background-repeat:no-repeat}::ng-deep html.theme-custom .image-card .img .image-card-btn-group{opacity:0;background-color:#0d3755cc;transition:.3s all}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn{width:110px}::ng-deep html.theme-custom .image-card .img .image-card-btn-group .btn-live-preview{background-color:#39da8a;color:#0d3755}::ng-deep html.theme-custom .image-card .img .image-card-btn-group:hover{opacity:1}::ng-deep html.theme-custom .image-card .highlight-box{background-color:#0d3755}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header{height:50px}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick{--fa-primary-color: #0D3755;color:#5f8198;--fa-secondary-opacity: 1}::ng-deep html.theme-custom .image-card .highlight-box .highlight-header .tick.active{color:#39da8a}::ng-deep html.theme-custom .image-card .highlight-box .highlight-des{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { urlImage: [{
@@ -3819,10 +3819,10 @@ class TqlTabsHeaderComponent {
         }
         this.activeItemChange.emit(this.activeItem);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTabsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlTabsHeaderComponent, isStandalone: false, selector: "tql-tabs-header", inputs: { list: "list", activeItem: "activeItem" }, outputs: { activeItemChange: "activeItemChange" }, ngImport: i0, template: "<nav mat-tab-nav-bar class=\"tql-tabs-header-wrapper d-flex\">\n    <a mat-tab-link *ngFor=\"let item of list\"\n       class=\"flex-grow-1\"\n       (click)=\"onChangeTab(item)\"\n       [active]=\"activeItem == item\"> {{item?.name}} </a>\n</nav>\n", styles: ["::ng-deep html.theme-dark .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTabsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlTabsHeaderComponent, isStandalone: false, selector: "tql-tabs-header", inputs: { list: "list", activeItem: "activeItem" }, outputs: { activeItemChange: "activeItemChange" }, ngImport: i0, template: "<nav mat-tab-nav-bar class=\"tql-tabs-header-wrapper d-flex\">\n    <a mat-tab-link *ngFor=\"let item of list\"\n       class=\"flex-grow-1\"\n       (click)=\"onChangeTab(item)\"\n       [active]=\"activeItem == item\"> {{item?.name}} </a>\n</nav>\n", styles: ["::ng-deep html.theme-dark .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTabsHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTabsHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-tabs-header', standalone: false, template: "<nav mat-tab-nav-bar class=\"tql-tabs-header-wrapper d-flex\">\n    <a mat-tab-link *ngFor=\"let item of list\"\n       class=\"flex-grow-1\"\n       (click)=\"onChangeTab(item)\"\n       [active]=\"activeItem == item\"> {{item?.name}} </a>\n</nav>\n", styles: ["::ng-deep html.theme-dark .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-dark .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-light .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper{border-bottom:1px solid #215d87;background-color:#0d3755}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link{color:#fff;opacity:1;height:40px}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-tab-link.mat-tab-label-active{background-color:#215d87}::ng-deep html.theme-custom .tql-tabs-header-wrapper .mat-ink-bar{background-color:#215d87}\n"] }]
         }], ctorParameters: () => [], propDecorators: { list: [{
@@ -4016,10 +4016,10 @@ class TqlCodeEditorComponent {
             this.onCloseItems(_.filter(this._data, (x) => x !== codeEditorModel));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlCodeEditorComponent, isStandalone: false, selector: "tql-code-editor", inputs: { actions: "actions", hideDefaultActions: "hideDefaultActions", saveAction: "saveAction", showTabOnly: "showTabOnly", data: "data", hasHeading: "hasHeading", headingClassName: "headingClassName", multiple: "multiple", hintMenuTemplate: "hintMenuTemplate", scrollToBottomWhenUpdate: "scrollToBottomWhenUpdate", readOnly: "readOnly", selected: "selected", mode: "mode" }, outputs: { dataChange: "dataChange", onChange: "onChange", onInit: "onInit" }, viewQueries: [{ propertyName: "editors", predicate: CodemirrorComponent, descendants: true }], ngImport: i0, template: "<div class=\"w-100 h-100 tql-code-editor-wrapper\"\n     [class.has-heading]=\"hasHeading\">\n    <div class=\"heading d-flex align-items-center {{headingClassName}}\" *ngIf=\"hasHeading\">\n        <div class=\"flex-grow-1 tab-group d-flex overflow-hidden\">\n            <nav mat-tab-nav-bar class=\"w-100\">\n                <a mat-tab-link\n                   class=\"d-flex tab align-items-center flex-gap-1\"\n                   *ngFor=\"let item of _data\"\n                   (click)=\"onSelectTab(item)\"\n                   [active]=\"selected === item\">\n                    <div class=\"px-2 code-mode text-uppercase {{item?.mode}}\">{{item?.mode}}</div>\n                    <div class=\"text-truncate flex-grow-1\">{{item?.name}}</div>\n                    <div class=\"d-flex align-items-center\">\n                        <div\n                            *ngIf=\"item?.hasUnsaved()\"\n                            [matTooltip]=\"unsavedIcon?.name\"\n                            class=\"px-1\">\n                            <i class=\"{{unsavedIcon?.iconClassName}}\"></i>\n                        </div>\n                        <button mat-icon-button\n                                (click)=\"closeIcon.onClick(item);$event.stopPropagation();\"\n                                [matTooltip]=\"closeIcon?.name\"\n                                class=\"{{closeIcon?.className}}\">\n                            <i class=\"{{closeIcon?.iconClassName}}\"></i>\n                        </button>\n                    </div>\n                </a>\n            </nav>\n        </div>\n        <div class=\"d-flex\">\n            <div class=\"d-flex\">\n                <button mat-icon-button *ngFor=\"let item of actions\"\n                        (click)=\"item?.onClick()\"\n                        [matTooltip]=\"item?.name\"\n                        class=\"{{item?.className}}\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <button mat-icon-button\n                        [matMenuTriggerFor]=\"moreMenu\"\n                        [matTooltip]=\"moreIcon?.name\"\n                        class=\"{{moreIcon?.className}}\">\n                    <i class=\"{{moreIcon?.iconClassName}}\"></i>\n                </button>\n                <mat-menu #moreMenu=\"matMenu\" backdropClass=\"mat-menu-default\">\n                    <button mat-menu-item *ngFor=\"let item of moreActions\"\n                            (click)=\"item?.onClick()\"\n                            [class.disabled-half]=\"!selected\">\n                        <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                        <span>{{item?.name}}</span>\n                    </button>\n                </mat-menu>\n                <div class=\"divider pr-2\"></div>\n            </div>\n            <div class=\"d-flex\" *ngIf=\"!selected?.template && !hideDefaultActions\">\n                <ng-container>\n                    <button mat-icon-button *ngFor=\"let item of [saveIcon]\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"!selected?.hasUnsaved()\"\n                            (click)=\"item?.onClick()\"\n                            [matTooltip]=\"item?.name\"\n                            class=\"{{item?.className}}\">\n                        <i class=\"{{item?.iconClassName}}\"></i>\n                    </button>\n                    <button mat-icon-button\n                            (click)=\"formatIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty()\"\n                            [matTooltip]=\"formatIcon?.name\"\n                            class=\"{{formatIcon?.className}} disabled-half\">\n                        <i class=\"{{formatIcon?.iconClassName}}\"></i>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"hintMenuTemplate\">\n                    <button mat-icon-button\n                            (click)=\"questionIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty() && !hintMenu\"\n                            [matTooltip]=\"questionIcon?.name\"\n                            [matMenuTriggerFor]=\"hintMenu\"\n                            class=\"{{questionIcon?.className}}\">\n                        <i class=\"{{questionIcon?.iconClassName}}\"></i>\n                    </button>\n                    <mat-menu #hintMenu=\"matMenu\" backdropClass=\"mat-menu-hint\">\n                        <ng-container *ngTemplateOutlet=\"hintMenuTemplate\"></ng-container>\n                    </mat-menu>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div class=\"content\" *ngIf=\"!showTabOnly\">\n        <ng-container *ngIf=\"_data?.length; else noData\">\n            <div *ngFor=\"let item of _data\" class=\"h-100\"\n                 [class.d-none]=\"item !== selected\">\n                <ng-container *ngIf=\"!item?.template\">\n                    <ngx-codemirror\n                        [name]=\"item?.getId()\"\n                        class=\"w-100 h-100\"\n                        [formControl]=\"item?.content\"\n                        [options]=\"item?.editorOptions\"\n                        (ngModelChange)=\"codemirrorChange($event)\"\n                    ></ngx-codemirror>\n                </ng-container>\n                <ng-container *ngIf=\"item?.template && item === selected\">\n                    <ng-container\n                        *ngTemplateOutlet=\"item?.template;context:{item:selected}\"></ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #noData>\n            <div class=\"d-flex justify-content-center align-items-center h-100 font-size-100px\">\n                <i class=\"fad fa-code empty-icon\"></i>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-dark .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-dark .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-dark .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-light .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-light .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-light .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-light .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-custom .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-custom .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-custom .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-custom .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlCodeEditorComponent, isStandalone: false, selector: "tql-code-editor", inputs: { actions: "actions", hideDefaultActions: "hideDefaultActions", saveAction: "saveAction", showTabOnly: "showTabOnly", data: "data", hasHeading: "hasHeading", headingClassName: "headingClassName", multiple: "multiple", hintMenuTemplate: "hintMenuTemplate", scrollToBottomWhenUpdate: "scrollToBottomWhenUpdate", readOnly: "readOnly", selected: "selected", mode: "mode" }, outputs: { dataChange: "dataChange", onChange: "onChange", onInit: "onInit" }, viewQueries: [{ propertyName: "editors", predicate: CodemirrorComponent, descendants: true }], ngImport: i0, template: "<div class=\"w-100 h-100 tql-code-editor-wrapper\"\n     [class.has-heading]=\"hasHeading\">\n    <div class=\"heading d-flex align-items-center {{headingClassName}}\" *ngIf=\"hasHeading\">\n        <div class=\"flex-grow-1 tab-group d-flex overflow-hidden\">\n            <nav mat-tab-nav-bar class=\"w-100\">\n                <a mat-tab-link\n                   class=\"d-flex tab align-items-center flex-gap-1\"\n                   *ngFor=\"let item of _data\"\n                   (click)=\"onSelectTab(item)\"\n                   [active]=\"selected === item\">\n                    <div class=\"px-2 code-mode text-uppercase {{item?.mode}}\">{{item?.mode}}</div>\n                    <div class=\"text-truncate flex-grow-1\">{{item?.name}}</div>\n                    <div class=\"d-flex align-items-center\">\n                        <div\n                            *ngIf=\"item?.hasUnsaved()\"\n                            [matTooltip]=\"unsavedIcon?.name\"\n                            class=\"px-1\">\n                            <i class=\"{{unsavedIcon?.iconClassName}}\"></i>\n                        </div>\n                        <button mat-icon-button\n                                (click)=\"closeIcon.onClick(item);$event.stopPropagation();\"\n                                [matTooltip]=\"closeIcon?.name\"\n                                class=\"{{closeIcon?.className}}\">\n                            <i class=\"{{closeIcon?.iconClassName}}\"></i>\n                        </button>\n                    </div>\n                </a>\n            </nav>\n        </div>\n        <div class=\"d-flex\">\n            <div class=\"d-flex\">\n                <button mat-icon-button *ngFor=\"let item of actions\"\n                        (click)=\"item?.onClick()\"\n                        [matTooltip]=\"item?.name\"\n                        class=\"{{item?.className}}\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <button mat-icon-button\n                        [matMenuTriggerFor]=\"moreMenu\"\n                        [matTooltip]=\"moreIcon?.name\"\n                        class=\"{{moreIcon?.className}}\">\n                    <i class=\"{{moreIcon?.iconClassName}}\"></i>\n                </button>\n                <mat-menu #moreMenu=\"matMenu\" backdropClass=\"mat-menu-default\">\n                    <button mat-menu-item *ngFor=\"let item of moreActions\"\n                            (click)=\"item?.onClick()\"\n                            [class.disabled-half]=\"!selected\">\n                        <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                        <span>{{item?.name}}</span>\n                    </button>\n                </mat-menu>\n                <div class=\"divider pr-2\"></div>\n            </div>\n            <div class=\"d-flex\" *ngIf=\"!selected?.template && !hideDefaultActions\">\n                <ng-container>\n                    <button mat-icon-button *ngFor=\"let item of [saveIcon]\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"!selected?.hasUnsaved()\"\n                            (click)=\"item?.onClick()\"\n                            [matTooltip]=\"item?.name\"\n                            class=\"{{item?.className}}\">\n                        <i class=\"{{item?.iconClassName}}\"></i>\n                    </button>\n                    <button mat-icon-button\n                            (click)=\"formatIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty()\"\n                            [matTooltip]=\"formatIcon?.name\"\n                            class=\"{{formatIcon?.className}} disabled-half\">\n                        <i class=\"{{formatIcon?.iconClassName}}\"></i>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"hintMenuTemplate\">\n                    <button mat-icon-button\n                            (click)=\"questionIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty() && !hintMenu\"\n                            [matTooltip]=\"questionIcon?.name\"\n                            [matMenuTriggerFor]=\"hintMenu\"\n                            class=\"{{questionIcon?.className}}\">\n                        <i class=\"{{questionIcon?.iconClassName}}\"></i>\n                    </button>\n                    <mat-menu #hintMenu=\"matMenu\" backdropClass=\"mat-menu-hint\">\n                        <ng-container *ngTemplateOutlet=\"hintMenuTemplate\"></ng-container>\n                    </mat-menu>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div class=\"content\" *ngIf=\"!showTabOnly\">\n        <ng-container *ngIf=\"_data?.length; else noData\">\n            <div *ngFor=\"let item of _data\" class=\"h-100\"\n                 [class.d-none]=\"item !== selected\">\n                <ng-container *ngIf=\"!item?.template\">\n                    <ngx-codemirror\n                        [name]=\"item?.getId()\"\n                        class=\"w-100 h-100\"\n                        [formControl]=\"item?.content\"\n                        [options]=\"item?.editorOptions\"\n                        (ngModelChange)=\"codemirrorChange($event)\"\n                    ></ngx-codemirror>\n                </ng-container>\n                <ng-container *ngIf=\"item?.template && item === selected\">\n                    <ng-container\n                        *ngTemplateOutlet=\"item?.template;context:{item:selected}\"></ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #noData>\n            <div class=\"d-flex justify-content-center align-items-center h-100 font-size-100px\">\n                <i class=\"fad fa-code empty-icon\"></i>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-dark .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-dark .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-dark .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-light .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-light .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-light .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-light .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-custom .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-custom .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-custom .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-custom .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlCodeEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlCodeEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-code-editor', standalone: false, template: "<div class=\"w-100 h-100 tql-code-editor-wrapper\"\n     [class.has-heading]=\"hasHeading\">\n    <div class=\"heading d-flex align-items-center {{headingClassName}}\" *ngIf=\"hasHeading\">\n        <div class=\"flex-grow-1 tab-group d-flex overflow-hidden\">\n            <nav mat-tab-nav-bar class=\"w-100\">\n                <a mat-tab-link\n                   class=\"d-flex tab align-items-center flex-gap-1\"\n                   *ngFor=\"let item of _data\"\n                   (click)=\"onSelectTab(item)\"\n                   [active]=\"selected === item\">\n                    <div class=\"px-2 code-mode text-uppercase {{item?.mode}}\">{{item?.mode}}</div>\n                    <div class=\"text-truncate flex-grow-1\">{{item?.name}}</div>\n                    <div class=\"d-flex align-items-center\">\n                        <div\n                            *ngIf=\"item?.hasUnsaved()\"\n                            [matTooltip]=\"unsavedIcon?.name\"\n                            class=\"px-1\">\n                            <i class=\"{{unsavedIcon?.iconClassName}}\"></i>\n                        </div>\n                        <button mat-icon-button\n                                (click)=\"closeIcon.onClick(item);$event.stopPropagation();\"\n                                [matTooltip]=\"closeIcon?.name\"\n                                class=\"{{closeIcon?.className}}\">\n                            <i class=\"{{closeIcon?.iconClassName}}\"></i>\n                        </button>\n                    </div>\n                </a>\n            </nav>\n        </div>\n        <div class=\"d-flex\">\n            <div class=\"d-flex\">\n                <button mat-icon-button *ngFor=\"let item of actions\"\n                        (click)=\"item?.onClick()\"\n                        [matTooltip]=\"item?.name\"\n                        class=\"{{item?.className}}\">\n                    <i class=\"{{item?.iconClassName}}\"></i>\n                </button>\n                <button mat-icon-button\n                        [matMenuTriggerFor]=\"moreMenu\"\n                        [matTooltip]=\"moreIcon?.name\"\n                        class=\"{{moreIcon?.className}}\">\n                    <i class=\"{{moreIcon?.iconClassName}}\"></i>\n                </button>\n                <mat-menu #moreMenu=\"matMenu\" backdropClass=\"mat-menu-default\">\n                    <button mat-menu-item *ngFor=\"let item of moreActions\"\n                            (click)=\"item?.onClick()\"\n                            [class.disabled-half]=\"!selected\">\n                        <i *ngIf=\"item?.iconClassName\" class=\"{{item?.iconClassName}}\"></i>\n                        <span>{{item?.name}}</span>\n                    </button>\n                </mat-menu>\n                <div class=\"divider pr-2\"></div>\n            </div>\n            <div class=\"d-flex\" *ngIf=\"!selected?.template && !hideDefaultActions\">\n                <ng-container>\n                    <button mat-icon-button *ngFor=\"let item of [saveIcon]\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"!selected?.hasUnsaved()\"\n                            (click)=\"item?.onClick()\"\n                            [matTooltip]=\"item?.name\"\n                            class=\"{{item?.className}}\">\n                        <i class=\"{{item?.iconClassName}}\"></i>\n                    </button>\n                    <button mat-icon-button\n                            (click)=\"formatIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty()\"\n                            [matTooltip]=\"formatIcon?.name\"\n                            class=\"{{formatIcon?.className}} disabled-half\">\n                        <i class=\"{{formatIcon?.iconClassName}}\"></i>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"hintMenuTemplate\">\n                    <button mat-icon-button\n                            (click)=\"questionIcon?.onClick()\"\n                            [class.d-none]=\"!selected\"\n                            [class.disabled-half]=\"selected?.isEmpty() && !hintMenu\"\n                            [matTooltip]=\"questionIcon?.name\"\n                            [matMenuTriggerFor]=\"hintMenu\"\n                            class=\"{{questionIcon?.className}}\">\n                        <i class=\"{{questionIcon?.iconClassName}}\"></i>\n                    </button>\n                    <mat-menu #hintMenu=\"matMenu\" backdropClass=\"mat-menu-hint\">\n                        <ng-container *ngTemplateOutlet=\"hintMenuTemplate\"></ng-container>\n                    </mat-menu>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <div class=\"content\" *ngIf=\"!showTabOnly\">\n        <ng-container *ngIf=\"_data?.length; else noData\">\n            <div *ngFor=\"let item of _data\" class=\"h-100\"\n                 [class.d-none]=\"item !== selected\">\n                <ng-container *ngIf=\"!item?.template\">\n                    <ngx-codemirror\n                        [name]=\"item?.getId()\"\n                        class=\"w-100 h-100\"\n                        [formControl]=\"item?.content\"\n                        [options]=\"item?.editorOptions\"\n                        (ngModelChange)=\"codemirrorChange($event)\"\n                    ></ngx-codemirror>\n                </ng-container>\n                <ng-container *ngIf=\"item?.template && item === selected\">\n                    <ng-container\n                        *ngTemplateOutlet=\"item?.template;context:{item:selected}\"></ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #noData>\n            <div class=\"d-flex justify-content-center align-items-center h-100 font-size-100px\">\n                <i class=\"fad fa-code empty-icon\"></i>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["::ng-deep html.theme-dark .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-dark .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-dark .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-dark .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-dark .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-light .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-light .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-light .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-light .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-light .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}::ng-deep html.theme-custom .tql-code-editor-wrapper.has-heading .content{height:calc(100% - 40px)}::ng-deep html.theme-custom .tql-code-editor-wrapper .heading{height:40px;background-color:#0d3755}::ng-deep html.theme-custom .tql-code-editor-wrapper .content{height:100%;background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab{width:180px;background-color:#072a43;height:36px;margin-left:2px;color:#b4d2e8;border-radius:10px 10px 0 0;margin-top:4px;border-bottom:1px solid transparent;padding:0;text-align:left;opacity:1;font-weight:400}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .tab.mat-tab-label-active{background-color:#001d31}::ng-deep html.theme-custom .tql-code-editor-wrapper .tab-group .mat-ink-bar{background-color:#ff5455}::ng-deep html.theme-custom .tql-code-editor-wrapper .empty-icon{--fa-primary-color: #23bfff;--fa-secondary-color: #ff5455;--fa-primary-opacity: .3;--fa-secondary-opacity: .3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actions: [{
@@ -4246,10 +4246,10 @@ class TqlNestedListComponent extends DefaultComponent {
         this._TqlNavbarControllerService._Observable_Current_Preview_Item.next(this.navBarPreview);
         // }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNestedListComponent, deps: [{ token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlNestedListComponent, isStandalone: false, selector: "tql-nested-list", inputs: { nameTemplate: "nameTemplate", collapsingIconPosition: "collapsingIconPosition", listStyle: "listStyle", hasConnectedLines: "hasConnectedLines", list: "list", activeClassName: "activeClassName", deepLevel: "deepLevel", nestedLeftPadding: "nestedLeftPadding", inNavbar: "inNavbar", offsetInNavbar: "offsetInNavbar", offsetNotInNavbar: "offsetNotInNavbar", moreAction: "moreAction" }, outputs: { init: "init" }, viewQueries: [{ propertyName: "elements", predicate: ["myItems"], descendants: true }, { propertyName: "contentTemplate", predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--<ng-container [ngSwitch]=\"level\">-->\n<!--    <ng-container *ngSwitchCase=\"1\">-->\n<!--        <div *ngFor=\"let item of list\">-->\n<!--            <tql-simple-list-->\n<!--                class=\"level-{{deepLevel}}\"-->\n<!--                [listStyle]=\"listStyle\"-->\n<!--                [items]=\"[item]\"-->\n<!--                [collapsingIconPosition]=\"collapsingIconPosition\"-->\n<!--                [inNavbar]=\"inNavbar\"-->\n<!--                [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"-->\n<!--                [nameTemplate]=\"nameTemplate\"></tql-simple-list>-->\n<!--        </div>-->\n<!--    </ng-container>-->\n<!--    <ng-container *ngSwitchDefault>-->\n<div *ngFor=\"let item of list;let $index=index;\">\n    <!--not in navbar-->\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    <!--in navbar-->\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [activeClassName]=\"activeClassName\"\n            [level]=\"deepLevel\"\n            [listStyle]=\"listStyle\"\n            [items]=\"[item]\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            *ngIf=\"item?.children?.length\"\n            [listStyle]=\"listStyle\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed && !item?.hideExpandedChildren)\"\n            [list]=\"item?.children\"\n            [deepLevel]=\"deepLevel + 1\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n<!--    </ng-container>-->\n<!--</ng-container>-->\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TqlSimpleListComponent, selector: "tql-simple-list", inputs: ["nameTemplate", "listStyle", "hasConnectedLines", "level", "items", "theme", "noActive", "activeClassName", "hasBorderBottom", "collapsingIconPosition", "draggable", "dragHandlerPosition", "dropIds", "inNavbar", "navbarClass", "itemStyle", "moreAction"], outputs: ["onDragStart", "onDragEnd"] }, { kind: "component", type: TqlNestedListComponent, selector: "tql-nested-list", inputs: ["nameTemplate", "collapsingIconPosition", "listStyle", "hasConnectedLines", "list", "activeClassName", "deepLevel", "nestedLeftPadding", "inNavbar", "offsetInNavbar", "offsetNotInNavbar", "moreAction"], outputs: ["init"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNestedListComponent, deps: [{ token: TqlNavbarControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlNestedListComponent, isStandalone: false, selector: "tql-nested-list", inputs: { nameTemplate: "nameTemplate", collapsingIconPosition: "collapsingIconPosition", listStyle: "listStyle", hasConnectedLines: "hasConnectedLines", list: "list", activeClassName: "activeClassName", deepLevel: "deepLevel", nestedLeftPadding: "nestedLeftPadding", inNavbar: "inNavbar", offsetInNavbar: "offsetInNavbar", offsetNotInNavbar: "offsetNotInNavbar", moreAction: "moreAction" }, outputs: { init: "init" }, viewQueries: [{ propertyName: "elements", predicate: ["myItems"], descendants: true }, { propertyName: "contentTemplate", predicate: ["contentTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--<ng-container [ngSwitch]=\"level\">-->\n<!--    <ng-container *ngSwitchCase=\"1\">-->\n<!--        <div *ngFor=\"let item of list\">-->\n<!--            <tql-simple-list-->\n<!--                class=\"level-{{deepLevel}}\"-->\n<!--                [listStyle]=\"listStyle\"-->\n<!--                [items]=\"[item]\"-->\n<!--                [collapsingIconPosition]=\"collapsingIconPosition\"-->\n<!--                [inNavbar]=\"inNavbar\"-->\n<!--                [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"-->\n<!--                [nameTemplate]=\"nameTemplate\"></tql-simple-list>-->\n<!--        </div>-->\n<!--    </ng-container>-->\n<!--    <ng-container *ngSwitchDefault>-->\n<div *ngFor=\"let item of list;let $index=index;\">\n    <!--not in navbar-->\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    <!--in navbar-->\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [activeClassName]=\"activeClassName\"\n            [level]=\"deepLevel\"\n            [listStyle]=\"listStyle\"\n            [items]=\"[item]\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            *ngIf=\"item?.children?.length\"\n            [listStyle]=\"listStyle\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed && !item?.hideExpandedChildren)\"\n            [list]=\"item?.children\"\n            [deepLevel]=\"deepLevel + 1\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n<!--    </ng-container>-->\n<!--</ng-container>-->\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TqlSimpleListComponent, selector: "tql-simple-list", inputs: ["nameTemplate", "listStyle", "hasConnectedLines", "level", "items", "theme", "noActive", "activeClassName", "hasBorderBottom", "collapsingIconPosition", "draggable", "dragHandlerPosition", "dropIds", "inNavbar", "navbarClass", "itemStyle", "moreAction"], outputs: ["onDragStart", "onDragEnd"] }, { kind: "component", type: TqlNestedListComponent, selector: "tql-nested-list", inputs: ["nameTemplate", "collapsingIconPosition", "listStyle", "hasConnectedLines", "list", "activeClassName", "deepLevel", "nestedLeftPadding", "inNavbar", "offsetInNavbar", "offsetNotInNavbar", "moreAction"], outputs: ["init"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNestedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNestedListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-nested-list', standalone: false, template: "<!--<ng-container [ngSwitch]=\"level\">-->\n<!--    <ng-container *ngSwitchCase=\"1\">-->\n<!--        <div *ngFor=\"let item of list\">-->\n<!--            <tql-simple-list-->\n<!--                class=\"level-{{deepLevel}}\"-->\n<!--                [listStyle]=\"listStyle\"-->\n<!--                [items]=\"[item]\"-->\n<!--                [collapsingIconPosition]=\"collapsingIconPosition\"-->\n<!--                [inNavbar]=\"inNavbar\"-->\n<!--                [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"-->\n<!--                [nameTemplate]=\"nameTemplate\"></tql-simple-list>-->\n<!--        </div>-->\n<!--    </ng-container>-->\n<!--    <ng-container *ngSwitchDefault>-->\n<div *ngFor=\"let item of list;let $index=index;\">\n    <!--not in navbar-->\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    <!--in navbar-->\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [activeClassName]=\"activeClassName\"\n                    [level]=\"deepLevel\"\n                    [listStyle]=\"listStyle\"\n                    [items]=\"[item]\"\n                    [collapsingIconPosition]=\"collapsingIconPosition\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n                    [moreAction]=\"moreAction\"\n                    [hasConnectedLines]=\"hasConnectedLines\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [activeClassName]=\"activeClassName\"\n            [level]=\"deepLevel\"\n            [listStyle]=\"listStyle\"\n            [items]=\"[item]\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [itemStyle]=\"'padding-left:'+item?.leftPadding+'px !important'\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            *ngIf=\"item?.children?.length\"\n            [listStyle]=\"listStyle\"\n            [collapsingIconPosition]=\"collapsingIconPosition\"\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed && !item?.hideExpandedChildren)\"\n            [list]=\"item?.children\"\n            [deepLevel]=\"deepLevel + 1\"\n            [moreAction]=\"moreAction\"\n            [hasConnectedLines]=\"hasConnectedLines\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n<!--    </ng-container>-->\n<!--</ng-container>-->\n\n" }]
         }], ctorParameters: () => [{ type: TqlNavbarControllerService }], propDecorators: { elements: [{
@@ -4331,10 +4331,10 @@ class TqlDynamicComponentComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicComponentComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlDynamicComponentComponent, isStandalone: false, selector: "tql-dynamic-component", inputs: { item: "item" }, outputs: { eventChanged: "eventChanged" }, viewQueries: [{ propertyName: "viewHost", first: true, predicate: TqlDynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<ng-template libTqlDynamicComponentHost></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: TqlDynamicComponentHostDirective, selector: "[libTqlDynamicComponentHost]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicComponentComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlDynamicComponentComponent, isStandalone: false, selector: "tql-dynamic-component", inputs: { item: "item" }, outputs: { eventChanged: "eventChanged" }, viewQueries: [{ propertyName: "viewHost", first: true, predicate: TqlDynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<ng-template libTqlDynamicComponentHost></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: TqlDynamicComponentHostDirective, selector: "[libTqlDynamicComponentHost]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlDynamicComponentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlDynamicComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-dynamic-component', standalone: false, template: "<ng-template libTqlDynamicComponentHost></ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }], propDecorators: { viewHost: [{
@@ -4394,10 +4394,10 @@ class TqlProgressListComponent extends DefaultComponent {
             this.title.iconClassName = statusClass;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlProgressListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlProgressListComponent, isStandalone: false, selector: "tql-progress-list", inputs: { inNavbar: "inNavbar", data: "data" }, outputs: { init: "init" }, usesInheritance: true, ngImport: i0, template: "<tql-collapse-group [data]=\"title\" [inNavbar]=\"inNavbar\">\n    <div class=\"d-flex flex-column w-100 progress-list-wrapper\"\n         [class.in-navbar]=\"inNavbar\">\n        <div *ngFor=\"let item of children; let $last = last\" class=\"position-relative w-100 progress-item\"\n             routerLinkActive=\"active\"\n             [routerLink]=\"item?.route\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [class.completed]=\"item?.active\">\n            <div matRipple class=\"d-flex flex-gap-3 align-items-center h-100 cursor-pointer\">\n                <div class=\"{{inNavbar?'pl-30px':'pl-2'}}\"><i class=\"{{item?.active?'fas':'fal'}} fa-arrow-circle-right icon\"></i>\n                </div>\n                <div class=\"flex-grow-1 text\">{{item?.name}}</div>\n            </div>\n            <ng-container *ngIf=\"!$last\">\n                <ng-container *ngTemplateOutlet=\"dotLineTemplate\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</tql-collapse-group>\n\n<ng-template #dotLineTemplate>\n    <div class=\"line\">\n        <svg width=\"10px\" height=\"30px\" viewBox=\"0 0 10 30\">\n            <line x1=\"5\" y1=\"5\" x2=\"5\" y2=\"40\" stroke=\"#5184AF\" stroke-width=\"2\"\n                  stroke-linecap=\"round\" stroke-dasharray=\"0, 7\"></line>\n        </svg>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-light .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-light .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-light .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-custom .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlCollapseGroupComponent, selector: "tql-collapse-group", inputs: ["headingClassName", "data", "inNavbar", "navbarClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlProgressListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlProgressListComponent, isStandalone: false, selector: "tql-progress-list", inputs: { inNavbar: "inNavbar", data: "data" }, outputs: { init: "init" }, usesInheritance: true, ngImport: i0, template: "<tql-collapse-group [data]=\"title\" [inNavbar]=\"inNavbar\">\n    <div class=\"d-flex flex-column w-100 progress-list-wrapper\"\n         [class.in-navbar]=\"inNavbar\">\n        <div *ngFor=\"let item of children; let $last = last\" class=\"position-relative w-100 progress-item\"\n             routerLinkActive=\"active\"\n             [routerLink]=\"item?.route\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [class.completed]=\"item?.active\">\n            <div matRipple class=\"d-flex flex-gap-3 align-items-center h-100 cursor-pointer\">\n                <div class=\"{{inNavbar?'pl-30px':'pl-2'}}\"><i class=\"{{item?.active?'fas':'fal'}} fa-arrow-circle-right icon\"></i>\n                </div>\n                <div class=\"flex-grow-1 text\">{{item?.name}}</div>\n            </div>\n            <ng-container *ngIf=\"!$last\">\n                <ng-container *ngTemplateOutlet=\"dotLineTemplate\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</tql-collapse-group>\n\n<ng-template #dotLineTemplate>\n    <div class=\"line\">\n        <svg width=\"10px\" height=\"30px\" viewBox=\"0 0 10 30\">\n            <line x1=\"5\" y1=\"5\" x2=\"5\" y2=\"40\" stroke=\"#5184AF\" stroke-width=\"2\"\n                  stroke-linecap=\"round\" stroke-dasharray=\"0, 7\"></line>\n        </svg>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-light .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-light .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-light .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-custom .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TqlCollapseGroupComponent, selector: "tql-collapse-group", inputs: ["headingClassName", "data", "inNavbar", "navbarClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlProgressListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlProgressListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-progress-list', standalone: false, template: "<tql-collapse-group [data]=\"title\" [inNavbar]=\"inNavbar\">\n    <div class=\"d-flex flex-column w-100 progress-list-wrapper\"\n         [class.in-navbar]=\"inNavbar\">\n        <div *ngFor=\"let item of children; let $last = last\" class=\"position-relative w-100 progress-item\"\n             routerLinkActive=\"active\"\n             [routerLink]=\"item?.route\"\n             [queryParams]=\"item?.routeQueryParams || {}\"\n             [class.completed]=\"item?.active\">\n            <div matRipple class=\"d-flex flex-gap-3 align-items-center h-100 cursor-pointer\">\n                <div class=\"{{inNavbar?'pl-30px':'pl-2'}}\"><i class=\"{{item?.active?'fas':'fal'}} fa-arrow-circle-right icon\"></i>\n                </div>\n                <div class=\"flex-grow-1 text\">{{item?.name}}</div>\n            </div>\n            <ng-container *ngIf=\"!$last\">\n                <ng-container *ngTemplateOutlet=\"dotLineTemplate\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</tql-collapse-group>\n\n<ng-template #dotLineTemplate>\n    <div class=\"line\">\n        <svg width=\"10px\" height=\"30px\" viewBox=\"0 0 10 30\">\n            <line x1=\"5\" y1=\"5\" x2=\"5\" y2=\"40\" stroke=\"#5184AF\" stroke-width=\"2\"\n                  stroke-linecap=\"round\" stroke-dasharray=\"0, 7\"></line>\n        </svg>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-dark .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-light .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-light .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-light .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-light .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}::ng-deep html.theme-custom .progress-list-wrapper.in-navbar .progress-item .line{left:32px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item{position:relative;height:40px}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.completed .icon{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item.active .text{color:#23bfff}::ng-deep html.theme-custom .progress-list-wrapper .progress-item .line{position:absolute;left:10px;top:21px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inNavbar: [{
@@ -4431,10 +4431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class TqlTableComponent {
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlTableComponent, isStandalone: false, selector: "tql-table", ngImport: i0, template: "<p>tql-table works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlTableComponent, isStandalone: false, selector: "tql-table", ngImport: i0, template: "<p>tql-table works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-table', standalone: false, template: "<p>tql-table works!</p>\n" }]
         }], ctorParameters: () => [] });
@@ -4602,10 +4602,10 @@ class TqlListedTreeComponent {
             x.isExpanded = true;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlListedTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlListedTreeComponent, isStandalone: false, selector: "tql-listed-tree", inputs: { id: "id", draggable: "draggable", dropIds: "dropIds", levelOffset: "levelOffset", selectable: "selectable", data: "data", selectedClassName: "selectedClassName", selected: "selected", hoverNameClassName: "hoverNameClassName", collapseClassName: "collapseClassName", expandClassName: "expandClassName", hoverCollapseIconClassName: "hoverCollapseIconClassName", alwaysShowExpandCollapseIcon: "alwaysShowExpandCollapseIcon" }, outputs: { init: "init", selectedChanged: "selectedChanged" }, ngImport: i0, template: "<!--\n<div *ngFor=\"let item of list;let $index=index;\">\n    &lt;!&ndash;not in navbar&ndash;&gt;\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    &lt;!&ndash;in navbar&ndash;&gt;\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [items]=\"[item]\"\n            [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed)\"\n            [list]=\"item?.children\" [level]=\"level - 1\"\n            [deepLevel]=\"deepLevel + 1\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n\n-->\n<div class=\"tql-listed-tree-wrapper w-100 overflow-auto\">\n    <ng-container *ngIf=\"!data?.length\">\n        Tree is empty\n    </ng-container>\n    <ng-container *ngIf=\"data?.length\">\n        <div *ngFor=\"let item of data;let $index=index;\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #branchTemplate let-node=\"node\">\n    <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{node:node, hasChild:node?.children?.length}\"></ng-container>\n    <ng-container *ngIf=\"node?.children?.length\">\n        <div *ngFor=\"let item of node?.children;let $index=index;\"\n             [class.d-none]=\"!node?.isExpanded\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #nodeTemplate let-node=\"node\" let-hasChild=\"hasChild\">\n    <div class=\"node pl-3 cursor-pointer {{isSelectedNode(node)?selectedClassName:''}}\"\n         [id]=\"node?.id\"\n         [class.selected]=\"isSelectedNode(node)\"\n         matRipple\n         (click)=\"onClick(node)\">\n        <div class=\"d-flex align-items-center\" [style.padding-left]=\"calculatePaddingLeft(node?.level)\">\n            <div class=\"collapse-icon d-flex align-items-center cursor-pointer\"\n                 tql-hover-class=\"{{hoverCollapseIconClassName}}\"\n                 [class.invisible]=\"!hasChild && node?.level !== 0\"\n                 [class.disabled-half]=\"!hasChild\"\n                 [class.opacity-30]=\"!hasChild\"\n                 *ngIf=\"alwaysShowExpandCollapseIcon\"\n                 (click)=\"toggleCollapseExpand(node);$event.stopPropagation();\">\n                <i class=\"{{node?.isExpanded?expandClassName:collapseClassName}}\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nameTemplate; context:{node:node}\"></ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <!--                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>-->\n                <!--                {{node?.options | json}}-->\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #nameTemplate let-node=\"node\">\n    <div class=\"d-flex align-items-center flex-gap-2 name-group\" tql-hover-class=\"{{hoverNameClassName}}\">\n        <div class=\"icon\" *ngIf=\"node?.iconClassName\">\n            <i class=\"{{node?.iconClassName}}\"></i>\n        </div>\n        <div>{{node?.name}}</div>\n    </div>\n</ng-template>\n\n<ng-template #optionsTemplate let-node=\"node\">\n    <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n        <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-light .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: TqlHoverClassDirective, selector: "[tql-hover-class]", inputs: ["tql-hover-class"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlListedTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlListedTreeComponent, isStandalone: false, selector: "tql-listed-tree", inputs: { id: "id", draggable: "draggable", dropIds: "dropIds", levelOffset: "levelOffset", selectable: "selectable", data: "data", selectedClassName: "selectedClassName", selected: "selected", hoverNameClassName: "hoverNameClassName", collapseClassName: "collapseClassName", expandClassName: "expandClassName", hoverCollapseIconClassName: "hoverCollapseIconClassName", alwaysShowExpandCollapseIcon: "alwaysShowExpandCollapseIcon" }, outputs: { init: "init", selectedChanged: "selectedChanged" }, ngImport: i0, template: "<!--\n<div *ngFor=\"let item of list;let $index=index;\">\n    &lt;!&ndash;not in navbar&ndash;&gt;\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    &lt;!&ndash;in navbar&ndash;&gt;\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [items]=\"[item]\"\n            [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed)\"\n            [list]=\"item?.children\" [level]=\"level - 1\"\n            [deepLevel]=\"deepLevel + 1\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n\n-->\n<div class=\"tql-listed-tree-wrapper w-100 overflow-auto\">\n    <ng-container *ngIf=\"!data?.length\">\n        Tree is empty\n    </ng-container>\n    <ng-container *ngIf=\"data?.length\">\n        <div *ngFor=\"let item of data;let $index=index;\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #branchTemplate let-node=\"node\">\n    <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{node:node, hasChild:node?.children?.length}\"></ng-container>\n    <ng-container *ngIf=\"node?.children?.length\">\n        <div *ngFor=\"let item of node?.children;let $index=index;\"\n             [class.d-none]=\"!node?.isExpanded\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #nodeTemplate let-node=\"node\" let-hasChild=\"hasChild\">\n    <div class=\"node pl-3 cursor-pointer {{isSelectedNode(node)?selectedClassName:''}}\"\n         [id]=\"node?.id\"\n         [class.selected]=\"isSelectedNode(node)\"\n         matRipple\n         (click)=\"onClick(node)\">\n        <div class=\"d-flex align-items-center\" [style.padding-left]=\"calculatePaddingLeft(node?.level)\">\n            <div class=\"collapse-icon d-flex align-items-center cursor-pointer\"\n                 tql-hover-class=\"{{hoverCollapseIconClassName}}\"\n                 [class.invisible]=\"!hasChild && node?.level !== 0\"\n                 [class.disabled-half]=\"!hasChild\"\n                 [class.opacity-30]=\"!hasChild\"\n                 *ngIf=\"alwaysShowExpandCollapseIcon\"\n                 (click)=\"toggleCollapseExpand(node);$event.stopPropagation();\">\n                <i class=\"{{node?.isExpanded?expandClassName:collapseClassName}}\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nameTemplate; context:{node:node}\"></ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <!--                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>-->\n                <!--                {{node?.options | json}}-->\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #nameTemplate let-node=\"node\">\n    <div class=\"d-flex align-items-center flex-gap-2 name-group\" tql-hover-class=\"{{hoverNameClassName}}\">\n        <div class=\"icon\" *ngIf=\"node?.iconClassName\">\n            <i class=\"{{node?.iconClassName}}\"></i>\n        </div>\n        <div>{{node?.name}}</div>\n    </div>\n</ng-template>\n\n<ng-template #optionsTemplate let-node=\"node\">\n    <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n        <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-light .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: TqlHoverClassDirective, selector: "[tql-hover-class]", inputs: ["tql-hover-class"] }, { kind: "component", type: TqlActionBarComponent, selector: "tql-action-bar", inputs: ["data", "notCompressMin", "action", "listStyle", "list"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlListedTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlListedTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-listed-tree', standalone: false, template: "<!--\n<div *ngFor=\"let item of list;let $index=index;\">\n    &lt;!&ndash;not in navbar&ndash;&gt;\n    <ng-container *ngIf=\"!inNavbar\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n    &lt;!&ndash;in navbar&ndash;&gt;\n    <ng-container *ngIf=\"inNavbar\">\n        <div class=\"show-on-collapsed\">\n            <div *ngIf=\"item?.children?.length\"\n                 (click)=\"onShowContent($event,$index)\"\n                 #myItems>\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n                <div class=\"d-flex has-group-hint align-items-center\">\n                    <i class=\"fal fa-angle-right font-size-12px \"></i>\n                </div>\n            </div>\n            <div *ngIf=\"!item?.children?.length\">\n                <tql-simple-list\n                    class=\"level-{{deepLevel}}\"\n                    [items]=\"[item]\"\n                    [inNavbar]=\"inNavbar\"\n                    [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n                    [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n            </div>\n\n        </div>\n        <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-template #contentTemplate>\n        <tql-simple-list\n            class=\"level-{{deepLevel}}\"\n            [items]=\"[item]\"\n            [itemStyle]=\"'padding-left:'+(getOffset()+nestedLeftPadding*deepLevel)+'px !important'\"\n            [nameTemplate]=\"nameTemplate\"></tql-simple-list>\n        <tql-nested-list\n            [nestedLeftPadding]=\"nestedLeftPadding\"\n            [class.d-none]=\"!(item?.children && !item?.isCollapsed)\"\n            [list]=\"item?.children\" [level]=\"level - 1\"\n            [deepLevel]=\"deepLevel + 1\"\n            [nameTemplate]=\"nameTemplate\"></tql-nested-list>\n    </ng-template>\n</div>\n\n-->\n<div class=\"tql-listed-tree-wrapper w-100 overflow-auto\">\n    <ng-container *ngIf=\"!data?.length\">\n        Tree is empty\n    </ng-container>\n    <ng-container *ngIf=\"data?.length\">\n        <div *ngFor=\"let item of data;let $index=index;\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #branchTemplate let-node=\"node\">\n    <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{node:node, hasChild:node?.children?.length}\"></ng-container>\n    <ng-container *ngIf=\"node?.children?.length\">\n        <div *ngFor=\"let item of node?.children;let $index=index;\"\n             [class.d-none]=\"!node?.isExpanded\">\n            <ng-container *ngTemplateOutlet=\"branchTemplate; context:{node:item}\"></ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #nodeTemplate let-node=\"node\" let-hasChild=\"hasChild\">\n    <div class=\"node pl-3 cursor-pointer {{isSelectedNode(node)?selectedClassName:''}}\"\n         [id]=\"node?.id\"\n         [class.selected]=\"isSelectedNode(node)\"\n         matRipple\n         (click)=\"onClick(node)\">\n        <div class=\"d-flex align-items-center\" [style.padding-left]=\"calculatePaddingLeft(node?.level)\">\n            <div class=\"collapse-icon d-flex align-items-center cursor-pointer\"\n                 tql-hover-class=\"{{hoverCollapseIconClassName}}\"\n                 [class.invisible]=\"!hasChild && node?.level !== 0\"\n                 [class.disabled-half]=\"!hasChild\"\n                 [class.opacity-30]=\"!hasChild\"\n                 *ngIf=\"alwaysShowExpandCollapseIcon\"\n                 (click)=\"toggleCollapseExpand(node);$event.stopPropagation();\">\n                <i class=\"{{node?.isExpanded?expandClassName:collapseClassName}}\"></i>\n            </div>\n            <ng-container *ngTemplateOutlet=\"nameTemplate; context:{node:node}\"></ng-container>\n            <div class=\"flex-grow-1\"></div>\n            <div class=\"d-flex actions-group align-items-center\">\n                <!--                <ng-container *ngTemplateOutlet=\"draggableTemplate; context:{node:node}\"></ng-container>-->\n                <!--                {{node?.options | json}}-->\n                <ng-container *ngTemplateOutlet=\"optionsTemplate; context:{node:node}\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #nameTemplate let-node=\"node\">\n    <div class=\"d-flex align-items-center flex-gap-2 name-group\" tql-hover-class=\"{{hoverNameClassName}}\">\n        <div class=\"icon\" *ngIf=\"node?.iconClassName\">\n            <i class=\"{{node?.iconClassName}}\"></i>\n        </div>\n        <div>{{node?.name}}</div>\n    </div>\n</ng-template>\n\n<ng-template #optionsTemplate let-node=\"node\">\n    <div class=\"actions-group\" *ngIf=\"node?.options?.length\">\n        <tql-action-bar [list]=\"node?.options\" [action]=\"moreAction\" [data]=\"node\"></tql-action-bar>\n    </div>\n</ng-template>\n", styles: ["::ng-deep html.theme-dark .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-dark .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-light .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-light .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-light .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-light .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node{min-height:30px;height:30px;line-height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .collapse-icon{width:25px;height:30px}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover{background-color:#001d3180}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node.selected{background-color:#119ed9}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover{display:none}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.show-on-hover.showed{display:initial}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node .actions-group .action.visible-on-hover{visibility:hidden}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.show-on-hover{display:initial;color:inherit}::ng-deep html.theme-custom .tql-listed-tree-wrapper .node:hover .actions-group .action.visible-on-hover{visibility:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { init: [{
@@ -4660,10 +4660,10 @@ class TqlSpinComponent {
             parentDom.appendChild(componentRef.hostView.rootNodes[0]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$4.TqlGlobalConfigService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlSpinComponent, isStandalone: false, selector: "lib-tql-spin", inputs: { opacity: "opacity", backgroundColor: "backgroundColor", spinTemplate: "spinTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container class=\"w-100 h-100 d-flex align-items-center justify-content-center tql-spin-content\"\n     [style.background-color]=\"backgroundColor\"\n     [style.opacity]=\"opacity\">\n    <ng-container *ngIf=\"spinTemplate;else defaultTmp\">\n        <ng-container *ngTemplateOutlet=\"spinTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTmp>\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n    </ng-template>\n</div>\n", styles: ["::ng-deep html .tql-spin-wrapper{position:relative}::ng-deep html .tql-spin-wrapper .tql-spin-content{position:absolute;left:0;top:0;z-index:100}::ng-deep html .tql-spin-wrapper:not(.spinning)>lib-tql-spin>.tql-spin-content{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$4.TqlGlobalConfigService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlSpinComponent, isStandalone: false, selector: "lib-tql-spin", inputs: { opacity: "opacity", backgroundColor: "backgroundColor", spinTemplate: "spinTemplate" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container class=\"w-100 h-100 d-flex align-items-center justify-content-center tql-spin-content\"\n     [style.background-color]=\"backgroundColor\"\n     [style.opacity]=\"opacity\">\n    <ng-container *ngIf=\"spinTemplate;else defaultTmp\">\n        <ng-container *ngTemplateOutlet=\"spinTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTmp>\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n    </ng-template>\n</div>\n", styles: ["::ng-deep html .tql-spin-wrapper{position:relative}::ng-deep html .tql-spin-wrapper .tql-spin-content{position:absolute;left:0;top:0;z-index:100}::ng-deep html .tql-spin-wrapper:not(.spinning)>lib-tql-spin>.tql-spin-content{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tql-spin', standalone: false, template: "<div #container class=\"w-100 h-100 d-flex align-items-center justify-content-center tql-spin-content\"\n     [style.background-color]=\"backgroundColor\"\n     [style.opacity]=\"opacity\">\n    <ng-container *ngIf=\"spinTemplate;else defaultTmp\">\n        <ng-container *ngTemplateOutlet=\"spinTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTmp>\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\n    </ng-template>\n</div>\n", styles: ["::ng-deep html .tql-spin-wrapper{position:relative}::ng-deep html .tql-spin-wrapper .tql-spin-content{position:absolute;left:0;top:0;z-index:100}::ng-deep html .tql-spin-wrapper:not(.spinning)>lib-tql-spin>.tql-spin-content{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$4.TqlGlobalConfigService }, { type: i0.Injector }], propDecorators: { container: [{
@@ -4755,10 +4755,10 @@ class TqlSpinDirective extends DefaultDirective {
             }, this.delay);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TqlSpinDirective, isStandalone: false, selector: "[tqlSpin]", inputs: { opacity: "opacity", backgroundColor: "backgroundColor", delay: "delay", spinTemplate: "spinTemplate", spinning: "spinning" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TqlSpinDirective, isStandalone: false, selector: "[tqlSpin]", inputs: { opacity: "opacity", backgroundColor: "backgroundColor", delay: "delay", spinTemplate: "spinTemplate", spinning: "spinning" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlSpinDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlSpinDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tqlSpin]',
@@ -4777,8 +4777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 class DirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DirectivesModule, declarations: [TqlCollapseDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, declarations: [TqlCollapseDirective,
             NgVarDirective,
             TqlDynamicComponentHostDirective,
             TqlResizableDirective,
@@ -4795,9 +4795,9 @@ class DirectivesModule {
             TqlResizedDirective,
             TqlSpinDirective,
             TqlClickOutsideDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DirectivesModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4827,11 +4827,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class TqlNavbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarModule, declarations: [TqlNavbarComponent, TqlNavbarLogoComponent, TqlNavbarTitleComponent], imports: [CommonModule, RouterModule, MaterialsModule, BasicModule, DirectivesModule], exports: [TqlNavbarComponent, TqlNavbarLogoComponent, TqlNavbarTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarModule, imports: [CommonModule, RouterModule, MaterialsModule, BasicModule, DirectivesModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarModule, declarations: [TqlNavbarComponent, TqlNavbarLogoComponent, TqlNavbarTitleComponent], imports: [CommonModule, RouterModule, MaterialsModule, BasicModule, DirectivesModule], exports: [TqlNavbarComponent, TqlNavbarLogoComponent, TqlNavbarTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarModule, imports: [CommonModule, RouterModule, MaterialsModule, BasicModule, DirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TqlNavbarComponent, TqlNavbarLogoComponent, TqlNavbarTitleComponent],
@@ -4841,8 +4841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class TemplateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TemplateModule, declarations: [TqlSimpleListComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TemplateModule, declarations: [TqlSimpleListComponent,
             TqlActionDrawerComponent,
             TqlPanelComponent,
             TqlBreadcrumbComponent,
@@ -4892,7 +4892,7 @@ class TemplateModule {
             TqlListedTreeComponent,
             TqlSpinComponent,
             TqlCodeEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TemplateModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateModule, imports: [CommonModule,
             MaterialsModule,
             TqlNavbarModule,
             DirectivesModule,
@@ -4901,7 +4901,7 @@ class TemplateModule {
             ReactiveFormsModule,
             TranslateModule, TqlNavbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TemplateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4969,10 +4969,10 @@ class TqlEmptyLayoutComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlEmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlEmptyLayoutComponent, isStandalone: false, selector: "lib-tql-empty-layout", ngImport: i0, template: "<p>tql-empty-layout works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlEmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlEmptyLayoutComponent, isStandalone: false, selector: "lib-tql-empty-layout", ngImport: i0, template: "<p>tql-empty-layout works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlEmptyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlEmptyLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tql-empty-layout', standalone: false, template: "<p>tql-empty-layout works!</p>\n" }]
         }], ctorParameters: () => [] });
@@ -4988,10 +4988,10 @@ class TqlHeaderLayoutComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderLayoutComponent, deps: [{ token: TqlHeaderControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlHeaderLayoutComponent, isStandalone: false, selector: "tql-header-layout", ngImport: i0, template: "<tql-header>\n    <div class=\"main-wrapper\">\n        <div class=\"top-bar d-flex align-items-center flex-gap-3\">\n            <div *ngIf=\"contentComponent\" class=\"overflow-auto\">\n                <ng-container *ngComponentOutlet=\"contentComponent\"></ng-container>\n            </div>\n            <tql-breadcrumb [hasPrefix]=\"true\"></tql-breadcrumb>\n            <div class=\"flex-grow-1\"></div>\n            <div>\n                <i class=\"fal fa-search font-size-21px color-soft-blue disabled-half\"></i>\n            </div>\n        </div>\n    </div>\n</tql-header>\n\n\n", styles: ["::ng-deep html.theme-dark .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-light .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-custom .top-bar{height:80px;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TqlBreadcrumbComponent, selector: "tql-breadcrumb", inputs: ["hasPrefix", "noTranslate"] }, { kind: "component", type: TqlHeaderComponent, selector: "tql-header" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderLayoutComponent, deps: [{ token: TqlHeaderControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlHeaderLayoutComponent, isStandalone: false, selector: "tql-header-layout", ngImport: i0, template: "<tql-header>\n    <div class=\"main-wrapper\">\n        <div class=\"top-bar d-flex align-items-center flex-gap-3\">\n            <div *ngIf=\"contentComponent\" class=\"overflow-auto\">\n                <ng-container *ngComponentOutlet=\"contentComponent\"></ng-container>\n            </div>\n            <tql-breadcrumb [hasPrefix]=\"true\"></tql-breadcrumb>\n            <div class=\"flex-grow-1\"></div>\n            <div>\n                <i class=\"fal fa-search font-size-21px color-soft-blue disabled-half\"></i>\n            </div>\n        </div>\n    </div>\n</tql-header>\n\n\n", styles: ["::ng-deep html.theme-dark .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-light .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-custom .top-bar{height:80px;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TqlBreadcrumbComponent, selector: "tql-breadcrumb", inputs: ["hasPrefix", "noTranslate"] }, { kind: "component", type: TqlHeaderComponent, selector: "tql-header" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlHeaderLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlHeaderLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-header-layout', standalone: false, template: "<tql-header>\n    <div class=\"main-wrapper\">\n        <div class=\"top-bar d-flex align-items-center flex-gap-3\">\n            <div *ngIf=\"contentComponent\" class=\"overflow-auto\">\n                <ng-container *ngComponentOutlet=\"contentComponent\"></ng-container>\n            </div>\n            <tql-breadcrumb [hasPrefix]=\"true\"></tql-breadcrumb>\n            <div class=\"flex-grow-1\"></div>\n            <div>\n                <i class=\"fal fa-search font-size-21px color-soft-blue disabled-half\"></i>\n            </div>\n        </div>\n    </div>\n</tql-header>\n\n\n", styles: ["::ng-deep html.theme-dark .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-light .top-bar{height:80px;box-sizing:border-box}::ng-deep html.theme-custom .top-bar{height:80px;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: TqlHeaderControllerService }] });
@@ -5090,10 +5090,10 @@ class TqlNavbarLayoutComponent extends DefaultComponent {
     goToProfile() {
         this._Router.navigate(['/', 'dashboards', 'account', 'profile']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarLayoutComponent, deps: [{ token: i1$5.Router }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: TqlNavbarControllerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlNavbarLayoutComponent, isStandalone: false, selector: "tql-navbar-layout", viewQueries: [{ propertyName: "dynamicElement", first: true, predicate: ["dynamicElement"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<tql-navbar>\n    <div class=\" w-100 h-100 d-flex flex-column overflow-hidden\">\n        <!--logo-->\n        <tql-navbar-logo\n            [logoRoute]=\"['/']\"\n            [logo]=\"'assets/images/logo/atomiton-icon.png'\"\n            [collapseLogo]=\"'assets/images/icons/logo-mobile.png'\"></tql-navbar-logo>\n        <hr>\n\n        <!--dynamic content-->\n        <div class=\"overflow-y-auto\">\n            <ng-container #dynamicElement></ng-container>\n        </div>\n        <div class=\"flex-grow-1\"></div>\n        <hr *ngIf=\"subMenus?.length\">\n        <div>\n            <tql-simple-list [items]=\"subMenus\" [inNavbar]=\"true\"></tql-simple-list>\n        </div>\n        <hr>\n        <div class=\"account cursor-pointer d-flex side-padding align-items-center flex-gap-3\" mat-ripple\n             [matMenuTriggerFor]=\"accountMenu\">\n            <img src=\"assets/images/icons/avatar.jpg\" class=\"m-auto\" alt=\"avatar\"/>\n            <span\n                class=\"collapse-hide color-soft-blue flex-grow-1 text-truncate\">User</span>\n        </div>\n        <mat-menu #accountMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"logout()\">Logout</button>\n            <button mat-menu-item (click)=\"goToProfile()\">Profile</button>\n        </mat-menu>\n    </div>\n</tql-navbar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: TqlSimpleListComponent, selector: "tql-simple-list", inputs: ["nameTemplate", "listStyle", "hasConnectedLines", "level", "items", "theme", "noActive", "activeClassName", "hasBorderBottom", "collapsingIconPosition", "draggable", "dragHandlerPosition", "dropIds", "inNavbar", "navbarClass", "itemStyle", "moreAction"], outputs: ["onDragStart", "onDragEnd"] }, { kind: "component", type: TqlNavbarComponent, selector: "tql-navbar", inputs: ["isOverlappedStyle", "hiddenWhenCollapse", "resizable", "initialCollapsed", "expandWhenHover", "IconOffsetTop", "collapse", "alwaysCollapsed"] }, { kind: "component", type: TqlNavbarLogoComponent, selector: "tql-navbar-logo", inputs: ["logo", "logoRoute", "collapseLogo", "width", "height"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarLayoutComponent, deps: [{ token: i1$5.Router }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: TqlNavbarControllerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlNavbarLayoutComponent, isStandalone: false, selector: "tql-navbar-layout", viewQueries: [{ propertyName: "dynamicElement", first: true, predicate: ["dynamicElement"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<tql-navbar>\n    <div class=\" w-100 h-100 d-flex flex-column overflow-hidden\">\n        <!--logo-->\n        <tql-navbar-logo\n            [logoRoute]=\"['/']\"\n            [logo]=\"'assets/images/logo/atomiton-icon.png'\"\n            [collapseLogo]=\"'assets/images/icons/logo-mobile.png'\"></tql-navbar-logo>\n        <hr>\n\n        <!--dynamic content-->\n        <div class=\"overflow-y-auto\">\n            <ng-container #dynamicElement></ng-container>\n        </div>\n        <div class=\"flex-grow-1\"></div>\n        <hr *ngIf=\"subMenus?.length\">\n        <div>\n            <tql-simple-list [items]=\"subMenus\" [inNavbar]=\"true\"></tql-simple-list>\n        </div>\n        <hr>\n        <div class=\"account cursor-pointer d-flex side-padding align-items-center flex-gap-3\" mat-ripple\n             [matMenuTriggerFor]=\"accountMenu\">\n            <img src=\"assets/images/icons/avatar.jpg\" class=\"m-auto\" alt=\"avatar\"/>\n            <span\n                class=\"collapse-hide color-soft-blue flex-grow-1 text-truncate\">User</span>\n        </div>\n        <mat-menu #accountMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"logout()\">Logout</button>\n            <button mat-menu-item (click)=\"goToProfile()\">Profile</button>\n        </mat-menu>\n    </div>\n</tql-navbar>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: TqlSimpleListComponent, selector: "tql-simple-list", inputs: ["nameTemplate", "listStyle", "hasConnectedLines", "level", "items", "theme", "noActive", "activeClassName", "hasBorderBottom", "collapsingIconPosition", "draggable", "dragHandlerPosition", "dropIds", "inNavbar", "navbarClass", "itemStyle", "moreAction"], outputs: ["onDragStart", "onDragEnd"] }, { kind: "component", type: TqlNavbarComponent, selector: "tql-navbar", inputs: ["isOverlappedStyle", "hiddenWhenCollapse", "resizable", "initialCollapsed", "expandWhenHover", "IconOffsetTop", "collapse", "alwaysCollapsed"] }, { kind: "component", type: TqlNavbarLogoComponent, selector: "tql-navbar-logo", inputs: ["logo", "logoRoute", "collapseLogo", "width", "height"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlNavbarLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlNavbarLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-navbar-layout', standalone: false, template: "<tql-navbar>\n    <div class=\" w-100 h-100 d-flex flex-column overflow-hidden\">\n        <!--logo-->\n        <tql-navbar-logo\n            [logoRoute]=\"['/']\"\n            [logo]=\"'assets/images/logo/atomiton-icon.png'\"\n            [collapseLogo]=\"'assets/images/icons/logo-mobile.png'\"></tql-navbar-logo>\n        <hr>\n\n        <!--dynamic content-->\n        <div class=\"overflow-y-auto\">\n            <ng-container #dynamicElement></ng-container>\n        </div>\n        <div class=\"flex-grow-1\"></div>\n        <hr *ngIf=\"subMenus?.length\">\n        <div>\n            <tql-simple-list [items]=\"subMenus\" [inNavbar]=\"true\"></tql-simple-list>\n        </div>\n        <hr>\n        <div class=\"account cursor-pointer d-flex side-padding align-items-center flex-gap-3\" mat-ripple\n             [matMenuTriggerFor]=\"accountMenu\">\n            <img src=\"assets/images/icons/avatar.jpg\" class=\"m-auto\" alt=\"avatar\"/>\n            <span\n                class=\"collapse-hide color-soft-blue flex-grow-1 text-truncate\">User</span>\n        </div>\n        <mat-menu #accountMenu=\"matMenu\">\n            <button mat-menu-item (click)=\"logout()\">Logout</button>\n            <button mat-menu-item (click)=\"goToProfile()\">Profile</button>\n        </mat-menu>\n    </div>\n</tql-navbar>\n" }]
         }], ctorParameters: () => [{ type: i1$5.Router }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: TqlNavbarControllerService }, { type: i0.ChangeDetectorRef }], propDecorators: { dynamicElement: [{
@@ -5105,17 +5105,17 @@ class TqlMainLayoutComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlMainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TqlMainLayoutComponent, isStandalone: false, selector: "tql-main-layout", ngImport: i0, template: "<mat-sidenav-container>\n    <mat-sidenav-content>\n        <div class=\"dashboards-wrapper d-flex\">\n            <!-- Start Navigation Layout -->\n            <div>\n                <tql-navbar-layout></tql-navbar-layout>\n            </div>\n            <!-- End Navigation Layout -->\n\n            <div class=\"flex-grow-1 flex-shrink-1 overflow-auto d-flex flex-column\">\n                <div class=\"flex-grow-1 flex-shrink-1 d-flex flex-column overflow-hidden\">\n\n                    <!-- Start Header Layout -->\n                    <div>\n                        <tql-header-layout></tql-header-layout>\n                    </div>\n                    <!-- End Header Layout -->\n\n                    <div class=\"d-flex flex-grow-1 flex-shrink-1 overflow-auto\">\n                        <!--TODO-->\n\n                        <!-- Start Content -->\n                        <div class=\"flex-shrink-1 flex-grow-1 overflow-y-auto \">\n                            <router-outlet></router-outlet>\n                        </div>\n                        <!-- End Content -->\n\n                        <!-- Start Dynamic Right Side -->\n                        <!--                        <div>-->\n                        <!--                            <div *ngIf=\"dynamicDataComponent\" class=\"dynamic-box h-100\">-->\n                        <!--                                <app-dc-main [data]=\"dynamicDataComponent\"></app-dc-main>-->\n                        <!--                            </div>-->\n                        <!--                        </div>-->\n                        <!-- End Dynamic Right Side -->\n\n                    </div>\n                </div>\n\n                <!-- Start Footer Layout -->\n<!--                <div>-->\n<!--                    <tql-footer-layout></tql-footer-layout>-->\n<!--                </div>-->\n                <!-- End Footer Layout -->\n\n            </div>\n        </div>\n    </mat-sidenav-content>\n\n    <!-- Start A-stack logs -->\n    <!--TODO-->\n    <!--    <mat-sidenav position=\"end\" mode=\"over\" [(opened)]=\"isOpenLog\" (closed)=\"closeSideNav()\">-->\n    <!--        <ng-container *ngComponentOutlet=\"logComponent\"></ng-container>-->\n    <!--    </mat-sidenav>-->\n    <!-- End A-stack logs -->\n</mat-sidenav-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: TqlHeaderLayoutComponent, selector: "tql-header-layout" }, { kind: "component", type: TqlNavbarLayoutComponent, selector: "tql-navbar-layout" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlMainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TqlMainLayoutComponent, isStandalone: false, selector: "tql-main-layout", ngImport: i0, template: "<mat-sidenav-container>\n    <mat-sidenav-content>\n        <div class=\"dashboards-wrapper d-flex\">\n            <!-- Start Navigation Layout -->\n            <div>\n                <tql-navbar-layout></tql-navbar-layout>\n            </div>\n            <!-- End Navigation Layout -->\n\n            <div class=\"flex-grow-1 flex-shrink-1 overflow-auto d-flex flex-column\">\n                <div class=\"flex-grow-1 flex-shrink-1 d-flex flex-column overflow-hidden\">\n\n                    <!-- Start Header Layout -->\n                    <div>\n                        <tql-header-layout></tql-header-layout>\n                    </div>\n                    <!-- End Header Layout -->\n\n                    <div class=\"d-flex flex-grow-1 flex-shrink-1 overflow-auto\">\n                        <!--TODO-->\n\n                        <!-- Start Content -->\n                        <div class=\"flex-shrink-1 flex-grow-1 overflow-y-auto \">\n                            <router-outlet></router-outlet>\n                        </div>\n                        <!-- End Content -->\n\n                        <!-- Start Dynamic Right Side -->\n                        <!--                        <div>-->\n                        <!--                            <div *ngIf=\"dynamicDataComponent\" class=\"dynamic-box h-100\">-->\n                        <!--                                <app-dc-main [data]=\"dynamicDataComponent\"></app-dc-main>-->\n                        <!--                            </div>-->\n                        <!--                        </div>-->\n                        <!-- End Dynamic Right Side -->\n\n                    </div>\n                </div>\n\n                <!-- Start Footer Layout -->\n<!--                <div>-->\n<!--                    <tql-footer-layout></tql-footer-layout>-->\n<!--                </div>-->\n                <!-- End Footer Layout -->\n\n            </div>\n        </div>\n    </mat-sidenav-content>\n\n    <!-- Start A-stack logs -->\n    <!--TODO-->\n    <!--    <mat-sidenav position=\"end\" mode=\"over\" [(opened)]=\"isOpenLog\" (closed)=\"closeSideNav()\">-->\n    <!--        <ng-container *ngComponentOutlet=\"logComponent\"></ng-container>-->\n    <!--    </mat-sidenav>-->\n    <!-- End A-stack logs -->\n</mat-sidenav-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: TqlHeaderLayoutComponent, selector: "tql-header-layout" }, { kind: "component", type: TqlNavbarLayoutComponent, selector: "tql-navbar-layout" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlMainLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlMainLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tql-main-layout', standalone: false, template: "<mat-sidenav-container>\n    <mat-sidenav-content>\n        <div class=\"dashboards-wrapper d-flex\">\n            <!-- Start Navigation Layout -->\n            <div>\n                <tql-navbar-layout></tql-navbar-layout>\n            </div>\n            <!-- End Navigation Layout -->\n\n            <div class=\"flex-grow-1 flex-shrink-1 overflow-auto d-flex flex-column\">\n                <div class=\"flex-grow-1 flex-shrink-1 d-flex flex-column overflow-hidden\">\n\n                    <!-- Start Header Layout -->\n                    <div>\n                        <tql-header-layout></tql-header-layout>\n                    </div>\n                    <!-- End Header Layout -->\n\n                    <div class=\"d-flex flex-grow-1 flex-shrink-1 overflow-auto\">\n                        <!--TODO-->\n\n                        <!-- Start Content -->\n                        <div class=\"flex-shrink-1 flex-grow-1 overflow-y-auto \">\n                            <router-outlet></router-outlet>\n                        </div>\n                        <!-- End Content -->\n\n                        <!-- Start Dynamic Right Side -->\n                        <!--                        <div>-->\n                        <!--                            <div *ngIf=\"dynamicDataComponent\" class=\"dynamic-box h-100\">-->\n                        <!--                                <app-dc-main [data]=\"dynamicDataComponent\"></app-dc-main>-->\n                        <!--                            </div>-->\n                        <!--                        </div>-->\n                        <!-- End Dynamic Right Side -->\n\n                    </div>\n                </div>\n\n                <!-- Start Footer Layout -->\n<!--                <div>-->\n<!--                    <tql-footer-layout></tql-footer-layout>-->\n<!--                </div>-->\n                <!-- End Footer Layout -->\n\n            </div>\n        </div>\n    </mat-sidenav-content>\n\n    <!-- Start A-stack logs -->\n    <!--TODO-->\n    <!--    <mat-sidenav position=\"end\" mode=\"over\" [(opened)]=\"isOpenLog\" (closed)=\"closeSideNav()\">-->\n    <!--        <ng-container *ngComponentOutlet=\"logComponent\"></ng-container>-->\n    <!--    </mat-sidenav>-->\n    <!-- End A-stack logs -->\n</mat-sidenav-container>\n" }]
         }], ctorParameters: () => [] });
 
 class LayoutsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: LayoutsModule, declarations: [TqlEmptyLayoutComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LayoutsModule, declarations: [TqlEmptyLayoutComponent,
             TqlHeaderLayoutComponent,
             TqlMainLayoutComponent,
             TqlNavbarLayoutComponent], imports: [CommonModule,
@@ -5126,13 +5126,13 @@ class LayoutsModule {
             TqlHeaderLayoutComponent,
             TqlMainLayoutComponent,
             TqlNavbarLayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutsModule, imports: [CommonModule,
             RouterModule,
             MaterialsModule,
             TemplateModule,
             TqlNavbarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5158,11 +5158,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class ComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ComponentsModule, imports: [CommonModule], exports: [BasicModule, TemplateModule, LayoutsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentsModule, imports: [CommonModule, BasicModule, TemplateModule, LayoutsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ComponentsModule, imports: [CommonModule], exports: [BasicModule, TemplateModule, LayoutsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComponentsModule, imports: [CommonModule, BasicModule, TemplateModule, LayoutsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -5174,11 +5174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 class TqlComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TqlComponentModule, imports: [PipesModule, ComponentsModule, DirectivesModule], exports: [PipesModule, ComponentsModule, DirectivesModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlComponentModule, imports: [PipesModule, ComponentsModule, DirectivesModule, PipesModule, ComponentsModule, DirectivesModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TqlComponentModule, imports: [PipesModule, ComponentsModule, DirectivesModule], exports: [PipesModule, ComponentsModule, DirectivesModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlComponentModule, imports: [PipesModule, ComponentsModule, DirectivesModule, PipesModule, ComponentsModule, DirectivesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TqlComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TqlComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],