taon-ui 21.0.31 → 21.0.34

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

@@ -6,11 +6,11 @@ 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 { NgModule, Input, ChangeDetectionStrategy, Component, Pipe, Directive, EventEmitter, HostListener, HostBinding, Output, Injectable, ViewChild, inject, DestroyRef, Self, ChangeDetectorRef, signal, computed, PLATFORM_ID, effect, input } from '@angular/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i6 from '@angular/material/button';
+import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i7 from '@angular/material/card';
@@ -20,62 +20,68 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
+import * as i2$3 from '@angular/material/dialog';
+import { MatDialogModule, MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i9 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$3 from '@angular/material/input';
+import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$3 from '@angular/material/slide-toggle';
+import * as i1$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
-import * as i11 from '@angular/material/tabs';
+import * as i3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import * as i2 from '@angular/common';
-import { CommonModule, NgIf, isPlatformBrowser } from '@angular/common';
-import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
+import * as i1 from '@angular/common';
+import { CommonModule, NgIf, isPlatformBrowser, AsyncPipe, JsonPipe, NgStyle } from '@angular/common';
+import * as i2 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 * as i1$1 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 { _, Helpers, TaonStripeCloudflareWorker, json5 } from 'tnp-core/browser';
 import { __decorate, __metadata } from 'tslib';
-import * as i2$2 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 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 { interval, tap, Subject, takeUntil, Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, Subscription, defer, fromEvent, debounceTime, share } from 'rxjs';
+import * as i1$3 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 * as i1$2 from '@ngneat/hot-toast';
 import axios from 'axios';
 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 * as i2$4 from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule, RouterOutlet } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import { MtxLoaderModule } from '@ng-matero/extensions/loader';
+import { InputTextModule } from 'primeng/inputtext';
+import { distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
+import * as i3$1 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
@@ -103,7 +109,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.31';
+const CURRENT_PACKAGE_VERSION = '21.0.34';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }
@@ -258,7 +264,7 @@ class TaonBootstrapNavbarComponent {
     }
     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 }); }
+    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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgbCollapseModule }, { kind: "directive", type: i2.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: TaonBootstrapNavbarComponent, decorators: [{
             type: Component,
@@ -291,7 +297,7 @@ class SafePipe {
                 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SafePipe, deps: [{ token: i1$1.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: [{
@@ -300,7 +306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     name: 'safe',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 //#region imports
 //#endregion
@@ -473,7 +479,7 @@ class TaonNotificationsService {
         const opt = this.options('info', options);
         return this.toast.info(opt.title);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, deps: [{ token: i1$1.HotToastService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, deps: [{ token: i1$2.HotToastService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotificationsService, decorators: [{
@@ -481,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HotToastService }] });
+        }], ctorParameters: () => [{ type: i1$2.HotToastService }] });
 
 //#region imports
 //#endregion
@@ -772,8 +778,8 @@ class TaonSessionPasscodeComponent {
             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$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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSessionPasscodeComponent, isStandalone: true, selector: "taon-session-passcode", inputs: { passcode: "passcode", message: "message" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 __decorate([
     (StorPropertyInLocalStorage.for(TaonSessionPasscodeComponent).withDefaultValue('')),
@@ -784,7 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             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: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -924,8 +930,8 @@ class TaonAdminModeConfigurationComponent {
         //   back.click();
         // }
     }
-    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.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
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [{ token: i1$3.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: 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: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.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: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.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"] }] }); }
 }
@@ -958,7 +964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         // TaonDbAdminComponent,
                         TaonSessionPasscodeComponent,
                     ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !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"] }]
-        }], ctorParameters: () => [{ type: i1$2.BreakpointsService }], propDecorators: { tabGroup: [{
+        }], ctorParameters: () => [{ type: i1$3.BreakpointsService }], propDecorators: { tabGroup: [{
                 type: ViewChild,
                 args: ['tabGroup']
             }], taonAdminModeConfigurationDataChanged: [{
@@ -970,6 +976,279 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+class GoogleAuthService {
+    constructor(zone) {
+        this.zone = zone;
+    }
+    loadScript() {
+        return new Promise((resolve, reject) => {
+            if (window.google?.accounts?.id) {
+                resolve();
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = 'https://accounts.google.com/gsi/client';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => resolve();
+            script.onerror = () => reject();
+            document.head.appendChild(script);
+        });
+    }
+    renderButton(container, clientId, width) {
+        return new Observable(subscriber => {
+            this.loadScript().then(() => {
+                const google = window.google;
+                google.accounts.id.initialize({
+                    client_id: clientId,
+                    auto_select: false,
+                    callback: (response) => {
+                        this.zone.run(() => {
+                            const payload = this.decodeJwt(response.credential);
+                            subscriber.next(payload);
+                        });
+                    },
+                });
+                google.accounts.id.disableAutoSelect();
+                google.accounts.id.renderButton(container, {
+                    theme: 'outline',
+                    size: 'large',
+                    width,
+                    type: 'standard',
+                });
+            });
+        });
+    }
+    decodeJwt(token) {
+        const base64Url = token.split('.')[1];
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(atob(base64)
+            .split('')
+            .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join(''));
+        return JSON.parse(jsonPayload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GoogleAuthService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GoogleAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GoogleAuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+const STORAGE_KEY = 'auth_session_v1';
+class SessionService {
+    constructor() {
+        this.state$ = new BehaviorSubject(this.load());
+        this.data$ = this.state$.asObservable();
+        this.isLoggedIn$ = this.state$.pipe(map(s => !!s.isLoggedIn), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+        this.emailConfirmed$ = this.state$.pipe(map(s => !!s.emailVerified), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+        this.email$ = this.state$.pipe(map(s => s.email ?? ''), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    get snapshot() {
+        return this.state$.value;
+    }
+    loginWithGoogle(data) {
+        const next = {
+            isLoggedIn: true,
+            email: data.email,
+            emailVerified: data.emailVerified,
+            displayName: data.displayName,
+            pictureUrl: data.pictureUrl,
+        };
+        this.state$.next(next);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    }
+    logout() {
+        const next = { isLoggedIn: false };
+        this.state$.next(next);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    }
+    load() {
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            if (!raw)
+                return { isLoggedIn: false };
+            return JSON.parse(raw);
+        }
+        catch {
+            return { isLoggedIn: false };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SessionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: SessionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AuthDialogComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        this.form = new FormGroup({
+            email: new FormControl('', [
+                Validators.required,
+                Validators.pattern(this.emailRegex), // Use pattern instead of .email
+            ]),
+        });
+        this.diableLoginByEmail = !(window.location.hostname === 'localhost');
+        this.dialogRef = inject((MatDialogRef));
+        this.googleAuth = inject(GoogleAuthService);
+        this.session = inject(SessionService);
+        this.googleButtonLoaded = false;
+    }
+    loginByEmail() {
+        this.form.markAllAsTouched();
+        this.form.updateValueAndValidity();
+        if (this.form.invalid) {
+            return;
+        }
+        const displayName = _.startCase((this.form.value.email || '').split('@')[0]);
+        this.session.loginWithGoogle({
+            email: this.form.value.email,
+            emailVerified: true,
+            displayName,
+            // pictureUrl: payload.picture,
+        });
+        this.dialogRef.close();
+    }
+    ngOnInit() {
+        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+        //Add 'implements OnInit' to the class.
+        if (this.diableLoginByEmail) {
+            this.form.controls.email.disable();
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.googleClientId) {
+            console.warn('Google client id missing');
+            return;
+        }
+        this.dialogRef.afterOpened().subscribe(() => {
+            setTimeout(() => {
+                const el = this.emailLoginBtn.nativeElement;
+                const width = Math.floor(el.getBoundingClientRect().width);
+                // el.style.width = `${width}px`;
+                // console.log({ width });
+                this.googleAuth
+                    .renderButton(this.googleBtn.nativeElement, this.googleClientId, width)
+                    .subscribe(payload => {
+                    const email = payload.email;
+                    const verified = !!payload.email_verified;
+                    this.googleButtonLoaded = true;
+                    this.cdr.markForCheck();
+                    if (email && verified) {
+                        this.session.loginWithGoogle({
+                            email,
+                            emailVerified: verified,
+                            displayName: payload.name,
+                            pictureUrl: payload.picture,
+                        });
+                        this.dialogRef.close();
+                    }
+                });
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"auth-dialog p-4\">\n  <h4 class=\"mb-3\">Login or register</h4>\n\n  <div\n    class=\"w-full\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? 'Login by email (disabled)' : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error *ngIf=\"form.get('email')?.hasError('email')\">\n          Please enter a valid email address\n        </mat-error>\n      </mat-form-field>\n    </form>\n    <div class=\"divider\">\n      <span>or</span>\n    </div>\n    <!-- Placeholder for goole button -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        >loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n  </div>\n  <br />\n  <!-- <mat-divider class=\"my-3\"></mat-divider> -->\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      Cancel\n    </button>\n  </div>\n</div>", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-auth-dialog', standalone: true, imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatDividerModule,
+                        MatInputModule,
+                        MatProgressSpinnerModule,
+                        MatProgressBarModule,
+                        MtxLoaderModule,
+                        ButtonModule,
+                        InputTextModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"auth-dialog p-4\">\n  <h4 class=\"mb-3\">Login or register</h4>\n\n  <div\n    class=\"w-full\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? 'Login by email (disabled)' : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error *ngIf=\"form.get('email')?.hasError('email')\">\n          Please enter a valid email address\n        </mat-error>\n      </mat-form-field>\n    </form>\n    <div class=\"divider\">\n      <span>or</span>\n    </div>\n    <!-- Placeholder for goole button -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        >loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n  </div>\n  <br />\n  <!-- <mat-divider class=\"my-3\"></mat-divider> -->\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      Cancel\n    </button>\n  </div>\n</div>", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"] }]
+        }], propDecorators: { googleClientId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], emailLoginBtn: [{
+                type: ViewChild,
+                args: ['emailLoginBtn', { static: true }]
+            }], googleBtn: [{
+                type: ViewChild,
+                args: ['googleBtn', { static: true }]
+            }] } });
+
+class AuthButtonComponent {
+    constructor() {
+        this.session = inject(SessionService);
+        this.dialog = inject(MatDialog);
+        this.router = inject(Router);
+    }
+    openLogin() {
+        this.dialog.open(AuthDialogComponent, {
+            width: '410px',
+            data: null,
+        }).componentInstance.googleClientId = this.googleClientId;
+    }
+    goDashboard() {
+        if (this.linkToDashboard) {
+            this.router.navigateByUrl(this.linkToDashboard);
+        }
+    }
+    logout() {
+        this.session.logout();
+    }
+    ngOnInit() {
+        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+        //Add 'implements OnInit' to the class.
+        // console.log('this.displayDashboardButton', this.displayDashboardButton);
+        this.displayDashboardButton = _.isBoolean(this.displayDashboardButton)
+            ? this.displayDashboardButton
+            : true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-auth-button', standalone: true, imports: [CommonModule, MatButtonModule, ButtonModule, MatIconModule], template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>", styles: [":host{display:inline-flex}\n"] }]
+        }], propDecorators: { linkToDashboard: [{
+                type: Input,
+                args: [{ required: true }]
+            }], googleClientId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], displayDashboardButton: [{
+                type: Input
+            }] } });
+
+class AuthGuard {
+    constructor(session, router) {
+        this.session = session;
+        this.router = router;
+    }
+    canActivate() {
+        return this.session.isLoggedIn$.pipe(take(1), map(isLoggedIn => {
+            if (isLoggedIn) {
+                return true;
+            }
+            // redirect to home or login page
+            return this.router.parseUrl('/');
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthGuard, deps: [{ token: SessionService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthGuard, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: SessionService }, { type: i2$4.Router }] });
+
 //#region imports
 //#endregion
 class TaonGithubForkMeCornerComponent {
@@ -1087,7 +1366,7 @@ class TaonIframeSyncComponent {
     }
     setupSync() {
         this.route.queryParamMap
-            .pipe(distinctUntilChanged((a, b) => a.get(this.queryParamKey) === b.get(this.queryParamKey)), takeUntil$1(this.destroy$))
+            .pipe(distinctUntilChanged$1((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$))
@@ -1217,6 +1496,343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }] } });
 
+class TaonKvAuthorizationComponent {
+    constructor() {
+        this.products = [];
+        this.authorizedProducts = new EventEmitter();
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.authorizedProductsData = signal([], ...(ngDevMode ? [{ debugName: "authorizedProductsData" }] : []));
+    }
+    async ngOnInit() {
+        const worker = new TaonStripeCloudflareWorker(this.url);
+        const results = [];
+        for (const product of this.products) {
+            try {
+                const authorized = await worker.checkAccess({
+                    clientEmail: this.email,
+                    productId: product.stripeProductId,
+                });
+                results.push({
+                    ...product,
+                    authorized,
+                });
+            }
+            catch {
+                results.push({
+                    ...product,
+                    authorized: false,
+                });
+            }
+        }
+        this.authorizedProductsData.set(results);
+        this.loading.set(false);
+        this.authorizedProducts.emit(results);
+    }
+    authorizedCount() {
+        return this.authorizedProductsData().filter(p => p.authorized).length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonKvAuthorizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonKvAuthorizationComponent, isStandalone: true, selector: "taon-kv-authorization", inputs: { email: "email", url: "url", products: "products" }, outputs: { authorizedProducts: "authorizedProducts" }, ngImport: i0, template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">Loading authorization info...</div>\n\n  <div *ngIf=\"!loading()\">\n    <div *ngIf=\"authorizedCount() === 0\">You did not purchase any products</div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      You purchased {{ authorizedCount() }} products\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonKvAuthorizationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-kv-authorization', standalone: true, imports: [CommonModule], template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">Loading authorization info...</div>\n\n  <div *ngIf=\"!loading()\">\n    <div *ngIf=\"authorizedCount() === 0\">You did not purchase any products</div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      You purchased {{ authorizedCount() }} products\n    </div>\n  </div>\n</div>" }]
+        }], propDecorators: { email: [{
+                type: Input,
+                args: [{ required: true }]
+            }], url: [{
+                type: Input,
+                args: [{ required: true }]
+            }], products: [{
+                type: Input,
+                args: [{ required: true }]
+            }], authorizedProducts: [{
+                type: Output
+            }] } });
+
+class TaonRumbleComponent {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.state = 'video-preview-open';
+        this.paddlockClicked = new EventEmitter();
+        this.previewClicked = new EventEmitter();
+        // get embedUrl(): string {
+        //   return `https://rumble.com/embed/${this.clipId}`;
+        // }
+        this.embedUrl = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://rumble.com/embed/${this.clipId}`), ...(ngDevMode ? [{ debugName: "embedUrl" }] : []));
+    }
+    onPreviewClick() {
+        this.previewClicked.emit();
+    }
+    onPadlockClick(event) {
+        event.stopPropagation();
+        this.paddlockClicked.emit();
+    }
+    isPreview() {
+        return (this.state === 'preview-picture' ||
+            this.state === 'preview-picture-locked');
+    }
+    isLocked() {
+        return this.state === 'preview-picture-locked';
+    }
+    isVideoOpen() {
+        return this.state === 'video-preview-open';
+    }
+    isPrivate() {
+        return this.state === 'video-preview-private';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonRumbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonRumbleComponent, isStandalone: true, selector: "taon-rumble", inputs: { title: "title", clipId: "clipId", picturePreviewUrl: "picturePreviewUrl", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, ngImport: i0, template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonRumbleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-rumble', standalone: true, imports: [NgIf], template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], clipId: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], picturePreviewUrl: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], state: [{
+                type: Input
+            }], paddlockClicked: [{
+                type: Output
+            }], previewClicked: [{
+                type: Output
+            }] } });
+
+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: "<div class=\"p-4\">\n  <h2>Theme settings</h2>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    Sync colors with system\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto()\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    Dark mode\n  </mat-slide-toggle>\n</div>", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$4.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', imports: [MatSlideToggleModule], template: "<div class=\"p-4\">\n  <h2>Theme settings</h2>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    Sync colors with system\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto()\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    Dark mode\n  </mat-slide-toggle>\n</div>" }]
+        }] });
+
+//#region imports
+//#endregion
+class TaonSimpleLayoutComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.dialog = inject(MatDialog);
+        this.theme = inject(TaonThemeService);
+        this.navItems = input(...(ngDevMode ? [undefined, { debugName: "navItems" }] : []));
+    }
+    navigateTo(item) {
+        this.router.navigateByUrl(item.path);
+    }
+    openDialog(enterAnimationDuration, exitAnimationDuration) {
+        this.dialog.open(TaonThemeComponent, {
+            width: '400px',
+            enterAnimationDuration,
+            exitAnimationDuration,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header\n  class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n  <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n    @if (navItems()?.length > 0) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon\n                aria-hidden=\"false\"\n                aria-label=\"Example home icon\"\n                fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <div\n    class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n    <!-- <taon-theme class=\"right-0\" /> -->\n    <ng-content select=\"[buttons]\"></ng-content>\n    <button\n      class=\"flex mr-2\"\n      (click)=\"openDialog(200, 200)\"\n      mat-icon-button>\n      <mat-icon>settings</mat-icon>\n    </button>\n  </div>\n</header>\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello niga!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-simple-layout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterOutlet,
+                        AsyncPipe,
+                        MatCardModule,
+                        MatIconModule,
+                        MatDividerModule,
+                        MatButtonModule,
+                        MatListModule,
+                        MatTabsModule,
+                        RouterModule,
+                        MatDialogModule,
+                        JsonPipe,
+                        TaonThemeComponent,
+                    ], template: "<header\n  class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n  <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n    @if (navItems()?.length > 0) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon\n                aria-hidden=\"false\"\n                aria-label=\"Example home icon\"\n                fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <div\n    class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n    <!-- <taon-theme class=\"right-0\" /> -->\n    <ng-content select=\"[buttons]\"></ng-content>\n    <button\n      class=\"flex mr-2\"\n      (click)=\"openDialog(200, 200)\"\n      mat-icon-button>\n      <mat-icon>settings</mat-icon>\n    </button>\n  </div>\n</header>\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello niga!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"] }]
+        }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }] } });
+
+//#endregion
+const TaonSimpleLayoutRoutes = [
+    {
+        path: '',
+        component: TaonSimpleLayoutComponent,
+    },
+    // {
+    //   path: 'anothermodulepath',
+    //   loadChildren: () => import('anothermodule')
+    //     .then(m => m.AnotherLazyModule),
+    // },
+];
+
+class TaonStripeBuyButtonComponent {
+    constructor() {
+        /**
+         * optional label
+         */
+        this.label = 'Buy now';
+        this.loading = false;
+    }
+    ngOnInit() {
+        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+        //Add 'implements OnInit' to the class.
+        this.successUrl = _.isString(this.successUrl)
+            ? this.successUrl
+            : `${location.href.split('?')[0]}?success=true&productId=${this.productId}`;
+        this.cancelUrl = _.isString(this.cancelUrl)
+            ? this.cancelUrl
+            : `${location.href.split('?')[0]}?cancel=true`;
+        // console.log({successUrl:this.successUrl})
+        // console.log({cancelUrl:this.cancelUrl})
+    }
+    async buy() {
+        if (!this.priceId || !this.workerUrl || !this.email) {
+            console.error('Missing stripe parameters');
+            return;
+        }
+        this.loading = true;
+        try {
+            const resp = await fetch(`${this.workerUrl}/create-checkout-session`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    priceId: this.priceId,
+                    email: this.email,
+                    success_url: this.successUrl,
+                    cancel_url: this.cancelUrl,
+                }),
+            });
+            const data = await resp.json();
+            if (data?.url) {
+                window.location.href = data.url;
+            }
+            else {
+                console.error('Stripe checkout url missing', data);
+            }
+        }
+        catch (err) {
+            console.error('Stripe checkout error', err);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl", label: "label" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-stripe-buy-button', imports: [CommonModule, MatButtonModule], template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>" }]
+        }], propDecorators: { priceId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], productId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], workerUrl: [{
+                type: Input,
+                args: [{ required: true }]
+            }], email: [{
+                type: Input,
+                args: [{ required: true }]
+            }], successUrl: [{
+                type: Input
+            }], cancelUrl: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
 //#region imports
 //#endregion
 //#region constants
@@ -1265,7 +1881,7 @@ class TaonTableComponent {
     //#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 => {
+            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());
@@ -1396,7 +2012,7 @@ class TaonTableComponent {
         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"] }] }); }
+    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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "directive", type: i5$1.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$3.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$3.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$3.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.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: TaonTableComponent, decorators: [{
             type: Component,
@@ -1473,130 +2089,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
-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)
+// declare global {
+//   interface Window {
+//     YT: any;
+//     onYouTubeIframeAPIReady: () => void;
+//   }
+// }
+function loadYoutubeApi() {
+    return new Promise(resolve => {
+        // @ts-ignore
+        if (window.YT && window.YT.Player) {
+            resolve();
             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);
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        document.body.appendChild(tag);
+        // @ts-ignore
+        window.onYouTubeIframeAPIReady = () => {
+            resolve();
+        };
+    });
+}
+class TaonYoutubeVideoComponent {
+    onRightClick(event) {
+        // console.log(event);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    clicked(event) {
+        event.stopPropagation();
+        this.allowedToBeDisplayedVideoOveraly.set(false);
+        this.cdr.detectChanges();
+        // setTimeout(() => {
+        //   this.allowedToBeDisplayedVideoOveraly.set(true);
+        //   this.cdr.detectChanges();
+        // }, 200);
+    }
+    restart() {
+        this.postCommand('seekTo', [0, true]); // go to 0 seconds
+        this.postCommand('playVideo');
+    }
+    async ngAfterViewInit() {
+        if (this.state !== 'video-preview-private') {
+            return;
+        }
+        await loadYoutubeApi();
+        // @ts-ignore
+        this.player = new window.YT.Player(this.iframeRef.nativeElement, {
+            videoId: this.videoId,
+            playerVars: {
+                origin: window.location.origin,
+            },
+            events: {
+                onStateChange: (event) => {
+                    this.handleStateChange(event.data);
+                },
+            },
         });
     }
-    apply(dark) {
-        this.isDark.set(dark);
-        const root = document.documentElement;
-        root.classList.toggle('dark-taon-theme', dark);
-        root.classList.toggle('light-taon-theme', !dark);
+    handleStateChange(state) {
+        // @ts-ignore
+        // const YT = window.YT;
+        // // @ts-ignore
+        // console.log({ state, plauerstate: YT.PlayerState });
+        // this.currentVideoState = Object.keys(this.PS).find(
+        //   c => this.PS[c] === state,
+        // ) as any;
+        // console.log('currentVideoState', this.currentVideoState);
     }
-    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);
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.PS = {
+            UNSTARTED: -1,
+            ENDED: 0,
+            PLAYING: 1,
+            PAUSED: 2,
+            BUFFERING: 3,
+            CUED: 5,
+        };
+        this.state = 'preview-picture';
+        this.paddlockClicked = new EventEmitter();
+        this.previewClicked = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        this.allowedToBeDisplayedVideoOveraly = signal(true, ...(ngDevMode ? [{ debugName: "allowedToBeDisplayedVideoOveraly" }] : []));
+        this.videoIdSignal = signal('', ...(ngDevMode ? [{ debugName: "videoIdSignal" }] : []));
+        this.previewImage = computed(() => `https://img.youtube.com/vi/${this.videoIdSignal()}/0.jpg`, ...(ngDevMode ? [{ debugName: "previewImage" }] : []));
+        /**
+         * > controls=0	Hides bottom control bar
+         * > modestbranding=1	Reduces YouTube logo
+         * > rel=0	Disables related videos from other channels
+         * > disablekb=1	Disables keyboard controls
+         * > fs=0	Disables fullscreen button
+         * > playsinline=1	Prevents fullscreen auto behavior on iOS
+         */
+        this.embedUrl = computed(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${this.videoIdSignal()}?enablejsapi=1` +
+            // (this.state === 'video-preview-private' ? `&controls=0` : '') +
+            (this.state === 'video-preview-private' ? `&modestbranding=1` : '') +
+            (this.state === 'video-preview-private' ? `&rel=0` : '') +
+            // (this.state === 'video-preview-private' ? `&fs=0` : '') +
+            // (this.state === 'video-preview-private' ? `&rel=0` : '') +
+            `&disablekb=1` +
+            `&playsinline=1` +
+            `&origin=${window.location.origin}`), ...(ngDevMode ? [{ debugName: "embedUrl" }] : []));
+        effect(() => { });
+    }
+    ngOnChanges() {
+        this.videoIdSignal.set(this.videoId);
+    }
+    get containerStyle() {
+        return this.height ? { height: this.height } : null;
+    }
+    get displayTitle() {
+        return this.title;
+    }
+    onLockClick(event) {
+        event.stopPropagation();
+        this.paddlockClicked.emit();
+    }
+    onPreviewClick() {
+        this.previewClicked.emit();
+    }
+    // private postCommand(command: string) {
+    //   this.iframeRef?.nativeElement.contentWindow?.postMessage(
+    //     JSON.stringify({
+    //       event: 'command',
+    //       func: command,
+    //       args: [],
+    //     }),
+    //     '*',
+    //   );
+    // }
+    postCommand(command, args = []) {
+        const iframe = this.iframeRef?.nativeElement;
+        if (!iframe)
+            return;
+        iframe.contentWindow?.postMessage(JSON.stringify({
+            event: 'command',
+            func: command,
+            args: args,
+        }), 'https://www.youtube.com');
     }
-    isAuto() {
-        return this.mode() === TaonThemeMode.AUTO;
+    play() {
+        this.postCommand('playVideo');
     }
-    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);
+    pause() {
+        this.postCommand('pauseVideo');
     }
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1>Thanks for buying this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, 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>
-  `,
-                }]
-        }] });
+            args: [{ selector: 'taon-youtube-video', standalone: true, imports: [NgIf, NgStyle, MatIconModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1>Thanks for buying this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { videoId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], paddlockClicked: [{
+                type: Output
+            }], previewClicked: [{
+                type: Output
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['ytFrame']
+            }] } });
 
 // @ts-nocheck
 // This file is auto-generated during init process. Do not modify.
@@ -1608,5 +2270,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { APP_ID, AuthButtonComponent, AuthDialogComponent, AuthGuard, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, GoogleAuthService, PROJECT_NPM_NAME, SafePipe, SessionService, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonKvAuthorizationComponent, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonRumbleComponent, TaonSessionPasscodeComponent, TaonSimpleLayoutComponent, TaonSimpleLayoutRoutes, TaonStripeBuyButtonComponent, TaonTableComponent, TaonTableModule, TaonThemeComponent, TaonThemeMode, TaonThemeService, TaonYoutubeVideoComponent, ViewMode, myOrgProj };
 //# sourceMappingURL=taon-ui-browser.mjs.map