taon 18.0.17 → 18.0.19

package/browser/fesm2022/taon.mjs

@@ -1,19 +1,95 @@
 import 'reflect-metadata';
 import * as coreHelpers from 'tnp-core/browser';
-import { _, Helpers } 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 { 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 } from 'rxjs';
+import { Observable, from, Subject, interval, tap, defer, fromEvent, map, debounceTime, distinctUntilChanged, share, Subscription, takeUntil, of } 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 } 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 { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+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 { MatButtonModule } from '@angular/material/button';
+import * as i7 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i8 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDialogModule } from '@angular/material/dialog';
+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';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+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 { 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 { 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 { CommonModule } from '@angular/common';
+import * as i1$1 from '@ngneat/hot-toast';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { PasswordModule } from 'primeng/password';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 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 { 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) {
@@ -23,45 +99,52 @@ var Symbols;
     Symbols.orignalClass = OrignalClassKey;
     Symbols.orignalClassClonesObj = `$$originalClassClonesObj$$`;
     Symbols.classMethodsNames = `$$classMethodsNames$$`;
-    Symbols.REALTIME = {
-        NAMESPACE: (contextName) => `${contextName}:taonRealtimeNsp`,
+    /**
+     * for backendSocket.in(ROOM_NAME).emit(EVENT)
+     *
+     * Room names are uniqe..
+     * here I am limiting number of event for clients.
+     */
+    class Realtime {
+        constructor() {
+            this.KEYroomSubscribe = `roomSubscribe`;
+            this.KEYroomUnsubscribe = `roomUnsubscribe`;
+        }
+        NAMESPACE(contextName) {
+            return `${contextName}-taonRealtimeNsp`;
+        }
         TABLE_CHANGE(contextName, tableName) {
             return `${contextName}:listentablename${tableName}`;
-        },
-        /**
-         * for backendSocket.in(ROOM_NAME).emit(EVENT)
-         *
-         * Room names are uniqe..
-         * here I am limiting number of event for clients.
-         */
-        ROOM_NAME: {
-            CUSTOM(contextName, customEvent) {
-                return `${contextName}:roomcustomevnet${customEvent}`;
-            },
-            /**
-             * @LAST TODO
-             */
-            SUBSCRIBER_EVENT(contextName, className, propertyName) {
-                return `${contextName}:room${_.camelCase(className)}${propertyName}`.toLowerCase();
-            },
-            UPDATE_ENTITY(contextName, className, entityId) {
-                return `${contextName}:room${_.camelCase(className)}${entityId}`.toLowerCase();
-            },
-            UPDATE_ENTITY_PROPERTY(contextName, className, property, entityId) {
-                return `${contextName}:room${_.camelCase(className)}${_.camelCase(property)}${entityId}`.toLowerCase();
-            },
-            SUBSCRIBE: {
-                CUSTOM: (contextName) => `${contextName}:roomSubscribeCustomRoomEvent`,
-                ENTITY_UPDATE_EVENTS: (contextName) => `${contextName}:roomSubscribeEntityEvents`,
-                ENTITY_PROPERTY_UPDATE_EVENTS: (contextName) => `${contextName}:roomSubscribeEntityPropertyEvents`,
-            },
-            UNSUBSCRIBE: {
-                CUSTOM: (contextName) => `${contextName}:roomUnsubscribeCustomRoomEvent`,
-                ENTITY_UPDATE_EVENTS: (contextName) => `${contextName}:roomUnsubscribeEntityEvents`,
-                ENTITY_PROPERTY_UPDATE_EVENTS: (contextName) => `${contextName}:roomUnsubscribeEntityPropertyEvents`,
-            },
-        },
-    };
+        }
+        ROOM_NAME_CUSTOM(contextName, customEvent) {
+            return `${contextName}:CustomRoomEvent${customEvent}`;
+        }
+        ROOM_SUBSCRIBE_CUSTOM(contextName) {
+            return `${contextName}:${this.KEYroomSubscribe}CustomRoomEvent`;
+        }
+        ROOM_UNSUBSCRIBE_CUSTOM(contextName) {
+            return `${contextName}:${this.KEYroomUnsubscribe}CustomRoomEvent`;
+        }
+        ROOM_NAME_UPDATE_ENTITY(contextName, className, entityId) {
+            return `${contextName}:room${_$1.camelCase(className)}${entityId}`.toLowerCase();
+        }
+        ROOM_SUBSCRIBE_ENTITY_UPDATE_EVENTS(contextName) {
+            return `${contextName}:${this.KEYroomSubscribe}EntityEvents`;
+        }
+        ROOM_UNSUBSCRIBE_ENTITY_UPDATE_EVENTS(contextName) {
+            return `${contextName}:${this.KEYroomUnsubscribe}EntityEvents`;
+        }
+        ROOM_NAME_UPDATE_ENTITY_PROPERTY(contextName, className, property, entityId) {
+            return `${contextName}:room${_$1.camelCase(className)}${_$1.camelCase(property)}${entityId}`.toLowerCase();
+        }
+        ROOM_SUBSCRIBE_ENTITY_PROPERTY_UPDATE_EVENTS(contextName) {
+            return `${contextName}:${this.KEYroomSubscribe}EntityPropertyEvents`;
+        }
+        ROOM_UNSUBSCRIBE_ENTITY_PROPERTY_UPDATE_EVENTS(contextName) {
+            return `${contextName}:${this.KEYroomUnsubscribe}EntityPropertyEvents`;
+        }
+    }
+    Symbols.REALTIME = new Realtime();
     Symbols.metadata = {
         className: `class:realname`,
         options: {
@@ -105,7 +188,7 @@ var Validators;
 (function (Validators) {
     Validators.classNameVlidation = (className, target) => {
         setTimeout(() => {
-            if (_.isUndefined(className)) {
+            if (_$1.isUndefined(className)) {
                 throw `[Taon]
       Please provide "className" property for each Controller and Entity:
 
@@ -125,7 +208,7 @@ var Validators;
         `;
             }
         });
-        return _.isUndefined(className) ? target.name : className;
+        return _$1.isUndefined(className) ? target.name : className;
     };
     Validators.checkIfMethodsWithReponseTYpeAlowed = (methods, current) => {
         const defaultResponseType = 'text or JSON';
@@ -148,8 +231,8 @@ var Validators;
         }
     };
     Validators.validateClassFunctions = (controllers, entities, proviers, repositories) => {
-        if (_.isArray(controllers) &&
-            controllers.filter(f => !_.isFunction(f)).length > 0) {
+        if (_$1.isArray(controllers) &&
+            controllers.filter(f => !_$1.isFunction(f)).length > 0) {
             console.error('controllers', controllers);
             throw `
 
@@ -157,8 +240,8 @@ var Validators;
 
   `;
         }
-        if (_.isArray(entities) &&
-            entities.filter(f => !_.isFunction(f)).length > 0) {
+        if (_$1.isArray(entities) &&
+            entities.filter(f => !_$1.isFunction(f)).length > 0) {
             console.error('entites', entities);
             throw `
 
@@ -168,7 +251,7 @@ var Validators;
         }
     };
     Validators.preventUndefinedModel = (model, id) => {
-        if (_.isUndefined(model)) {
+        if (_$1.isUndefined(model)) {
             throw `Bad update by id, config, id: ${id}`;
         }
     };
@@ -179,7 +262,7 @@ var Validators;
 var TaonHelpers;
 (function (TaonHelpers) {
     TaonHelpers.fillUpTo = (s, nCharacters) => {
-        return _.times(nCharacters, n => {
+        return _$1.times(nCharacters, n => {
             if (s.charAt(n)) {
                 return s.charAt(n);
             }
@@ -227,7 +310,7 @@ var TaonHelpers;
             return {};
     };
     TaonHelpers.parseJSONwithStringJSONs = (object, waring = false) => {
-        if (!_.isObject(object)) {
+        if (!_$1.isObject(object)) {
             if (waring) {
                 console.error(`
         parseJSONwithStringJSONs(...)
@@ -236,7 +319,7 @@ var TaonHelpers;
             }
             return object;
         }
-        let res = _.cloneDeep(object);
+        let res = _$1.cloneDeep(object);
         Object.keys(res).forEach(key => {
             let isJson = false;
             try {
@@ -301,7 +384,7 @@ var ClassHelpers;
      * TODO - repalce in every place when getting class fn from object
      */
     ClassHelpers.getClassFnFromObject = (json) => {
-        if (_.isUndefined(json) || _.isNull(json)) {
+        if (_$1.isUndefined(json) || _$1.isNull(json)) {
             return;
         }
         if (json.constructor) {
@@ -341,26 +424,26 @@ var ClassHelpers;
             : classFnOrObject?.constructor[Symbols.fullClassNameStaticProperty]) ||
             void 0);
     };
-    ClassHelpers.getUniquKey = (classFnOrObject) => {
-        const classFn = _.isFunction(classFnOrObject)
+    ClassHelpers.getUniqueKey = (classFnOrObject) => {
+        const classFn = _$1.isFunction(classFnOrObject)
             ? classFnOrObject
             : classFnOrObject.constructor;
         const config = Reflect.getMetadata(Symbols.metadata.options.controller, classFn);
         return config.uniqueKeyProp;
     };
     ClassHelpers.isContextClassObject = (obj) => {
-        if (!_.isObject(obj) ||
-            _.isArray(obj) ||
-            _.isRegExp(obj) ||
-            _.isBuffer(obj) ||
-            _.isArrayBuffer(obj)) {
+        if (!_$1.isObject(obj) ||
+            _$1.isArray(obj) ||
+            _$1.isRegExp(obj) ||
+            _$1.isBuffer(obj) ||
+            _$1.isArrayBuffer(obj)) {
             return false;
         }
-        if (_.isDate(obj)) {
+        if (_$1.isDate(obj)) {
             return true;
         }
         const className = ClassHelpers.getName(obj);
-        return _.isString(className) && className !== 'Object';
+        return _$1.isString(className) && className !== 'Object';
     };
     ClassHelpers.setName = (target, className) => {
         Validators.classNameVlidation(className, target);
@@ -372,7 +455,7 @@ var ClassHelpers;
         }
         targets.push(target);
         let targetProto = Object.getPrototypeOf(target);
-        if (_.isFunction(targetProto) &&
+        if (_$1.isFunction(targetProto) &&
             ClassHelpers.getName(targetProto) === className) {
             return true;
         }
@@ -380,7 +463,7 @@ var ClassHelpers;
     };
     ClassHelpers.getControllerConfig = (target) => {
         const classMetadataOptions = Reflect.getMetadata(Symbols.metadata.options.controller, target);
-        const classMetadata = _.merge(new Models.ControllerConfig(), classMetadataOptions);
+        const classMetadata = _$1.merge(new Models.ControllerConfig(), classMetadataOptions);
         const methodNames = ClassHelpers.getMethodsNames(target); //  Object.getOwnPropertyNames(target.prototype);
         for (const methodName of methodNames) {
             const methodMetadata = Reflect.getMetadata(Symbols.metadata.options.controllerMethod, target, methodName);
@@ -415,7 +498,7 @@ var ClassHelpers;
         if (!classOrClassInstance) {
             return allMethodsNames;
         }
-        const isClassFunction = _.isFunction(classOrClassInstance);
+        const isClassFunction = _$1.isFunction(classOrClassInstance);
         const classFun = isClassFunction
             ? classOrClassInstance
             : Object.getPrototypeOf(classOrClassInstance);
@@ -423,7 +506,7 @@ var ClassHelpers;
             ? classOrClassInstance?.prototype
             : classOrClassInstance;
         const prototypeObj = Object.getPrototypeOf(objectToCheck || {});
-        const properties = _.uniq([
+        const properties = _$1.uniq([
             ...Object.getOwnPropertyNames(objectToCheck || {}),
             ...Object.getOwnPropertyNames(prototypeObj || {}),
             ...Object.keys(objectToCheck || {}),
@@ -440,13 +523,13 @@ var ClassHelpers;
         return ClassHelpers.getMethodsNames(Object.getPrototypeOf(classFun), allMethodsNames);
     };
     ClassHelpers.getControllerConfigs = (target, configs = [], callerTarget) => {
-        if (!_.isFunction(target)) {
+        if (!_$1.isFunction(target)) {
             throw `[typescript-class-helper][getClassConfig] Cannot get class config from: ${target}`;
         }
         let config;
         const parentClass = Object.getPrototypeOf(target);
         const parentName = parentClass ? ClassHelpers.getName(parentClass) : void 0;
-        const isValidParent = _.isFunction(parentClass) && parentName !== '';
+        const isValidParent = _$1.isFunction(parentClass) && parentName !== '';
         config = ClassHelpers.getControllerConfig(target);
         configs.push(config);
         return isValidParent
@@ -455,7 +538,7 @@ var ClassHelpers;
     };
     ClassHelpers.getCalculatedPathFor = (target) => {
         const configs = ClassHelpers.getControllerConfigs(target);
-        const parentscalculatedPath = _.slice(configs, 1)
+        const parentscalculatedPath = _$1.slice(configs, 1)
             .reverse()
             .map(bc => {
             if (TaonHelpers.isGoodPath(bc.path)) {
@@ -570,7 +653,7 @@ const metaReq = (method, path, target, propertyKey, descriptor, pathOrOptions, p
             if (methodConfig.parameters.hasOwnProperty(key)) {
                 const element = methodConfig.parameters[key];
                 if (element.paramType === 'Path' &&
-                    _.isString(element.paramName) &&
+                    _$1.isString(element.paramName) &&
                     element.paramName.trim().length > 0) {
                     paramsPathConcatedPath += `/${element.paramName}/:${element.paramName}`;
                 }
@@ -673,6 +756,7 @@ var Http;
     Http.DELETE = DELETE;
     Http.PATCH = PATCH;
     Http.HEAD = HEAD;
+    Http.Response = Models$1.HttpResponse;
     let Param;
     (function (Param) {
         Param.Query = Query;
@@ -715,11 +799,18 @@ class BaseInjector {
         }
     }
     /**
+     * @deprecated use ctx instead
      * Current endpoint context
      */
     get __endpoint_context__() {
         return this[Symbols.ctxInClassOrClassObj];
     }
+    /**
+     * get  current endpoint context
+     */
+    get ctx() {
+        return this.__endpoint_context__;
+    }
     /**
      * inject crud repo for entity
      */
@@ -847,7 +938,7 @@ class BaseInjector {
     }
     clone(override) {
         const classFn = ClassHelpers.getClassFnFromObject(this);
-        const result = _.merge(new classFn(), _.merge(_.cloneDeep(this), override));
+        const result = _$1.merge(new classFn(), _$1.merge(_$1.cloneDeep(this), override));
         return result;
     }
 }
@@ -873,7 +964,7 @@ BaseController = __decorate([
  */
 let BaseCrudController = class BaseCrudController extends BaseController {
     async _() {
-        if (!_.isFunction(this.entityClassResolveFn)) {
+        if (!_$1.isFunction(this.entityClassResolveFn)) {
             Helpers.warn(`Skipping initing CRUD controller ${ClassHelpers.getName(this)} because entityClassResolveFn is not provided.`);
             return;
         }
@@ -1137,7 +1228,7 @@ class BaseClass {
     async _() { }
     clone(override) {
         const classFn = ClassHelpers.getClassFnFromObject(this);
-        const result = _.merge(new classFn(), _.merge(_.cloneDeep(this), override));
+        const result = _$1.merge(new classFn(), _$1.merge(_$1.cloneDeep(this), override));
         return result;
     }
 }
@@ -1774,7 +1865,7 @@ const getResponseValue = (response, options) => {
 ;
 ({}); // @--end-of-file-for-module=taon lib/get-response-value.ts
 
-const ENV$1 = Helpers.isBrowser ? window['ENV'] : global['ENV'];
+const ENV$2 = Helpers.isBrowser ? window['ENV'] : global['ENV'];
 ;
 ({}); // @--end-of-file-for-module=taon lib/env.ts
 
@@ -1796,17 +1887,19 @@ class RealtimeSubsManager {
             return;
         }
         if (!this.isListening) {
-            const subscribeEvent = Symbols.REALTIME.ROOM_NAME.SUBSCRIBE.CUSTOM(this.options.core.ctx.contextName);
             this.isListening = true;
             if (this.options.customEvent) {
+                const subscribeEvent = Symbols.REALTIME.ROOM_SUBSCRIBE_CUSTOM(this.options.core.ctx.contextName);
                 realtime.emit(subscribeEvent, this.options.roomName);
             }
             else {
-                if (_.isString(this.options.property)) {
-                    realtime.emit(Symbols.REALTIME.ROOM_NAME.SUBSCRIBE.ENTITY_PROPERTY_UPDATE_EVENTS(this.options.core.ctx.contextName), this.options.roomName);
+                if (_$1.isString(this.options.property)) {
+                    const subscribeEvent = Symbols.REALTIME.ROOM_SUBSCRIBE_ENTITY_PROPERTY_UPDATE_EVENTS(this.options.core.ctx.contextName);
+                    realtime.emit(subscribeEvent, this.options.roomName);
                 }
                 else {
-                    realtime.emit(Symbols.REALTIME.ROOM_NAME.SUBSCRIBE.ENTITY_UPDATE_EVENTS(this.options.core.ctx.contextName), this.options.roomName);
+                    const subscribeEvent = Symbols.REALTIME.ROOM_SUBSCRIBE_ENTITY_UPDATE_EVENTS(this.options.core.ctx.contextName);
+                    realtime.emit(subscribeEvent, this.options.roomName);
                 }
             }
             realtime.on(this.options.roomName, data => {
@@ -1822,16 +1915,16 @@ class RealtimeSubsManager {
         if (this.observers.length === 0) {
             this.isListening = false;
             const { core, customEvent, roomName, property } = this.options;
-            const realtime = core.FE_REALTIME;
+            const realtime = core.socketFE;
             if (customEvent) {
-                realtime.emit(Symbols.REALTIME.ROOM_NAME.UNSUBSCRIBE.CUSTOM(this.options.core.ctx.contextName), roomName);
+                realtime.emit(Symbols.REALTIME.ROOM_UNSUBSCRIBE_CUSTOM(this.options.core.ctx.contextName), roomName);
             }
             else {
-                if (_.isString(property)) {
-                    realtime.emit(Symbols.REALTIME.ROOM_NAME.UNSUBSCRIBE.ENTITY_PROPERTY_UPDATE_EVENTS(this.options.core.ctx.contextName), roomName);
+                if (_$1.isString(property)) {
+                    realtime.emit(Symbols.REALTIME.ROOM_UNSUBSCRIBE_ENTITY_PROPERTY_UPDATE_EVENTS(this.options.core.ctx.contextName), roomName);
                 }
                 else {
-                    realtime.emit(Symbols.REALTIME.ROOM_NAME.UNSUBSCRIBE.ENTITY_UPDATE_EVENTS(this.options.core.ctx.contextName), roomName);
+                    realtime.emit(Symbols.REALTIME.ROOM_UNSUBSCRIBE_ENTITY_UPDATE_EVENTS(this.options.core.ctx.contextName), roomName);
                 }
             }
         }
@@ -1858,7 +1951,7 @@ class RealtimeSubsManager {
 class RealtimeClient {
     constructor(core) {
         this.core = core;
-        this.subsmanagers = {};
+        this.subsManagers = {};
         this.core = core;
         if (!core.ctx.disabledRealtime) {
             this.init();
@@ -1873,20 +1966,24 @@ class RealtimeClient {
             console.info('[CLIENT] NAMESPACE GLOBAL ', nspPath.global.href + ` host: ${this.core.ctx.host}`);
         this.core.ctx.logRealtime &&
             console.info('[CLIENT] NAMESPACE REALTIME', nspPath.realtime.href + ` host: ${this.core.ctx.host}`);
-        this.core.FE = this.core.strategy.io(nspPath.global.origin, {
+        this.core.conectSocketFE = this.core.strategy.ioClient(nspPath.global.origin, {
             path: nspPath.global.pathname,
         });
-        if (this.core.FE.on) {
-            this.core.FE.on('connect', () => {
-                console.info(`[CLIENT] conented to GLOBAL namespace ${this.core.FE.id} of host: ${this.core.ctx.host}`);
+        if (this.core.conectSocketFE.on) {
+            this.core.conectSocketFE.on('connect', () => {
+                this.core.ctx.logRealtime &&
+                    console.info(`[CLIENT] connected to GLOBAL namespace ${nspPath.global.pathname}` +
+                        ` of host: ${this.core.ctx.host}`);
             });
         }
-        this.core.FE_REALTIME = this.core.strategy.io(nspPath.realtime.origin, {
+        this.core.socketFE = this.core.strategy.ioClient(nspPath.realtime.origin, {
             path: nspPath.realtime.pathname,
         });
-        if (this.core.FE_REALTIME.on) {
-            this.core.FE_REALTIME.on('connect', () => {
-                console.info(`[CLIENT] conented to REALTIME namespace ${this.core.FE_REALTIME.id} host: ${this.core.ctx.host}`);
+        if (this.core.socketFE.on) {
+            this.core.socketFE.on('connect', () => {
+                this.core.ctx.logRealtime &&
+                    console.info(`[CLIENT] connected to REALTIME namespace ${nspPath.realtime.pathname}` +
+                        ` host: ${this.core.ctx.host}`);
             });
         }
     }
@@ -1901,7 +1998,7 @@ class RealtimeClient {
         options = options || {};
         const { property, customEvent } = options;
         const className = !customEvent && ClassHelpers.getName(entityClassFn);
-        if (_.isString(property)) {
+        if (_$1.isString(property)) {
             if (property.trim() === '') {
                 throw new Error(`[Taon][listenChangesEntity.. incorect property '' for ${className}`);
             }
@@ -1921,12 +2018,12 @@ to use socket realtime connection;
             }
             let roomName;
             if (customEvent) {
-                roomName = Symbols.REALTIME.ROOM_NAME.CUSTOM(this.core.ctx.contextName, customEvent);
+                roomName = Symbols.REALTIME.ROOM_NAME_CUSTOM(this.core.ctx.contextName, customEvent);
             }
             else {
-                roomName = _.isString(property)
-                    ? Symbols.REALTIME.ROOM_NAME.UPDATE_ENTITY_PROPERTY(this.core.ctx.contextName, className, property, idOrUniqValue)
-                    : Symbols.REALTIME.ROOM_NAME.UPDATE_ENTITY(this.core.ctx.contextName, className, idOrUniqValue);
+                roomName = _$1.isString(property)
+                    ? Symbols.REALTIME.ROOM_NAME_UPDATE_ENTITY_PROPERTY(this.core.ctx.contextName, className, property, idOrUniqValue)
+                    : Symbols.REALTIME.ROOM_NAME_UPDATE_ENTITY(this.core.ctx.contextName, className, idOrUniqValue);
             }
             const roomSubOptions = {
                 core: this.core,
@@ -1934,13 +2031,13 @@ to use socket realtime connection;
                 roomName,
                 customEvent,
             };
-            const subManagerId = this.getRoomIdFrom(roomSubOptions);
-            if (!this.subsmanagers[subManagerId]) {
-                this.subsmanagers[subManagerId] = new RealtimeSubsManager(roomSubOptions);
+            const subManagerId = this.getUniqueIdentifierForConnection(roomSubOptions);
+            if (!this.subsManagers[subManagerId]) {
+                this.subsManagers[subManagerId] = new RealtimeSubsManager(roomSubOptions);
             }
-            const inst = this.subsmanagers[subManagerId];
+            const inst = this.subsManagers[subManagerId];
             inst.add(observer);
-            inst.startListenIfNotStarted(this.core.FE_REALTIME);
+            inst.startListenIfNotStarted(this.core.socketFE);
             return () => {
                 inst.remove(observer);
             };
@@ -1963,7 +2060,7 @@ to use socket realtime connection;
      */
     listenChangesEntityObj(entity, options) {
         const classFn = ClassHelpers.getClassFnFromObject(entity);
-        const uniqueKey = ClassHelpers.getUniquKey(classFn);
+        const uniqueKey = ClassHelpers.getUniqueKey(classFn);
         return this.listenChangesEntity(classFn, entity[uniqueKey], options);
     }
     listenChangesCustomEvent(customEvent) {
@@ -1971,7 +2068,15 @@ to use socket realtime connection;
             customEvent,
         });
     }
-    getRoomIdFrom(options) {
+    /**
+     * Trigger custom event on backend
+     * @param customEvent global event name
+     * @param dataToPush
+     */
+    triggerCustomEvent(customEvent, dataToPush) {
+        this.core.socketFE.emit(customEvent, dataToPush);
+    }
+    getUniqueIdentifierForConnection(options) {
         const url = new URL(options.core.ctx.host);
         return `${this.core.ctx.contextName}:${url.origin}|${options.roomName}|${options.property}|${options.customEvent}`;
     }
@@ -1979,11 +2084,9 @@ to use socket realtime connection;
 ;
 ({}); // @--end-of-file-for-module=taon lib/realtime/realtime-client.ts
 
-const SOCKET_EVENT_DEBOUNCE = 500;
 class RealtimeServer {
     constructor(core) {
         this.core = core;
-        this.jobs = {};
         this.core = core;
         if (!core.ctx.disabledRealtime) {
             /* */
@@ -2141,8 +2244,6 @@ class RealtimeServer {
         /* */
         /* */
         /* */
-    }
-    triggerChanges(entityObjOrClass, property, valueOfUniquPropery, customEvent, customEventData) {
         /* */
         /* */
         /* */
@@ -2157,6 +2258,11 @@ class RealtimeServer {
         /* */
         /* */
         /* */
+    }
+    triggerChanges(entityObjOrClass, property, valueOfUniqueProperty, customEvent, customEventData) {
+        /* */
+        /* */
+        /* */
         /* */
         /* */
         /* */
@@ -2212,21 +2318,21 @@ class RealtimeServer {
         /* */
         /* */
     }
-    trigggerEntityChanges(entityObjOrClass, idToTrigger) {
+    triggerEntityChanges(entityObjOrClass, idToTrigger) {
         if (this.core.ctx.disabledRealtime) {
             const className = ClassHelpers.getName(entityObjOrClass);
-            console.warn(`[Taon][TrigggerEntityChanges] Entity "${className}' is not realtime`);
+            console.warn(`[Taon][TriggerEntityChanges] Entity "${className}' is not realtime`);
             return;
         }
         this.triggerChanges(entityObjOrClass, void 0, idToTrigger);
     }
-    trigggerEntityPropertyChanges(entityObjOrClass, property, idToTrigger) {
+    triggerEntityPropertyChanges(entityObjOrClass, property, idToTrigger) {
         if (this.core.ctx.disabledRealtime) {
             const className = ClassHelpers.getName(entityObjOrClass);
-            console.warn(`[Taon][TrigggerEntityPropertyChanges][property=${property}] Entity "${className}' is not realtime`);
+            console.warn(`[Taon][TriggerEntityPropertyChanges][property=${property}] Entity "${className}' is not realtime`);
             return;
         }
-        if (_.isArray(property)) {
+        if (_$1.isArray(property)) {
             property.forEach(propertyFromArr => {
                 this.triggerChanges(entityObjOrClass, propertyFromArr, idToTrigger);
             });
@@ -2235,16 +2341,33 @@ class RealtimeServer {
             this.triggerChanges(entityObjOrClass, property, idToTrigger);
         }
     }
-    triggerCustomEvent(customEvent, dataToPush) {
-        this.triggerChanges(void 0, void 0, void 0, customEvent, dataToPush);
-    }
-    trigggerEntityTableChanges(entityClass) {
-        const className = ClassHelpers.getName(entityClass);
+    triggerEntityTableChanges(entityClassOrInstance) {
+        const className = ClassHelpers.getName(entityClassOrInstance);
         if (this.core.ctx.disabledRealtime) {
-            console.warn(`[Taon][TrigggerEntityTableChanges] Entity "${className}' is not realtime`);
+            console.warn(`[Taon][TriggerEntityTableChanges] Entity "${className}' is not realtime`);
             return;
         }
-        this.triggerChanges(entityClass, void 0, void 0, Symbols.REALTIME.TABLE_CHANGE(this.core.ctx.contextName, className));
+        this.triggerChanges(entityClassOrInstance, void 0, void 0, Symbols.REALTIME.TABLE_CHANGE(this.core.ctx.contextName, className));
+    }
+    triggerCustomEvent(customEvent, dataToPush) {
+        this.triggerChanges(void 0, void 0, void 0, customEvent, dataToPush);
+    }
+    /**
+     * Listen to custom events from users
+     * @param customEvent  global event name
+     */
+    listenChangesCustomEvent(customEvent) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
     }
 }
 ;
@@ -2254,106 +2377,49 @@ class RealtimeStrategy {
     constructor(ctx) {
         this.ctx = ctx;
     }
-    testTypes() {
+    get ioClient() {
+        throw new Error('Not implemented');
+    }
+    ioServer(url, opt) {
+        throw new Error('Not implemented');
     }
 }
 ;
 ({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy.ts
 
-class IpcRendererNamespace {
-    constructor(name) {
-        this.name = name;
-        this.listeners = {};
-        this.ipcRenderer = window.require('electron').ipcRenderer;
-    }
-    on(eventName, callback) {
-        if (!this.listeners[eventName]) {
-            this.listeners[eventName] = [];
-        }
-        this.listeners[eventName].push(callback);
-        const listenToEvent = `(${this.name}) "${eventName}"`;
-        this.ipcRenderer.on(listenToEvent, callback);
-        if (eventName === 'connect') {
-            this.emit('connection');
-        }
-        else {
-            this.emit(eventName);
-        }
-    }
-    off(event, callback) {
-        if (!this.listeners[event])
-            return;
-        if (callback) {
-            this.listeners[event] = this.listeners[event].filter(listener => listener !== callback);
-        }
-        else {
-            delete this.listeners[event];
+class MockServerIpc {
+    static { this.serverByContextName = new Map(); }
+    static from(contextName) {
+        if (!MockServerIpc.serverByContextName.has(contextName)) {
+            MockServerIpc.serverByContextName.set(contextName, new MockServerIpc(contextName));
         }
-        const removeListener = `(${this.name}) "${event}"`;
-        this.ipcRenderer.removeListener(removeListener, callback);
-    }
-    emit(event, ...args) {
-        const emitEvent = `(${this.name}) "${event}"`;
-        this.ipcRenderer.send(emitEvent, ...args);
+        return MockServerIpc.serverByContextName.get(contextName);
     }
-}
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-ipc-models/realtime-strategy-ipc-renderer-namespace.ts
-
-class IpcRendererWrapper {
     constructor(contextName) {
         this.contextName = contextName;
-        this.namespaces = {
-            '/': new IpcRendererNamespace('/'),
-        };
-        this.connected = false;
+        this.namespacesByName = new Map();
+        MockServerIpc.serverByContextName.set(contextName, this);
     }
     of(namespace) {
-        if (!this.namespaces[namespace]) {
-            this.namespaces[namespace] = new IpcRendererNamespace(namespace);
+        if (!this.namespacesByName.has(namespace)) {
+            this.namespacesByName.set(namespace, new MockNamespaceIpc(namespace, this));
         }
-        return this.namespaces[namespace];
-    }
-    on(event, callback) {
-        this.namespaces['/'].on(event, callback);
-    }
-    emit(event, ...args) {
-        this.namespaces['/'].emit(event, ...args);
+        return this.namespacesByName.get(namespace);
     }
 }
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-ipc-models/realtime-strategy-ipc-renderer-wrapper.ts
-
-/**
- * Purpose:
- * - backend-browser communication between 2 processes in electron mode
- */
-class RealtimeStrategyIpc extends RealtimeStrategy {
-    toString() {
-        return 'ipc';
-    }
-    establishConnection() {
-        throw new Error('Method not implemented.');
-    }
-    constructor(ctx) {
-        super(ctx);
-        this.ctx = ctx;
-        this.contextsServers = {};
-        this.contextsIO = {};
-    }
-    get io() {
-        return ((__, { path: namespacePath }) => {
-            if (this.contextsIO[namespacePath]) {
-                return this.contextsIO[namespacePath];
-            }
-            const wrap = new IpcRendererWrapper(this.ctx.contextName);
-            const nsp = wrap.of(namespacePath);
-            this.contextsIO[namespacePath] = nsp;
-            return nsp;
-        });
-        return void 0;
+class MockNamespaceIpc {
+    constructor(
+    /**
+     * Namespace name
+     */
+    name, server) {
+        this.name = name;
+        this.server = server;
+        this.electronClients = new Set();
+        this.roomsByRoomName = {};
+        this.namespaceEventHandlers = {};
     }
-    get Server() {
+    on(eventName, callback) {
         /* */
         /* */
         /* */
@@ -2365,189 +2431,375 @@ class RealtimeStrategyIpc extends RealtimeStrategy {
         /* */
         /* */
         /* */
-        return void 0;
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
     }
-}
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-ipc.ts
-
-class MockNamespace {
-    constructor(name, contextName) {
-        this.name = name;
-        this.contextName = contextName;
-        this.rooms = {};
-        this.sockets = new Set();
+    off(event, callback) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
     }
-    on(event, callback) {
-        if (event === 'connection') {
-            this.sockets.forEach(socket => callback(socket));
-        }
+    emit(eventName, ...args) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
     }
-    emit(event, data) {
-        this.sockets.forEach(socket => socket.emit(event, data));
+    to(roomName) {
+        const electronClientsInroom = this.roomsByRoomName[roomName];
+        return new RoomEmitterIpc(electronClientsInroom, this.name, true);
     }
-    to(room) {
-        return {
-            emit: (event, data) => {
-                if (this.rooms[room]) {
-                    this.rooms[room].forEach(socket => socket.emit(event, data));
-                }
-            }
-        };
+    in(roomName) {
+        const electronClientsInroom = this.roomsByRoomName[roomName];
+        return new RoomEmitterIpc(electronClientsInroom, this.name, false);
     }
-    joinRoom(socket, room) {
-        if (!this.rooms[room]) {
-            this.rooms[room] = new Set();
+    join(webContents, roomName) {
+        if (!this.roomsByRoomName[roomName]) {
+            this.roomsByRoomName[roomName] = new Set();
         }
-        this.rooms[room].add(socket);
+        this.roomsByRoomName[roomName].add(webContents);
     }
-    leaveRoom(socket, room) {
-        if (this.rooms[room]) {
-            this.rooms[room].delete(socket);
-            if (this.rooms[room].size === 0) {
-                delete this.rooms[room];
+    leave(webContents, roomName) {
+        if (this.roomsByRoomName[roomName]) {
+            this.roomsByRoomName[roomName].delete(webContents);
+            if (this.roomsByRoomName[roomName].size === 0) {
+                delete this.roomsByRoomName[roomName];
             }
         }
     }
-    addSocket(socket) {
-        this.sockets.add(socket);
+    path() {
+        return this.name;
     }
-    removeSocket(socket) {
-        this.sockets.delete(socket);
+    get nsp() {
+        const self = this;
+        return {
+            get name() {
+                return self.name;
+            },
+        };
     }
 }
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-mock-models/realtime-strategy-mock-namespaces.ts
-
-class MockSocket {
-    constructor(id, namespace) {
-        this.id = id;
-        this.namespace = namespace;
-        this.listeners = {};
-        this.namespace.addSocket(this);
+class RoomEmitterIpc {
+    constructor(electronClients, 
+    /**
+     * namespace name
+     */
+    name, includeSender = false, sender = null) {
+        this.electronClients = electronClients;
+        this.name = name;
+        this.includeSender = includeSender;
+        this.sender = sender;
+    }
+    emit(eventName, ...args) {
+        const emitEvent = `(${this.name}) "${eventName}"`;
+        this.electronClients?.forEach(webContents => {
+            webContents.send(emitEvent, ...args);
+        });
+    }
+}
+class MockSocketIpc {
+    get name() {
+        return this.namespaceName;
     }
-    on(event, callback) {
-        if (!this.listeners[event]) {
-            this.listeners[event] = [];
+    /**
+     * @param namespaceName instead url for ipc
+     */
+    constructor(namespaceName) {
+        this.namespaceName = namespaceName;
+        this.socketEventHandlers = {};
+        this.ipcRenderer = window.require('electron').ipcRenderer;
+    }
+    on(eventName, callback) {
+        if (!this.socketEventHandlers[eventName]) {
+            this.socketEventHandlers[eventName] = new Set();
+        }
+        this.socketEventHandlers[eventName].add(callback);
+        const listenToEvent = `(${this.name}) "${eventName}"`;
+        this.ipcRenderer.on(listenToEvent, (rendereEvent, data) => {
+            callback(data);
+        });
+        if (eventName === 'connect') {
+            const connectionEventKey = `(${this.name}) "connection"`;
+            this.ipcRenderer.send(connectionEventKey, this.name);
         }
-        this.listeners[event].push(callback);
     }
     off(event, callback) {
-        if (!this.listeners[event])
+        if (!this.socketEventHandlers[event]) {
             return;
+        }
         if (callback) {
-            this.listeners[event] = this.listeners[event].filter(listener => listener !== callback);
+            this.socketEventHandlers[event].delete(callback);
         }
         else {
-            delete this.listeners[event];
+            delete this.socketEventHandlers[event];
         }
+        const removeListener = `(${this.name}) "${event}"`;
+        this.ipcRenderer.removeListener(removeListener, data => {
+            callback(data);
+        });
     }
-    emit(event, data) {
-        if (this.listeners[event]) {
-            this.listeners[event].forEach(listener => listener(data));
-        }
+    emit(event, ...args) {
+        const emitEvent = `(${this.name}) "${event}"`;
+        this.ipcRenderer.send(emitEvent, ...args);
+    }
+}
+/**
+ * Purpose:
+ * - backend-browser communication between 2 processes in electron mode
+ */
+class RealtimeStrategyIpc extends RealtimeStrategy {
+    toString() {
+        return 'ipc';
     }
-    join(room) {
-        this.namespace.joinRoom(this, room);
+    constructor(ctx) {
+        super(ctx);
+        this.ctx = ctx;
     }
-    leave(room) {
-        this.namespace.leaveRoom(this, room);
+    ioServer(__, opt) {
+        const namespace = opt?.path || '/';
+        const server = MockServerIpc.from(this.ctx.contextName);
+        return server.of(namespace);
     }
-    disconnect() {
-        this.emit('disconnect');
-        this.namespace.removeSocket(this);
-        this.listeners = {};
+    get ioClient() {
+        const clientIo = (__, opt) => {
+            const namespace = opt?.path || '/';
+            return new MockSocketIpc(namespace);
+        };
+        return clientIo;
     }
 }
 ;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-mock-models/realtime-strategy-mock-socket.ts
+({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-ipc.ts
 
 class MockServer {
-    constructor(contextName) {
-        this.contextName = contextName;
-        this.namespaces = {
-            '/': new MockNamespace('/', this.contextName)
-        };
-    }
-    of(namespace) {
-        if (!this.namespaces[namespace]) {
-            this.namespaces[namespace] = new MockNamespace(namespace, this.contextName);
+    static { this.serverByUrl = new Map(); }
+    static from(url) {
+        if (!MockServer.serverByUrl.has(url)) {
+            MockServer.serverByUrl.set(url, new MockServer(url));
         }
-        return this.namespaces[namespace];
+        return MockServer.serverByUrl.get(url);
     }
-    on(event, callback) {
-        if (event === 'connection') {
-            this.namespaces['/'].on('connection', callback);
-        }
+    get allServers() {
+        return Array.from(MockServer.serverByUrl.values());
     }
-    emit(event, data) {
-        this.namespaces['/'].emit(event, data);
+    constructor(url) {
+        this.url = url;
+        this.namespacesByName = new Map();
+        MockServer.serverByUrl.set(url, this);
     }
-    connect(id, namespace = '/') {
-        const ns = this.of(namespace);
-        const socket = new MockSocket(id, ns);
-        ns.on('connection', (socket) => {
-            socket.emit('connect');
-        });
-        return socket;
+    of(namespace) {
+        if (!this.namespacesByName.has(namespace)) {
+            this.namespacesByName.set(namespace, new MockNamespace(namespace, this));
+        }
+        return this.namespacesByName.get(namespace);
+    }
+    path() {
+        return this.url;
     }
 }
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-mock-models/realtime-strategy-mock-server.ts
-
-class MockClientSocket {
-    constructor(serverSocket, contextName) {
-        this.serverSocket = serverSocket;
-        this.contextName = contextName;
-        this.listeners = {};
-        serverSocket.on('message', (data) => this.emit('message', data));
+class MockNamespace {
+    constructor(
+    /**
+     * unique namespace name
+     */
+    name, server) {
+        this.name = name;
+        this.server = server;
+        /**
+         * All sockets connected to this namespace
+         */
+        this.allSocketsForNamespace = new Set();
+        /**
+         * Rooms and their sockets
+         */
+        this.socketByRoomName = {};
+        /**
+         * Event handlers for this namespace
+         */
+        this.namespaceEventHandlers = {};
     }
-    on(event, callback) {
-        if (!this.listeners[event]) {
-            this.listeners[event] = [];
+    on(eventName, handler) {
+        if (!this.namespaceEventHandlers[eventName]) {
+            this.namespaceEventHandlers[eventName] =
+                new Set();
         }
-        this.listeners[event].push(callback);
-    }
-    off(event, callback) {
-        if (!this.listeners[event])
-            return;
-        if (callback) {
-            this.listeners[event] = this.listeners[event].filter(listener => listener !== callback);
+        if (!this.namespaceEventHandlers[eventName].has(handler)) {
+            this.namespaceEventHandlers[eventName].add(handler);
         }
-        else {
-            delete this.listeners[event];
+        if (eventName === 'connection') {
+            setTimeout(() => {
+                this.emit('connection', this);
+            });
         }
     }
-    emit(event, data) {
-        this.serverSocket.emit(event, data);
-        if (this.listeners[event]) {
-            this.listeners[event].forEach(listener => listener(data));
+    emit(event, ...args) {
+        this.allSocketsForNamespace?.forEach(socket => {
+            socket.emit(event, ...args);
+        });
+    }
+    connect(socket) {
+        this.allSocketsForNamespace.add(socket);
+        socket.namespaceInstance = this;
+    }
+    to(roomName) {
+        const socketsInRoom = this.socketByRoomName[roomName];
+        return new RoomEmitter(socketsInRoom, true);
+    }
+    in(roomName) {
+        const socketsInRoom = this.socketByRoomName[roomName];
+        return new RoomEmitter(socketsInRoom, false);
+    }
+    joinRoom(roomName, socket) {
+        if (!this.socketByRoomName[roomName]) {
+            this.socketByRoomName[roomName] = new Set();
         }
+        this.socketByRoomName[roomName].add(socket);
     }
-    disconnect() {
-        this.serverSocket.disconnect();
-        this.listeners = {};
+    leaveRoom(roomName, socket) {
+        const roomSockets = this.socketByRoomName[roomName];
+        if (roomSockets) {
+            this.socketByRoomName[roomName].delete(socket);
+        }
     }
-    join(room) {
-        this.serverSocket.join(room);
+    get nsp() {
+        const self = this;
+        return {
+            get name() {
+                return self.name;
+            },
+        };
     }
-    leave(room) {
-        this.serverSocket.leave(room);
+    path() {
+        return this.name;
+    }
+}
+class RoomEmitter {
+    constructor(sockets, includeSender = false, sender = null) {
+        this.sockets = sockets;
+        this.includeSender = includeSender;
+        this.sender = sender;
+    }
+    emit(event, ...args) {
+        this.sockets?.forEach(socket => {
+            if (this.includeSender || socket !== this.sender) {
+                socket.emit(event, ...args);
+            }
+        });
+    }
+}
+class MockSocket {
+    get id() {
+        return this.nsp.name;
+    }
+    constructor(url, opts) {
+        this.url = url;
+        this.socketEventHandlers = {};
+        // @ts-ignore
+        const [baseUrl, namespace] = [url, opts.path || '/'];
+        const namespaceName = namespace || '/';
+        const server = MockServer.from(url);
+        const ns = server.of(namespaceName);
+        ns.connect(this);
+    }
+    get nsp() {
+        const self = this;
+        return {
+            get name() {
+                return self.namespaceInstance?.name;
+            },
+        };
+    }
+    path() {
+        return this.namespaceInstance?.name;
+    }
+    on(eventName, handler) {
+        if (!this.socketEventHandlers[eventName]) {
+            this.socketEventHandlers[eventName] =
+                new Set();
+        }
+        this.socketEventHandlers[eventName].add(handler);
+        if (eventName === 'connect') {
+            setTimeout(() => {
+                this.emit('connect');
+            });
+        }
+    }
+    emit(eventName, ...args) {
+        eventName = eventName || '';
+        if (eventName.includes(`:${Symbols.REALTIME.KEYroomSubscribe}`)) {
+            const room = args[0];
+            this.join(room);
+        }
+        else if (eventName.includes(`:${Symbols.REALTIME.KEYroomUnsubscribe}`)) {
+            const room = args[0];
+            this.leave(room);
+        }
+        else {
+            if (this.namespaceInstance) {
+                const namespaceEventHandlers = this.namespaceInstance.namespaceEventHandlers[eventName] || [];
+                for (const namespaceEventHandler of namespaceEventHandlers) {
+                    if (namespaceEventHandler) {
+                        namespaceEventHandler(...args);
+                    }
+                }
+                const allSocketsForNamespaceExceptCurrent = Array.from(this.namespaceInstance.allSocketsForNamespace.values()).filter(socket => socket !== this);
+                for (const socket of allSocketsForNamespaceExceptCurrent) {
+                    const socketEventHandlers = socket.socketEventHandlers[eventName];
+                    for (const socketEventHandler of socketEventHandlers) {
+                        if (socketEventHandler) {
+                            socketEventHandler(...args);
+                        }
+                    }
+                }
+                const socketEventHandlers = this.socketEventHandlers[eventName] || [];
+                for (const clientHandler of socketEventHandlers) {
+                    if (clientHandler) {
+                        clientHandler(...args);
+                    }
+                }
+            }
+        }
+    }
+    join(roomName) {
+        this.namespaceInstance.joinRoom(roomName, this);
+    }
+    leave(roomName) {
+        this.namespaceInstance.leaveRoom(roomName, this);
     }
 }
-function mockIo(server) {
-    return (namespace = '/') => {
-        const socketId = Math.random().toString(36).substring(2);
-        const serverSocket = server.connect(socketId, namespace);
-        return new MockClientSocket(serverSocket, server.contextName);
-    };
-}
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-mock-models/realtime-strategy-mock-client.ts
-
-;
-({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-mock-models/index.ts
-
 /**
  * Purpose:
  * - browser-browser communication mock (in websql mode)
@@ -2560,15 +2812,15 @@ class RealtimeStrategyMock extends RealtimeStrategy {
         super(ctx);
         this.ctx = ctx;
     }
-    get Server() {
-        return MockServer;
+    ioServer(url, opt) {
+        const server = MockServer.from(url || this.ctx.uri.origin);
+        return server.of(opt?.path || '/');
     }
-    ;
-    get io() {
-        return mockIo;
-    }
-    establishConnection() {
-        throw new Error('Method not implemented.');
+    get ioClient() {
+        const clientIo = (uri, opts) => {
+            return new MockSocket(uri || this.ctx.uri.origin, opts);
+        };
+        return clientIo;
     }
 }
 ;
@@ -2587,18 +2839,14 @@ class RealtimeStrategySocketIO extends RealtimeStrategy {
         super(ctx);
         this.ctx = ctx;
     }
-    get Server() {
+    ioServer(...args) {
         /* */
         /* */
         return (void 0);
     }
-    ;
-    get io() {
+    get ioClient() {
         return io;
     }
-    establishConnection() {
-        throw new Error('Method not implemented.');
-    }
 }
 ;
 ({}); // @--end-of-file-for-module=taon lib/realtime/realtime-strategy/realtime-strategy-socket-io.ts
@@ -2625,14 +2873,22 @@ class RealtimeCore {
             'OPTIONS',
             'HEAD',
         ];
+        this.ctx = ctx;
         this.strategy = this.resolveStrategy();
-        ctx.logFramework &&
+        this.ctx.logRealtime &&
             console.log(`[taon] realtime strategy: ${this.strategy}`);
-        this.client = new RealtimeClient(this);
-        this.server = new RealtimeServer(this);
+        if (Helpers.isWebSQL) {
+            this.server = new RealtimeServer(this);
+            this.client = new RealtimeClient(this);
+        }
+        else {
+            this.client = new RealtimeClient(this);
+            this.server = new RealtimeServer(this);
+        }
     }
     resolveStrategy() {
-        if (this.ctx.mode === 'backend-frontend(websql)') {
+        if (this.ctx.mode === 'backend-frontend(websql)' ||
+            this.ctx.mode === 'backend-frontend(websql-electron)') {
             return new RealtimeStrategyMock(this.ctx);
         }
         if (this.ctx.mode === 'backend-frontend(ipc-electron)') {
@@ -2645,11 +2901,11 @@ class RealtimeCore {
         let nsp = namespace ? namespace : '';
         nsp = nsp === '/' ? '' : nsp;
         const pathname = uri.pathname !== '/' ? uri.pathname : '';
-        let prefix = `taonContext-`;
+        let prefix = `taonContext`;
         if (Helpers.isElectron) {
             prefix = ``;
         }
-        const href = `${uri.origin}${pathname}/${prefix}${nsp}`;
+        const href = `${uri.origin}${pathname}/${prefix}${prefix && nsp ? '-' + nsp : nsp}`;
         return new URL(href);
     }
 }
@@ -2661,11 +2917,6 @@ class EndpointContext {
     static initNgZone(ngZone) {
         this.ngZone = ngZone;
     }
-    static findForTraget(classFnOrObject) {
-        const obj = ClassHelpers.getClassFnFromObject(classFnOrObject) || {};
-        return (classFnOrObject[Symbols.ctxInClassOrClassObj] ||
-            obj[Symbols.ctxInClassOrClassObj]);
-    }
     get realtimeClient() {
         return this.realtime.client;
     }
@@ -2673,25 +2924,25 @@ class EndpointContext {
         return this.realtime.server;
     }
     get logHttp() {
-        if (_.isObject(this.config?.logs)) {
+        if (_$1.isObject(this.config?.logs)) {
             return !!this.config.logs.http;
         }
         return this.config?.logs === true;
     }
     get logRealtime() {
-        if (_.isObject(this.config?.logs)) {
+        if (_$1.isObject(this.config?.logs)) {
             return !!this.config.logs.realtime;
         }
         return this.config?.logs === true;
     }
     get logFramework() {
-        if (_.isObject(this.config?.logs)) {
+        if (_$1.isObject(this.config?.logs)) {
             return !!this.config.logs.framework;
         }
         return this.config?.logs === true;
     }
     get logDb() {
-        if (_.isObject(this.config?.logs)) {
+        if (_$1.isObject(this.config?.logs)) {
             return !!this.config.logs.db;
         }
         return this.config?.logs === true;
@@ -2792,9 +3043,19 @@ class EndpointContext {
         };
     }
     async init(options) {
-        const { initFromRecrusiveContextResovle } = options || {}; // TODO use it ?
+        const { initFromRecrusiveContextResovle, overrideHost, overrideRemoteHost } = options || {}; // TODO use it ?
         this.inited = true;
-        this.config = this.configFn(ENV$1);
+        this.config = this.configFn(ENV$2);
+        if (overrideHost && overrideRemoteHost) {
+            if (Helpers.isWebSQL) {
+                throw new Error(`You can't have overrideHost and overrideRemoteHost at the same time`);
+            }
+            Helpers.error(`You can't have overrideHost and overrideRemoteHost at the same time`, false, true);
+            /* */
+            /* */
+        }
+        this.config.host = overrideHost ? overrideHost : this.config.host;
+        this.config.remoteHost = overrideRemoteHost ? overrideRemoteHost : this.config.remoteHost;
         if (this.config.host) {
             this.mode = 'backend-frontend(tcp+udp)';
             /* */
@@ -2807,7 +3068,12 @@ class EndpointContext {
             this.mode = 'remote-backend(tcp+udp)';
         }
         if (this.config.useIpcWhenElectron && Helpers.isElectron) {
-            this.mode = 'backend-frontend(ipc-electron)';
+            if (Helpers.isWebSQL) {
+                this.mode = 'backend-frontend(websql-electron)';
+            }
+            else {
+                this.mode = 'backend-frontend(ipc-electron)';
+            }
         }
         if (!this.mode && !this.config.abstract) {
             Helpers.error(`[taon] Context "${this.contextName}": You need to provide host or remoteHost or useIpcWhenElectron`, false, true);
@@ -2817,11 +3083,11 @@ class EndpointContext {
         if (this.config.database === true) {
             this.databaseConfig = this.getAutoGeneratedConfig();
         }
-        else if (_.isObject(this.config.database)) {
-            this.databaseConfig = _.cloneDeep(this.config.database);
+        else if (_$1.isObject(this.config.database)) {
+            this.databaseConfig = _$1.cloneDeep(this.config.database);
         }
         if (this.config.session) {
-            this.session = _.cloneDeep(this.config.session);
+            this.session = _$1.cloneDeep(this.config.session);
             const oneHour = 1000 * 60 * 60 * 1; // 24;
             if (!this.session.cookieMaxAge) {
                 this.session.cookieMaxAge = oneHour;
@@ -3015,6 +3281,7 @@ class EndpointContext {
         /* */
         /* */
         /* */
+        /* */
         return (void 0);
     }
     get ngZone() {
@@ -3035,6 +3302,9 @@ class EndpointContext {
         /* */
         /* */
         /* */
+        /* */
+        /* */
+        /* */
         return (void 0);
     }
     displayRoutes(app) {
@@ -3148,8 +3418,8 @@ class EndpointContext {
         return this.inject(ctor, { localInstance: false });
     }
     checkIfContextInitialized() {
-        if (_.isUndefined(this.config)) {
-            throw new Error(`Please check if your context has been initilized.
+        if (_$1.isUndefined(this.config)) {
+            throw new Error(`Please check if your context has been initialized.
 
 
       await Context.initialize();
@@ -3210,9 +3480,12 @@ class EndpointContext {
         }
     }
     async reinitControllers() {
+        if (this.remoteHost) {
+            return;
+        }
         const controllers = this.getClassesInstancesArrBy(Models.ClassType.CONTROLLER);
         for (const ctrl of controllers) {
-            if (_.isFunction(ctrl.initExampleDbData)) {
+            if (_$1.isFunction(ctrl.initExampleDbData)) {
                 await Helpers.runSyncOrAsync({
                     functionFn: ctrl.initExampleDbData,
                     context: ctrl,
@@ -3221,6 +3494,9 @@ class EndpointContext {
         }
     }
     async initClasses() {
+        if (this.remoteHost) {
+            return;
+        }
         for (const classTypeName of [
             Models.ClassType.PROVIDER,
             Models.ClassType.REPOSITORY,
@@ -3228,7 +3504,7 @@ class EndpointContext {
             Models.ClassType.ENTITY,
         ]) {
             for (const classFun of this.getClassFunByArr(classTypeName)) {
-                if (_.isFunction(classFun._)) {
+                if (_$1.isFunction(classFun._)) {
                     await Helpers.runSyncOrAsync({
                         functionFn: classFun._,
                         context: classFun,
@@ -3242,7 +3518,7 @@ class EndpointContext {
             Models.ClassType.CONTROLLER,
         ]) {
             for (const ctrl of this.getClassesInstancesArrBy(classTypeName)) {
-                if (_.isFunction(ctrl._)) {
+                if (_$1.isFunction(ctrl._)) {
                     await Helpers.runSyncOrAsync({
                         functionFn: ctrl._,
                         context: ctrl,
@@ -3288,11 +3564,6 @@ class EndpointContext {
         return this.uri?.origin;
     }
     async initSubscribers() {
-        return; // TODO
-        /* */
-        /* */
-        /* */
-        /* */
         /* */
         /* */
         /* */
@@ -3310,103 +3581,8 @@ class EndpointContext {
         /* */
         /* */
         return (void 0);
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
+    }
+    async initEntities() {
         /* */
         /* */
         /* */
@@ -3437,35 +3613,12 @@ class EndpointContext {
         /* */
         /* */
     }
-    async initEntities() {
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
+    async initDatabaseConnection() {
         /* */
         /* */
         /* */
         /* */
         /* */
-    }
-    async initDatabaseConnection() {
         /* */
         /* */
         /* */
@@ -3557,7 +3710,7 @@ class EndpointContext {
                 ClassHelpers.getMethodsNames(controllerClassFn);
             const configs = ClassHelpers.getControllerConfigs(controllerClassFn);
             const classConfig = configs[0];
-            const parentscalculatedPath = _.slice(configs, 1)
+            const parentscalculatedPath = _$1.slice(configs, 1)
                 .reverse()
                 .map(bc => {
                 if (TaonHelpers.isGoodPath(bc.path)) {
@@ -3575,13 +3728,13 @@ class EndpointContext {
                         .replace(/\/\//g, '/')
                         .split('/')
                         .reduce((acc, bc) => {
-                        return _.last(acc) === bc ? acc : [...acc, bc];
+                        return _$1.last(acc) === bc ? acc : [...acc, bc];
                     }, [])
                         .join('/');
             }
-            _.slice(configs, 1).forEach(bc => {
+            _$1.slice(configs, 1).forEach(bc => {
                 const alreadyIs = classConfig.methods;
-                const toMerge = _.cloneDeep(bc.methods);
+                const toMerge = _$1.cloneDeep(bc.methods);
                 for (const key in toMerge) {
                     if (toMerge.hasOwnProperty(key) && !alreadyIs[key]) {
                         const element = toMerge[key];
@@ -3630,6 +3783,9 @@ class EndpointContext {
         }
     }
     writeActiveRoutes() {
+        if (this.remoteHost) {
+            return;
+        }
         const contexts = [this];
         /* */
         /* */
@@ -3668,7 +3824,7 @@ class EndpointContext {
         /* */
         return (void 0);
     }
-    initMidleware() {
+    initMiddlewares() {
         /* */
         /* */
         /* */
@@ -4081,7 +4237,7 @@ class EndpointContext {
                                 method: methodConfig.type,
                                 url: `${ctx.uri.origin}${'' // TODO express path
                                 }${methodConfig.path} `,
-                            }, Helpers.isBlob(body) || _.isString(body)
+                            }, Helpers.isBlob(body) || _$1.isString(body)
                                 ? body
                                 : JSON.stringify(body), RestHeaders.from(headers), void 0, () => body);
                             resolve(res);
@@ -4307,7 +4463,7 @@ class EndpointContext {
                         if (mapping) {
                             rest.headers.set(Symbols.old.MAPPING_CONFIG_HEADER_QUERY_PARAMS, JSON.stringify(mapping));
                         }
-                        queryParams = _.cloneDeep(param);
+                        queryParams = _$1.cloneDeep(param);
                     }
                 }
                 if (currentParam.paramType === 'Header') {
@@ -4389,14 +4545,14 @@ const globalPublicStorage = Helpers.isBrowser ? window : global;
 ;
 ({}); // @--end-of-file-for-module=taon lib/storage.ts
 
-const ENV = Helpers.isBrowser ? window['ENV'] : global['ENV'];
+const ENV$1 = Helpers.isBrowser ? window['ENV'] : global['ENV'];
 class TaonAdmin {
     constructor() {
         this.scrollableEnabled = false; // TOOD false by default
         this.onEditMode = new Subject();
         this.onEditMode$ = this.onEditMode.asObservable();
         this.enabledTabs = [];
-        this.scrollableEnabled = !!ENV?.useGlobalNgxScrollbar;
+        this.scrollableEnabled = !!ENV$1?.useGlobalNgxScrollbar;
     }
     static get Instance() {
         if (!globalPublicStorage[config.frameworkNames.productionFrameworkName]) {
@@ -4446,7 +4602,7 @@ 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.service.ts
 
 const createContext = (configFn) => {
-    let config = configFn(ENV$1);
+    let config = configFn(ENV$2);
     const endpointContextRef = new EndpointContext(config, configFn);
     const res = {
         types: {
@@ -4470,6 +4626,7 @@ const createContext = (configFn) => {
             return config.contextName;
         },
         /**
+         * @deprecated
          * - get reference to internal context
          */
         async __ref() {
@@ -4480,6 +4637,10 @@ const createContext = (configFn) => {
             }
             return endpointContextRef;
         },
+        /**
+        * only for internal use
+        * @deprecated
+        */
         get __refSync() {
             return endpointContextRef;
         },
@@ -4494,10 +4655,12 @@ const createContext = (configFn) => {
          * - create controller instances for context
          * - init database (if enable) + migation scripts
          */
-        initialize: async () => {
+        initialize: async (overrideOptions) => {
             return await new Promise(async (resolve, reject) => {
                 setTimeout(async () => {
-                    await endpointContextRef.init();
+                    await endpointContextRef.init({
+                        ...overrideOptions,
+                    });
                     if (config.abstract) {
                         throw new Error(`Abstract context can not be initialized`);
                     }
@@ -4522,6 +4685,20 @@ const createContext = (configFn) => {
                 });
             });
         },
+        /**
+         * realtime communication with server
+         * Udp socket.io (or ipc) based.
+         */
+        get realtime() {
+            return {
+                get client() {
+                    return endpointContextRef.realtimeClient;
+                },
+                get server() {
+                    return endpointContextRef.realtimeServer;
+                }
+            };
+        },
     };
     return res;
 };
@@ -4544,172 +4721,151 @@ var baseContext = /*#__PURE__*/Object.freeze({
     BaseContext: BaseContext
 });
 
-class TaonSubscriberOptions extends Models.DecoratorAbstractOpt {
-}
 function TaonSubscriber(options) {
     return function (constructor) {
         Reflect.defineMetadata(Symbols.metadata.options.repository, options, constructor);
         Reflect.defineMetadata(Symbols.metadata.className, options?.className || constructor.name, constructor);
         ClassHelpers.setName(constructor, options?.className);
-        return class extends constructor {
-            constructor(...args) {
-                super(...args);
-                const methodNamesAll = ClassHelpers.getMethodsNames(constructor.prototype);
-                const methodNames = methodNamesAll.filter(m => {
-                    return (!['__trigger_event__', 'clone'].includes(m) &&
-                        !m.startsWith('_') &&
-                        !m.startsWith('inject'));
-                });
-                methodNames.forEach(methodName => {
-                    const originalMethod = this[methodName];
-                    this[methodName] = async (...methodArgs) => {
-                        const result = originalMethod.apply(this, methodArgs);
-                        if (result instanceof Promise) {
-                            await result;
-                        }
-                        if (options.allowedEvents === undefined ||
-                            options.allowedEvents.includes(methodName)) {
-                            // @ts-ignore
-                            this.__trigger_event__(methodName);
-                        }
-                        return result;
-                    };
-                });
-            }
-        };
     };
 }
+class TaonSubscriberOptions extends Models.DecoratorAbstractOpt {
+}
 ;
 ({}); // @--end-of-file-for-module=taon lib/decorators/classes/subscriber-decorator.ts
 
-let BaseSubscriber = class BaseSubscriber extends BaseInjector {
-    __trigger_event__(eventName) {
-        const ctx = this.__endpoint_context__;
-        console.log('Trigger event', eventName, ctx);
-    }
-};
-BaseSubscriber = __decorate([
-    TaonSubscriber({
-        className: 'BaseSubscriber',
-    })
-], BaseSubscriber);
-;
-({}); // @--end-of-file-for-module=taon lib/base-classes/base-subscriber.ts
-
 let BaseSubscriberForEntity = class BaseSubscriberForEntity extends BaseInjector {
     /**
      * Called after entity is loaded.
      */
     afterLoad(entity) {
-        console.log(`AFTER ENTITY LOADED: `, entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY LOADED: `, entity);
     }
     /**
      * Called before query execution.
      */
     beforeQuery(event) {
-        console.log(`BEFORE QUERY: `, event.query);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE QUERY: `, event.query);
     }
     /**
      * Called after query execution.
      */
     afterQuery(event) {
-        console.log(`AFTER QUERY: `, event.query);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER QUERY: `, event.query);
     }
     /**
      * Called before entity insertion.
      */
     beforeInsert(event) {
-        console.log(`BEFORE ENTITY INSERTED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE ENTITY INSERTED: `, event.entity);
     }
     /**
      * Called after entity insertion.
      */
     afterInsert(event) {
-        console.log(`AFTER ENTITY INSERTED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY INSERTED: `, event.entity);
     }
     /**
      * Called before entity update.
      */
     beforeUpdate(event) {
-        console.log(`BEFORE ENTITY UPDATED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE ENTITY UPDATED: `, event.entity);
     }
     /**
      * Called after entity update.
      */
     afterUpdate(event) {
-        console.log(`AFTER ENTITY UPDATED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY UPDATED: `, event.entity);
     }
     /**
      * Called before entity removal.
      */
     beforeRemove(event) {
-        console.log(`BEFORE ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
     }
     /**
      * Called after entity removal.
      */
     afterRemove(event) {
-        console.log(`AFTER ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY WITH ID ${event.entityId} REMOVED: `, event.entity);
     }
     /**
      * Called before entity removal.
      */
     beforeSoftRemove(event) {
-        console.log(`BEFORE ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
     }
     /**
      * Called after entity removal.
      */
     afterSoftRemove(event) {
-        console.log(`AFTER ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY WITH ID ${event.entityId} SOFT REMOVED: `, event.entity);
     }
     /**
      * Called before entity recovery.
      */
     beforeRecover(event) {
-        console.log(`BEFORE ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
     }
     /**
      * Called after entity recovery.
      */
     afterRecover(event) {
-        console.log(`AFTER ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER ENTITY WITH ID ${event.entityId} RECOVERED: `, event.entity);
     }
     /**
      * Called before transaction start.
      */
     beforeTransactionStart(event) {
-        console.log(`BEFORE TRANSACTION STARTED: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE TRANSACTION STARTED: `, event);
     }
     /**
      * Called after transaction start.
      */
     afterTransactionStart(event) {
-        console.log(`AFTER TRANSACTION STARTED: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER TRANSACTION STARTED: `, event);
     }
     /**
      * Called before transaction commit.
      */
     beforeTransactionCommit(event) {
-        console.log(`BEFORE TRANSACTION COMMITTED: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE TRANSACTION COMMITTED: `, event);
     }
     /**
      * Called after transaction commit.
      */
     afterTransactionCommit(event) {
-        console.log(`AFTER TRANSACTION COMMITTED: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER TRANSACTION COMMITTED: `, event);
     }
     /**
      * Called before transaction rollback.
      */
     beforeTransactionRollback(event) {
-        console.log(`BEFORE TRANSACTION ROLLBACK: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`BEFORE TRANSACTION ROLLBACK: `, event);
     }
     /**
      * Called after transaction rollback.
      */
     afterTransactionRollback(event) {
-        console.log(`AFTER TRANSACTION ROLLBACK: `, event);
+        this.__endpoint_context__.logDb &&
+            console.log(`AFTER TRANSACTION ROLLBACK: `, event);
     }
 };
 BaseSubscriberForEntity = __decorate([
@@ -4729,7 +4885,6 @@ var Base;
     Base.Provider = BaseProvider;
     Base.Class = BaseClass;
     Base.Repository = BaseRepository;
-    Base.Subscriber = BaseSubscriber;
     Base.SubscriberForEntity = BaseSubscriberForEntity;
     Base.Context = BaseContext;
 })(Base || (Base = {}));
@@ -4743,7 +4898,7 @@ function TaonEntity(options) {
         options = options || {};
         options.uniqueKeyProp = options.uniqueKeyProp || 'id';
         ClassHelpers.setName(constructor, options?.className);
-        Mapping.DefaultModelWithMapping(options?.defaultModelValues || {}, _.merge(options?.defaultModelMapping || {}, (options?.defaultModelMappingDeep || {})))(constructor);
+        Mapping.DefaultModelWithMapping(options?.defaultModelValues || {}, _$1.merge(options?.defaultModelMapping || {}, (options?.defaultModelMappingDeep || {})))(constructor);
         Mapping.DefaultModelWithMapping(void 0, {})(constructor);
         Reflect.defineMetadata(Symbols.metadata.options.entity, options, constructor);
         Reflect.defineMetadata(Symbols.metadata.className, options?.className || constructor.name, constructor);
@@ -4797,73 +4952,1286 @@ const inject = (entity) => {
         },
     });
 };
-const injectController = inject;
-const injectSubscriberEvents = (subscriberClassResolveFn, eventName) => {
-    const eventsSrc = new Subject();
-    const obs = eventsSrc.asObservable();
-    let isFirstSubscription = true;
-    const proxiedObservable = new Proxy(obs, {
-        get(target, prop, receiver) {
-            if (prop === 'subscribe') {
-                return (...args) => {
-                    if (isFirstSubscription) {
-                        isFirstSubscription = false;
-                        const subscriberClassFN = subscriberClassResolveFn();
-                        const ctx = subscriberClassFN[Symbols.ctxInClassOrClassObj];
-                        if (!ctx) {
-                            throw new Error(`You are trying to inject class without context. Use context like this;
-
-              Taon.injectSubscriberEvents( ()=> ` +
-                                `MyContext.getInstance(${subscriberClassFN?.name}), '${eventName}' )
-
+/**
+ * TODO
+ */
+;
+({}); // @--end-of-file-for-module=taon lib/inject.ts
 
-              `);
-                        }
-                        const subscriberInstance = ctx.getInstanceBy(subscriberClassFN);
-                        console.log('First subscription, you can access arguments here:', {
-                            subscriberClassFN,
-                            eventName,
-                        });
-                    }
-                    return target.subscribe(...args);
-                };
+const log$1 = Log.create(`[taon-helpers] long-press`, Level.__NOTHING);
+class TaonLongPress {
+    constructor() {
+        this.pressDuration = 1000;
+        this.onLongPress = new EventEmitter();
+        this.onLongPressing = new EventEmitter();
+        this.onLongPressEnd = new EventEmitter();
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.allowTrigger = false;
+        this.triggerEnd = _$1.debounce(() => {
+            this.endPress();
+        }, 500);
+    }
+    get press() {
+        return this.pressing;
+    }
+    get longPress() {
+        return this.longPressing;
+    }
+    onMouseDown(event) {
+        log$1.d(`MOUSE DOWN `);
+        if (event.which !== 1)
+            return;
+        this.allowTrigger = true;
+        this.mouseX = event.clientX;
+        this.mouseY = event.clientY;
+        this.pressing = true;
+        this.longPressing = false;
+        this.timeout = setTimeout(() => {
+            if (this.allowTrigger) {
+                this.longPressing = true;
+                log$1.d(`long pressing start  pressDuration:${this.pressDuration} `);
+                this.onLongPress.emit(event);
+                this.loop(event);
             }
-            return Reflect.get(target, prop, receiver);
-        },
-    });
-    return proxiedObservable;
-};
+        }, this.pressDuration);
+        this.loop(event);
+    }
+    onMouseMove(event) {
+        if (this.pressing && !this.longPressing) {
+            const xThres = event.clientX - this.mouseX > 10;
+            const yThres = event.clientY - this.mouseY > 10;
+            if (xThres || yThres) {
+                this.endPress();
+            }
+        }
+    }
+    loop(event) {
+        if (this.longPressing) {
+            this.timeout = setTimeout(() => {
+                log$1.d(`emil longpressing`);
+                this.triggerEnd();
+                this.onLongPressing.emit(event);
+                this.loop(event);
+            }, 50);
+        }
+    }
+    endPress(emit = true) {
+        this.allowTrigger = false;
+        clearTimeout(this.timeout);
+        this.longPressing = false;
+        this.pressing = false;
+        if (emit) {
+            log$1.d(`EMIT END`);
+            this.onLongPressEnd.emit(true);
+        }
+        else {
+            log$1.d(`NOT EMIT END`);
+        }
+    }
+    onMouseUp() {
+        this.endPress(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonLongPress, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.5", type: TaonLongPress, isStandalone: true, selector: "[taonLongPress]", inputs: { pressDuration: "pressDuration" }, outputs: { onLongPress: "onLongPress", onLongPressing: "onLongPressing", onLongPressEnd: "onLongPressEnd" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mousemove": "onMouseMove($event)", "mouseup": "onMouseUp()" }, properties: { "class.press": "this.press", "class.longpress": "this.longPress" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonLongPress, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[taonLongPress]',
+                    standalone: true,
+                }]
+        }], propDecorators: { pressDuration: [{
+                type: Input
+            }], onLongPress: [{
+                type: Output
+            }], onLongPressing: [{
+                type: Output
+            }], onLongPressEnd: [{
+                type: Output
+            }], press: [{
+                type: HostBinding,
+                args: ['class.press']
+            }], longPress: [{
+                type: HostBinding,
+                args: ['class.longpress']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup']
+            }] } });
 ;
-({}); // @--end-of-file-for-module=taon lib/inject.ts
+({}); // @--end-of-file-for-module=taon lib/ui/directives/taon-long-press.directive.ts
 
+class TaonInjectHTMLDirective {
+    set taonInjectHTML(content) {
+        this.host.nativeElement.innerHTML = content;
+    }
+    constructor(host) {
+        this.host = host;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonInjectHTMLDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.5", type: TaonInjectHTMLDirective, isStandalone: true, selector: "[taonInjectHTML]", inputs: { taonInjectHTML: "taonInjectHTML" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonInjectHTMLDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[taonInjectHTML]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { taonInjectHTML: [{
+                type: Input
+            }] } });
 ;
-({}); // @--end-of-file-for-module=taon lib/constants.ts
+({}); // @--end-of-file-for-module=taon lib/ui/directives/taon-inject-html.directive.ts
 
-var Taon;
-(function (Taon) {
-    Taon.Http = Http;
-    Taon.Base = Base;
-    Taon.getResponseValue = getResponseValue;
-    Taon.Controller = TaonController;
-    Taon.Entity = TaonEntity;
-    Taon.Provider = TaonProvider;
-    Taon.Repository = TaonRepository;
-    Taon.Subscriber = TaonSubscriber;
+/* */
+/* */
+/* */
+/* */
+/* */
+/* */
+class SafePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, type) {
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error(`Invalid safe type specified: ${type}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SafePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safe',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/directives/safe.pipe.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/directives/index.ts
+
+class TaonFullMaterialModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFullMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonFullMaterialModule, exports: [A11yModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            ScrollingModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFullMaterialModule, imports: [A11yModule,
+            CdkStepperModule,
+            CdkTableModule,
+            CdkTreeModule,
+            DragDropModule,
+            MatAutocompleteModule,
+            MatBadgeModule,
+            MatBottomSheetModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatStepperModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule,
+            ScrollingModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonFullMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        A11yModule,
+                        CdkStepperModule,
+                        CdkTableModule,
+                        CdkTreeModule,
+                        DragDropModule,
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatBottomSheetModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatStepperModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule,
+                        ScrollingModule,
+                    ],
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-full-material.module.ts
+
+class TaonGithubForkMeCornerComponent {
+    constructor() {
+        this.url = 'https://github.com';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonGithubForkMeCornerComponent, selector: "taon-github-fork-me-corner", inputs: { url: "url" }, ngImport: i0, template: "<a href=\"{{ url }}\" class=\"github-corner\" aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-github-fork-me-corner', template: "<a href=\"{{ url }}\" class=\"github-corner\" aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }]
+        }], propDecorators: { url: [{
+                type: Input
+            }] } });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-github-fork-me-corner/taon-github-fork-me-corner.component.ts
+
+class TaonGithubForkMeCornerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerModule, declarations: [TaonGithubForkMeCornerComponent], imports: [CommonModule], exports: [TaonGithubForkMeCornerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonGithubForkMeCornerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [TaonGithubForkMeCornerComponent],
+                    declarations: [TaonGithubForkMeCornerComponent],
+                    providers: [],
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-github-fork-me-corner/taon-github-fork-me-corner.module.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-github-fork-me-corner/index.ts
+
+/* */
+/* */
+class TaonNotificationsService {
+    constructor(toast) {
+        this.toast = toast;
+    }
+    options(type, options) {
+        if (_$1.isString(options)) {
+            options = {
+                // @ts-ignore
+                title: options,
+            };
+        }
+        return options;
+    }
+    success(options) {
+        const opt = this.options('success', options);
+        return this.toast.success(opt.title);
+    }
+    error(options) {
+        const opt = this.options('error', options);
+        return this.toast.error(opt.title);
+    }
+    warn(options) {
+        const opt = this.options('warning', options);
+        return this.toast.warning(opt.title);
+    }
+    info(options) {
+        const opt = this.options('info', options);
+        return this.toast.info(opt.title);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsService, deps: [{ token: i1$1.HotToastService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HotToastService }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-notifications/taon-notifications.service.ts
+
+class TaonNotificationsComponent {
+    constructor(notification) {
+        this.notification = notification;
+    }
+    ngOnInit() { }
+    init(subscribtionsArray, template, callback) {
+        subscribtionsArray.push(Resource.listenErrors.subscribe(err => {
+            this.notification.error(err.msg);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsComponent, deps: [{ token: TaonNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonNotificationsComponent, selector: "taon-notifications", ngImport: i0, template: "<!-- <p>\n  notyfications works!\n</p> -->\n", styles: [":host{position:absolute;width:0px;height:0px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-notifications', template: "<!-- <p>\n  notyfications works!\n</p> -->\n", styles: [":host{position:absolute;width:0px;height:0px}\n"] }]
+        }], ctorParameters: () => [{ type: TaonNotificationsService }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-notifications/taon-notifications.component.ts
+
+class TaonNotificationOptions {
+}
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-notifications/taon-notifications.models.ts
+
+class TaonNotificationsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsModule, declarations: [TaonNotificationsComponent], exports: [TaonNotificationsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsModule, providers: [TaonNotificationsService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonNotificationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [TaonNotificationsComponent],
+                    declarations: [TaonNotificationsComponent],
+                    providers: [TaonNotificationsService],
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-notifications/taon-notifications.module.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-notifications/index.ts
+
+class TaonSessionPasscodeComponent {
+    constructor(element, domSanitizer, cdr) {
+        this.element = element;
+        this.domSanitizer = domSanitizer;
+        this.cdr = cdr;
+        this.destroyRef = inject$1(DestroyRef);
+        this.display = 'none';
+        this.form = new FormGroup({
+            passcode: new FormControl(),
+        });
+    }
+    ngOnInit() {
+        if (!this.passcode) {
+            this.passcode = '123456';
+        }
+        if (!this.message) {
+            this.message = `
+      This website is only for testing purpose. Please type passcode bellow to see content.
+
+      `;
+        }
+        this.safeMessage = this.domSanitizer.bypassSecurityTrustHtml(this.message);
+        if (this.lastPasscode?.toString() === this.passcode?.toString()) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focus();
+        }
+        interval(1000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
+            this.focus();
+        }))
+            .subscribe();
+    }
+    submit({ passcode }) {
+        if (this.isPasscodeOK(passcode || '')) {
+            this.hide();
+        }
+        else {
+            this.clear();
+        }
+    }
+    isPasscodeOK(passcode) {
+        this.lastPasscode = passcode.toString();
+        return this.passcode.toString() === passcode;
+    }
+    ngAfterViewInit() { }
+    focus() {
+        this.element.nativeElement.querySelector('input')?.focus();
+    }
+    hide() {
+        this.display = 'none';
+    }
+    show() {
+        this.display = 'block';
+    }
+    clear() {
+        this.form.controls.passcode.setValue('');
+    }
+    onKeyup(event) {
+        if (this.isPasscodeOK(event.target.value || '')) {
+            this.hide();
+            return;
+        }
+        const key = event.keyCode || event.charCode;
+        if (key === 8 || key === 46 || this.lastPasscode?.length > 5) {
+            this.clear();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonSessionPasscodeComponent, isStandalone: true, selector: "taon-session-passcode", inputs: { passcode: "passcode", message: "message" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+__decorate([
+    (Stor.property.in.localstorage
+        .for(TaonSessionPasscodeComponent)
+        .withDefaultValue('')),
+    __metadata("design:type", String)
+], TaonSessionPasscodeComponent.prototype, "lastPasscode", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonSessionPasscodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-session-passcode', standalone: true, imports: [PasswordModule, CommonModule, ReactiveFormsModule, FormsModule], template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Self
+                }] }, { type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-session-passcode/taon-session-passcode.component.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-session-passcode/index.ts
+
+const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total;
+class TaonProgressBarComponent {
+    constructor() {
+        this.handlers = [];
+        this.options = _$1.merge({
+            min: 8,
+            max: 100,
+            speed: 200,
+            trickleSpeed: 300,
+            debounceTime: 0,
+            ease: 'linear',
+            spinnerPosition: 'right',
+            direction: 'ltr+',
+            color: 'gray',
+            fixed: true,
+            meteor: true,
+            spinner: true,
+            thick: false,
+        }, _$1.get(ENV, `plugins['ngx-progressbar']`));
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.handlers.forEach(h => h.unsubscribe());
+    }
+    ngAfterViewInit() {
+        this.loadProgressBar(void 0, axios);
+    }
+    loadProgressBar(config, instance = axios) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: TaonProgressBarComponent, selector: "taon-progress-bar", inputs: { isDesktop: "isDesktop" }, viewQueries: [{ propertyName: "labProgress", first: true, predicate: ["labProgress"], descendants: true }], ngImport: i0, template: "<ng-progress\n  #labProgress\n  id=\"lab\"\n  [meteor]=\"options.meteor\"\n  [color]=\"options.color\"\n  [min]=\"options.min\"\n  [max]=\"options.max\"\n  [speed]=\"options.speed\"\n  [spinner]=\"\n    options.spinner &&\n    (!admin.adminPanelIsOpen ||\n      (admin.adminPanelIsOpen && (admin.draggablePopupMode || !isDesktop)))\n  \"\n  [spinnerPosition]=\"options.spinnerPosition\"\n  [direction]=\"options.direction\"\n  [trickleSpeed]=\"options.trickleSpeed\"\n  [debounceTime]=\"options.debounceTime\"\n  [ease]=\"options.ease\"\n  [thick]=\"options.thick\"\n  [fixed]=\"options.fixed\">\n</ng-progress>\n<!-- (started)=\"onProgressStarted()\"\n             (completed)=\"onProgressCompleted()\" -->\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i1$2.NgProgressComponent, selector: "ng-progress", inputs: ["id", "min", "max", "ease", "color", "speed", "thick", "fixed", "meteor", "spinner", "trickleSpeed", "debounceTime", "trickleFunc", "spinnerPosition", "direction"], outputs: ["started", "completed"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-progress-bar', template: "<ng-progress\n  #labProgress\n  id=\"lab\"\n  [meteor]=\"options.meteor\"\n  [color]=\"options.color\"\n  [min]=\"options.min\"\n  [max]=\"options.max\"\n  [speed]=\"options.speed\"\n  [spinner]=\"\n    options.spinner &&\n    (!admin.adminPanelIsOpen ||\n      (admin.adminPanelIsOpen && (admin.draggablePopupMode || !isDesktop)))\n  \"\n  [spinnerPosition]=\"options.spinnerPosition\"\n  [direction]=\"options.direction\"\n  [trickleSpeed]=\"options.trickleSpeed\"\n  [debounceTime]=\"options.debounceTime\"\n  [ease]=\"options.ease\"\n  [thick]=\"options.thick\"\n  [fixed]=\"options.fixed\">\n</ng-progress>\n<!-- (started)=\"onProgressStarted()\"\n             (completed)=\"onProgressCompleted()\" -->\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { labProgress: [{
+                type: ViewChild,
+                args: ['labProgress']
+            }], isDesktop: [{
+                type: Input
+            }] } });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-progress-bar/taon-progress-bar.component.ts
+
+class TaonProgressBarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarModule, declarations: [TaonProgressBarComponent], imports: [CommonModule, i1$2.NgProgressModule], exports: [TaonProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarModule, imports: [CommonModule, NgProgressModule.withConfig({})] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, NgProgressModule.withConfig({})],
+                    declarations: [TaonProgressBarComponent],
+                    exports: [TaonProgressBarComponent],
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-progress-bar/taon-progress-bar.module.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-progress-bar/index.ts
+
+const log = Log.create('Table wrapper', Level.__NOTHING);
+const defaultColumns = [
+    {
+        header: 'ID',
+        field: 'id',
+    },
+    {
+        header: 'NAME',
+        field: 'name',
+    },
+];
+class TaonTableComponent {
+    constructor() {
+        this.pageNumber = 1;
+        this.pageSize = 5;
+        this.allowedColumns = [];
+        this.rows = _.times(20, id => {
+            return {
+                id,
+                name: `Amazing ${id} row `,
+            };
+        });
+        this.columns = defaultColumns;
+        this.pageSizeOptions = [5, 10, 20];
+        this.expansionChange = new EventEmitter();
+        this.addingItem = new EventEmitter();
+        this.searchInputChange$ = defer(() => fromEvent(this.search?.nativeElement, 'keyup')).pipe(map(c => c.target['value']), debounceTime(500), distinctUntilChanged(), share(), tap(data => {
+            console.log({ data });
+        }));
+        this.expandable = false;
+        this.showPaginator = true;
+        this.isLoading = false;
+        this.totalElements = 100;
+        this.sub = new Subscription();
+    }
+    async ngOnInit() {
+        if (_.isString(this.entity)) {
+            this.entity = CLASS.getBy(this.entity);
+        }
+        this.sub.add(this.searchInputChange$.subscribe());
+        if (!!this.entity) {
+            this.rows = [];
+        }
+        this.expandable = !!this.expansionTemplate;
+        log.i('this.columns,', this.columns);
+        const columnsConfigSameAsDefault = _.isEqual(this.columns, defaultColumns);
+        const entityClass = this.entity;
+        if (entityClass && columnsConfigSameAsDefault) {
+            log.i('this.crud.entity', CLASS.describeProperites(entityClass));
+            try {
+                const props = CLASS.describeProperites(entityClass);
+                let columns = props
+                    .filter(prop => this.allowedColumns.length > 0
+                    ? this.allowedColumns.includes(prop)
+                    : true)
+                    .map(prop => {
+                    return {
+                        header: _.upperCase(prop),
+                        field: prop,
+                    };
+                });
+                const extra = this.allowedColumns.filter(f => !props.includes(f));
+                columns = [
+                    ...columns,
+                    ...extra.map(prop => {
+                        return {
+                            header: _.upperCase(prop),
+                            field: prop,
+                        };
+                    }),
+                ];
+                if (!this.expandable) {
+                    for (let index = 0; index < columns.length; index++) {
+                        const col = columns[index];
+                        delete col.showExpand;
+                    }
+                }
+                this.columns = columns;
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        else {
+        }
+        if (!this.entity) {
+            this.showPaginator = false;
+        }
+        await this.retriveData();
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    async getNextPage(e) {
+        this.pageNumber = e.pageIndex + 1;
+        this.pageSize = e.pageSize;
+        await this.retriveData();
+    }
+    async retriveData() {
+        // @ts-ignore
+    }
+    expansionRow(e) {
+        this.expansionChange.next(e);
+    }
+    onTableContextMenu(e) {
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-table', 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"] }]
+        }], ctorParameters: () => [], propDecorators: { pageNumber: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], allowedColumns: [{
+                type: Input
+            }], entity: [{
+                type: Input
+            }], expansionTemplate: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], expansionChange: [{
+                type: Output
+            }], addingItem: [{
+                type: Output
+            }], search: [{
+                type: ViewChild,
+                args: ['search', { static: true }]
+            }] } });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-table/taon-table.component.ts
+
+class TaonTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: TaonTableModule, declarations: [TaonTableComponent], imports: [CommonModule,
+            MatSelectModule,
+            MtxGridModule,
+            MatFormFieldModule,
+            MatInputModule,
+            StaticColumnsModule,
+            MatIconModule,
+            MatButtonModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [TaonTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableModule, imports: [CommonModule,
+            MatSelectModule,
+            MtxGridModule,
+            MatFormFieldModule,
+            MatInputModule,
+            StaticColumnsModule,
+            MatIconModule,
+            MatButtonModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: TaonTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatSelectModule,
+                        MtxGridModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        StaticColumnsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [TaonTableComponent],
+                    declarations: [TaonTableComponent],
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=taon lib/ui/taon-table/taon-table.module.ts
+
+;
+({}); // @--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;
+    }
+    set opened(v) {
+        if (v && !this.openedOnce) {
+            this.openedOnce = true;
+        }
+        if (this.wasOpenDraggablePopup) {
+            this.wasOpenDraggablePopup = false;
+            this.admin.draggablePopupMode = true;
+        }
+        this.admin.adminPanelIsOpen = v;
+    }
+    constructor(breakpointsService) {
+        this.breakpointsService = breakpointsService;
+        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;
+        this.height = 100;
+        this.openedOnce = false;
+        this.reloading = false;
+        this.showPasscode = _$1.isString(ENV.passcode) || _$1.isObject(ENV.passcode);
+        this.passcode = _$1.isString(ENV.passcode)
+            ? ENV.passcode
+            : _$1.isObject(ENV.passcode)
+                ? ENV.passcode.code
+                : '';
+        this.message = _$1.isObject(ENV.passcode)
+            ? ENV.passcode.message
+            : void 0;
+        this.dragPositionZero = { x: 0, y: 0 };
+        this.taonAdminModeConfigurationDataChanged = new EventEmitter();
+        this.taonAdminModeConfigurationData = {};
+        this.admin.cmp = this;
+        this.breakpointsService
+            .listenTo()
+            .pipe(takeUntil(this.$destroy))
+            .subscribe(breakpoint => {
+            // @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();
+        this.dragPosition = { x: this.dragPositionX, y: this.dragPositionY };
+        this.openedOnce = this.opened;
+    }
+    ngAfterViewInit() {
+        //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+        //Add 'implements AfterViewInit' to the class.
+        setTimeout(() => {
+            this.height = window.innerHeight;
+            if (this.admin.draggablePopupMode) {
+                this.reloadTabs();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.$destroy.next(void 0);
+        this.$destroy.complete();
+    }
+    onResize(event) {
+        this.height = window.innerHeight;
+    }
+    async toogle() {
+        this.opened = !this.opened;
+    }
+    async toogleFullScreen() {
+        this.admin.draggablePopupMode = true;
+        this.admin.draggablePopupModeFullScreen =
+            !this.admin.draggablePopupModeFullScreen;
+        this.resetDrag();
+    }
+    resetDrag() {
+        this.dragPositionX = 0;
+        this.dragPositionY = 0;
+        this.dragPosition = { x: this.dragPositionX, y: this.dragPositionY };
+    }
+    moved(c) {
+        this.dragPositionX += c.distance.x;
+        this.dragPositionY += c.distance.y;
+    }
+    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"] }] }); }
+}
+__decorate([
+    Stor.property.in.localstorage
+        .for(TaonAdminModeConfigurationComponent)
+        .withDefaultValue(0),
+    __metadata("design:type", Number)
+], TaonAdminModeConfigurationComponent.prototype, "dragPositionX", void 0);
+__decorate([
+    Stor.property.in.localstorage
+        .for(TaonAdminModeConfigurationComponent)
+        .withDefaultValue(0),
+    __metadata("design:type", Number)
+], TaonAdminModeConfigurationComponent.prototype, "dragPositionY", void 0);
+__decorate([
+    Stor.property.in.localstorage
+        .for(TaonAdminModeConfigurationComponent)
+        .withDefaultValue(0),
+    __metadata("design:type", Number)
+], TaonAdminModeConfigurationComponent.prototype, "selectedIndex", void 0);
+__decorate([
+    Stor.property.in.localstorage
+        .for(TaonAdminModeConfigurationComponent)
+        .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: [{
+                type: ViewChild,
+                args: ['tabGroup']
+            }], taonAdminModeConfigurationDataChanged: [{
+                type: Output
+            }], taonAdminModeConfigurationData: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+;
+({}); // @--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
+
+;
+({}); // @--end-of-file-for-module=taon lib/ui/index.ts
+
+;
+({}); // @--end-of-file-for-module=taon lib/constants.ts
+
+var Taon;
+(function (Taon) {
+    Taon.Http = Http;
+    Taon.Base = Base;
+    Taon.getResponseValue = getResponseValue;
+    Taon.Controller = TaonController;
+    Taon.Entity = TaonEntity;
+    Taon.Provider = TaonProvider;
+    Taon.Repository = TaonRepository;
+    Taon.Subscriber = TaonSubscriber;
     Taon.isBrowser = coreHelpers.Helpers.isBrowser;
-    /**
-     * @deprecated
-     */
     Taon.isNode = coreHelpers.Helpers.isNode;
-    /**
-     * @deprecated
-     */
     Taon.isWebSQL = coreHelpers.Helpers.isWebSQL;
-    /**
-     * @deprecated
-     */
     Taon.isElectron = coreHelpers.Helpers.isElectron;
     Taon.createContext = createContext;
     Taon.inject = inject;
@@ -4897,5 +6265,5 @@ var Taon;
  * Generated bundle index. Do not edit.
  */
 
-export { BaseContext, BaseController, BaseEntity, BaseProvider, BaseRepository, BaseSubscriber, ClassHelpers, Models, Taon, createContext, inject };
-//# sourceMappingURL=taon.mjs.map
+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 };
+//# sourceMappingURL=taon.mjs.map