taon-ui 21.0.28 → 21.0.31

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

@@ -1,16 +1,12 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, HostBinding, Output, Input, Directive, Pipe, NgModule, Component, Injectable, inject, DestroyRef, Self, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { Log, Level } from 'ng2-logger/browser';
-import { _, json5, Helpers } from 'tnp-core/browser';
-import * as i1 from '@angular/platform-browser';
-import { DomSanitizer } from '@angular/platform-browser';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i5$1 from '@angular/cdk/drag-drop';
+import * as i5 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
+import * as i0 from '@angular/core';
+import { NgModule, Input, ChangeDetectionStrategy, Component, Pipe, Directive, EventEmitter, HostListener, HostBinding, Output, Injectable, ViewChild, inject, DestroyRef, Self, ChangeDetectorRef, PLATFORM_ID, signal, effect } from '@angular/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
@@ -28,9 +24,9 @@ import { MatDialogModule } 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 i5 from '@angular/material/icon';
+import * as i9 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@angular/material/input';
+import * as i2$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
@@ -41,6 +37,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import * 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';
@@ -52,201 +49,64 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import * as i2$1 from '@angular/common';
-import { CommonModule, NgIf } from '@angular/common';
-import { Resource } from 'ng2-rest/browser';
-import * as i1$1 from '@ngneat/hot-toast';
+import * as i2 from '@angular/common';
+import { CommonModule, NgIf, isPlatformBrowser } from '@angular/common';
+import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import * as i1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Log, Level } from 'ng2-logger/browser';
+import { _, Helpers, json5 } from 'tnp-core/browser';
 import { __decorate, __metadata } from 'tslib';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { PasswordModule } from 'primeng/password';
-import { interval, tap, Subscription, defer, fromEvent, map, debounceTime, distinctUntilChanged, share, Subject, takeUntil } from 'rxjs';
+import * as i4 from 'ngx-scrollbar';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { interval, tap, Subject, takeUntil, Subscription, defer, fromEvent, map, debounceTime, distinctUntilChanged as distinctUntilChanged$1, share } from 'rxjs';
+import * as i1$2 from 'static-columns/browser';
+import { StaticColumnsModule } from 'static-columns/browser';
+import { TaonAdminService, Symbols } from 'taon/browser';
 import { StorPropertyInLocalStorage, Stor } from 'taon-storage/browser';
+import { Resource, getDefaultModel } from 'ng2-rest/browser';
+import * as i1$1 from '@ngneat/hot-toast';
 import axios from 'axios';
-import { Symbols, TaonAdminService } from 'taon/browser';
-import { CLASS } from 'typescript-class-helpers/browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { PasswordModule } from 'primeng/password';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { distinctUntilChanged, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
 import * as i3 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
-import * as i1$2 from 'static-columns/browser';
-import { StaticColumnsModule } from 'static-columns/browser';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from 'ngx-scrollbar';
-import { NgScrollbarModule } from 'ngx-scrollbar';
-import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
-import * as i2$3 from '@ng-bootstrap/ng-bootstrap';
-import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
-import { ModalModule } from 'ngx-bootstrap/modal';
-
-//#region imports
-//#endregion
-const log$1 = Log.create(`[taon-helpers] long-press`, Level.__NOTHING);
-class TaonLongPress {
-    constructor() {
-        this.pressDuration = 1000;
-        this.onLongPress = new EventEmitter();
-        this.onLongPressing = new EventEmitter();
-        this.onLongPressEnd = new EventEmitter();
-        this.mouseX = 0;
-        this.mouseY = 0;
-        this.allowTrigger = false;
-        this.triggerEnd = _.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']
-            }] } });
-
-//#region imports
-//#endregion
-class TaonInjectHTMLDirective {
-    set taonInjectHTML(content) {
-        this.host.nativeElement.innerHTML = content;
-    }
-    constructor(host) {
-        this.host = host;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonInjectHTMLDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: TaonInjectHTMLDirective, isStandalone: true, selector: "[taonInjectHTML]", inputs: { taonInjectHTML: "taonInjectHTML" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonInjectHTMLDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[taonInjectHTML]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { taonInjectHTML: [{
-                type: Input
-            }] } });
 
-//#region imports
-//#endregion
-class SafePipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(value, type) {
-        switch (type) {
-            case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-            case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
-            case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
-            case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
-            case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
-            default:
-                throw new Error(`Invalid safe type specified: ${type}`);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'safe',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+// THIS FILE IS GENERATED - DO NOT MODIFY
+/**
+ *  Autogenerated by current cli tool
+ */
+const BUILD_FRAMEWORK_CLI_NAME = 'tnp';
+/**
+ *  This value can be change in taon.jsonc (appId)
+ */
+const APP_ID = 'com.domain.example.taon-ui';
+/**
+ *  Autogenerated by current cli tool
+ */
+const BUILD_BASE_HREF = '';
+/**
+ *  This value can be change in taon.jsonc (overrideNpmName)
+ */
+const PROJECT_NPM_NAME = 'taon-ui';
+/**
+ * Taon version from you project taon.json
+ */
+const CURRENT_PACKAGE_TAON_VERSION = 'v21';
+/**
+ *  Autogenerated by current cli tool. Use *tnp release* to bump version.
+ */
+const CURRENT_PACKAGE_VERSION = '21.0.31';
+// THIS FILE IS GENERATED - DO NOT MODIFY
 
-//#region @browser
-//#endregion
+function myOrgProj() { }
 
 //#region imports
 //#endregion
@@ -389,74 +249,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-class TaonGithubForkMeCornerComponent {
+class TaonBootstrapNavbarComponent {
     constructor() {
-        this.url = 'https://github.com';
+        // @HostBinding('style.minHeight.px') @Input() height: number = 100;
+        // @Output() taonBootstrapNavbarDataChanged = new EventEmitter();
+        this.isLoggedIn = false;
+        this.isCollapsed = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeCornerComponent, isStandalone: false, selector: "taon-github-fork-me-corner", inputs: { url: "url" }, ngImport: i0, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }); }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBootstrapNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonBootstrapNavbarComponent, isStandalone: true, selector: "taon-bootstrap-navbar", inputs: { isLoggedIn: "isLoggedIn", isCollapsed: "isCollapsed" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      Home</a\n    >\n    <button\n      class=\"navbar-toggler\"\n      type=\"button\"\n      (click)=\"isCollapsed = !isCollapsed\">\n      <span class=\"navbar-toggler-icon\"></span>\n    </button>\n\n    <div\n      [ngbCollapse]=\"isCollapsed\"\n      class=\"navbar-collapse\">\n      <ul class=\"navbar-nav ms-auto\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/about\"\n            routerLinkActive=\"active\"\n            >O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            >Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            >Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            >Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            >Kontakt</a\n          >\n        </li>\n        <ng-container *ngIf=\"isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/test\"\n              routerLinkActive=\"active\"\n              ><b>Test plasuj\u0105cy</b></a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/grammar\"\n              routerLinkActive=\"active\"\n              >Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              >S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              >Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              >Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              >Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              >Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              >Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              >Admin</a\n            >\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              href=\"javascript:void(0)\"\n              (click)=\"modalLoginRegister()\">\n              <span class=\"glyphicon glyphicon-hand-right\"></span> Rejestracja /\n              <span class=\"glyphicon glyphicon-user\"></span> Logowanie\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i2$1.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: ModalModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBootstrapNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-github-fork-me-corner', standalone: false, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }]
-        }], propDecorators: { url: [{
+            args: [{ selector: 'taon-bootstrap-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgbCollapseModule, ModalModule], standalone: true, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      Home</a\n    >\n    <button\n      class=\"navbar-toggler\"\n      type=\"button\"\n      (click)=\"isCollapsed = !isCollapsed\">\n      <span class=\"navbar-toggler-icon\"></span>\n    </button>\n\n    <div\n      [ngbCollapse]=\"isCollapsed\"\n      class=\"navbar-collapse\">\n      <ul class=\"navbar-nav ms-auto\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/about\"\n            routerLinkActive=\"active\"\n            >O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            >Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            >Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            >Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            >Kontakt</a\n          >\n        </li>\n        <ng-container *ngIf=\"isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/test\"\n              routerLinkActive=\"active\"\n              ><b>Test plasuj\u0105cy</b></a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/grammar\"\n              routerLinkActive=\"active\"\n              >Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              >S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              >Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              >Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              >Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              >Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              >Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              >Admin</a\n            >\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              href=\"javascript:void(0)\"\n              (click)=\"modalLoginRegister()\">\n              <span class=\"glyphicon glyphicon-hand-right\"></span> Rejestracja /\n              <span class=\"glyphicon glyphicon-user\"></span> Logowanie\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"] }]
+        }], propDecorators: { isLoggedIn: [{
+                type: Input
+            }], isCollapsed: [{
                 type: Input
             }] } });
 
 //#region imports
 //#endregion
-class TaonGithubForkMeCornerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, declarations: [TaonGithubForkMeCornerComponent], imports: [CommonModule], exports: [TaonGithubForkMeCornerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, imports: [CommonModule] }); }
+class SafePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value, type) {
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error(`Invalid safe type specified: ${type}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    imports: [CommonModule],
-                    exports: [TaonGithubForkMeCornerComponent],
-                    declarations: [TaonGithubForkMeCornerComponent],
-                    providers: [],
+                    name: 'safe',
+                    standalone: true,
                 }]
-        }] });
-
-//#region @browser
-//#endregion
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 //#region imports
 //#endregion
-class TaonGithubForkMeRibbonComponent {
-    constructor() {
-        this.url = 'https://github.com';
+class TaonInjectHTMLDirective {
+    set taonInjectHTML(content) {
+        this.host.nativeElement.innerHTML = content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeRibbonComponent, isStandalone: false, selector: "taon-github-fork-me-ribbon", inputs: { url: "url" }, ngImport: i0, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }); }
+    constructor(host) {
+        this.host = host;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonInjectHTMLDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: TaonInjectHTMLDirective, isStandalone: true, selector: "[taonInjectHTML]", inputs: { taonInjectHTML: "taonInjectHTML" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'taon-github-fork-me-ribbon', standalone: false, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }]
-        }], propDecorators: { url: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonInjectHTMLDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[taonInjectHTML]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { taonInjectHTML: [{
                 type: Input
             }] } });
 
 //#region imports
 //#endregion
-class TaonGithubForkMeRibbonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, declarations: [TaonGithubForkMeRibbonComponent], imports: [CommonModule], exports: [TaonGithubForkMeRibbonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, imports: [CommonModule] }); }
+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: TaonGithubForkMeRibbonModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLongPress, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [TaonGithubForkMeRibbonComponent],
-                    exports: [TaonGithubForkMeRibbonComponent],
+                    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']
+            }] } });
 
-//#region @browser
-//#endregion
+var ViewMode;
+(function (ViewMode) {
+    ViewMode["Add"] = "Add";
+    ViewMode["Edit"] = "Edit";
+    ViewMode["Preview"] = "Preview";
+})(ViewMode || (ViewMode = {}));
 
 //#region imports
 //#endregion
@@ -553,107 +537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 //#region @browser
 //#endregion
 
-class TaonSessionPasscodeComponent {
-    constructor(element, domSanitizer, cdr) {
-        this.element = element;
-        this.domSanitizer = domSanitizer;
-        this.cdr = cdr;
-        this.destroyRef = inject(DestroyRef);
-        this.display = 'none';
-        this.form = new FormGroup({
-            passcode: new FormControl(),
-        });
-    }
-    ngOnInit() {
-        if (!this.passcode) {
-            this.passcode = '123456';
-        }
-        if (!this.message) {
-            this.message = `
-      This website is only for testing purpose. Please type passcode bellow to see content.
-
-      `;
-        }
-        // console.log({
-        //   'lastPasscode': this.lastPasscode,
-        //   'current passcode': this.passcode,
-        //   'current message': this.message,
-        // })
-        // this.width = window.innerWidth;
-        // this.height = window.innerHeight;
-        this.safeMessage = this.domSanitizer.bypassSecurityTrustHtml(this.message);
-        if (this.lastPasscode?.toString() === this.passcode?.toString()) {
-            this.hide();
-        }
-        else {
-            this.show();
-            this.focus();
-        }
-        interval(1000)
-            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
-            this.focus();
-        }))
-            .subscribe();
-    }
-    submit({ passcode }) {
-        if (this.isPasscodeOK(passcode || '')) {
-            this.hide();
-        }
-        else {
-            this.clear();
-        }
-    }
-    isPasscodeOK(passcode) {
-        this.lastPasscode = passcode.toString();
-        return this.passcode.toString() === passcode;
-    }
-    ngAfterViewInit() { }
-    focus() {
-        this.element.nativeElement.querySelector('input')?.focus();
-    }
-    hide() {
-        this.display = 'none';
-    }
-    show() {
-        this.display = 'block';
-    }
-    clear() {
-        this.form.controls.passcode.setValue('');
-    }
-    onKeyup(event) {
-        if (this.isPasscodeOK(event.target.value || '')) {
-            this.hide();
-            return;
-        }
-        const key = event.keyCode || event.charCode;
-        if (key === 8 || key === 46 || this.lastPasscode?.length > 5) {
-            this.clear();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "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-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
-}
-__decorate([
-    (StorPropertyInLocalStorage.for(TaonSessionPasscodeComponent).withDefaultValue('')),
-    __metadata("design:type", String)
-], TaonSessionPasscodeComponent.prototype, "lastPasscode", void 0);
-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-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Self
-                }] }, { type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }] } });
-
-//#region @browser
-//#endregion
-
 //#region imports
 //#endregion
 // import {
@@ -812,259 +695,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 //#region @browser
 //#endregion
 
-//#region imports
-//#endregion
-//#region constants
-const log = Log.create('Table wrapper', Level.__NOTHING);
-const defaultColumns = [
-    {
-        header: 'ID',
-        field: 'id',
-    },
-    {
-        header: 'NAME',
-        field: 'name',
-    },
-];
-//#endregion
-class TaonTableComponent {
-    constructor() {
-        //#region fields
-        this.pageNumber = 1;
-        this.pageSize = 5;
-        this.allowedColumns = [];
-        this.rows = _.times(20, id => {
-            return {
-                id,
-                name: `Amazing ${id} row `,
-            };
+class TaonSessionPasscodeComponent {
+    constructor(element, domSanitizer, cdr) {
+        this.element = element;
+        this.domSanitizer = domSanitizer;
+        this.cdr = cdr;
+        this.destroyRef = inject(DestroyRef);
+        this.display = 'none';
+        this.form = new FormGroup({
+            passcode: new FormControl(),
         });
-        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());
+    ngOnInit() {
+        if (!this.passcode) {
+            this.passcode = '123456';
         }
-        const entityClass = this.entity;
-        if (!!entityClass) {
-            this.rows = [];
+        if (!this.message) {
+            this.message = `
+      This website is only for testing purpose. Please type passcode bellow to see content.
+
+      `;
         }
-        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
+        //   'lastPasscode': this.lastPasscode,
+        //   'current passcode': this.passcode,
+        //   'current message': this.message,
         // })
-        if (entityClass && columnsConfigSameAsDefault) {
-            log.i('this.crud.entity', CLASS.describeProperites(entityClass));
-            try {
-                const props = CLASS.describeProperites(entityClass);
-                let columns = props
-                    .filter(prop => this.allowedColumns.length > 0
-                    ? this.allowedColumns.includes(prop)
-                    : true)
-                    .map(prop => {
-                    return {
-                        header: _.upperCase(prop),
-                        field: prop,
-                    };
-                });
-                const extra = this.allowedColumns.filter(f => !props.includes(f));
-                columns = [
-                    ...columns,
-                    ...extra.map(prop => {
-                        return {
-                            header: _.upperCase(prop),
-                            field: prop,
-                        };
-                    }),
-                ];
-                // 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);
-            }
+        // this.width = window.innerWidth;
+        // this.height = window.innerHeight;
+        this.safeMessage = this.domSanitizer.bypassSecurityTrustHtml(this.message);
+        if (this.lastPasscode?.toString() === this.passcode?.toString()) {
+            this.hide();
         }
         else {
+            this.show();
+            this.focus();
         }
-        if (!this.entity) {
-            this.showPaginator = false;
+        interval(1000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
+            this.focus();
+        }))
+            .subscribe();
+    }
+    submit({ passcode }) {
+        if (this.isPasscodeOK(passcode || '')) {
+            this.hide();
+        }
+        else {
+            this.clear();
         }
-        await this.getData();
     }
-    //#endregion
-    //#region hooks / on destroy
-    ngOnDestroy() {
-        this.sub.unsubscribe();
+    isPasscodeOK(passcode) {
+        this.lastPasscode = passcode.toString();
+        return this.passcode.toString() === passcode;
     }
-    //#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();
+    ngAfterViewInit() { }
+    focus() {
+        this.element.nativeElement.querySelector('input')?.focus();
     }
-    //#endregion
-    //#region methods / retrive data
-    async getData() {
-        if (!this.entity) {
+    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;
         }
-        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;
-            });
+        const key = event.keyCode || event.charCode;
+        if (key === 8 || key === 46 || this.lastPasscode?.length > 5) {
+            this.clear();
         }
-        this.isLoading = false;
-    }
-    //#endregion
-    //#region methods / expansion row
-    expansionRow(e) {
-        this.expansionChange.next(e);
-    }
-    //#endregion
-    //#region methods / on table context menu
-    onTableContextMenu(e) {
-        // if (this.rowHref) {
-        //   this.router.navigateByUrl(this.rowHref)
-        // }
-        log.i('context menu event', e);
     }
-    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  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "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: i2$2.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: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "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-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.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: TaonTableComponent, decorators: [{
+__decorate([
+    (StorPropertyInLocalStorage.for(TaonSessionPasscodeComponent).withDefaultValue('')),
+    __metadata("design:type", String)
+], TaonSessionPasscodeComponent.prototype, "lastPasscode", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, 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  [loading]=\"isLoading\"\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>", 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: [{
+            args: [{ selector: 'taon-session-passcode', standalone: true, imports: [PasswordModule, CommonModule, ReactiveFormsModule, FormsModule], template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-column align-items-center w-full h-full\">\n  <div class=\"flex align-content-center w-full justify-content-center mt-8\">\n    <p\n      class=\"p-3\"\n      style=\"max-width: 400px; min-height: 100px\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n  <!-- placeholder=\"Enter passcode\" -->\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:99999;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Self
+                }] }, { type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
                 type: Input
-            }], hideSearch: [{
+            }], message: [{
                 type: Input
-            }], expansionChange: [{
-                type: Output
-            }], addingItem: [{
-                type: Output
-            }], search: [{
-                type: ViewChild,
-                args: ['search', { static: true }]
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
             }] } });
 
-//#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,
-                        MatIconModule,
-                        MatButtonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    exports: [TaonTableComponent],
-                    declarations: [TaonTableComponent],
-                }]
-        }] });
-
-//#region @browser
+//#region @browser
 //#endregion
 
 class TaonAdminModeConfigurationComponent {
@@ -1196,7 +925,7 @@ class TaonAdminModeConfigurationComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [{ token: i1$2.BreakpointsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", 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}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i5$1.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: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.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: "component", type: // TODO import only partial things
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", 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}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.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: "component", type: // TODO import only partial things
                 // TaonDbAdminComponent,
                 TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
 }
@@ -1241,6 +970,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+//#region imports
+//#endregion
+class TaonGithubForkMeCornerComponent {
+    constructor() {
+        this.url = 'https://github.com';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeCornerComponent, isStandalone: false, selector: "taon-github-fork-me-corner", inputs: { url: "url" }, ngImport: i0, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-github-fork-me-corner', standalone: false, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }]
+        }], propDecorators: { url: [{
+                type: Input
+            }] } });
+
+//#region imports
+//#endregion
+class TaonGithubForkMeCornerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, declarations: [TaonGithubForkMeCornerComponent], imports: [CommonModule], exports: [TaonGithubForkMeCornerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [TaonGithubForkMeCornerComponent],
+                    declarations: [TaonGithubForkMeCornerComponent],
+                    providers: [],
+                }]
+        }] });
+
+//#region imports
+//#endregion
+class TaonGithubForkMeRibbonComponent {
+    constructor() {
+        this.url = 'https://github.com';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeRibbonComponent, isStandalone: false, selector: "taon-github-fork-me-ribbon", inputs: { url: "url" }, ngImport: i0, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-github-fork-me-ribbon', standalone: false, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }]
+        }], propDecorators: { url: [{
+                type: Input
+            }] } });
+
+//#region imports
+//#endregion
+class TaonGithubForkMeRibbonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, declarations: [TaonGithubForkMeRibbonComponent], imports: [CommonModule], exports: [TaonGithubForkMeRibbonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [TaonGithubForkMeRibbonComponent],
+                    exports: [TaonGithubForkMeRibbonComponent],
+                }]
+        }] });
+
 //#region imports
 // iframe-sync.component.ts
 //#endregion
@@ -1293,7 +1087,7 @@ class TaonIframeSyncComponent {
     }
     setupSync() {
         this.route.queryParamMap
-            .pipe(distinctUntilChanged$1((a, b) => a.get(this.queryParamKey) === b.get(this.queryParamKey)), takeUntil$1(this.destroy$))
+            .pipe(distinctUntilChanged((a, b) => a.get(this.queryParamKey) === b.get(this.queryParamKey)), takeUntil$1(this.destroy$))
             .subscribe(() => this.sendNavigateIfReady());
         this.router.events
             .pipe(filter((e) => e instanceof NavigationEnd), takeUntil$1(this.destroy$))
@@ -1423,34 +1217,396 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }] } });
 
-//#region @browser
-//#endregion
-
 //#region imports
 //#endregion
-class TaonBootstrapNavbarComponent {
+//#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 {
     constructor() {
-        // @HostBinding('style.minHeight.px') @Input() height: number = 100;
-        // @Output() taonBootstrapNavbarDataChanged = new EventEmitter();
-        this.isLoggedIn = false;
-        this.isCollapsed = false;
+        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();
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBootstrapNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonBootstrapNavbarComponent, isStandalone: true, selector: "taon-bootstrap-navbar", inputs: { isLoggedIn: "isLoggedIn", isCollapsed: "isCollapsed" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      Home</a\n    >\n    <button\n      class=\"navbar-toggler\"\n      type=\"button\"\n      (click)=\"isCollapsed = !isCollapsed\">\n      <span class=\"navbar-toggler-icon\"></span>\n    </button>\n\n    <div\n      [ngbCollapse]=\"isCollapsed\"\n      class=\"navbar-collapse\">\n      <ul class=\"navbar-nav ms-auto\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/about\"\n            routerLinkActive=\"active\"\n            >O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            >Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            >Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            >Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            >Kontakt</a\n          >\n        </li>\n        <ng-container *ngIf=\"isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/test\"\n              routerLinkActive=\"active\"\n              ><b>Test plasuj\u0105cy</b></a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/grammar\"\n              routerLinkActive=\"active\"\n              >Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              >S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              >Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              >Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              >Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              >Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              >Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              >Admin</a\n            >\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              href=\"javascript:void(0)\"\n              (click)=\"modalLoginRegister()\">\n              <span class=\"glyphicon glyphicon-hand-right\"></span> Rejestracja /\n              <span class=\"glyphicon glyphicon-user\"></span> Logowanie\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i2$3.NgbCollapse, selector: "[ngbCollapse]", inputs: ["animation", "ngbCollapse", "horizontal"], outputs: ["ngbCollapseChange", "shown", "hidden"], exportAs: ["ngbCollapse"] }, { kind: "ngmodule", type: ModalModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    //#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$1(), 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);
+    }
+    //#endregion
+    //#region methods / on table context menu
+    onTableContextMenu(e) {
+        // if (this.rowHref) {
+        //   this.router.navigateByUrl(this.rowHref)
+        // }
+        log.i('context menu event', e);
+    }
+    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\" -->", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "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: i2$3.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: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBootstrapNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-bootstrap-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgbCollapseModule, ModalModule], standalone: true, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      Home</a\n    >\n    <button\n      class=\"navbar-toggler\"\n      type=\"button\"\n      (click)=\"isCollapsed = !isCollapsed\">\n      <span class=\"navbar-toggler-icon\"></span>\n    </button>\n\n    <div\n      [ngbCollapse]=\"isCollapsed\"\n      class=\"navbar-collapse\">\n      <ul class=\"navbar-nav ms-auto\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/about\"\n            routerLinkActive=\"active\"\n            >O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            >Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            >Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            >Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            >Kontakt</a\n          >\n        </li>\n        <ng-container *ngIf=\"isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/test\"\n              routerLinkActive=\"active\"\n              ><b>Test plasuj\u0105cy</b></a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/grammar\"\n              routerLinkActive=\"active\"\n              >Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              >S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              >Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              >Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              >Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              >Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              >Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              >Admin</a\n            >\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              href=\"javascript:void(0)\"\n              (click)=\"modalLoginRegister()\">\n              <span class=\"glyphicon glyphicon-hand-right\"></span> Rejestracja /\n              <span class=\"glyphicon glyphicon-user\"></span> Logowanie\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"] }]
-        }], propDecorators: { isLoggedIn: [{
+            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\" -->", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"] }]
+        }], propDecorators: { pageNumber: [{
                 type: Input
-            }], isCollapsed: [{
+            }], 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,
+                        MatIconModule,
+                        MatButtonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [TaonTableComponent],
+                    declarations: [TaonTableComponent],
+                }]
+        }] });
+
+var TaonThemeMode;
+(function (TaonThemeMode) {
+    TaonThemeMode["AUTO"] = "auto";
+    TaonThemeMode["LIGHT"] = "light";
+    TaonThemeMode["DARK"] = "dark";
+})(TaonThemeMode || (TaonThemeMode = {}));
+class TaonThemeService {
+    constructor() {
+        this.TAON_THEME_KEY = 'taon-theme-mode';
+        this.platformId = inject(PLATFORM_ID);
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        this.mediaQuery = null;
+        this.mode = signal(TaonThemeMode.AUTO, ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        if (!this.isBrowser)
+            return;
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        // Load saved mode
+        const saved = localStorage.getItem(this.TAON_THEME_KEY);
+        if (saved) {
+            this.mode.set(saved);
+        }
+        // React to system changes
+        this.mediaQuery.addEventListener('change', e => {
+            if (this.mode() === TaonThemeMode.AUTO) {
+                this.apply(e.matches);
+            }
+        });
+        // React to mode changes
+        effect(() => {
+            const currentMode = this.mode();
+            localStorage.setItem(this.TAON_THEME_KEY, currentMode);
+            const dark = currentMode === TaonThemeMode.AUTO
+                ? (this.mediaQuery?.matches ?? false)
+                : currentMode === TaonThemeMode.DARK;
+            this.apply(dark);
+        });
+    }
+    apply(dark) {
+        this.isDark.set(dark);
+        const root = document.documentElement;
+        root.classList.toggle('dark-taon-theme', dark);
+        root.classList.toggle('light-taon-theme', !dark);
+    }
+    setMode(mode) {
+        this.mode.set(mode);
+    }
+    toogleAuto(auto) {
+        if (auto) {
+            this.mode.set(TaonThemeMode.AUTO);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    setDark(yes) {
+        if (yes) {
+            this.mode.set(TaonThemeMode.DARK);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    toggle() {
+        this.setMode(this.isDark() ? TaonThemeMode.LIGHT : TaonThemeMode.DARK);
+    }
+    isAuto() {
+        return this.mode() === TaonThemeMode.AUTO;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TaonThemeComponent {
+    constructor() {
+        this.TaonThemeMode = TaonThemeMode;
+        this.taonTheme = inject(TaonThemeService);
+    }
+    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: `
+   <mat-slide-toggle
+      class="p-2"
+      [checked]="taonTheme.isAuto()"
+      (change)="taonTheme.toogleAuto($event.checked)">
+      Sync colors with system
+    </mat-slide-toggle>
+
+    <mat-slide-toggle
+      class="p-2"
+      [checked]="taonTheme.isDark()"
+      [disabled]="taonTheme.isAuto()"
+      (change)="taonTheme.setDark($event.checked)">
+      Dark mode
+    </mat-slide-toggle>
+  `, isInline: true, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'taon-theme',
+                    standalone: true,
+                    imports: [MatSlideToggleModule],
+                    template: `
+   <mat-slide-toggle
+      class="p-2"
+      [checked]="taonTheme.isAuto()"
+      (change)="taonTheme.toogleAuto($event.checked)">
+      Sync colors with system
+    </mat-slide-toggle>
+
+    <mat-slide-toggle
+      class="p-2"
+      [checked]="taonTheme.isDark()"
+      [disabled]="taonTheme.isAuto()"
+      (change)="taonTheme.setDark($event.checked)">
+      Dark mode
+    </mat-slide-toggle>
+  `,
+                }]
+        }] });
+
+// @ts-nocheck
+// This file is auto-generated during init process. Do not modify.
+// This disable this auto generate file.
+// set property "shouldGenerateAutogenIndexFile: false" 
+// in taon.jsonc of your project.
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SafePipe, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule };
+export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, SafePipe, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule, TaonThemeComponent, TaonThemeMode, TaonThemeService, ViewMode, myOrgProj };
 //# sourceMappingURL=taon-ui-browser.mjs.map