@dotglitch/ngx-common 1.0.23 → 1.0.25

package/fesm2020/dotglitch-ngx-common.mjs

@@ -3,7 +3,7 @@ import { TemplateRef, Component, Optional, Inject, Input, HostListener, Directiv
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgIf, NgForOf, DOCUMENT, NgComponentOutlet, DatePipe } from '@angular/common';
+import { CommonModule, NgIf, NgForOf, NgTemplateOutlet, DOCUMENT, NgComponentOutlet, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
 import { createApplication } from '@angular/platform-browser';
 import { firstValueFrom, debounceTime, of, Subject, BehaviorSubject } from 'rxjs';
@@ -11,16 +11,16 @@ import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$1 from '@angular/cdk/portal';
+import * as i3 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import * as i2$2 from '@angular/cdk/dialog';
+import * as i2$1 from '@angular/cdk/dialog';
 import { retry } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import * as i4 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i6$1 from '@angular/material/sidenav';
 import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
-import * as i3 from 'angular-split';
+import * as i3$1 from 'angular-split';
 import { AngularSplitModule } from 'angular-split';
 import * as i6 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -32,9 +32,9 @@ import { NgScrollbarModule } from 'ngx-scrollbar';
 import { TabulatorFull } from 'tabulator-tables';
 import * as i7 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i2$3 from '@angular/material/button';
+import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$4 from '@angular/material/expansion';
+import * as i2$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as path from 'path-browserify';
 
@@ -448,51 +448,6 @@ const calcComponentBounds = async (component, data) => {
     del.remove();
     return rect;
 };
-class TemplateWrapper {
-    constructor(dialogRef, _data, viewContainer) {
-        this.dialogRef = dialogRef;
-        this._data = _data;
-        this.viewContainer = viewContainer;
-        this.data = _data.data;
-        this.template = _data.template;
-        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
-        if (this.templateType == "component") {
-            this.componentPortal = new ComponentPortal(this.template);
-        }
-    }
-}
-TemplateWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TemplateWrapper, deps: [{ token: i1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TemplateWrapper, isStandalone: true, selector: "ngx-menu-template-wrapper", ngImport: i0, template: `
-    <ng-container *ngIf="templateType == 'template'; else portalOutlet">
-        <ng-container
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{ '$implicit': data, dialog: dialogRef }"
-        />
-    </ng-container>
-    <ng-template #portalOutlet [cdkPortalOutlet]="componentPortal" ></ng-template>
-`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TemplateWrapper, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngx-menu-template-wrapper',
-                    template: `
-    <ng-container *ngIf="templateType == 'template'; else portalOutlet">
-        <ng-container
-            [ngTemplateOutlet]="template"
-            [ngTemplateOutletContext]="{ '$implicit': data, dialog: dialogRef }"
-        />
-    </ng-container>
-    <ng-template #portalOutlet [cdkPortalOutlet]="componentPortal" ></ng-template>
-`,
-                    imports: [NgTemplateOutlet, PortalModule, NgIf],
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialogRef, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i0.ViewContainerRef }]; } });
 class MenuComponent {
     constructor(viewContainer, sanitizer, _data, dialog, // optional only for the purpose of estimating dimensions
     dialogRef) {
@@ -515,6 +470,7 @@ class MenuComponent {
         this.matIconRx = /[\/\.]/i;
         this.showIconColumn = true;
         this.showShortcutColumn = true;
+        this.childDialogs = [];
         // Defaults are set before @Input() hooks evaluate
         this.data = this._data?.data;
         this.ownerCords = this._data?.ownerCords;
@@ -522,6 +478,11 @@ class MenuComponent {
         this.items = this._data?.items;
         this.config = this._data?.config;
         this.id = this._data?.id;
+        this.template = _data.template;
+        this.templateType = this.template instanceof TemplateRef ? "template" : "component";
+        if (this.templateType == "component") {
+            this.componentPortal = new ComponentPortal(this.template);
+        }
     }
     ngOnInit() {
         this.items?.forEach(i => {
@@ -616,7 +577,7 @@ class MenuComponent {
         };
         // Set position coordinates
         const { width, height } = await (item.childTemplate
-            ? calcComponentBounds(TemplateWrapper, { template: item.childTemplate })
+            ? calcComponentBounds(MenuComponent, { template: item.childTemplate })
             : calcMenuItemBounds(item.children, this.data));
         if (bounds.y + height > window.innerHeight)
             cords.bottom = "0px";
@@ -626,7 +587,7 @@ class MenuComponent {
             cords.top = bounds.y + "px";
         if (!cords.left)
             cords.left = bounds.x + bounds.width + "px";
-        const component = item.children ? MenuComponent : TemplateWrapper;
+        const component = item.children ? MenuComponent : MenuComponent;
         const dialogRef = this.dialog.open(component, {
             position: cords,
             panelClass: ["ngx-menu"].concat(this.config?.customClass || []),
@@ -652,8 +613,10 @@ class MenuComponent {
             else {
                 item['_selfclose'] = Date.now();
             }
+            this.childDialogs.splice(this.childDialogs.findIndex(d => d == dialogRef), 1);
             _s.unsubscribe();
         });
+        this.childDialogs.push(dialogRef);
         return dialogRef;
     }
     /**
@@ -669,9 +632,15 @@ class MenuComponent {
      */
     // @HostListener("window:resize", ['event'])
     // @HostListener("window:blur", ['event'])
-    close() {
-        this.closeSignal.emit();
-        this.dialogRef?.close();
+    close(result) {
+        if (result != -1)
+            this.closeSignal.emit();
+        this.childDialogs.forEach(d => d.close());
+        this.dialogRef?.close(result);
+    }
+    closeOnVoid(force = false) {
+        if (!this.isLockedOpen || force)
+            this.close(-1);
     }
     /**
      * Check if the dialog is clipping offscreen
@@ -696,10 +665,6 @@ class MenuComponent {
             target.style['margin-left'] = newLeft;
         }
     }
-    closeOnVoid(force = false) {
-        if (!this.isLockedOpen || force)
-            this.dialogRef.close(-1);
-    }
     // If the void element gets stuck open, make wheel events pass through.
     onWheel(evt) {
         const el = this.viewContainer.element.nativeElement;
@@ -714,17 +679,18 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialog, optional: true }, { token: i1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", ownerCords: "ownerCords", selfCords: "selfCords" }, outputs: { closeSignal: "closeSignal" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n    (wheel)=\"onWheel($event)\"\n></div>\n\n<table>\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\" [style.color]=\"item.iconColor\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n    *ngIf=\"parentCords && this.selfCords\"\n    class=\"backdrop parent\"\n    [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n    [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n    [style.width]=\"(parentCords.width) + 'px'\"\n    [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n    <div #top\n        class=\"backdrop-outer\"\n        [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n        style=\"background: #f003;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #right\n        class=\"backdrop-outer\"\n        [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n        style=\"background: #0f03;\"\n        (pointerenter)=\"onLeave()\"\n    >\n    <div>px: {{parentCords.x}}</div>\n    <div>py: {{parentCords.y}}</div>\n    <div>pw: {{parentCords.width}}</div>\n    <div>ph: {{parentCords.height}}</div>\n    <div>sx: {{selfCords.x}}</div>\n    <div>sy: {{selfCords.y}}</div>\n    <div>sw: {{selfCords.width}}</div>\n    <div>sh: {{selfCords.height}}</div>\n    </div>\n    <div #bottom\n        class=\"backdrop-outer\"\n        [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n        style=\"background: #00f3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #left\n        class=\"backdrop-outer\"\n        [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n        style=\"background: #fff3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, isStandalone: true, selector: "ngx-menu", inputs: { data: "data", items: "items", config: "config", id: "id", ownerCords: "ownerCords", selfCords: "selfCords" }, outputs: { closeSignal: "closeSignal" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n    (wheel)=\"onWheel($event)\"\n></div>\n\n<table *ngIf=\"!template\">\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\" [style.color]=\"item.iconColor\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<ng-container *ngIf=\"template\">\n    <ng-container *ngIf=\"templateType == 'template'; else portalOutlet\">\n        <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data, dialog: dialogRef }\"\n        />\n    </ng-container>\n    <ng-template #portalOutlet [cdkPortalOutlet]=\"componentPortal\" ></ng-template>\n</ng-container>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-menu', imports: [
                         NgIf,
                         NgForOf,
                         NgTemplateOutlet,
+                        PortalModule,
                         MatIconModule,
                         MatProgressSpinnerModule,
                         TooltipDirective
-                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n    (wheel)=\"onWheel($event)\"\n></div>\n\n<table>\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\" [style.color]=\"item.iconColor\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<!-- <div *ngIf=\"true\" class=\"backdrop\"></div> -->\n<!-- <div\n    *ngIf=\"parentCords && this.selfCords\"\n    class=\"backdrop parent\"\n    [style.top]=\"(parentCords.y - selfCords.y + 6) + 'px'\"\n    [style.left]=\"(parentCords.x - selfCords.x + 12) + 'px'\"\n    [style.width]=\"(parentCords.width) + 'px'\"\n    [style.height]=\"(parentCords.height) + 'px'\"\n>\n</div> -->\n<!-- <ng-container *ngIf=\"parentCords && selfCords\">\n    <div #top\n        class=\"backdrop-outer\"\n        [style.bottom]=\"(parentCords.y - selfCords.y)*-1 + parentCords.height + 'px'\"\n        style=\"background: #f003;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #right\n        class=\"backdrop-outer\"\n        [style.left]=\"((parentCords.x - selfCords.x) + parentCords.width) + 'px'\"\n        style=\"background: #0f03;\"\n        (pointerenter)=\"onLeave()\"\n    >\n    <div>px: {{parentCords.x}}</div>\n    <div>py: {{parentCords.y}}</div>\n    <div>pw: {{parentCords.width}}</div>\n    <div>ph: {{parentCords.height}}</div>\n    <div>sx: {{selfCords.x}}</div>\n    <div>sy: {{selfCords.y}}</div>\n    <div>sw: {{selfCords.width}}</div>\n    <div>sh: {{selfCords.height}}</div>\n    </div>\n    <div #bottom\n        class=\"backdrop-outer\"\n        [style.top]=\"((parentCords.y + parentCords.height - selfCords.y)) + 'px'\"\n        style=\"background: #00f3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n    <div #left\n        class=\"backdrop-outer\"\n        [style.right]=\"((parentCords.x - selfCords.x)*-1 + parentCords.width + 32) + 'px'\"\n        style=\"background: #fff3;\"\n        (pointerenter)=\"onLeave()\"\n    ></div>\n</ng-container> -->\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
+                    ], standalone: true, template: "<!-- Mouse event blocker for pointer leave -->\n<div\n    *ngIf=\"coverRectCords\"\n    class=\"owner-mask\"\n    [style.top]=\"coverRectCords.top + 'px'\"\n    [style.left]=\"coverRectCords.left + 'px'\"\n    [style.height]=\"coverRectCords.height + 'px'\"\n    [style.width]=\"coverRectCords.width + 'px'\"\n    style=\"z-index: -1\"\n></div>\n\n<div class=\"void\"\n    (pointerenter)=\"pointerIsOnVoid = true; hasBootstrapped && !isLockedOpen && closeOnVoid()\"\n    (pointerleave)=\"pointerIsOnVoid = false\"\n    (pointerdown)=\"hasBootstrapped && closeOnVoid(true)\"\n    (wheel)=\"onWheel($event)\"\n></div>\n\n<table *ngIf=\"!template\">\n    <tbody>\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container>\n\n                <!-- A row with a click action -->\n                <tr #row\n                    *ngIf=\"item != 'separator' && item.separator != true && item['_visible']\"\n                    [class.disabled]=\"item['_disabled']\"\n                    (click)=\"!item['_disabled'] && onMenuItemClick(item, row)\"\n                    [class.hover]=\"item['children'] && row['hover']\"\n                    (pointerenter)=\"row['hover'] = true;\"\n                    (pointerleave)=\"row['hover'] = false\"\n                >\n                <!--  (item['children']?.length > 0 || item['childTemplate']) && onHover(item, row); closeOnLeave=true -->\n                    <td class=\"icon\" *ngIf=\"showIconColumn\">\n                        <img *ngIf=\"matIconRx.test(item.icon); else matIcon\" [src]=\"item.icon\" />\n                        <ng-template #matIcon>\n                            <mat-icon [fontIcon]=\"item.icon\" [style.color]=\"item.iconColor\"></mat-icon>\n                        </ng-template>\n                    </td>\n\n                    <!-- 'Normal' action based item -->\n                    <ng-container>\n                        <td class=\"label\"\n                            [style.padding-left]=\"showIconColumn ? 0 : '16px'\"\n                        >\n                            <a\n                                [attr.target]=\"item.linkTarget\"\n                                [attr.href]=\"(item['_link'] || item.link) ? sanitizer.bypassSecurityTrustUrl(item['_link'] || item.link) : undefined\"\n                            >\n                                <ng-container\n                                    *ngIf=\"$any(item.labelTemplate)?.prototype; else labelTemplate\"\n                                    [ngTemplateOutlet]=\"$any(item).labelTemplate\"\n                                    [ngTemplateOutletContext]=\"{ '$implicit': data, 'dialog': dialogRef }\"\n                                />\n\n                                <ng-template #labelTemplate>\n                                    <ng-container *ngIf=\"!$any(item)?.labelTemplate\">\n                                        <div [innerHTML]=\"item['_formattedLabel']\"></div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"$any(item)?.labelTemplate\">\n                                        {{$any(item)?.labelTemplate(data || {})}}\n                                    </ng-container>\n                                </ng-template>\n                            </a>\n                        </td>\n                    </ng-container>\n\n                    <td class=\"shortcut\" *ngIf=\"showShortcutColumn\">\n                        {{item.shortcutLabel}}\n                    </td>\n                    <td style=\"min-width: 16px\">\n                        <mat-icon *ngIf=\"\n                            (item.children && item.children.length > 0) ||\n                            item.childTemplate ||\n                            (item.childrenResolver && !item['_isResolving'])\n                        \"\n                            sytle=\"transform: translateY(2px)\"\n                        >\n                            chevron_right\n                        </mat-icon>\n\n                        <mat-progress-spinner *ngIf=\"item['_isResolving']\" mode=\"indeterminate\" [diameter]=\"20\" style=\"margin-right: 4px\"/>\n                    </td>\n                </tr>\n\n                <tr *ngIf=\"item != 'separator' && item.separator == true\" class=\"disabled separator\">\n                    <td class=\"center\" [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <span class=\"hr\">\n                            {{item['label'] || ''}}\n                        </span>\n                    </td>\n                </tr>\n                <tr *ngIf=\"item == 'separator'\" class=\"disabled separator\">\n                    <td [attr.colspan]=\"2 + (showIconColumn ? 1 : 0) + (showShortcutColumn ? 1 : 0)\">\n                        <hr/>\n                    </td>\n                </tr>\n            </ng-container>\n        </ng-container>\n    </tbody>\n</table>\n\n<ng-container *ngIf=\"template\">\n    <ng-container *ngIf=\"templateType == 'template'; else portalOutlet\">\n        <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"{ '$implicit': data, dialog: dialogRef }\"\n        />\n    </ng-container>\n    <ng-template #portalOutlet [cdkPortalOutlet]=\"componentPortal\" ></ng-template>\n</ng-container>\n", styles: ["::ng-deep .cdk-overlay-container .ngx-menu{--mdc-dialog-container-color: var(--ngx-menu-background-color, #2f2f2f)}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog__container{transform-origin:top left}::ng-deep .cdk-overlay-container .ngx-menu .mdc-dialog--open .mdc-dialog__container{transform:none}::ng-deep .cdk-overlay-pane.ngx-menu .mat-mdc-dialog-surface{overflow:visible}:host{-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:block}table{border-spacing:0;border-radius:5px;padding:4px 0}tr{color:var(--ngx-menu-text-color, #ccc);font-size:14px;cursor:pointer;transition:background-color 75ms ease,color 75ms ease}tr:not(.disabled):hover{background-color:var(--ngx-menu-hover-background-color, #94ebeb);color:var(--ngx-menu-hover-text-color, #000)}tr:not(.disabled):hover a{color:var(--ngx-menu-hover-text-color, #000)}tr:not(.separator){height:36px}tr.disabled .label{color:var(--ngx-menu-disabled-text-color, #919191)}tr .center{text-align:center}tr a{outline:0;display:flex;align-items:center;gap:10px;justify-content:space-between;height:100%;width:100%}tr .label{min-width:100px}.hr{height:1px;text-align:center;position:relative}.hr:before,.hr:after{content:\"\";background:var(--ngx-menu-separator-color, #2a2a2a);display:block;position:absolute;top:0;bottom:0;height:1px;margin:auto;width:300px}.hr:before{right:calc(100% + 4px)}.hr:after{left:calc(100% + 4px)}hr{background:var(--ngx-menu-separator-color, #2a2a2a);border:0;height:1px;margin:0}.icon{width:24px;height:24px;padding-left:10px}.icon mat-icon{transform:translateY(2px)}.shortcut{color:var(--ngx-menu-shortcut-text-color, #848484);text-align:end;padding-right:10px;padding-left:12px}.label{height:var(--ngx-menu-item-height, 30px)}td{vertical-align:middle}.void,.owner-mask{position:absolute}.void{top:-100vh;right:-100vw;bottom:-100vh;left:-100vw;z-index:-2}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1637,14 +1603,14 @@ class LazyLoaderComponent {
         this.showLoader = false;
     }
 }
-LazyLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2$2.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LazyLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, deps: [{ token: LazyLoaderService }, { token: i0.ViewContainerRef, optional: true }, { token: i2$1.DialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 LazyLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LazyLoaderComponent, isStandalone: true, selector: "ngx-lazy-loader", inputs: { id: ["component", "id"], group: "group", inputs: "inputs", outputs: "outputs" }, outputs: { componentLoadError: "componentLoadError", componentLoaded: "componentLoaded" }, viewQueries: [{ propertyName: "targetContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LazyLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-lazy-loader', imports: [NgIf, NgComponentOutlet, NgTemplateOutlet], standalone: true, template: "<ng-container #content></ng-container>\n\n<div class=\"ngx-lazy-loader-distractor\" [class.destroying]=\"isClearingLoader\">\n    <ng-container *ngIf=\"config.loaderDistractorComponent\" [ngComponentOutlet]=\"config.loaderDistractorComponent\"></ng-container>\n    <ng-container *ngIf=\"config.loaderDistractorTemplate\" [ngTemplateOutlet]=\"config.loaderDistractorTemplate\" [ngTemplateOutletContext]=\"{ '$implicit': inputs }\"></ng-container>\n</div>\n", styles: [":host{display:contents;contain:content;z-index:1;position:relative}.ngx-lazy-loader-distractor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--background-color, #212121);opacity:1;transition:opacity .3s ease;z-index:999999}.ngx-lazy-loader-distractor.destroying{opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: LazyLoaderService }, { type: i0.ViewContainerRef, decorators: [{
                     type: Optional
-                }] }, { type: i2$2.DialogRef, decorators: [{
+                }] }, { type: i2$1.DialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -9115,7 +9081,7 @@ class GtkIconButtonComponent {
     }
 }
 GtkIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GtkIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GtkIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n    <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+GtkIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GtkIconButtonComponent, isStandalone: true, selector: "gtk-icon-button", inputs: { fontIcon: "fontIcon", disabled: "disabled" }, outputs: { click: "click" }, ngImport: i0, template: "<button mat-flat-button [disabled]=\"disabled\">\n    <mat-icon [fontIcon]=\"fontIcon\"></mat-icon>\n</button>\n", styles: [":host{position:relative}button{padding:0;min-width:36px;background-color:var(--gtk-button-background-color)!important;color:var(--gtk-button-text-color)!important;border:1px solid var(--gtk-button-border-color);border-bottom-color:var(--gtk-button-border-bottom-color);transition:.25s ease;transition-property:border-color,background-color,color}mat-icon{margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GtkIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gtk-icon-button', imports: [
@@ -9267,7 +9233,7 @@ class ToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarComponent, deps: [{ token: FilemanagerComponent }, { token: DialogService }, { token: Fetch }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToolbarComponent, isStandalone: true, selector: "app-toolbar", inputs: { config: "config", currentTab: "currentTab", showHiddenFiles: "showHiddenFiles", showSidebar: "showSidebar", drawerMode: "drawerMode", showBareMinimum: "showBareMinimum" }, outputs: { onBreadcrumbClick: "onBreadcrumbClick", showHiddenFilesChange: "showHiddenFilesChange", showSidebarChange: "showSidebarChange" }, viewQueries: [{ propertyName: "zoomTemplate", first: true, predicate: ["zoomTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }], ngImport: i0, template: "<button\n    *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n    mat-icon-button\n    (click)=\"toggleDrawer()\"\n>\n    <mat-icon>list</mat-icon>\n</button>\n\n<ng-container *ngIf=\"!showBareMinimum\">\n    <div class=\"buttongroup\">\n        <gtk-icon-button\n            fontIcon=\"arrow_back_ios_new\"\n            (click)=\"historyBack(currentTab)\"\n            [disabled]=\"currentTab.history?.length <= 1\"\n        />\n        <gtk-icon-button\n            fontIcon=\"arrow_forward_ios\"\n            (click)=\"historyForward(currentTab)\"\n            [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n        />\n    </div>\n\n    <div style=\"width: 40px\" *ngIf=\"!drawerMode\"></div>\n</ng-container>\n\n\n<app-breadcrumb\n    *ngIf=\"currentTab\"\n    style=\"flex: 1\"\n    [crumbs]=\"currentTab.breadcrumb\"\n    (crumbClick)=\"onBreadcrumbClick.next($event)\"\n    [config]=\"config\"\n/>\n\n<ng-container *ngIf=\"!drawerMode\">\n    <!-- <div style=\"flex: 1\"></div> -->\n\n    <gtk-icon-button\n        fontIcon=\"more_vert\"\n        [ngx-menu]=\"fileOptions\"\n        [ngx-menu-config]=\"{position: 'bottom'}\"\n    />\n\n    <div style=\"width: 8px\"></div>\n\n    <!-- <gtk-icon-button\n        fontIcon=\"search\"\n    /> -->\n\n    <div style=\"width: 100px\" *ngIf=\"fileManager.width > 800\"></div>\n\n    <gtk-icon-button\n        [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n        (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n    />\n\n    <gtk-icon-button\n        fontIcon=\"sort\"\n        [ngx-menu]=\"sortOptions\"\n        [ngx-menu-config]=\"{position: 'bottom'}\"\n    />\n</ng-container>\n\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: GtkIconButtonComponent, selector: "gtk-icon-button", inputs: ["fontIcon", "disabled"], outputs: ["click"] }, { kind: "component", type: GtkBreadcrumbComponent, selector: "app-breadcrumb", inputs: ["crumbs", "config"], outputs: ["crumbClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu],[ngxContextmenu],[ngxMenu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }] });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToolbarComponent, isStandalone: true, selector: "app-toolbar", inputs: { config: "config", currentTab: "currentTab", showHiddenFiles: "showHiddenFiles", showSidebar: "showSidebar", drawerMode: "drawerMode", showBareMinimum: "showBareMinimum" }, outputs: { onBreadcrumbClick: "onBreadcrumbClick", showHiddenFilesChange: "showHiddenFilesChange", showSidebarChange: "showSidebarChange" }, viewQueries: [{ propertyName: "zoomTemplate", first: true, predicate: ["zoomTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }], ngImport: i0, template: "<button\n    *ngIf=\"fileManager.sidebarOverlay && !drawerMode\"\n    mat-icon-button\n    (click)=\"toggleDrawer()\"\n>\n    <mat-icon>list</mat-icon>\n</button>\n\n<ng-container *ngIf=\"!showBareMinimum\">\n    <div class=\"buttongroup\">\n        <gtk-icon-button\n            fontIcon=\"arrow_back_ios_new\"\n            (click)=\"historyBack(currentTab)\"\n            [disabled]=\"currentTab.history?.length <= 1\"\n        />\n        <gtk-icon-button\n            fontIcon=\"arrow_forward_ios\"\n            (click)=\"historyForward(currentTab)\"\n            [disabled]=\"currentTab.historyIndex >= (currentTab.history?.length-1)\"\n        />\n    </div>\n\n    <div style=\"width: 40px\" *ngIf=\"!drawerMode\"></div>\n</ng-container>\n\n\n<app-breadcrumb\n    *ngIf=\"currentTab\"\n    style=\"flex: 1\"\n    [crumbs]=\"currentTab.breadcrumb\"\n    (crumbClick)=\"onBreadcrumbClick.next($event)\"\n    [config]=\"config\"\n/>\n\n<ng-container *ngIf=\"!drawerMode\">\n    <!-- <div style=\"flex: 1\"></div> -->\n\n    <gtk-icon-button\n        fontIcon=\"more_vert\"\n        [ngx-menu]=\"fileOptions\"\n        [ngx-menu-config]=\"{position: 'bottom'}\"\n    />\n\n    <div style=\"width: 8px\"></div>\n\n    <!-- <gtk-icon-button\n        fontIcon=\"search\"\n    /> -->\n\n    <div style=\"width: 100px\" *ngIf=\"fileManager.width > 800\"></div>\n\n    <gtk-icon-button\n        [fontIcon]=\"currentTab.viewMode == 'list' ? 'view_list' : 'grid_view'\"\n        (click)=\"currentTab.viewMode = currentTab.viewMode == 'list' ? 'grid' : 'list'; fileManager.onResize()\"\n    />\n\n    <gtk-icon-button\n        fontIcon=\"sort\"\n        [ngx-menu]=\"sortOptions\"\n        [ngx-menu-config]=\"{position: 'bottom'}\"\n    />\n</ng-container>\n\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: GtkIconButtonComponent, selector: "gtk-icon-button", inputs: ["fontIcon", "disabled"], outputs: ["click"] }, { kind: "component", type: GtkBreadcrumbComponent, selector: "app-breadcrumb", inputs: ["crumbs", "config"], outputs: ["crumbClick"] }, { kind: "directive", type: MenuDirective, selector: "[ngx-contextmenu],[ngx-menu],[ngxContextmenu],[ngxMenu]", inputs: ["ngx-menu-context", "ngx-contextmenu", "ngx-menu", "ngx-menu-config"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-toolbar', imports: [
@@ -9324,7 +9290,7 @@ class TreeViewComponent {
     }
 }
 TreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeViewComponent, deps: [{ token: FilemanagerComponent }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n    <mat-expansion-panel\n        #panel\n        *ngFor=\"let item of data\"\n        expanded=\"false\"\n        togglePosition=\"before\"\n        [class.isleaf]=\"item['_children']?.length == 0\"\n        (afterExpand)=\"tryLoadChildren(item, panel)\"\n    >\n        <mat-expansion-panel-header>\n            <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n                <ng-container *ngIf=\"!panel.expanded\">\n                    <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path\"/>\n                </ng-container>\n                <ng-container *ngIf=\"panel.expanded\">\n                    <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"/>\n                </ng-container>\n                {{item.name}}\n            </div>\n        </mat-expansion-panel-header>\n\n        <app-tree-view\n            *ngIf=\"item['_children']; else loadingTemplate\"\n            [data]=\"item['_children']\"\n            (click)=\"click.next(item)\"\n            (loadChildren)=\"loadChildren.next($event)\"\n        />\n        <ng-template #loadingTemplate>\n            <mat-progress-bar color=\"primary\" mode=\"query\"/>\n        </ng-template>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:rgba(0,0,0,0)}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+TreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeViewComponent, isStandalone: true, selector: "app-tree-view", inputs: { rowTemplateIn: ["rowTemplate", "rowTemplateIn"], data: "data" }, outputs: { click: "click", loadChildren: "loadChildren" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-accordion displayMode=\"flat\" [multi]=\"true\">\n    <mat-expansion-panel\n        #panel\n        *ngFor=\"let item of data\"\n        expanded=\"false\"\n        togglePosition=\"before\"\n        [class.isleaf]=\"item['_children']?.length == 0\"\n        (afterExpand)=\"tryLoadChildren(item, panel)\"\n    >\n        <mat-expansion-panel-header>\n            <div (click)=\"$event.stopPropagation(); click.next(item);\" style=\"display: flex; align-items: center;\">\n                <ng-container *ngIf=\"!panel.expanded\">\n                    <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path\"/>\n                </ng-container>\n                <ng-container *ngIf=\"panel.expanded\">\n                    <img style=\"height: 20px; margin-right: 8px\" [src]=\"iconResolver.resolveIcon(item)?.path.replace('.svg', '-open.svg')\"/>\n                </ng-container>\n                {{item.name}}\n            </div>\n        </mat-expansion-panel-header>\n\n        <app-tree-view\n            *ngIf=\"item['_children']; else loadingTemplate\"\n            [data]=\"item['_children']\"\n            (click)=\"click.next(item)\"\n            (loadChildren)=\"loadChildren.next($event)\"\n        />\n        <ng-template #loadingTemplate>\n            <mat-progress-bar color=\"primary\" mode=\"query\"/>\n        </ng-template>\n    </mat-expansion-panel>\n</mat-accordion>\n", styles: [":host{display:block;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}ul li>div:hover{background-color:var(--list-row-hover-background-color)}.label{top:4px;position:relative}.active ::ng-deep>.mat-expansion-panel-header>.mat-content{background-color:#494949;border-radius:7px;padding-left:12px}.active ::ng-deep>.mat-expansion-panel-header>.mat-content.label{font-weight:bolder}.isleaf ::ng-deep .mat-expansion-indicator{display:none}:host ::ng-deep .mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel-header.mat-expanded{height:32px}:host ::ng-deep .mat-expansion-panel-body{padding:0 0 0 24px}:host ::ng-deep .mat-expansion-panel{box-shadow:none!important;background:rgba(0,0,0,0)}:host ::ng-deep .mat-expansion-panel .mat-content{align-items:center}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator:after{transform:rotate(315deg);transition:transform .2s ease}:host ::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{transform:rotate(225deg)}\n"], dependencies: [{ kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tree-view', imports: [
@@ -9561,7 +9527,7 @@ class FilemanagerComponent {
     }
 }
 FilemanagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilemanagerComponent, deps: [{ token: NGX_WEB_COMPONENTS_CONFIG, optional: true }, { token: LazyLoaderService }, { token: i0.ViewContainerRef }, { token: Fetch }], target: i0.ɵɵFactoryTarget.Component });
-FilemanagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilemanagerComponent, isStandalone: true, selector: "app-filemanager", inputs: { config: "config", gridSize: "gridSize", mode: "mode", contextTags: "contextTags", value: "value" }, outputs: { valueChange: "valueChange", focusedFilesChange: "focusedFilesChange", fileUpload: "fileUpload", fileDownload: "fileDownload", fileRename: "fileRename", fileDelete: "fileDelete", fileCopy: "fileCopy", filePaste: "filePaste", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", filesSelect: "filesSelect" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "toolbar", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "fileGrids", predicate: FileGridComponent, descendants: true }], ngImport: i0, template: "<app-toolbar\n    [currentTab]=\"currentTab\"\n    [(showHiddenFiles)]=\"showHiddenFiles\"\n    [(showSidebar)]=\"showSidebar\"\n    [config]=\"config\"\n    [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n    (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container>\n    <mat-drawer #drawer mode=\"over\">\n        <app-toolbar\n            *ngIf=\"width < 500 && config.showBreadcrumb != false\"\n            [currentTab]=\"currentTab\"\n            [(showHiddenFiles)]=\"showHiddenFiles\"\n            [(showSidebar)]=\"showSidebar\"\n            [config]=\"config\"\n            [drawerMode]=\"true\"\n            (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n        />\n        <app-tree-view\n            [data]=\"currentTab.sidebarItems\"\n            (loadChildren)=\"onTreeViewLoadChildren($event)\"\n            (click)=\"onTreeViewSelect($event)\"\n        />\n    </mat-drawer>\n    <mat-drawer-content>\n        <as-split direction=\"horizontal\" [gutterSize]=\"sidebarOverlay ? 0 : 2\" [unit]=\"'pixel'\" (dragEnd)=\"onResizeEnd()\">\n            <as-split-area\n                style=\"background-color: var(--filemanager-sidebar-background-color, #2c2c2c)\"\n                [size]=\"215\"\n                [minSize]=\"215\"\n                [maxSize]=\"width/4\"\n                [visible]=\"!sidebarOverlay && config.showTreeview != false\"\n            >\n                <div class=\"sidebar\"\n                    *ngIf=\"!sidebarOverlay && config.showTreeview != false\"\n                    (click)=\"currentTab.selection = []\"\n                >\n                    <app-tree-view\n                        [data]=\"currentTab.sidebarItems\"\n                        (loadChildren)=\"onTreeViewLoadChildren($event)\"\n                        (click)=\"onTreeViewSelect($event)\"\n                    />\n                </div>\n            </as-split-area>\n            <as-split-area style=\"background-color: var(--filemanager-background-color, #272727);\">\n                <div class=\"content\"\n                    [style.--tab-height]=\"tabs.length > 1 ? '36px' : '0'\"\n                >\n                    <mat-tab-group #tabGroup (selectedTabChange)=\"currentTab = tabs[$event.index]\" [(selectedIndex)]=\"tabIndex\">\n                        <mat-tab *ngFor=\"let tab of tabs; let i = index\">\n                            <ng-template mat-tab-label>\n                                {{tab.label}}\n                                <mat-icon\n                                    class=\"close\"\n                                    (click)=\"closeTab(tab)\">\n                                    close\n                                </mat-icon>\n                            </ng-template>\n\n                            <ng-template matTabContent>\n                                <app-file-grid\n                                    [viewMode]=\"tab.viewMode\"\n                                    [tab]=\"tab\"\n                                    [config]=\"config\"\n                                    [gridSize]=\"gridSize\"\n                                    [sortOrder]=\"tab.sortOrder\"\n                                    [(selection)]=\"tab.selection\"\n                                    [(path)]=\"tab.path\"\n                                    (pathChange)=\"onTabPathChange(tab)\"\n                                    [(value)]=\"gridValues[i]\"\n                                    (valueChange)=\"onGridValueChange()\"\n                                    (loadFiles)=\"onTabLoadFiles(tab, $event)\"\n\n                                    (fileSelect)=\"fileSelect.next($event)\"\n                                    (fileDblClick)=\"fileDblClick.next($event)\"\n                                    (folderSelect)=\"folderSelect.next($event)\"\n                                    (folderDblClick)=\"folderDblClick.next($event)\"\n                                />\n                            </ng-template>\n                        </mat-tab>\n                    </mat-tab-group>\n                </div>\n            </as-split-area>\n        </as-split>\n    </mat-drawer-content>\n</mat-drawer-container>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}:host .content{display:flex;height:100%;overflow:hidden}:host ::ng-deep .as-split-gutter{background-color:var(--gutter-color, #121212)!important}:host ::ng-deep .mat-mdc-tab-header{height:var(--tab-height, 0);transition:height .25s ease}:host ::ng-deep .mat-mdc-tab-header .mdc-tab{height:var(--tab-height, 0);background-color:var(--filemanager-tab-background-color, #303030)}:host ::ng-deep .mat-mdc-tab .mdc-tab__content{position:static}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label{color:var(--text-subdued-color)}.sidebar{border-right:1px solid transparent;transition:background-color .2s cubic-bezier(0,0,.2,1),border-color .2s ease}.sidebar ul{list-style-type:none;text-align:left;margin:0;padding:0;display:flex;flex-direction:column}.sidebar ul li{display:flex;align-items:center;transition:all .2s ease;font-size:14px;padding:6px 6px 6px 24px}.sidebar ul li mat-icon{margin-right:8px}.sidebar ul li:hover{background-color:#343434}.sidebar ul .tooltip{background-color:#101010cc;border:1px solid #414141;opacity:0;pointer-events:none;transition:all .2s ease}.active .sidebar{background-color:#2c2c2c;border-right-color:#1c1c1c}.active .sidebar li:hover{background-color:#343434}.close{position:absolute;right:12px;color:#666;transition:color .25s ease}.close:hover{color:#ccc}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i3.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i3.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: FileGridComponent, selector: "app-file-grid", inputs: ["path", "config", "showHiddenFiles", "viewMode", "gridSize", "tab", "selection", "value", "sortOrder"], outputs: ["pathChange", "fileSelect", "fileDblClick", "folderSelect", "folderDblClick", "newTab", "loadFiles", "selectionChange", "valueChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["config", "currentTab", "showHiddenFiles", "showSidebar", "drawerMode", "showBareMinimum"], outputs: ["onBreadcrumbClick", "showHiddenFilesChange", "showSidebarChange"] }, { kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }] });
+FilemanagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilemanagerComponent, isStandalone: true, selector: "app-filemanager", inputs: { config: "config", gridSize: "gridSize", mode: "mode", contextTags: "contextTags", value: "value" }, outputs: { valueChange: "valueChange", focusedFilesChange: "focusedFilesChange", fileUpload: "fileUpload", fileDownload: "fileDownload", fileRename: "fileRename", fileDelete: "fileDelete", fileCopy: "fileCopy", filePaste: "filePaste", fileSelect: "fileSelect", fileDblClick: "fileDblClick", folderSelect: "folderSelect", folderDblClick: "folderDblClick", filesSelect: "filesSelect" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }, { propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "toolbar", first: true, predicate: ToolbarComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "fileGrids", predicate: FileGridComponent, descendants: true }], ngImport: i0, template: "<app-toolbar\n    [currentTab]=\"currentTab\"\n    [(showHiddenFiles)]=\"showHiddenFiles\"\n    [(showSidebar)]=\"showSidebar\"\n    [config]=\"config\"\n    [showBareMinimum]=\"width < 500 && config.showBreadcrumb != false\"\n    (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n/>\n\n<mat-drawer-container>\n    <mat-drawer #drawer mode=\"over\">\n        <app-toolbar\n            *ngIf=\"width < 500 && config.showBreadcrumb != false\"\n            [currentTab]=\"currentTab\"\n            [(showHiddenFiles)]=\"showHiddenFiles\"\n            [(showSidebar)]=\"showSidebar\"\n            [config]=\"config\"\n            [drawerMode]=\"true\"\n            (onBreadcrumbClick)=\"onBreadcrumbClick($event)\"\n        />\n        <app-tree-view\n            [data]=\"currentTab.sidebarItems\"\n            (loadChildren)=\"onTreeViewLoadChildren($event)\"\n            (click)=\"onTreeViewSelect($event)\"\n        />\n    </mat-drawer>\n    <mat-drawer-content>\n        <as-split direction=\"horizontal\" [gutterSize]=\"sidebarOverlay ? 0 : 2\" [unit]=\"'pixel'\" (dragEnd)=\"onResizeEnd()\">\n            <as-split-area\n                style=\"background-color: var(--filemanager-sidebar-background-color, #2c2c2c)\"\n                [size]=\"215\"\n                [minSize]=\"215\"\n                [maxSize]=\"width/4\"\n                [visible]=\"!sidebarOverlay && config.showTreeview != false\"\n            >\n                <div class=\"sidebar\"\n                    *ngIf=\"!sidebarOverlay && config.showTreeview != false\"\n                    (click)=\"currentTab.selection = []\"\n                >\n                    <app-tree-view\n                        [data]=\"currentTab.sidebarItems\"\n                        (loadChildren)=\"onTreeViewLoadChildren($event)\"\n                        (click)=\"onTreeViewSelect($event)\"\n                    />\n                </div>\n            </as-split-area>\n            <as-split-area style=\"background-color: var(--filemanager-background-color, #272727);\">\n                <div class=\"content\"\n                    [style.--tab-height]=\"tabs.length > 1 ? '36px' : '0'\"\n                >\n                    <mat-tab-group #tabGroup (selectedTabChange)=\"currentTab = tabs[$event.index]\" [(selectedIndex)]=\"tabIndex\">\n                        <mat-tab *ngFor=\"let tab of tabs; let i = index\">\n                            <ng-template mat-tab-label>\n                                {{tab.label}}\n                                <mat-icon\n                                    class=\"close\"\n                                    (click)=\"closeTab(tab)\">\n                                    close\n                                </mat-icon>\n                            </ng-template>\n\n                            <ng-template matTabContent>\n                                <app-file-grid\n                                    [viewMode]=\"tab.viewMode\"\n                                    [tab]=\"tab\"\n                                    [config]=\"config\"\n                                    [gridSize]=\"gridSize\"\n                                    [sortOrder]=\"tab.sortOrder\"\n                                    [(selection)]=\"tab.selection\"\n                                    [(path)]=\"tab.path\"\n                                    (pathChange)=\"onTabPathChange(tab)\"\n                                    [(value)]=\"gridValues[i]\"\n                                    (valueChange)=\"onGridValueChange()\"\n                                    (loadFiles)=\"onTabLoadFiles(tab, $event)\"\n\n                                    (fileSelect)=\"fileSelect.next($event)\"\n                                    (fileDblClick)=\"fileDblClick.next($event)\"\n                                    (folderSelect)=\"folderSelect.next($event)\"\n                                    (folderDblClick)=\"folderDblClick.next($event)\"\n                                />\n                            </ng-template>\n                        </mat-tab>\n                    </mat-tab-group>\n                </div>\n            </as-split-area>\n        </as-split>\n    </mat-drawer-content>\n</mat-drawer-container>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}:host .content{display:flex;height:100%;overflow:hidden}:host ::ng-deep .as-split-gutter{background-color:var(--gutter-color, #121212)!important}:host ::ng-deep .mat-mdc-tab-header{height:var(--tab-height, 0);transition:height .25s ease}:host ::ng-deep .mat-mdc-tab-header .mdc-tab{height:var(--tab-height, 0);background-color:var(--filemanager-tab-background-color, #303030)}:host ::ng-deep .mat-mdc-tab .mdc-tab__content{position:static}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab-link:not(.mat-mdc-tab-disabled).mdc-tab--active .mdc-tab__text-label{color:var(--text-subdued-color)}.sidebar{border-right:1px solid transparent;transition:background-color .2s cubic-bezier(0,0,.2,1),border-color .2s ease}.sidebar ul{list-style-type:none;text-align:left;margin:0;padding:0;display:flex;flex-direction:column}.sidebar ul li{display:flex;align-items:center;transition:all .2s ease;font-size:14px;padding:6px 6px 6px 24px}.sidebar ul li mat-icon{margin-right:8px}.sidebar ul li:hover{background-color:#343434}.sidebar ul .tooltip{background-color:#101010cc;border:1px solid #414141;opacity:0;pointer-events:none;transition:all .2s ease}.active .sidebar{background-color:#2c2c2c;border-right-color:#1c1c1c}.active .sidebar li:hover{background-color:#343434}.close{position:absolute;right:12px;color:#666;transition:color .25s ease}.close:hover{color:#ccc}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i3$1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i3$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: FileGridComponent, selector: "app-file-grid", inputs: ["path", "config", "showHiddenFiles", "viewMode", "gridSize", "tab", "selection", "value", "sortOrder"], outputs: ["pathChange", "fileSelect", "fileDblClick", "folderSelect", "folderDblClick", "newTab", "loadFiles", "selectionChange", "valueChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i6$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i6$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i6$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["config", "currentTab", "showHiddenFiles", "showSidebar", "drawerMode", "showBareMinimum"], outputs: ["onBreadcrumbClick", "showHiddenFilesChange", "showSidebarChange"] }, { kind: "component", type: TreeViewComponent, selector: "app-tree-view", inputs: ["rowTemplate", "data"], outputs: ["click", "loadChildren"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilemanagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-filemanager', imports: [