taon 18.0.21 → 18.0.23

package/websql/fesm2022/taon.mjs

@@ -1,6 +1,6 @@
 import 'reflect-metadata';
 import * as coreHelpers from 'tnp-core/websql';
-import { _ as _$1, Helpers, UtilsMigrations, UtilsOs, path } from 'tnp-core/websql';
+import { _ as _$1, Helpers, UtilsMigrations, UtilsOs, Utils, crossPlatformPath } from 'tnp-core/websql';
 import { Models as Models$1, RestHeaders, Resource, Mapping } from 'ng2-rest/websql';
 import * as tsorm from 'taon-typeorm/websql';
 import { OrignalClassKey, Entity, Table, TableIndex, EventSubscriber, DataSource } from 'taon-typeorm/websql';
@@ -10,15 +10,15 @@ import { __decorate, __param, __metadata } from 'tslib';
 import { MySqlQuerySource } from 'taon-type-sql/websql';
 import { Stor } from 'taon-storage/websql';
 import { Subject, Observable, from, interval, tap, defer, fromEvent, map, debounceTime, distinctUntilChanged, share, Subscription, takeUntil } from 'rxjs';
-import * as i0 from '@angular/core';
-import { Injectable, inject as inject$1, EventEmitter, Directive, Input, Output, HostBinding, HostListener, Pipe, NgModule, Component, DestroyRef, Self, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { JSON10 } from 'json10/websql';
 import axios from 'axios';
 import { io } from 'socket.io-client';
+import * as i0 from '@angular/core';
+import { inject as inject$1, EventEmitter, Directive, Input, Output, HostBinding, HostListener, Pipe, NgModule, Component, Injectable, DestroyRef, Self, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { Log, Level } from 'ng2-logger/websql';
 import * as i1 from '@angular/platform-browser';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i6$1 from '@angular/cdk/drag-drop';
+import * as i5 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
@@ -27,11 +27,11 @@ import { CdkTreeModule } from '@angular/cdk/tree';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i7 from '@angular/material/button';
+import * as i6$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/card';
+import * as i7 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i9 from '@angular/material/checkbox';
+import * as i8 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatStepperModule } from '@angular/material/stepper';
@@ -53,19 +53,19 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
-import * as i11 from '@angular/material/sidenav';
+import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import * as i12 from '@angular/material/tabs';
+import * as i11 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import * as i3 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@ngneat/hot-toast';
 import * as i2 from '@angular/forms';
@@ -75,13 +75,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from 'ngx-progressbar';
 import { NgProgressModule } from 'ngx-progressbar';
 import * as _ from 'lodash';
-import * as i2$1 from '@angular/material/form-field';
+import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@ng-matero/extensions/grid';
+import * as i3 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
 import * as i1$3 from 'static-columns/websql';
 import { StaticColumnsModule } from 'static-columns/websql';
-import * as i5 from 'ngx-scrollbar';
+import * as i4$1 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 
 var Symbols;
@@ -1257,7 +1257,11 @@ var Orm;
         /**
          * 100 characters varchar
          */
-        Column.String = () => tsorm.Column({ type: 'varchar', length: 100, nullable: true });
+        Column.String = (defaultValue = null) => tsorm.Column({ type: 'varchar', length: 100, nullable: _$1.isNil(defaultValue), default: defaultValue });
+        /**
+         * 500 characters varchar
+         */
+        Column.String500 = (defaultValue = null) => tsorm.Column({ type: 'varchar', length: 500, nullable: _$1.isNil(defaultValue), default: defaultValue });
         Column.Number = () => tsorm.Column({ type: 'int', nullable: true });
         Column.DecimalNumber = () => tsorm.Column({ type: 'float', nullable: true });
         Column.SimpleJson = () => tsorm.Column({ type: 'simple-json', nullable: true });
@@ -1747,6 +1751,9 @@ class BaseProvider extends BaseInjector {
 const ENV$2 = Helpers.isBrowser ? window['ENV'] : global['ENV'];
 class TaonAdminService {
     static get Instance() {
+        if (!this._instance) {
+            this._instance = new TaonAdminService();
+        }
         return this._instance;
     }
     constructor() {
@@ -1772,8 +1779,6 @@ class TaonAdminService {
         this.adminPanelIsOpen = true;
     }
     logout() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, providedIn: 'root' }); }
 }
 __decorate([
     (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
@@ -1791,10 +1796,6 @@ __decorate([
     (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
     __metadata("design:type", Boolean)
 ], TaonAdminService.prototype, "keepWebsqlDbDataAfterReload", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
 ;
 ({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/taon-admin.service.ts
 
@@ -2840,6 +2841,7 @@ class ContextDbMigrations {
         if (hasTable) {
             this.ctx.logMigrations &&
                 console.log(`Table ${this.DEFAULT_MIGRATION_TABLE_NAME} already exists.`);
+            await queryRunner.commitTransaction();
             await queryRunner.release();
             return; // Exit early if the table exists
         }
@@ -2860,6 +2862,9 @@ class ContextDbMigrations {
             await queryRunner.release();
         }
     }
+    async logSelectALl(name, queryRunner) {
+        console.log(name, (await queryRunner.query(`SELECT * FROM ${this.DEFAULT_MIGRATION_TABLE_NAME} WHERE context = $1`, [this.ctx.contextName])).map(m => m.name));
+    }
     async revertMigrationToTimestamp(timestamp) {
         if (this.ctx.remoteHost) {
             return;
@@ -2902,7 +2907,8 @@ class ContextDbMigrations {
             }
             await queryRunner.commitTransaction();
             this.ctx.logMigrations &&
-                console.log('Migrations successfully reverted to the specified timestamp.');
+                console.log(`Migrations successfully reverted ` +
+                    `to the specified timestamp ${timestamp} .`);
         }
         catch (error) {
             this.ctx.logMigrations &&
@@ -3112,6 +3118,7 @@ class EndpointContext {
         this.classInstancesByNameObj = {};
         this.objWithClassesInstancesArr = {};
         this.activeRoutes = [];
+        this.skipWritingServerRoutes = false;
         this.injectableTypesfromContexts = [
             Models.ClassType.CONTROLLER,
             Models.ClassType.PROVIDER,
@@ -3225,6 +3232,10 @@ class EndpointContext {
             !this.config.remoteHost.startsWith('https://')) {
             Helpers.throw(`[taon-config] Your 'remoteHost' must start with http:// or https://`);
         }
+        //@ts-expect-error overriding readonly
+        this.skipWritingServerRoutes = _$1.isBoolean(this.config.skipWritingServerRoutes)
+            ? this.config.skipWritingServerRoutes
+            : false;
         if (this.config.host) {
             this.mode = 'backend-frontend(tcp+udp)';
             this.mode = 'backend-frontend(websql)';
@@ -3892,29 +3903,33 @@ class EndpointContext {
         }
     }
     writeActiveRoutes() {
-        if (this.remoteHost || this.isRunOrRevertOnlyMigrationAppStart) {
+        if (this.remoteHost ||
+            this.isRunOrRevertOnlyMigrationAppStart ||
+            this.skipWritingServerRoutes) {
             return;
         }
         const contexts = [this];
-        const troutes = this.activeRoutes.map(({ method, routePath }) => {
-            return (TaonHelpers.fillUpTo(method.toUpperCase() + ':', 10) +
+        const troutes = Utils.uniqArray(this.activeRoutes.map(f => {
+            return `${f.method} ${f.routePath}`;
+        })).map(f => {
+            const [method, routePath] = f.split(' ');
+            return (`\n### ${_$1.startCase(_$1.last(routePath.split('/')))}\n` +
+                TaonHelpers.fillUpTo(method.toUpperCase() + ' ', 10) +
                 this.uri.href.replace(/\/$/, '') +
                 routePath);
         });
         const routes = [
-            ...['', `---------- FOR HOST ${this.uri.href} ----------`],
+            ...['', `#  ROUTES FOR HOST ${this.uri.href} `],
             ...troutes,
-        ];
-        const fileName = path.join(
-        /* */
-        /* */
-        `tmp-routes-${_$1.kebabCase(this.config.contextName)}.json`);
+        ].join('\n');
+        const fileName = crossPlatformPath([
+            /* */
+            /* */
+            `routes-${this.config.contextName}.rest`,
+        ]);
         this.logFramework && console.log(`[taon] routes file: ${fileName} `);
         /* */
         /* */
-        /* */
-        /* */
-        /* */
     }
     get middlewares() {
         /* */
@@ -4666,9 +4681,14 @@ const createContext = (configFn) => {
                     keepWebsqlDbDataAfterReload =
                         TaonAdminService.Instance?.keepWebsqlDbDataAfterReload;
                     if (!Helpers.isNode && keepWebsqlDbDataAfterReload) {
-                        Helpers.info(`[taon] Keep websql data after reload`);
+                        !UtilsOs.isRunningInCliMode() &&
+                            Helpers.info(`[taon] Keeping websql data after reload ` +
+                                `(context=${endpointContextRef.contextName}).`);
                     }
                     else {
+                        !UtilsOs.isRunningInCliMode() &&
+                            Helpers.info(`[taon] Dropping all tables and data ` +
+                                `(context=${endpointContextRef.contextName}).`);
                         await endpointContextRef.reinitControllers();
                     }
                     ///#region TODO this may be usefull but for now
@@ -4890,10 +4910,10 @@ class BaseMigration extends BaseInjector {
         return _$1.startCase(ClassHelpers.getName(this));
     }
     async up(queryRunner) {
-        console.log(`Running migration UP "${ClassHelpers.getName(this)}"`);
+        console.log(`[BaseMigration] Running migration UP "${ClassHelpers.getName(this)}"`);
     }
     async down(queryRunner) {
-        console.log(`Running migration DOWN "${ClassHelpers.getName(this)}"`);
+        console.log(`[BaseMigration] Running migration DOWN "${ClassHelpers.getName(this)}"`);
     }
 }
 ;
@@ -5702,7 +5722,7 @@ class TaonTableComponent {
         log.i('context menu event', e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonTableComponent, selector: "taon-table", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", allowedColumns: "allowedColumns", entity: "entity", expansionTemplate: "expansionTemplate", rows: "rows", columns: "columns", pageSizeOptions: "pageSizeOptions" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<br />\n<columns-container>\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input matInput placeholder=\"Type to search table...\" #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonTableComponent, selector: "taon-table", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", allowedColumns: "allowedColumns", entity: "entity", expansionTemplate: "expansionTemplate", rows: "rows", columns: "columns", pageSizeOptions: "pageSizeOptions" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<br />\n<columns-container>\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input matInput placeholder=\"Type to search table...\" #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableComponent, decorators: [{
             type: Component,
@@ -5784,7 +5804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
 
 class TaonAdminModeConfigurationComponent {
     get opened() {
-        return !this.isIframe && this.admin.adminPanelIsOpen;
+        return !this.isIframe && this.taonAdminService.adminPanelIsOpen;
     }
     set opened(v) {
         if (v && !this.openedOnce) {
@@ -5792,16 +5812,15 @@ class TaonAdminModeConfigurationComponent {
         }
         if (this.wasOpenDraggablePopup) {
             this.wasOpenDraggablePopup = false;
-            this.admin.draggablePopupMode = true;
+            this.taonAdminService.draggablePopupMode = true;
         }
-        this.admin.adminPanelIsOpen = v;
+        this.taonAdminService.adminPanelIsOpen = v;
     }
-    constructor(breakpointsService, admin) {
+    constructor(breakpointsService) {
         this.breakpointsService = breakpointsService;
-        this.admin = admin;
         this.$destroy = new Subject();
         this.cdr = inject$1(ChangeDetectorRef);
-        this.taonAdminService = inject$1(TaonAdminService);
+        this.taonAdminService = TaonAdminService.Instance;
         this.isWebSQLMode = Helpers.isWebSQL;
         this.hideTaonToolsInProduction = ENV.hideTaonToolsInProduction && ENV.angularProd;
         this.isIframe = window.location !== window.parent.location;
@@ -5838,7 +5857,7 @@ class TaonAdminModeConfigurationComponent {
         //Add 'implements AfterViewInit' to the class.
         setTimeout(() => {
             this.height = window.innerHeight;
-            if (this.admin.draggablePopupMode) {
+            if (this.taonAdminService.draggablePopupMode) {
                 this.reloadTabs();
             }
         });
@@ -5864,9 +5883,9 @@ class TaonAdminModeConfigurationComponent {
         this.opened = !this.opened;
     }
     async toogleFullScreen() {
-        this.admin.draggablePopupMode = true;
-        this.admin.draggablePopupModeFullScreen =
-            !this.admin.draggablePopupModeFullScreen;
+        this.taonAdminService.draggablePopupMode = true;
+        this.taonAdminService.draggablePopupModeFullScreen =
+            !this.taonAdminService.draggablePopupModeFullScreen;
         this.resetDrag();
     }
     resetDrag() {
@@ -5881,8 +5900,8 @@ class TaonAdminModeConfigurationComponent {
     scrollTabs(event) {
         return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [{ token: i1$3.BreakpointsService }, { token: TaonAdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !admin.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!admin.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !admin.draggablePopupModeFullScreen && !admin.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupMode\"\n          (click)=\"\n            admin.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!admin.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupMode\"\n          (click)=\"admin.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupMode\"\n          (click)=\"admin.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"admin.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    admin.setKeepWebsqlDbDataAfterReload($event.checked)\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    admin.draggablePopupMode && !admin.draggablePopupModeFullScreen && !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    admin.draggablePopupMode &&\n    admin.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      admin.draggablePopupMode ||\n      admin.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      admin.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!admin.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!admin.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        admin.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i5.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i11.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i11.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i12.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i12.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: // TODO import only partial things
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [{ token: i1$3.BreakpointsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i4$1.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: // TODO import only partial things
                 TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
 }
 __decorate([
@@ -5920,8 +5939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                         TaonNotificationsModule,
                         TaonFullMaterialModule, // TODO import only partial things
                         TaonSessionPasscodeComponent,
-                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !admin.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!admin.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !admin.draggablePopupModeFullScreen && !admin.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupMode\"\n          (click)=\"\n            admin.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!admin.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!admin.draggablePopupMode\"\n          (click)=\"admin.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"admin.draggablePopupMode\"\n          (click)=\"admin.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"admin.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    admin.setKeepWebsqlDbDataAfterReload($event.checked)\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    admin.draggablePopupMode && !admin.draggablePopupModeFullScreen && !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    admin.draggablePopupMode &&\n    admin.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      admin.draggablePopupMode ||\n      admin.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      admin.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!admin.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!admin.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        admin.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.BreakpointsService }, { type: TaonAdminService }], propDecorators: { tabGroup: [{
+                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.BreakpointsService }], propDecorators: { tabGroup: [{
                 type: ViewChild,
                 args: ['tabGroup']
             }], taonAdminModeConfigurationDataChanged: [{