taon-ui 21.0.66 → 21.0.67

package/browser/fesm2022/taon-ui-browser.mjs

@@ -1,89 +1,47 @@
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i10 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 * as i0 from '@angular/core';
-import { NgModule, Input, ChangeDetectionStrategy, Component, inject, ElementRef, HostListener, Directive, Pipe, EventEmitter, HostBinding, Output, Injectable, ViewChild, DestroyRef, Self, ChangeDetectorRef, signal, computed, PLATFORM_ID, effect, input, ContentChildren } from '@angular/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i3$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-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 { MatChipsModule } from '@angular/material/chips';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i2$3 from '@angular/material/dialog';
-import { MatDialogModule, MatDialogRef, MatDialog } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import * as i2$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i6 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4 from '@angular/material/sidenav';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$3 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTableModule } from '@angular/material/table';
-import * as i3$2 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 i1 from '@angular/common';
 import { CommonModule, NgIf, AsyncPipe, JsonPipe, isPlatformBrowser, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, inject, ElementRef, HostListener, Directive, Pipe, EventEmitter, HostBinding, Output, Injectable, ChangeDetectorRef, ViewChild, NgModule, signal, computed, DestroyRef, Self, PLATFORM_ID, effect, input, ContentChildren } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Log, Level } from 'ng2-logger/browser';
-import { _, axios, Helpers, json5 } from 'tnp-core/browser';
-import * as i2$1 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
-import * as i3 from 'ngx-scrollbar';
-import { NgScrollbarModule } from 'ngx-scrollbar';
-import { interval, tap, Subject, Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, withLatestFrom, Subscription, defer, fromEvent, debounceTime, share } from 'rxjs';
-import * as i4$1 from 'static-columns/browser';
-import { StaticColumnsModule } from 'static-columns/browser';
-import { TaonAdminPanelMode, TaonAdminService, Symbols } from 'taon/browser';
-import { TaonStor } from 'taon-storage/browser';
-import { Resource, getDefaultModel } from 'ng2-rest/browser';
-import * as i1$2 from '@ngneat/hot-toast';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { PasswordModule } from 'primeng/password';
+import { _, axios } from 'tnp-core/browser';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/dialog';
+import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i2$3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i2$4 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
+import * as i7 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MtxLoaderModule } from '@ng-matero/extensions/loader';
 import { Translation, TranslateDirective, TranslateService } from '@taon-dev/i18n/browser';
 import { InputTextModule } from 'primeng/inputtext';
+import { Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, Subject, withLatestFrom, tap, Subscription, interval } from 'rxjs';
 import { distinctUntilChanged as distinctUntilChanged$1, takeUntil, filter } from 'rxjs/operators';
 import { TaonStripeCloudflareWorker } from '@taon-dev/api-workers/browser';
-import * as i3$3 from '@ng-matero/extensions/grid';
-import { MtxGridModule } from '@ng-matero/extensions/grid';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { PasswordModule } from 'primeng/password';
+import { TaonStor } from 'taon-storage/browser';
+import * as i1$2 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import * as i3 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 // THIS FILE IS GENERATED - DO NOT MODIFY
 /**
@@ -109,7 +67,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.66';
+const CURRENT_PACKAGE_VERSION = '21.0.67';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }
@@ -157,145 +115,6 @@ async function startCli(argsv, filename) {
     return (void 0);
 }
 
-//#region imports
-//#endregion
-/**
- * @deprecated too heavy!
- */
-class TaonFullMaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonFullMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", 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: "21.0.9", 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: "21.0.9", 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,
-                    ],
-                }]
-        }] });
-
 //#region imports
 //#endregion
 class TaonBootstrapNavbarComponent {
@@ -415,604 +234,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { taonInjectHTML: [{
-                type: Input
-            }] } });
-
-//#region imports
-//#endregion
-const log$1 = Log.create(`[taon-helpers] long-press`, Level.WARN, Level.ERROR);
-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 = _.debounce(() => {
-            this.endPress();
-        }, 500);
-    }
-    get press() {
-        return this.pressing;
-    }
-    get longPress() {
-        return this.longPressing;
-    }
-    onMouseDown(event) {
-        // don't do right/middle clicks
-        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);
-            }
-        }, 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: "21.0.9", ngImport: i0, type: TaonLongPress, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", 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: "21.0.9", 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']
-            }] } });
-
-var ViewMode;
-(function (ViewMode) {
-    ViewMode["Add"] = "Add";
-    ViewMode["Edit"] = "Edit";
-    ViewMode["Preview"] = "Preview";
-})(ViewMode || (ViewMode = {}));
-
-//#region imports
-//#endregion
-class TaonNotificationsService {
-    constructor(toast) {
-        this.toast = toast;
-    }
-    options(type, options) {
-        if (_.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: "21.0.9", ngImport: i0, type: TaonNotificationsService, deps: [{ token: i1$2.HotToastService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$2.HotToastService }] });
-
-//#region imports
-//#endregion
-class TaonNotificationsComponent {
-    constructor(notification) {
-        this.notification = notification;
-    }
-    ngOnInit() { }
-    init(subscribtionsArray, template, callback) {
-        subscribtionsArray.push(Resource.listenErrors.subscribe(err => {
-            this.notification.error(err.msg);
-            // subscribtionsArray.push(notify.onTap.subscribe(() => {
-            //   callback(err);
-            //   this.modal.open(template);
-            // }) as any);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsComponent, deps: [{ token: TaonNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotificationsComponent, isStandalone: false, 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: "21.0.9", ngImport: i0, type: TaonNotificationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-notifications', standalone: false, template: "<!-- <p>\n  notyfications works!\n</p> -->\n", styles: [":host{position:absolute;width:0px;height:0px}\n"] }]
-        }], ctorParameters: () => [{ type: TaonNotificationsService }] });
-
-//#region imports
-class TaonNotificationOptions {
-}
-//#endregion
-
-//#endregion
-class TaonNotificationsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsModule, declarations: [TaonNotificationsComponent], exports: [TaonNotificationsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsModule, providers: [TaonNotificationsService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                    // CommonModule,
-                    // BrowserAnimationsModule, // required animations module
-                    // HotToastModule.forRoot({
-                    //   position: 'top-right',
-                    // }),
-                    ],
-                    exports: [TaonNotificationsComponent],
-                    declarations: [TaonNotificationsComponent],
-                    providers: [TaonNotificationsService],
-                }]
-        }] });
-
-//#region @browser
-//#endregion
-
-//#region imports
-//#endregion
-// import {
-//   NgProgressConfig,
-//   NgProgressModule,
-//   NgProgressRef,
-// } from 'ngx-progressbar';
-// import { Models } from 'tnp-models';
-// import type { TaonAdmin } from '../taon-admin-mode-configuration';
-const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total;
-class TaonProgressBarComponent {
-    // options: NgProgressConfig = _.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,
-    //   },
-    //   _.get(ENV, `plugins['ngx-progressbar']`),
-    // );
-    constructor() {
-        this.handlers = [];
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.handlers.forEach(h => h.unsubscribe());
-    }
-    ngAfterViewInit() {
-        // this.labProgress.set(20)
-        this.loadProgressBar(void 0, axios);
-    }
-    loadProgressBar(config, instance = axios) {
-        // let requestsCounter = 0;
-        // const setupStartProgress = () => {
-        //   instance.interceptors.request.use(config => {
-        //     requestsCounter++;
-        //     this.labProgress.start();
-        //     return config;
-        //   });
-        // };
-        // const setupUpdateProgress = () => {
-        //   const update = e => {
-        //     // NProgress.inc(calculatePercentage(e.loaded, e.total))
-        //     const percentage = calculatePercentage(e.loaded, e.total) * 100;
-        //     // console.log(`loaded: ${e.loaded}, total: ${e.total} , pecent: ${percentage}`)
-        //     this.labProgress.inc(percentage);
-        //   };
-        //   instance.defaults.onDownloadProgress = update;
-        //   instance.defaults.onUploadProgress = update;
-        // };
-        // const setupStopProgress = () => {
-        //   const responseFunc = response => {
-        //     if (--requestsCounter === 0) {
-        //       this.labProgress.complete();
-        //       // NProgress.done()
-        //     }
-        //     return response;
-        //   };
-        //   const errorFunc = error => {
-        //     if (--requestsCounter === 0) {
-        //       this.labProgress.complete();
-        //       // NProgress.done()
-        //     }
-        //     return Promise.reject(error);
-        //   };
-        //   instance.interceptors.response.use(responseFunc, errorFunc);
-        // };
-        // setupStartProgress();
-        // setupUpdateProgress();
-        // setupStopProgress();
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-        /* */
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonProgressBarComponent, isStandalone: false, 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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-progress-bar', standalone: false, 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
-            }] } });
-
-//#region imports
-//#endregion
-// import { NgProgressConfig, NgProgressModule } from 'ngx-progressbar';
-class TaonProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, declarations: [TaonProgressBarComponent], imports: [CommonModule], exports: [TaonProgressBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        // NgProgressModule.withConfig({})
-                    ],
-                    declarations: [TaonProgressBarComponent],
-                    exports: [TaonProgressBarComponent],
-                }]
-        }] });
-
-//#region @browser
-//#endregion
-
-//#region imports
-class TaonSessionPasscodeComponent {
-    constructor(element, domSanitizer, cdr) {
-        this.element = element;
-        this.domSanitizer = domSanitizer;
-        this.cdr = cdr;
-        this.destroyRef = inject(DestroyRef);
-        this.lastPasscode = TaonStor.inLocalstorage({
-            defaultValue: '',
-            keyOrPath: 'lastPasscode',
-        }, TaonSessionPasscodeComponent);
-        this.display = 'none';
-        this.form = new FormGroup({
-            passcode: new FormControl(),
-        });
-    }
-    async ngOnInit() {
-        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);
-        await this.lastPasscode.ready();
-        if (this.lastPasscode()?.toString() === this.passcode?.toString()) {
-            this.hide();
-        }
-        else {
-            this.show();
-            this.focus();
-        }
-        this.cdr.markForCheck();
-        interval(1000)
-            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
-            this.focus();
-            this.cdr.markForCheck();
-        }))
-            .subscribe();
-    }
-    submit({ passcode }) {
-        if (this.isPasscodeOK(passcode || '')) {
-            this.hide();
-        }
-        else {
-            this.clear();
-        }
-    }
-    isPasscodeOK(passcode) {
-        this.lastPasscode.set(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: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", 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-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\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</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\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</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;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$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
-                type: Input,
-                args: [{
-                        required: true,
-                    }]
-            }], message: [{
-                type: Input
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }] } });
-
-//#region @browser
-//#endregion
-
-//#region imports
-//#endregion
-class TaonAdminModeConfigurationComponent {
-    constructor() {
-        //#region fields & getters
-        this.TaonAdminPanelMode = TaonAdminPanelMode;
-        this.$destroy = new Subject();
-        this.cdr = inject(ChangeDetectorRef);
-        this.taonAdminService = inject(TaonAdminService);
-        this.isWebSQLMode = Helpers.getIsWebSQL();
-        this.height = 0;
-        this.reloading = signal(false, ...(ngDevMode ? [{ debugName: "reloading" }] : []));
-        this.scrollableEnabled = false;
-        this.dragPositionX = TaonStor.inLocalstorage({
-            defaultValue: 0,
-            keyOrPath: 'dragPositionX',
-        }, TaonAdminModeConfigurationComponent);
-        this.dragPositionY = TaonStor.inLocalstorage({
-            defaultValue: 0,
-            keyOrPath: 'dragPositionY',
-        }, TaonAdminModeConfigurationComponent);
-        this.dragPositionZero = { x: 0, y: 0 };
-        this.selectedIndex = TaonStor.inLocalstorage({
-            defaultValue: 0,
-            keyOrPath: 'selectedIndex',
-        }, TaonAdminModeConfigurationComponent);
-    }
-    //#endregion
-    //#region on init
-    async ngOnInit() {
-        await TaonStor.awaitAll();
-        this.dragPosition = { x: this.dragPositionX(), y: this.dragPositionY() };
-    }
-    //#endregion
-    //#region after view init
-    ngAfterViewInit() {
-        //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
-        //Add 'implements AfterViewInit' to the class.
-        setTimeout(() => {
-            this.onResize();
-            // TODO QUICK_FIX for draggble popup proper first index load on tabs
-            if (this.taonAdminService.adminPanelMode() !== TaonAdminPanelMode.ICON) {
-                this.reloadTabs();
-            }
-        });
-    }
-    //#endregion
-    //#region on destroy
-    ngOnDestroy() {
-        this.$destroy.next(void 0);
-        this.$destroy.complete();
+                type: Input
+            }] } });
+
+//#region imports
+//#endregion
+const log = Log.create(`[taon-helpers] long-press`, Level.WARN, Level.ERROR);
+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 = _.debounce(() => {
+            this.endPress();
+        }, 500);
     }
-    //#endregion
-    //#region on resize
-    onResize(event) {
-        this.height = window.innerHeight;
+    get press() {
+        return this.pressing;
     }
-    //#endregion
-    //#region methods
-    reloadTabs() {
-        this.reloading.set(true);
-        setTimeout(() => {
-            this.reloading.set(false);
-            console.log('reloading done');
-        });
+    get longPress() {
+        return this.longPressing;
     }
-    resetDrag() {
-        this.dragPositionX.set(0);
-        this.dragPositionY.set(0);
-        this.dragPosition = { x: this.dragPositionX(), y: this.dragPositionY() };
+    onMouseDown(event) {
+        // don't do right/middle clicks
+        log.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.d(`long pressing start  pressDuration:${this.pressDuration} `);
+                this.onLongPress.emit(event);
+                this.loop(event);
+            }
+        }, this.pressDuration);
+        this.loop(event);
     }
-    moved(c) {
-        this.dragPositionX.set(this.dragPositionX() + c.distance.x);
-        this.dragPositionY.set(this.dragPositionY() + c.distance.y);
+    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();
+            }
+        }
     }
-    //#endregion
-    isLink(tab) {
-        return typeof tab?.templateOrIframeLink === 'string';
+    loop(event) {
+        if (this.longPressing) {
+            this.timeout = setTimeout(() => {
+                log.d(`emil longpressing`);
+                this.triggerEnd();
+                this.onLongPressing.emit(event);
+                this.loop(event);
+            }, 50);
+        }
     }
-    getIfrmeLink(tab) {
-        if (typeof tab.templateOrIframeLink === 'string') {
-            if (tab.templateOrIframeLink?.startsWith('http')) {
-                return tab.templateOrIframeLink;
-            }
-            return `${window.location.origin}${window.location.pathname}${tab.templateOrIframeLink}`;
+    endPress(emit = true) {
+        this.allowTrigger = false;
+        clearTimeout(this.timeout);
+        this.longPressing = false;
+        this.pressing = false;
+        if (emit) {
+            log.d(`EMIT END`);
+            this.onLongPressEnd.emit(true);
+        }
+        else {
+            log.d(`NOT EMIT END`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { scrollableEnabled: "scrollableEnabled", showPasscode: "showPasscode", passcode: "passcode", message: "message" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\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<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.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}.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}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i3.NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { 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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: 
-                // TaonDbAdminComponent,
-                TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
+    onMouseUp() {
+        this.endPress(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLongPress, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", 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: "21.0.9", ngImport: i0, type: TaonAdminModeConfigurationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-admin-mode-configuration', imports: [
-                        CommonModule,
-                        StaticColumnsModule,
-                        FormsModule,
-                        NgScrollbarModule,
-                        TaonProgressBarModule,
-                        TaonNotificationsModule,
-                        MatSidenavModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatCardModule,
-                        MatCheckboxModule,
-                        MatInputModule,
-                        MatTabsModule,
-                        ReactiveFormsModule,
-                        DragDropModule,
-                        // TaonDbAdminComponent,
-                        TaonSessionPasscodeComponent,
-                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\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<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.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}.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}.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"] }]
-        }], propDecorators: { scrollableEnabled: [{
-                type: Input
-            }], showPasscode: [{
-                type: Input
-            }], passcode: [{
-                type: Input
-            }], message: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLongPress, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[taonLongPress]',
+                    standalone: true,
+                }]
+        }], propDecorators: { pressDuration: [{
                 type: Input
-            }], onResize: [{
+            }], 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: ['window:resize', ['$event']]
+                args: ['mouseup']
             }] } });
 
+var ViewMode;
+(function (ViewMode) {
+    ViewMode["Add"] = "Add";
+    ViewMode["Edit"] = "Edit";
+    ViewMode["Preview"] = "Preview";
+})(ViewMode || (ViewMode = {}));
+
 class GoogleAuthService {
     constructor(zone) {
         this.zone = zone;
@@ -1279,7 +621,7 @@ class AuthDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, decorators: [{
             type: Component,
@@ -1349,7 +691,7 @@ class AuthButtonComponent {
             : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, decorators: [{
             type: Component,
@@ -1752,21 +1094,176 @@ class TaonLangSelectorComponent {
         const select = event.target;
         await this.translateService.changeGlobalLang(select.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonLangSelectorComponent, isStandalone: true, selector: "taon-lang-selector", ngImport: i0, template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonLangSelectorComponent, isStandalone: true, selector: "taon-lang-selector", ngImport: i0, template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-lang-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateDirective, JsonPipe], template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+class TaonNotFoundComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotFoundComponent, isStandalone: true, selector: "taon-not-found", ngImport: i0, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-not-found', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+//#region imports
+//#endregion
+// import {
+//   NgProgressConfig,
+//   NgProgressModule,
+//   NgProgressRef,
+// } from 'ngx-progressbar';
+// import { Models } from 'tnp-models';
+// import type { TaonAdmin } from '../taon-admin-mode-configuration';
+const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total;
+class TaonProgressBarComponent {
+    // options: NgProgressConfig = _.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,
+    //   },
+    //   _.get(ENV, `plugins['ngx-progressbar']`),
+    // );
+    constructor() {
+        this.handlers = [];
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.handlers.forEach(h => h.unsubscribe());
+    }
+    ngAfterViewInit() {
+        // this.labProgress.set(20)
+        this.loadProgressBar(void 0, axios);
+    }
+    loadProgressBar(config, instance = axios) {
+        // let requestsCounter = 0;
+        // const setupStartProgress = () => {
+        //   instance.interceptors.request.use(config => {
+        //     requestsCounter++;
+        //     this.labProgress.start();
+        //     return config;
+        //   });
+        // };
+        // const setupUpdateProgress = () => {
+        //   const update = e => {
+        //     // NProgress.inc(calculatePercentage(e.loaded, e.total))
+        //     const percentage = calculatePercentage(e.loaded, e.total) * 100;
+        //     // console.log(`loaded: ${e.loaded}, total: ${e.total} , pecent: ${percentage}`)
+        //     this.labProgress.inc(percentage);
+        //   };
+        //   instance.defaults.onDownloadProgress = update;
+        //   instance.defaults.onUploadProgress = update;
+        // };
+        // const setupStopProgress = () => {
+        //   const responseFunc = response => {
+        //     if (--requestsCounter === 0) {
+        //       this.labProgress.complete();
+        //       // NProgress.done()
+        //     }
+        //     return response;
+        //   };
+        //   const errorFunc = error => {
+        //     if (--requestsCounter === 0) {
+        //       this.labProgress.complete();
+        //       // NProgress.done()
+        //     }
+        //     return Promise.reject(error);
+        //   };
+        //   instance.interceptors.response.use(responseFunc, errorFunc);
+        // };
+        // setupStartProgress();
+        // setupUpdateProgress();
+        // setupStopProgress();
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonProgressBarComponent, isStandalone: false, 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-lang-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateDirective, JsonPipe], template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'taon-progress-bar', standalone: false, 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
+            }] } });
 
-class TaonNotFoundComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotFoundComponent, isStandalone: true, selector: "taon-not-found", ngImport: i0, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+//#region imports
+//#endregion
+// import { NgProgressConfig, NgProgressModule } from 'ngx-progressbar';
+class TaonProgressBarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, declarations: [TaonProgressBarComponent], imports: [CommonModule], exports: [TaonProgressBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-not-found', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // NgProgressModule.withConfig({})
+                    ],
+                    declarations: [TaonProgressBarComponent],
+                    exports: [TaonProgressBarComponent],
+                }]
         }] });
 
 class TaonRumbleComponent {
@@ -1829,6 +1326,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Output
             }] } });
 
+//#region imports
+class TaonSessionPasscodeComponent {
+    constructor(element, domSanitizer, cdr) {
+        this.element = element;
+        this.domSanitizer = domSanitizer;
+        this.cdr = cdr;
+        this.destroyRef = inject(DestroyRef);
+        this.lastPasscode = TaonStor.inLocalstorage({
+            defaultValue: '',
+            keyOrPath: 'lastPasscode',
+        }, TaonSessionPasscodeComponent);
+        this.display = 'none';
+        this.form = new FormGroup({
+            passcode: new FormControl(),
+        });
+    }
+    async ngOnInit() {
+        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);
+        await this.lastPasscode.ready();
+        if (this.lastPasscode()?.toString() === this.passcode?.toString()) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focus();
+        }
+        this.cdr.markForCheck();
+        interval(1000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
+            this.focus();
+            this.cdr.markForCheck();
+        }))
+            .subscribe();
+    }
+    submit({ passcode }) {
+        if (this.isPasscodeOK(passcode || '')) {
+            this.hide();
+        }
+        else {
+            this.clear();
+        }
+    }
+    isPasscodeOK(passcode) {
+        this.lastPasscode.set(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: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", 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-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\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</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;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: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\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</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;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$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], message: [{
+                type: Input
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
 var TaonThemeMode;
 (function (TaonThemeMode) {
     TaonThemeMode["AUTO"] = "auto";
@@ -1926,7 +1518,7 @@ class TaonSettingsComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, decorators: [{
             type: Component,
@@ -1942,36 +1534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"] }]
         }] });
 
-//#region imports
-//#endregion
-const t$1 = Translation.for('src/lib/ui/taon-theme/taon-theme.component.ts', { "src/lib/ui/taon-theme/taon-theme.component.html": { "en-US": async () => (await import('./taon-ui-browser-taon-theme.component.html.en-US.i18n.data-CoRxBSnr.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-theme.component.html.pl-PL.i18n.data-BtT2qLG9.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-theme.component.html.de-DE.i18n.data-iiWo6rX0.mjs')).default } });
-/**
- * @deprecated use TaonSettings
- */
-class TaonThemeComponent {
-    constructor() {
-        this.t = t$1.for(this);
-        this.TaonThemeMode = TaonThemeMode;
-        this.dialogRef = inject((MatDialogRef));
-        this.taonTheme = inject(TaonThemeService);
-    }
-    close() {
-        this.dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonThemeComponent, isStandalone: true, selector: "taon-theme", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-theme', imports: [
-                        MatSlideToggleModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        TranslateDirective,
-                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n" }]
-        }] });
-
 //#region imports
 //#endregion
 class TaonSimpleLayoutComponent {
@@ -1980,19 +1542,35 @@ class TaonSimpleLayoutComponent {
         this.dialog = inject(MatDialog);
         this.theme = inject(TaonThemeService);
         this.navItems = input(...(ngDevMode ? [undefined, { debugName: "navItems" }] : []));
+        this.mobileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileMenuOpen" }] : []));
+    }
+    navigateToMobile(item) {
+        this.mobileMenuOpen.set(false);
+        this.navigateTo(item);
+    }
+    openSettingsFromMobileMenu() {
+        this.mobileMenuOpen.set(false);
+        this.openDialog(200, 200);
     }
     navigateTo(item) {
-        this.router.navigateByUrl(item.path);
+        const primarySegments = item.path.split('/').filter(Boolean);
+        this.router.navigate([
+            {
+                outlets: {
+                    primary: primarySegments,
+                },
+            },
+        ]);
     }
     openDialog(enterAnimationDuration, exitAnimationDuration) {
-        this.dialog.open(TaonThemeComponent, {
+        this.dialog.open(TaonSettingsComponent, {
             width: '400px',
             enterAnimationDuration,
             exitAnimationDuration,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { hideThemeSettings: { classPropertyName: "hideThemeSettings", publicName: "hideThemeSettings", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideHeader) {\n  <header\n  class=\"relative z-10 inline-flex w-full flex-row items-center justify-end bg-white shadow-md\">\n    <div class=\"flex flex-1 flex-row items-center justify-right\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\">\n                </mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div class=\"flex shrink-0 flex-row items-center justify-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { hideThemeSettings: { classPropertyName: "hideThemeSettings", publicName: "hideThemeSettings", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                Settings\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, decorators: [{
             type: Component,
@@ -2008,27 +1586,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         RouterModule,
                         MatDialogModule,
                         JsonPipe,
-                        TaonThemeComponent,
-                    ], template: "@if (!hideHeader) {\n  <header\n  class=\"relative z-10 inline-flex w-full flex-row items-center justify-end bg-white shadow-md\">\n    <div class=\"flex flex-1 flex-row items-center justify-right\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\">\n                </mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div class=\"flex shrink-0 flex-row items-center justify-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"] }]
+                        TaonSettingsComponent,
+                    ], template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                Settings\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"] }]
         }], propDecorators: { hideThemeSettings: [{
                 type: Input
             }], hideHeader: [{
                 type: Input
             }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }] } });
 
-//#endregion
-const TaonSimpleLayoutRoutes = [
-    {
-        path: '',
-        component: TaonSimpleLayoutComponent,
-    },
-    // {
-    //   path: 'anothermodulepath',
-    //   loadChildren: () => import('anothermodule')
-    //     .then(m => m.AnotherLazyModule),
-    // },
-];
-
 class TaonSlideContentContentChildComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSlideContentContentChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSlideContentContentChildComponent, isStandalone: true, selector: "taon-slide-content-child", inputs: { assignToState: "assignToState" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:block;flex:0 0 100%;width:100%;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2085,12 +1650,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }] } });
 
-const t = Translation.for('src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts', { "src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.en-US.i18n.data-Dm_w_Ca7.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.pl-PL.i18n.data-Ceog6BY8.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.de-DE.i18n.data-qkknVsLY.mjs')).default } }, {
+const t$1 = Translation.for('src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts', { "src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.en-US.i18n.data-Dm_w_Ca7.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.pl-PL.i18n.data-Ceog6BY8.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-stripe-buy-button.component.ts.de-DE.i18n.data-qkknVsLY.mjs')).default } }, {
 // debug: true
 });
 class TaonStripeBuyButtonComponent {
     constructor() {
-        this.t = t.for(this);
+        this.t = t$1.for(this);
         /**
          * optional label for buy button
          */
@@ -2144,7 +1709,7 @@ class TaonStripeBuyButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, decorators: [{
             type: Component,
@@ -2171,258 +1736,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-//#region constants
-const log = Log.create('Table wrapper', 
-// levels
-Level.WARN, Level.ERROR);
-const defaultColumns = [
-    {
-        header: 'ID',
-        field: 'id',
-    },
-    {
-        header: 'NAME',
-        field: 'name',
-    },
-];
-//#endregion
-class TaonTableComponent {
+const t = Translation.for('src/lib/ui/taon-theme/taon-theme.component.ts', { "src/lib/ui/taon-theme/taon-theme.component.html": { "en-US": async () => (await import('./taon-ui-browser-taon-theme.component.html.en-US.i18n.data-CoRxBSnr.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-theme.component.html.pl-PL.i18n.data-BtT2qLG9.mjs')).default, "de-DE": async () => (await import('./taon-ui-browser-taon-theme.component.html.de-DE.i18n.data-iiWo6rX0.mjs')).default } });
+/**
+ * @deprecated use TaonSettings
+ */
+class TaonThemeComponent {
     constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        //#region fields
-        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.expandable = false;
-        this.showPaginator = true;
-        this.isLoading = false;
-        this.totalElements = 100;
-        this.sub = new Subscription();
-    }
-    //#endregion
-    get entity() {
-        return this.entityCrudController?.entityClassResolveFn();
-    }
-    //#region hooks
-    //#region hooks / on init
-    async ngOnInit() {
-        if (!this.hideSearch) {
-            this.searchInputChange$ = defer(() => fromEvent(this.search?.nativeElement, 'keyup')).pipe(map(c => c.target['value']), debounceTime(500), distinctUntilChanged(), share(), tap(data => {
-                console.log({ data });
-            }));
-            this.sub.add(this.searchInputChange$.subscribe());
-        }
-        const entityClass = this.entity;
-        if (!!entityClass) {
-            this.rows = [];
-        }
-        this.expandable = !!this.expansionTemplate;
-        // this.arrayDataConfig.set.pagination.rowDisplayed(5);
-        log.i('this.columns,', this.columns);
-        const columnsConfigSameAsDefault = _.isEqual(this.columns, defaultColumns);
-        // console.log({
-        //   columnsConfigSameAsDefault
-        // })
-        if (entityClass && columnsConfigSameAsDefault) {
-            const props = Object.keys(getDefaultModel(entityClass));
-            log.i('this.crud.entity props', props);
-            try {
-                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,
-                        };
-                    }),
-                ];
-                // console.log({
-                //   extra
-                // });
-                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.getData();
-    }
-    //#endregion
-    //#region hooks / on destroy
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-    //#endregion
-    //#endregion
-    //#region methods
-    //#region methods / get next page
-    async getNextPage(e) {
-        // console.log({
-        //   e
-        // });
-        this.pageNumber = e.pageIndex + 1;
-        this.pageSize = e.pageSize;
-        await this.getData();
-    }
-    //#endregion
-    //#region methods / retrive data
-    async getData() {
-        if (!this.entity) {
-            return;
-        }
-        this.isLoading = true;
-        // console.log('PAGINTION FETCH DATA START!')
-        const controller = this.entityCrudController;
-        if (controller) {
-            const data = await controller.pagination(this.pageNumber, this.pageSize)
-                .received;
-            // console.log('PAGINTION DATA', {
-            //   data,
-            // });
-            const totalElements = Number(data.headers.get(Symbols.old.X_TOTAL_COUNT));
-            const rows = data.body.json;
-            // console.log('PAGINTION DATA', {
-            //   rows,
-            //   totalElements,
-            // });
-            this.totalElements = totalElements;
-            this.rows = rows.map(d => {
-                for (const key in d) {
-                    if (Object.prototype.hasOwnProperty.call(d, key)) {
-                        const elem = d[key];
-                        if (_.isObject(elem)) {
-                            d[key] = json5.stringify(d[key]);
-                        }
-                    }
-                }
-                // console.log({ d })
-                return d;
-            });
-        }
-        this.isLoading = false;
-        this.cdr.markForCheck();
-    }
-    //#endregion
-    //#region methods / expansion row
-    expansionRow(e) {
-        this.expansionChange.next(e);
+        this.t = t.for(this);
+        this.TaonThemeMode = TaonThemeMode;
+        this.dialogRef = inject((MatDialogRef));
+        this.taonTheme = inject(TaonThemeService);
     }
-    //#endregion
-    //#region methods / on table context menu
-    onTableContextMenu(e) {
-        // if (this.rowHref) {
-        //   this.router.navigateByUrl(this.rowHref)
-        // }
-        log.i('context menu event', e);
+    close() {
+        this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonTableComponent, isStandalone: false, selector: "taon-table", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", rows: "rows", entityCrudController: "entityCrudController", columns: "columns", pageSizeOptions: "pageSizeOptions", hideSearch: "hideSearch" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #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\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.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", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "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: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i4$1.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i4$1.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonThemeComponent, isStandalone: true, selector: "taon-theme", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-table', standalone: false, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #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\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"] }]
-        }], propDecorators: { pageNumber: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], allowedColumns: [{
-                type: Input
-            }], expansionTemplate: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], entityCrudController: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], pageSizeOptions: [{
-                type: Input
-            }], hideSearch: [{
-                type: Input
-            }], expansionChange: [{
-                type: Output
-            }], addingItem: [{
-                type: Output
-            }], search: [{
-                type: ViewChild,
-                args: ['search', { static: true }]
-            }] } });
-
-//#region imports
-//#endregion
-class TaonTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", 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: "21.0.9", ngImport: i0, type: TaonTableModule, imports: [CommonModule,
-            MatSelectModule,
-            MtxGridModule,
-            MatFormFieldModule,
-            MatInputModule,
-            StaticColumnsModule,
-            MatIconModule,
-            MatButtonModule,
-            FormsModule,
-            ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatSelectModule,
-                        MtxGridModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        StaticColumnsModule,
+            args: [{ selector: 'taon-theme', imports: [
+                        MatSlideToggleModule,
                         MatIconModule,
                         MatButtonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    exports: [TaonTableComponent],
-                    declarations: [TaonTableComponent],
-                }]
+                        MatDialogModule,
+                        TranslateDirective,
+                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n" }]
         }] });
 
 var TaonYouTubeUtils;
@@ -2661,7 +2000,7 @@ class TaonYoutubeVideoComponent {
         }), 'https://www.youtube.com');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, decorators: [{
             type: Component,
@@ -2714,5 +2053,5 @@ var index = {};
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ID, AnonymizeTextDirective, AuthButtonComponent, AuthDialogComponent, AuthGuard, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, GoogleAuthService, MicrosoftAuthService, PROJECT_NPM_NAME, SafePipe, SessionService, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonKvAuthorizationComponent, TaonLangSelectorComponent, TaonLongPress, TaonNotFoundComponent, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonRumbleComponent, TaonSessionPasscodeComponent, TaonSettingsComponent, TaonSimpleLayoutComponent, TaonSimpleLayoutRoutes, TaonSlideContentComponent, TaonSlideContentContentChildComponent, TaonStripeBuyButtonComponent, TaonTableComponent, TaonTableModule, TaonThemeComponent, TaonThemeMode, TaonThemeService, TaonYouTubeUtils, TaonYoutubeVideoComponent, ViewMode, myOrgProj, startCli };
+export { APP_ID, AnonymizeTextDirective, AuthButtonComponent, AuthDialogComponent, AuthGuard, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, GoogleAuthService, MicrosoftAuthService, PROJECT_NPM_NAME, SafePipe, SessionService, TaonBootstrapNavbarComponent, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonKvAuthorizationComponent, TaonLangSelectorComponent, TaonLongPress, TaonNotFoundComponent, TaonProgressBarComponent, TaonProgressBarModule, TaonRumbleComponent, TaonSessionPasscodeComponent, TaonSettingsComponent, TaonSimpleLayoutComponent, TaonSlideContentComponent, TaonSlideContentContentChildComponent, TaonStripeBuyButtonComponent, TaonThemeComponent, TaonThemeMode, TaonThemeService, TaonYouTubeUtils, TaonYoutubeVideoComponent, ViewMode, myOrgProj, startCli };
 //# sourceMappingURL=taon-ui-browser.mjs.map