taon 18.0.20 → 18.0.22

package/client/fesm2022/taon.mjs

@@ -2,22 +2,21 @@ import 'reflect-metadata';
 import * as coreHelpers from 'tnp-core/browser';
 import { _ as _$1, Helpers } from 'tnp-core/browser';
 import { Models as Models$1, RestHeaders, Resource, Mapping } from 'ng2-rest/browser';
-import { OrignalClassKey } from 'taon-typeorm/browser';
+import { OrignalClassKey, Table } from 'taon-typeorm/browser';
 import { SYMBOL, CLASS } from 'typescript-class-helpers/browser';
 import * as JSON5 from 'json5';
 import { __decorate, __param, __metadata } from 'tslib';
 import { JSON10 } from 'json10/browser';
-import { Observable, from, Subject, interval, tap, defer, fromEvent, map, debounceTime, distinctUntilChanged, share, Subscription, takeUntil, of } from 'rxjs';
+import { Observable, from, Subject, interval, tap, defer, fromEvent, map, debounceTime, distinctUntilChanged, share, Subscription, takeUntil } from 'rxjs';
 import axios from 'axios';
 import { io } from 'socket.io-client';
 import { Stor } from 'taon-storage/browser';
-import { config } from 'tnp-config/browser';
 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 { Log, Level } from 'ng2-logger/browser';
 import * as i1 from '@angular/platform-browser';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i5 from '@angular/cdk/drag-drop';
+import * as i6$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
@@ -26,11 +25,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 i6$1 from '@angular/material/button';
+import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/card';
+import * as i8 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i8 from '@angular/material/checkbox';
+import * as i9 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatStepperModule } from '@angular/material/stepper';
@@ -39,7 +38,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i11$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -53,19 +51,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 i10 from '@angular/material/sidenav';
+import * as i11 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 i11 from '@angular/material/tabs';
+import * as i12 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 i2$1 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@ngneat/hot-toast';
 import * as i2 from '@angular/forms';
@@ -75,21 +73,14 @@ 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$2 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@ng-matero/extensions/grid';
+import * as i3$1 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
 import * as i1$3 from 'static-columns/browser';
 import { StaticColumnsModule } from 'static-columns/browser';
-import * as i4$1 from 'ngx-scrollbar';
+import * as i5 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
-import * as i1$4 from '@angular/router';
-import 'brace';
-import 'brace/mode/css';
-import 'brace/mode/typescript';
-import 'brace/theme/github';
-import * as i13 from 'ngx-pipes';
-import { NgArrayPipesModule } from 'ngx-pipes';
 
 var Symbols;
 (function (Symbols) {
@@ -155,6 +146,7 @@ var Symbols;
             repository: `repository:options`,
             provider: `provider:options`,
             subscriber: `subscriber:options`,
+            migration: `migration:options`,
         },
     };
     Symbols.old = {
@@ -564,6 +556,7 @@ var Models;
         ClassType["REPOSITORY"] = "REPOSITORY";
         ClassType["PROVIDER"] = "PROVIDER";
         ClassType["SUBSCRIBER"] = "SUBSCRIBER";
+        ClassType["MIGRATION"] = "MIGRATION";
     })(ClassType = Models.ClassType || (Models.ClassType = {}));
     Models.ClassTypeKey = {
         [ClassType.ENTITY]: 'entities',
@@ -571,7 +564,34 @@ var Models;
         [ClassType.REPOSITORY]: 'repositories',
         [ClassType.PROVIDER]: 'providers',
         [ClassType.SUBSCRIBER]: 'subscribers',
+        [ClassType.MIGRATION]: 'migrations',
     };
+    class DatabaseConfigTypeOrm {
+    }
+    Models.DatabaseConfigTypeOrm = DatabaseConfigTypeOrm;
+    class DatabaseConfig extends DatabaseConfigTypeOrm {
+        static from(databasePartialConfig) {
+            return _$1.merge(new DatabaseConfig(), databasePartialConfig);
+        }
+        get databaseConfigTypeORM() {
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            /* */
+            return (void 0);
+        }
+    }
+    Models.DatabaseConfig = DatabaseConfig;
     class DecoratorAbstractOpt {
     }
     Models.DecoratorAbstractOpt = DecoratorAbstractOpt;
@@ -769,6 +789,9 @@ var Http;
 ;
 ({}); // @--end-of-file-for-module=taon lib/decorators/http/http-decorators.ts
 
+/**
+ * Controller decorator
+ */
 function TaonController(options) {
     return function (constructor) {
         ClassHelpers.setName(constructor, options?.className);
@@ -947,7 +970,8 @@ class BaseInjector {
 
 let BaseController = class BaseController extends BaseInjector {
     /**
-     * init example data for db
+     * THIS ONLY WORKS IF NO MIGRATIONS PROVIDED IN CONFIG
+     * Purpose: init example data for db.
      */
     initExampleDbData() {
         return void 0;
@@ -1223,7 +1247,7 @@ BaseCrudController = __decorate([
 class BaseClass {
     /**
      * class initialization hook
-     * taon after class instace creation
+     * taon after class instance creation
      */
     async _() { }
     clone(override) {
@@ -1265,6 +1289,9 @@ BaseAbstractEntity = __decorate([
 ;
 ({}); // @--end-of-file-for-module=taon lib/base-classes/base-abstract-entity.ts
 
+/**
+ * Repository decorator
+ */
 function TaonRepository(options) {
     return function (constructor) {
         Reflect.defineMetadata(Symbols.metadata.options.repository, options, constructor);
@@ -2898,11 +2925,438 @@ class RealtimeCore {
 ;
 ({}); // @--end-of-file-for-module=taon lib/realtime/realtime-core.ts
 
+class ContextDbMigrations {
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.DEFAULT_MIGRATION_TABLE_NAME = 'TAON_MIGRATION_META';
+        this.MIGRATION_STATUS_COMPLETED = 'completed';
+        this.MIGRATION_STATUS_PENDING = 'pending';
+        this.table = new Table({
+            name: this.DEFAULT_MIGRATION_TABLE_NAME,
+            columns: [
+                {
+                    name: 'id',
+                    type: 'integer',
+                    isPrimary: true, // Mark it as the primary key
+                    isGenerated: true, // Enable auto-generation
+                    generationStrategy: 'increment', // Use auto-increment strategy
+                },
+                {
+                    name: 'name',
+                    type: 'varchar',
+                    length: '255',
+                    isUnique: true, // Ensure the name is unique
+                    isNullable: false, // Ensure this field is required
+                },
+                {
+                    name: 'context',
+                    type: 'varchar',
+                    length: '255',
+                    isNullable: false, // Optional context for migrations (e.g., tenant or module name)
+                },
+                {
+                    name: 'applied_at',
+                    type: 'timestamp',
+                    default: 'CURRENT_TIMESTAMP', // Automatically set the timestamp
+                    isNullable: true,
+                },
+                {
+                    name: 'status',
+                    type: 'varchar',
+                    length: '50',
+                    default: `'${this.MIGRATION_STATUS_COMPLETED}'`,
+                    isNullable: false,
+                },
+            ],
+        });
+    }
+    async ensureMigrationTableExists() {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    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) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    async clearMigrationTable() {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    async markAllMigrationsAsApplied() {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    async runAllNotCompletedMigrations() {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+}
+;
+({}); // @--end-of-file-for-module=taon lib/context-db-migrations.ts
+
 /* eslint-disable @typescript-eslint/typedef */
 class EndpointContext {
     static initNgZone(ngZone) {
         this.ngZone = ngZone;
     }
+    get isRunOrRevertOnlyMigrationAppStart() {
+        return !!(this.onlyMigrationRun || this.onlyMigrationRevertToTimestamp);
+    }
     get realtimeClient() {
         return this.realtime.client;
     }
@@ -2933,6 +3387,12 @@ class EndpointContext {
         }
         return this.config?.logs === true;
     }
+    get logMigrations() {
+        if (_$1.isObject(this.config?.logs)) {
+            return !!this.config.logs.migrations;
+        }
+        return this.config?.logs === true;
+    }
     constructor(originalConfig, configFn) {
         this.originalConfig = originalConfig;
         this.configFn = configFn;
@@ -2942,6 +3402,7 @@ class EndpointContext {
          * (with init() function )
          */
         this.inited = false;
+        this.dbMigrations = new ContextDbMigrations(this);
         this.localInstaceObjSymbol = Symbol('localInstaceObjSymbol');
         /**
          * all instances of classes from context
@@ -2956,12 +3417,15 @@ class EndpointContext {
             Models.ClassType.PROVIDER,
             Models.ClassType.REPOSITORY,
             Models.ClassType.SUBSCRIBER,
+            Models.ClassType.MIGRATION,
         ];
         this.allTypesfromContexts = [
             ...this.injectableTypesfromContexts,
             Models.ClassType.ENTITY,
         ];
         this.expressApp = {};
+        this.onlyMigrationRun = false;
+        this.onlyMigrationRevertToTimestamp = undefined;
         this.entitiesTriggers = {};
         this.cloneClassWithNewMetadata = ({ BaseClass, className, config, ctx, classType, }) => {
             const cloneClass = () => {
@@ -3029,9 +3493,16 @@ class EndpointContext {
         };
     }
     async init(options) {
-        const { initFromRecrusiveContextResovle, overrideHost, overrideRemoteHost, } = options || {}; // TODO use it ?
+        const { initFromRecrusiveContextResovle, overrideHost, overrideRemoteHost, onlyMigrationRun, onlyMigrationRevertToTimestamp, } = options || {}; // TODO use it ?
         this.inited = true;
+        // @ts-ignore
+        this.onlyMigrationRun = onlyMigrationRun;
+        // @ts-ignore
+        this.onlyMigrationRevertToTimestamp = onlyMigrationRevertToTimestamp;
         this.config = this.configFn(ENV$2);
+        if (_$1.isObject(this.config.database)) {
+            this.config.database = Models.DatabaseConfig.from(this.config.database).databaseConfigTypeORM;
+        }
         if (overrideHost && overrideRemoteHost) {
             Helpers.throw(`[taon-config] You can't have overrideHost and overrideRemoteHost at the same time`);
         }
@@ -3098,6 +3569,7 @@ class EndpointContext {
         this.config.repositories = this.config.repositories || {};
         this.config.providers = this.config.providers || {};
         this.config.subscribers = this.config.subscribers || {};
+        this.config.migrations = this.config.migrations || {};
         this.config.entities = {
             ...(await this.getRecrusiveClassesfromContextsObj(Models.ClassType.ENTITY)),
             ...this.config.entities,
@@ -3118,6 +3590,10 @@ class EndpointContext {
             ...(await this.getRecrusiveClassesfromContextsObj(Models.ClassType.REPOSITORY)),
             ...this.config.repositories,
         };
+        this.config.migrations = {
+            ...(await this.getRecrusiveClassesfromContextsObj(Models.ClassType.MIGRATION)),
+            ...this.config.migrations,
+        };
         this.config.controllers = this.cloneClassesObjWithNewMetadata({
             classesInput: this.config.controllers,
             config: this.config,
@@ -3142,6 +3618,12 @@ class EndpointContext {
             ctx: this,
             classType: Models.ClassType.SUBSCRIBER,
         });
+        this.config.migrations = this.cloneClassesObjWithNewMetadata({
+            classesInput: this.config.migrations,
+            config: this.config,
+            ctx: this,
+            classType: Models.ClassType.MIGRATION,
+        });
         for (const classTypeName of this.injectableTypesfromContexts) {
             this.classInstancesByNameObj[classTypeName] = {};
             this.objWithClassesInstancesArr[classTypeName] = [];
@@ -3149,35 +3631,37 @@ class EndpointContext {
         for (const classTypeName of this.injectableTypesfromContexts) {
             await this.createInstances(this.config[Models.ClassTypeKey[classTypeName]], classTypeName);
         }
-        if (this.mode === 'backend-frontend(tcp+udp)' && !this.config.abstract) {
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-        }
-        if (!this.config.abstract) {
-            this.disabledRealtime = !!this.config.disabledRealtime;
-            /* */
-            /* */
-            /* */
-            /* */
-            /* */
-            this.realtime = new RealtimeCore(this);
+        if (!this.isRunOrRevertOnlyMigrationAppStart) {
+            if (this.mode === 'backend-frontend(tcp+udp)' && !this.config.abstract) {
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+            }
+            if (!this.config.abstract) {
+                this.disabledRealtime = !!this.config.disabledRealtime;
+                /* */
+                /* */
+                /* */
+                /* */
+                /* */
+                this.realtime = new RealtimeCore(this);
+            }
         }
         if (this.config.abstract) {
             this.logFramework &&
@@ -3265,21 +3749,6 @@ class EndpointContext {
         /* */
         /* */
         /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
         return (void 0);
     }
     get ngZone() {
@@ -3440,6 +3909,8 @@ class EndpointContext {
                 return this.config.repositories;
             case Models.ClassType.SUBSCRIBER:
                 return this.config.subscribers;
+            case Models.ClassType.MIGRATION:
+                return this.config.migrations;
         }
     }
     isCLassType(classType, classFn) {
@@ -3478,7 +3949,7 @@ class EndpointContext {
         }
     }
     async reinitControllers() {
-        if (this.remoteHost) {
+        if (this.remoteHost || Object.keys(this.config.migrations).length > 0) {
             return;
         }
         const controllers = this.getClassesInstancesArrBy(Models.ClassType.CONTROLLER);
@@ -3500,6 +3971,7 @@ class EndpointContext {
             Models.ClassType.REPOSITORY,
             Models.ClassType.CONTROLLER,
             Models.ClassType.ENTITY,
+            Models.ClassType.MIGRATION,
         ]) {
             for (const classFun of this.getClassFunByArr(classTypeName)) {
                 if (_$1.isFunction(classFun._)) {
@@ -3514,6 +3986,7 @@ class EndpointContext {
             Models.ClassType.PROVIDER,
             Models.ClassType.REPOSITORY,
             Models.ClassType.CONTROLLER,
+            Models.ClassType.MIGRATION,
         ]) {
             for (const ctrl of this.getClassesInstancesArrBy(classTypeName)) {
                 if (_$1.isFunction(ctrl._)) {
@@ -3699,9 +4172,20 @@ class EndpointContext {
         /* */
         /* */
         /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
         return (void 0);
     }
-    initMetadata() {
+    initControllers() {
+        if (this.isRunOrRevertOnlyMigrationAppStart) {
+            return;
+        }
         const allControllers = this.getClassFunByArr(Models.ClassType.CONTROLLER);
         for (const controllerClassFn of allControllers) {
             controllerClassFn[Symbols.classMethodsNames] =
@@ -3781,7 +4265,7 @@ class EndpointContext {
         }
     }
     writeActiveRoutes() {
-        if (this.remoteHost) {
+        if (this.remoteHost || this.isRunOrRevertOnlyMigrationAppStart) {
             return;
         }
         const contexts = [this];
@@ -4539,25 +5023,19 @@ instead
 ;
 ({}); // @--end-of-file-for-module=taon lib/endpoint-context.ts
 
-const globalPublicStorage = Helpers.isBrowser ? window : global;
-;
-({}); // @--end-of-file-for-module=taon lib/storage.ts
-
 const ENV$1 = Helpers.isBrowser ? window['ENV'] : global['ENV'];
-class TaonAdmin {
+class TaonAdminService {
+    static get Instance() {
+        return this._instance;
+    }
     constructor() {
         this.scrollableEnabled = false; // TOOD false by default
         this.onEditMode = new Subject();
         this.onEditMode$ = this.onEditMode.asObservable();
         this.enabledTabs = [];
+        TaonAdminService._instance = this;
         this.scrollableEnabled = !!ENV$1?.useGlobalNgxScrollbar;
     }
-    static get Instance() {
-        if (!globalPublicStorage[config.frameworkNames.productionFrameworkName]) {
-            globalPublicStorage[config.frameworkNames.productionFrameworkName] = new TaonAdmin();
-        }
-        return globalPublicStorage[config.frameworkNames.productionFrameworkName];
-    }
     setEditMode(value) {
         this.onEditMode.next(value);
     }
@@ -4573,26 +5051,26 @@ class TaonAdmin {
         this.adminPanelIsOpen = true;
     }
     logout() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdmin, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdmin, providedIn: 'root' }); }
+    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(TaonAdmin).withDefaultValue(false),
+    (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
     __metadata("design:type", Boolean)
-], TaonAdmin.prototype, "adminPanelIsOpen", void 0);
+], TaonAdminService.prototype, "adminPanelIsOpen", void 0);
 __decorate([
-    Stor.property.in.localstorage.for(TaonAdmin).withDefaultValue(false),
+    (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
     __metadata("design:type", Boolean)
-], TaonAdmin.prototype, "draggablePopupMode", void 0);
+], TaonAdminService.prototype, "draggablePopupMode", void 0);
 __decorate([
-    Stor.property.in.localstorage.for(TaonAdmin).withDefaultValue(false),
+    (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
     __metadata("design:type", Boolean)
-], TaonAdmin.prototype, "draggablePopupModeFullScreen", void 0);
+], TaonAdminService.prototype, "draggablePopupModeFullScreen", void 0);
 __decorate([
-    Stor.property.in.localstorage.for(TaonAdmin).withDefaultValue(false),
+    (Stor.property.in.localstorage.for(TaonAdminService).withDefaultValue(false)),
     __metadata("design:type", Boolean)
-], TaonAdmin.prototype, "keepWebsqlDbDataAfterReload", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdmin, decorators: [{
+], 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: () => [] });
@@ -4616,6 +5094,9 @@ const createContext = (configFn) => {
             get subscribers() {
                 return config.subscribers;
             },
+            get migrations() {
+                return config.migrations;
+            },
         },
         get contexts() {
             return config.contexts;
@@ -4665,14 +5146,15 @@ const createContext = (configFn) => {
                     await endpointContextRef.initEntities();
                     await endpointContextRef.initSubscribers();
                     await endpointContextRef.initDatabaseConnection();
-                    endpointContextRef.initMetadata();
+                    await endpointContextRef.dbMigrations.ensureMigrationTableExists();
+                    endpointContextRef.initControllers();
                     endpointContextRef.startServer();
                     /* */
                     /* */
                     await endpointContextRef.initClasses();
                     let keepWebsqlDbDataAfterReload = false;
                     keepWebsqlDbDataAfterReload =
-                        TaonAdmin.Instance.keepWebsqlDbDataAfterReload;
+                        TaonAdminService.Instance?.keepWebsqlDbDataAfterReload;
                     if (!Helpers.isNode && keepWebsqlDbDataAfterReload) {
                         Helpers.info(`[taon] Keep websql data after reload`);
                     }
@@ -4680,6 +5162,15 @@ const createContext = (configFn) => {
                         await endpointContextRef.reinitControllers();
                     }
                     ///#region TODO this may be usefull but for now
+                    if (endpointContextRef.onlyMigrationRun) {
+                        await endpointContextRef.dbMigrations.runAllNotCompletedMigrations();
+                    }
+                    else if (endpointContextRef.onlyMigrationRevertToTimestamp) {
+                        await endpointContextRef.dbMigrations.revertMigrationToTimestamp(endpointContextRef.onlyMigrationRevertToTimestamp);
+                    }
+                    else {
+                        await endpointContextRef.dbMigrations.runAllNotCompletedMigrations();
+                    }
                     resolve(endpointContextRef);
                 });
             });
@@ -4720,9 +5211,12 @@ var baseContext = /*#__PURE__*/Object.freeze({
     BaseContext: BaseContext
 });
 
+/**
+ * Subscriber decorator
+ */
 function TaonSubscriber(options) {
     return function (constructor) {
-        Reflect.defineMetadata(Symbols.metadata.options.repository, options, constructor);
+        Reflect.defineMetadata(Symbols.metadata.options.subscriber, options, constructor);
         Reflect.defineMetadata(Symbols.metadata.className, options?.className || constructor.name, constructor);
         ClassHelpers.setName(constructor, options?.className);
     };
@@ -4737,133 +5231,133 @@ let BaseSubscriberForEntity = class BaseSubscriberForEntity extends BaseInjector
      * Called after entity is loaded.
      */
     afterLoad(entity) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY LOADED: `, entity);
     }
     /**
      * Called before query execution.
      */
     beforeQuery(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE QUERY: `, event.query);
     }
     /**
      * Called after query execution.
      */
     afterQuery(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER QUERY: `, event.query);
     }
     /**
      * Called before entity insertion.
      */
     beforeInsert(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE ENTITY INSERTED: `, event.entity);
     }
     /**
      * Called after entity insertion.
      */
     afterInsert(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY INSERTED: `, event.entity);
     }
     /**
      * Called before entity update.
      */
     beforeUpdate(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE ENTITY UPDATED: `, event.entity);
     }
     /**
      * Called after entity update.
      */
     afterUpdate(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY UPDATED: `, event.entity);
     }
     /**
      * Called before entity removal.
      */
     beforeRemove(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
     }
     /**
      * Called after entity removal.
      */
     afterRemove(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
     }
     /**
      * Called before entity removal.
      */
     beforeSoftRemove(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
     }
     /**
      * Called after entity removal.
      */
     afterSoftRemove(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
     }
     /**
      * Called before entity recovery.
      */
     beforeRecover(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
     }
     /**
      * Called after entity recovery.
      */
     afterRecover(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
     }
     /**
      * Called before transaction start.
      */
     beforeTransactionStart(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE TRANSACTION STARTED: `, event);
     }
     /**
      * Called after transaction start.
      */
     afterTransactionStart(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER TRANSACTION STARTED: `, event);
     }
     /**
      * Called before transaction commit.
      */
     beforeTransactionCommit(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE TRANSACTION COMMITTED: `, event);
     }
     /**
      * Called after transaction commit.
      */
     afterTransactionCommit(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER TRANSACTION COMMITTED: `, event);
     }
     /**
      * Called before transaction rollback.
      */
     beforeTransactionRollback(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`BEFORE TRANSACTION ROLLBACK: `, event);
     }
     /**
      * Called after transaction rollback.
      */
     afterTransactionRollback(event) {
-        this.__endpoint_context__.logDb &&
+        this.ctx.logDb &&
             console.log(`AFTER TRANSACTION ROLLBACK: `, event);
     }
 };
@@ -4875,6 +5369,26 @@ BaseSubscriberForEntity = __decorate([
 ;
 ({}); // @--end-of-file-for-module=taon lib/base-classes/base-subscriber-for-entity.ts
 
+class BaseMigration extends BaseInjector {
+    /**
+     * by default is READY to run
+     */
+    isReadyToRun() {
+        return true;
+    }
+    getDescription() {
+        return _$1.startCase(ClassHelpers.getName(this));
+    }
+    async up(queryRunner) {
+        console.log(`[BaseMigration] Running migration UP "${ClassHelpers.getName(this)}"`);
+    }
+    async down(queryRunner) {
+        console.log(`[BaseMigration] Running migration DOWN "${ClassHelpers.getName(this)}"`);
+    }
+}
+;
+({}); // @--end-of-file-for-module=taon lib/base-classes/base-migration.ts
+
 var Base;
 (function (Base) {
     Base.Controller = BaseController;
@@ -4885,6 +5399,7 @@ var Base;
     Base.Class = BaseClass;
     Base.Repository = BaseRepository;
     Base.SubscriberForEntity = BaseSubscriberForEntity;
+    Base.Migration = BaseMigration;
     Base.Context = BaseContext;
 })(Base || (Base = {}));
 ;
@@ -4892,6 +5407,9 @@ var Base;
 
 /* */
 /* */
+/**
+ * Entity decorator
+ */
 function TaonEntity(options) {
     return function (constructor) {
         options = options || {};
@@ -4911,6 +5429,9 @@ class TaonEntityOptions extends Models.DecoratorAbstractOpt {
 ;
 ({}); // @--end-of-file-for-module=taon lib/decorators/classes/entity-decorator.ts
 
+/**
+ * Provider decorator
+ */
 function TaonProvider(options) {
     return function (constructor) {
         Reflect.defineMetadata(Symbols.metadata.options.provider, options, constructor);
@@ -4923,6 +5444,21 @@ class TaonProviderOptions extends Models.DecoratorAbstractOpt {
 ;
 ({}); // @--end-of-file-for-module=taon lib/decorators/classes/provider-decorator.ts
 
+/**
+ * Migration decorator
+ */
+function TaonMigration(options) {
+    return function (constructor) {
+        Reflect.defineMetadata(Symbols.metadata.options.migration, options, constructor);
+        Reflect.defineMetadata(Symbols.metadata.className, options?.className || constructor.name, constructor);
+        ClassHelpers.setName(constructor, options?.className);
+    };
+}
+class TaonMigrationOptions extends Models.DecoratorAbstractOpt {
+}
+;
+({}); // @--end-of-file-for-module=taon lib/decorators/classes/migration-decorator.ts
+
 const inject = (entity) => {
     return new Proxy({}, {
         get: (_, propName) => {
@@ -5699,7 +6235,6 @@ class TaonTableComponent {
         await this.retriveData();
     }
     async retriveData() {
-        // @ts-ignore
     }
     expansionRow(e) {
         this.expansionChange.next(e);
@@ -5708,7 +6243,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: 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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableComponent, decorators: [{
             type: Component,
@@ -5788,36 +6323,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
 ;
 ({}); // @--end-of-file-for-module=taon lib/ui/taon-table/index.ts
 
-class TaonAdminService {
-    /**
-     * @deprecated
-     */
-    disableScroll() {
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.admin = window['taon'];
-    }
-    addTab(name, template) {
-        this.admin.cmp.tabs.push({
-            name,
-            template,
-        });
-    }
-    init(taonAdminModeConfigurationComponent) {
-        this.taonAdminModeConfigurationComponent =
-            taonAdminModeConfigurationComponent;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }] });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/taon-admin-control.service.ts
-
 class TaonAdminModeConfigurationComponent {
     get opened() {
         return !this.isIframe && this.admin.adminPanelIsOpen;
@@ -5832,13 +6337,12 @@ class TaonAdminModeConfigurationComponent {
         }
         this.admin.adminPanelIsOpen = v;
     }
-    constructor(breakpointsService) {
+    constructor(breakpointsService, admin) {
         this.breakpointsService = breakpointsService;
+        this.admin = admin;
         this.$destroy = new Subject();
         this.cdr = inject$1(ChangeDetectorRef);
         this.taonAdminService = inject$1(TaonAdminService);
-        this.tabs = [];
-        this.admin = window['taon'];
         this.isWebSQLMode = Helpers.isWebSQL;
         this.hideTaonToolsInProduction = ENV.hideTaonToolsInProduction && ENV.angularProd;
         this.isIframe = window.location !== window.parent.location;
@@ -5857,7 +6361,6 @@ class TaonAdminModeConfigurationComponent {
         this.dragPositionZero = { x: 0, y: 0 };
         this.taonAdminModeConfigurationDataChanged = new EventEmitter();
         this.taonAdminModeConfigurationData = {};
-        this.admin.cmp = this;
         this.breakpointsService
             .listenTo()
             .pipe(takeUntil(this.$destroy))
@@ -5865,14 +6368,6 @@ class TaonAdminModeConfigurationComponent {
             // @ts-ignore
             this.isDesktop = breakpoint === 'desktop';
         });
-        this.taonAdminService.init(this);
-    }
-    reloadTabs() {
-        this.reloading = true;
-        setTimeout(() => {
-            this.reloading = false;
-            console.log('reloading done');
-        });
     }
     async ngOnInit() {
         await Stor.awaitPendingOperatios();
@@ -5896,6 +6391,16 @@ class TaonAdminModeConfigurationComponent {
     onResize(event) {
         this.height = window.innerHeight;
     }
+    async reloadTabs() {
+        return new Promise(resolve => {
+            this.reloading = true;
+            setTimeout(() => {
+                this.reloading = false;
+                console.log('reloading done');
+                resolve();
+            });
+        });
+    }
     async toogle() {
         this.opened = !this.opened;
     }
@@ -5917,37 +6422,47 @@ 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonAdminModeConfigurationComponent, selector: "app-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  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n      <column width=\"200\" 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 width=\"40\" *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\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\n        <mat-tab label=\"Files\" *ngIf=\"admin.enabledTabs.includes('files')\">\n          <section>\n            <mat-checkbox\n              [ngModel]=\"admin.filesEditMode\"\n              (change)=\"admin.setEditMode($event.checked)\"\n              >Edit mode</mat-checkbox\n            >\n          </section>\n          <!-- admin.filesEditMode: {{ admin.filesEditMode }} -->\n          <!-- <taon-admin-edit-mode *ngIf=\"admin.filesEditMode\">\n          </taon-admin-edit-mode> -->\n          <br />\n          <hr *ngIf=\"admin.filesEditMode\" />\n          <!-- <section>\n            <button mat-raised-button>[TODO] Clear Files from browser cache </button> <br>\n            <button mat-raised-button>[TODO] Start files export (as zip) </button> <br>\n            <button mat-raised-button>[TODO] Import whole database (from zip) </button><br>\n          </section> -->\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of tabs\" label=\"{{ tab.name }}\">\n          <div\n            class=\"full-tabs\"\n            [style.height.px]=\"height - 150\"\n            *ngIf=\"!isIframe\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n          </div>\n          <ng-container *ngIf=\"isIframe\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n          </ng-container>\n        </mat-tab>\n\n        <!-- <mat-tab label=\"Portal\">\n          <section>\n            <mat-checkbox>[TODO] Maintenance Mode for whole portal</mat-checkbox>\n\n            <mat-expansion-panel>\n\n              <mat-expansion-panel-header>\n                [TODO] Active User: 80432\n              </mat-expansion-panel-header>\n              <section>\n                <button mat-raised-button>[TODO] Send notification to users </button><br>\n                <button mat-raised-button>[TODO] Send email to users </button><br>\n              </section>\n            </mat-expansion-panel>\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                [TODO] Enable features\n              </mat-expansion-panel-header>\n              <mat-checkbox>[TODO] AB testing</mat-checkbox> <br>\n              <mat-checkbox>\n                [TODO] Newsletter email question popup\n              </mat-checkbox> <br>\n              <mat-checkbox>\n                [TODO] Promotion popup\n              </mat-checkbox> <br>\n            </mat-expansion-panel>\n          </section>\n        </mat-tab>\n        <mat-tab label=\"User\">\n          Welcome in user managements\n        </mat-tab>\n        <mat-tab label=\"Translations\">\n          Welcome in user managements\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 #drawer style=\"width: 580px\" [opened]=\"opened\" [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: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: "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: "component", type: i4$1.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { 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: TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
+    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
+                TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
 }
 __decorate([
-    Stor.property.in.localstorage
+    (Stor.property.in.localstorage
         .for(TaonAdminModeConfigurationComponent)
-        .withDefaultValue(0),
+        .withDefaultValue(0)),
     __metadata("design:type", Number)
 ], TaonAdminModeConfigurationComponent.prototype, "dragPositionX", void 0);
 __decorate([
-    Stor.property.in.localstorage
+    (Stor.property.in.localstorage
         .for(TaonAdminModeConfigurationComponent)
-        .withDefaultValue(0),
+        .withDefaultValue(0)),
     __metadata("design:type", Number)
 ], TaonAdminModeConfigurationComponent.prototype, "dragPositionY", void 0);
 __decorate([
-    Stor.property.in.localstorage
+    (Stor.property.in.localstorage
         .for(TaonAdminModeConfigurationComponent)
-        .withDefaultValue(0),
+        .withDefaultValue(0)),
     __metadata("design:type", Number)
 ], TaonAdminModeConfigurationComponent.prototype, "selectedIndex", void 0);
 __decorate([
-    Stor.property.in.localstorage
+    (Stor.property.in.localstorage
         .for(TaonAdminModeConfigurationComponent)
-        .withDefaultValue(false),
+        .withDefaultValue(false)),
     __metadata("design:type", Boolean)
 ], TaonAdminModeConfigurationComponent.prototype, "wasOpenDraggablePopup", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-taon-admin-mode-configuration', 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  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': admin.draggablePopupMode }\">\n      <column width=\"200\" 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 width=\"40\" *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\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\n        <mat-tab label=\"Files\" *ngIf=\"admin.enabledTabs.includes('files')\">\n          <section>\n            <mat-checkbox\n              [ngModel]=\"admin.filesEditMode\"\n              (change)=\"admin.setEditMode($event.checked)\"\n              >Edit mode</mat-checkbox\n            >\n          </section>\n          <!-- admin.filesEditMode: {{ admin.filesEditMode }} -->\n          <!-- <taon-admin-edit-mode *ngIf=\"admin.filesEditMode\">\n          </taon-admin-edit-mode> -->\n          <br />\n          <hr *ngIf=\"admin.filesEditMode\" />\n          <!-- <section>\n            <button mat-raised-button>[TODO] Clear Files from browser cache </button> <br>\n            <button mat-raised-button>[TODO] Start files export (as zip) </button> <br>\n            <button mat-raised-button>[TODO] Import whole database (from zip) </button><br>\n          </section> -->\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of tabs\" label=\"{{ tab.name }}\">\n          <div\n            class=\"full-tabs\"\n            [style.height.px]=\"height - 150\"\n            *ngIf=\"!isIframe\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n          </div>\n          <ng-container *ngIf=\"isIframe\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n          </ng-container>\n        </mat-tab>\n\n        <!-- <mat-tab label=\"Portal\">\n          <section>\n            <mat-checkbox>[TODO] Maintenance Mode for whole portal</mat-checkbox>\n\n            <mat-expansion-panel>\n\n              <mat-expansion-panel-header>\n                [TODO] Active User: 80432\n              </mat-expansion-panel-header>\n              <section>\n                <button mat-raised-button>[TODO] Send notification to users </button><br>\n                <button mat-raised-button>[TODO] Send email to users </button><br>\n              </section>\n            </mat-expansion-panel>\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                [TODO] Enable features\n              </mat-expansion-panel-header>\n              <mat-checkbox>[TODO] AB testing</mat-checkbox> <br>\n              <mat-checkbox>\n                [TODO] Newsletter email question popup\n              </mat-checkbox> <br>\n              <mat-checkbox>\n                [TODO] Promotion popup\n              </mat-checkbox> <br>\n            </mat-expansion-panel>\n          </section>\n        </mat-tab>\n        <mat-tab label=\"User\">\n          Welcome in user managements\n        </mat-tab>\n        <mat-tab label=\"Translations\">\n          Welcome in user managements\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 #drawer style=\"width: 580px\" [opened]=\"opened\" [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 }], propDecorators: { tabGroup: [{
+            args: [{ selector: 'taon-admin-mode-configuration', standalone: true, imports: [
+                        CommonModule,
+                        StaticColumnsModule,
+                        FormsModule,
+                        NgScrollbarModule,
+                        TaonProgressBarModule,
+                        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: [{
                 type: ViewChild,
                 args: ['tabGroup']
             }], taonAdminModeConfigurationDataChanged: [{
@@ -5961,254 +6476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
 ;
 ({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/taon-admin-mode-configuration.component.ts
 
-class TaonAdminEditModeComponent {
-    constructor(router) {
-        this.router = router;
-        this.inited$ = of(true);
-        this.destroyed$ = new Subject();
-        this.handlers = [];
-        this.columns = [
-            {
-                header: 'ID',
-                field: 'id',
-                maxWidth: 100,
-                showExpand: true,
-            },
-            {
-                header: 'src',
-                field: 'src',
-                maxWidth: 250,
-            },
-            {
-                header: 'Content Type',
-                field: 'contentType',
-                maxWidth: 120,
-            },
-        ];
-        this.taonAdminEditModeDataChanged = new EventEmitter();
-        this.taonAdminEditModeData = {};
-    }
-    ngOnInit() {
-        this.files = this.admin.currentFiles;
-        this.handlers.push(this.admin.onEditMode$.subscribe(() => {
-            this.refresFilesList();
-        }));
-        this.admin.onRegisterFile().pipe(takeUntil(this.destroyed$), tap(() => {
-            this.refresFilesList();
-        }));
-    }
-    ngOnDestroy() {
-        this.handlers.forEach(h => h.unsubscribe());
-        this.destroyed$.next(void 0);
-        this.destroyed$.unsubscribe();
-    }
-    ngAfterViewInit() {
-        //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
-        //Add 'implements AfterViewInit' to the class.
-        setTimeout(() => {
-            this.refresFilesList();
-        }, 500);
-    }
-    expansionRow(e) {
-        console.log(e);
-    }
-    refresFilesList() {
-        this.files = this.admin.currentFiles;
-    }
-    searchFind(file) {
-        if (!!this?.fileToSearch) {
-            return file?.src?.search(this?.fileToSearch) !== -1;
-        }
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonAdminEditModeComponent, selector: "taon-admin-edit-mode", inputs: { taonAdminEditModeData: "taonAdminEditModeData" }, outputs: { taonAdminEditModeDataChanged: "taonAdminEditModeDataChanged" }, ngImport: i0, template: "<ng-template #expansionTpl let-row>\n  hello from expansion {{ row.src }}\n</ng-template>\n\n<mat-card *ngIf=\"inited$ | async\">\n  <div *ngIf=\"!admin.selectedFile\">Please select file from portal to edit</div>\n  <taon-file\n    *ngIf=\"admin.selectedFile\"\n    class=\"file-inside-admin\"\n    [insideAdmin]=\"true\"\n    [file]=\"admin.selectedFile\"></taon-file>\n\n  <hr />\n\n  <mat-tab-group\n    dynamicHeight\n    [selectedIndex]=\"selectedTabIndex\"\n    (selectedIndexChange)=\"selectedTabIndex = $event; refresFilesList()\">\n    <mat-tab label=\"General\">\n      <!-- <taon-file-general-opt\n        [file]=\"admin.selectedFile\"></taon-file-general-opt> -->\n    </mat-tab>\n    <!-- <mat-tab label=\"CSS Editing\">\n      <ace [mode]=\"'css'\"\n           *ngIf=\"admin.selectedFile\"\n           [(value)]=\"admin.selectedFile.css\"\n           [theme]=\"'github'\"\n           style=\"width: 100%;  height: 300px;\"></ace>\n    </mat-tab> -->\n\n    <mat-tab label=\"Files Picker\">\n      <!-- <taon-table\n        [entity]=\"entity\"\n        [allowedColumns]=\"['src', 'contentType']\"\n        [columns]=\"columns\"\n        [expansionTemplate]=\"expansionTpl\"\n        (expansionChange)=\"expansionRow($event)\">\n      </taon-table> -->\n    </mat-tab>\n    <mat-tab label=\"File Version History\">\n      <!-- <taon-table\n        [entity]=\"entity\"\n        [allowedColumns]=\"['src', 'contentType']\"\n        [columns]=\"columns\"\n        [expansionTemplate]=\"expansionTpl\"\n        (expansionChange)=\"expansionRow($event)\">\n      </taon-table> -->\n    </mat-tab>\n    <mat-tab label=\"Current File\">\n      <columns-container *ngIf=\"files.length > 0\">\n        <column grow>\n          <mat-form-field style=\"width: 100%\">\n            <input\n              matInput\n              [(ngModel)]=\"fileToSearch\"\n              (focus)=\"refresFilesList()\"\n              placeholder=\"Search by name\" />\n          </mat-form-field>\n        </column>\n        <column [width]=\"40\">\n          <button\n            mat-icon-button\n            (click)=\"fileToSearch = ''; refresFilesList()\"\n            *ngIf=\"fileToSearch && fileToSearch?.trim() !== ''\">\n            <mat-icon>backspace</mat-icon>\n          </button>\n        </column>\n        <!-- <column [width]=\"40\">\n          <button mat-icon-button (click)=\"refresFilesList();\" >\n            <mat-icon >refresh</mat-icon>\n          </button>\n        </column> -->\n      </columns-container>\n      <columns-container *ngIf=\"files.length == 0\">\n        <section>\n          <code\n            >No &lt;taon-file/&gt; - s components detected on this page</code\n          >\n        </section>\n      </columns-container>\n\n      <div class=\"scrollable-files-list\" *ngIf=\"files.length > 0\">\n        <ng-scrollbar>\n          <!-- selected: \"{{ selectedFile?.src }}\" -->\n          <!-- {{ filesSelection.selectedOptions | json }} -->\n          <mat-selection-list\n            [multiple]=\"false\"\n            #filesToSelect\n            (selectionChange)=\"\n              admin.selectedFile = filesToSelect.selectedOptions.hasValue()\n                ? filesToSelect.selectedOptions.selected[0].value\n                : null\n            \">\n            <mat-list-option\n              *ngFor=\"let file of files | filterBy: ['src'] : fileToSearch\"\n              [value]=\"file\">\n              <strong *ngIf=\"file?.src === admin.selectedFile?.src\">\n                {{ file.src }}\n              </strong>\n              <span *ngIf=\"file?.src !== admin.selectedFile?.src\">\n                {{ file.src }}\n              </span>\n            </mat-list-option>\n          </mat-selection-list>\n        </ng-scrollbar>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</mat-card>\n", styles: [":host{display:block}.scrollable-files-list{height:150px;background:#8080801c;display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4$1.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i11$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i11$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.FilterByPipe, name: "filterBy" }] }); }
-}
-__decorate([
-    (Stor.property.in.localstorage
-        .for(TaonAdminEditModeComponent)
-        .withDefaultValue(0)),
-    __metadata("design:type", Number)
-], TaonAdminEditModeComponent.prototype, "selectedTabIndex", void 0);
-__decorate([
-    (Stor.property.in.localstorage
-        .for(TaonAdminEditModeComponent)
-        .withDefaultValue('')),
-    __metadata("design:type", String)
-], TaonAdminEditModeComponent.prototype, "fileToSearch", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-admin-edit-mode', template: "<ng-template #expansionTpl let-row>\n  hello from expansion {{ row.src }}\n</ng-template>\n\n<mat-card *ngIf=\"inited$ | async\">\n  <div *ngIf=\"!admin.selectedFile\">Please select file from portal to edit</div>\n  <taon-file\n    *ngIf=\"admin.selectedFile\"\n    class=\"file-inside-admin\"\n    [insideAdmin]=\"true\"\n    [file]=\"admin.selectedFile\"></taon-file>\n\n  <hr />\n\n  <mat-tab-group\n    dynamicHeight\n    [selectedIndex]=\"selectedTabIndex\"\n    (selectedIndexChange)=\"selectedTabIndex = $event; refresFilesList()\">\n    <mat-tab label=\"General\">\n      <!-- <taon-file-general-opt\n        [file]=\"admin.selectedFile\"></taon-file-general-opt> -->\n    </mat-tab>\n    <!-- <mat-tab label=\"CSS Editing\">\n      <ace [mode]=\"'css'\"\n           *ngIf=\"admin.selectedFile\"\n           [(value)]=\"admin.selectedFile.css\"\n           [theme]=\"'github'\"\n           style=\"width: 100%;  height: 300px;\"></ace>\n    </mat-tab> -->\n\n    <mat-tab label=\"Files Picker\">\n      <!-- <taon-table\n        [entity]=\"entity\"\n        [allowedColumns]=\"['src', 'contentType']\"\n        [columns]=\"columns\"\n        [expansionTemplate]=\"expansionTpl\"\n        (expansionChange)=\"expansionRow($event)\">\n      </taon-table> -->\n    </mat-tab>\n    <mat-tab label=\"File Version History\">\n      <!-- <taon-table\n        [entity]=\"entity\"\n        [allowedColumns]=\"['src', 'contentType']\"\n        [columns]=\"columns\"\n        [expansionTemplate]=\"expansionTpl\"\n        (expansionChange)=\"expansionRow($event)\">\n      </taon-table> -->\n    </mat-tab>\n    <mat-tab label=\"Current File\">\n      <columns-container *ngIf=\"files.length > 0\">\n        <column grow>\n          <mat-form-field style=\"width: 100%\">\n            <input\n              matInput\n              [(ngModel)]=\"fileToSearch\"\n              (focus)=\"refresFilesList()\"\n              placeholder=\"Search by name\" />\n          </mat-form-field>\n        </column>\n        <column [width]=\"40\">\n          <button\n            mat-icon-button\n            (click)=\"fileToSearch = ''; refresFilesList()\"\n            *ngIf=\"fileToSearch && fileToSearch?.trim() !== ''\">\n            <mat-icon>backspace</mat-icon>\n          </button>\n        </column>\n        <!-- <column [width]=\"40\">\n          <button mat-icon-button (click)=\"refresFilesList();\" >\n            <mat-icon >refresh</mat-icon>\n          </button>\n        </column> -->\n      </columns-container>\n      <columns-container *ngIf=\"files.length == 0\">\n        <section>\n          <code\n            >No &lt;taon-file/&gt; - s components detected on this page</code\n          >\n        </section>\n      </columns-container>\n\n      <div class=\"scrollable-files-list\" *ngIf=\"files.length > 0\">\n        <ng-scrollbar>\n          <!-- selected: \"{{ selectedFile?.src }}\" -->\n          <!-- {{ filesSelection.selectedOptions | json }} -->\n          <mat-selection-list\n            [multiple]=\"false\"\n            #filesToSelect\n            (selectionChange)=\"\n              admin.selectedFile = filesToSelect.selectedOptions.hasValue()\n                ? filesToSelect.selectedOptions.selected[0].value\n                : null\n            \">\n            <mat-list-option\n              *ngFor=\"let file of files | filterBy: ['src'] : fileToSearch\"\n              [value]=\"file\">\n              <strong *ngIf=\"file?.src === admin.selectedFile?.src\">\n                {{ file.src }}\n              </strong>\n              <span *ngIf=\"file?.src !== admin.selectedFile?.src\">\n                {{ file.src }}\n              </span>\n            </mat-list-option>\n          </mat-selection-list>\n        </ng-scrollbar>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</mat-card>\n", styles: [":host{display:block}.scrollable-files-list{height:150px;background:#8080801c;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Router }], propDecorators: { taonAdminEditModeDataChanged: [{
-                type: Output
-            }], taonAdminEditModeData: [{
-                type: Input
-            }] } });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-admin-edit-mode/taon-admin-edit-mode.component.ts
-
-class TaonFileGeneralOptComponent {
-    constructor() {
-        this.height = 100;
-        this.handlers = [];
-        this.fieldsOrder = [];
-        this.fields = [
-            {
-                key: 'width',
-            },
-            {
-                key: 'height',
-            },
-            {
-                key: 'display',
-            },
-            {
-                key: 'widthUnit',
-            },
-            {
-                key: 'heightUnit', // @ts-ignore
-            },
-            {
-                key: 'action',
-                type: 'action',
-                templateOptions: {
-                    label: 'Reset',
-                    icon: 'cancel',
-                    raised: true,
-                    action: () => {
-                        console.log('reset');
-                    },
-                },
-            },
-        ].map(f => {
-            f.className = 'formly-field-half-size';
-            return f;
-        });
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.handlers.forEach(h => h.unsubscribe());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonFileGeneralOptComponent, selector: "taon-file-general-opt", inputs: { height: "height", file: "file" }, host: { properties: { "style.minHeight.px": "this.height" } }, ngImport: i0, template: "<!-- <taon-formly-form\n  *ngIf=\"file\"\n  [fields]=\"fields\"\n  [fieldsOrder]=\"fieldsOrder\"\n  [exclude]=\"['id']\"\n  [(model)]=\"file.css\">\n</taon-formly-form> -->\n", styles: [":host{display:block}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-file-general-opt', template: "<!-- <taon-formly-form\n  *ngIf=\"file\"\n  [fields]=\"fields\"\n  [fieldsOrder]=\"fieldsOrder\"\n  [exclude]=\"['id']\"\n  [(model)]=\"file.css\">\n</taon-formly-form> -->\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { height: [{
-                type: HostBinding,
-                args: ['style.minHeight.px']
-            }, {
-                type: Input
-            }], file: [{
-                type: Input
-            }] } });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-file-general-opt/taon-file-general-opt.component.ts
-
-class TaonFileGeneralOptModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptModule, declarations: [TaonFileGeneralOptComponent], imports: [CommonModule, TaonFullMaterialModule], exports: [TaonFileGeneralOptComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptModule, imports: [CommonModule, TaonFullMaterialModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFileGeneralOptModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TaonFullMaterialModule],
-                    declarations: [TaonFileGeneralOptComponent],
-                    exports: [TaonFileGeneralOptComponent],
-                }]
-        }] });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-file-general-opt/taon-file-general-opt.module.ts
-
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-file-general-opt/index.ts
-
-class TaonAdminEditModeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeModule, declarations: [TaonAdminEditModeComponent], imports: [CommonModule,
-            StaticColumnsModule,
-            NgScrollbarModule,
-            TaonFileGeneralOptModule,
-            FormsModule,
-            NgArrayPipesModule,
-            TaonTableModule,
-            TaonFullMaterialModule], exports: [TaonAdminEditModeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeModule, imports: [CommonModule,
-            StaticColumnsModule,
-            NgScrollbarModule,
-            TaonFileGeneralOptModule,
-            FormsModule,
-            NgArrayPipesModule,
-            TaonTableModule,
-            TaonFullMaterialModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminEditModeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        StaticColumnsModule,
-                        NgScrollbarModule,
-                        TaonFileGeneralOptModule,
-                        FormsModule,
-                        NgArrayPipesModule,
-                        TaonTableModule,
-                        TaonFullMaterialModule, // TODO import only partial things
-                    ],
-                    declarations: [TaonAdminEditModeComponent],
-                    exports: [TaonAdminEditModeComponent],
-                }]
-        }] });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-admin-edit-mode/taon-admin-edit-mode.module.ts
-
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/components/taon-admin-edit-mode/index.ts
-
-class TaonAdminModeConfigurationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationModule, declarations: [TaonAdminModeConfigurationComponent], imports: [CommonModule,
-            StaticColumnsModule,
-            FormsModule,
-            NgScrollbarModule,
-            TaonAdminEditModeModule,
-            TaonProgressBarModule,
-            TaonNotificationsModule,
-            TaonFullMaterialModule, // TODO import only partial things
-            TaonSessionPasscodeComponent], exports: [TaonAdminModeConfigurationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationModule, imports: [CommonModule,
-            StaticColumnsModule,
-            FormsModule,
-            NgScrollbarModule,
-            TaonAdminEditModeModule,
-            TaonProgressBarModule,
-            TaonNotificationsModule,
-            TaonFullMaterialModule, // TODO import only partial things
-            TaonSessionPasscodeComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonAdminModeConfigurationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        StaticColumnsModule,
-                        FormsModule,
-                        NgScrollbarModule,
-                        TaonAdminEditModeModule,
-                        TaonProgressBarModule,
-                        TaonNotificationsModule,
-                        TaonFullMaterialModule, // TODO import only partial things
-                        TaonSessionPasscodeComponent,
-                    ],
-                    declarations: [TaonAdminModeConfigurationComponent],
-                    exports: [TaonAdminModeConfigurationComponent],
-                }]
-        }] });
-;
-({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/taon-admin-mode-configuration.module.ts
-
 ;
 ({}); // @--end-of-file-for-module=taon lib/ui/taon-admin-mode-configuration/index.ts
 
@@ -6228,6 +6495,7 @@ var Taon;
     Taon.Provider = TaonProvider;
     Taon.Repository = TaonRepository;
     Taon.Subscriber = TaonSubscriber;
+    Taon.Migration = TaonMigration;
     Taon.isBrowser = coreHelpers.Helpers.isBrowser;
     Taon.isNode = coreHelpers.Helpers.isNode;
     Taon.isWebSQL = coreHelpers.Helpers.isWebSQL;
@@ -6264,5 +6532,5 @@ var Taon;
  * Generated bundle index. Do not edit.
  */
 
-export { BaseContext, BaseController, BaseEntity, BaseProvider, BaseRepository, ClassHelpers, Models, SafePipe, Taon, TaonAdminModeConfigurationComponent, TaonAdminModeConfigurationModule, TaonAdminService, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule, createContext, inject };
+export { BaseContext, BaseController, BaseEntity, BaseMigration, BaseProvider, BaseRepository, ClassHelpers, Models, SafePipe, Taon, TaonAdminModeConfigurationComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule, createContext, inject };
 //# sourceMappingURL=taon.mjs.map