taon-ui 21.0.78 → 21.0.80

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

@@ -1,10 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgIf, AsyncPipe, JsonPipe, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, inject, ElementRef, HostListener, Directive, Pipe, EventEmitter, HostBinding, Output, Injectable, ChangeDetectorRef, ViewChild, NgModule, signal, computed, DestroyRef, Self, PLATFORM_ID, effect, input, ContentChildren } from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, inject, ElementRef, HostListener, HostBinding, Directive, Pipe, EventEmitter, Output, Injectable, ChangeDetectorRef, ViewChild, NgModule, signal, computed, DestroyRef, Self, PLATFORM_ID, effect, input, ContentChildren } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import { Translation, TranslateDirective, TranslateService } from '@taon-dev/i18n/websql';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Log, Level } from 'ng2-logger/websql';
@@ -17,6 +18,7 @@ import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$4 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterLink, RouterOutlet, RouterModule } from '@angular/router';
+import { Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, switchMap, take, Subject, withLatestFrom, tap, Subscription, interval } from 'rxjs';
 import { ButtonModule } from 'primeng/button';
 import * as i7 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -28,9 +30,7 @@ import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MtxLoaderModule } from '@ng-matero/extensions/loader';
-import { Translation, TranslateDirective, TranslateService } from '@taon-dev/i18n/websql';
 import { InputTextModule } from 'primeng/inputtext';
-import { Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, Subject, withLatestFrom, tap, Subscription, interval } from 'rxjs';
 import { distinctUntilChanged as distinctUntilChanged$1, takeUntil, filter } from 'rxjs/operators';
 import { TaonStripeCloudflareWorker } from '@taon-dev/api-workers/websql';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -67,7 +67,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.78';
+const CURRENT_PACKAGE_VERSION = '21.0.80';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }
@@ -117,8 +117,12 @@ async function startCli(argsv, filename) {
 
 //#region imports
 //#endregion
+const t$e = Translation.for('src/lib/layouts/taon-bootstrap-navbar/taon-bootstrap-navbar.component.ts', { "src/lib/layouts/taon-bootstrap-navbar/taon-bootstrap-navbar.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.html.en-US.i18n.data-CfHXkLoo.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.html.pl-PL.i18n.data-CaNlmnxg.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.html.de-DE.i18n.data-HkEkq8ig.mjs')).default }, "src/lib/layouts/taon-bootstrap-navbar/taon-bootstrap-navbar.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.ts.en-US.i18n.data-B-X2jiC3.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.ts.pl-PL.i18n.data-CPHLaHvW.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-bootstrap-navbar.component.ts.de-DE.i18n.data-DdcOHvgZ.mjs')).default } }, {
+// debug: true,
+});
 class TaonBootstrapNavbarComponent {
     constructor() {
+        this.t = t$e.for(this);
         // @HostBinding('style.minHeight.px') @Input() height: number = 100;
         // @Output() taonBootstrapNavbarDataChanged = new EventEmitter();
         this.isLoggedIn = false;
@@ -126,29 +130,34 @@ 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 />\n", 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 }); }
+    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      translate>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            translate [translate-t]=\"t\">O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">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 translate [translate-t]=\"t\">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              translate [translate-t]=\"t\">Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">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>\n              <span translate [translate-t]=\"t\">Rejestracja</span> /\n              <span class=\"glyphicon glyphicon-user\"></span>\n              <span translate [translate-t]=\"t\">Logowanie</span>\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />\n", 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 }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBootstrapNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-bootstrap-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgbCollapseModule, ModalModule], standalone: true, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      Home</a\n    >\n    <button\n      class=\"navbar-toggler\"\n      type=\"button\"\n      (click)=\"isCollapsed = !isCollapsed\">\n      <span class=\"navbar-toggler-icon\"></span>\n    </button>\n\n    <div\n      [ngbCollapse]=\"isCollapsed\"\n      class=\"navbar-collapse\">\n      <ul class=\"navbar-nav ms-auto\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/about\"\n            routerLinkActive=\"active\"\n            >O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            >Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            >Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            >Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            >Kontakt</a\n          >\n        </li>\n        <ng-container *ngIf=\"isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/test\"\n              routerLinkActive=\"active\"\n              ><b>Test plasuj\u0105cy</b></a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/grammar\"\n              routerLinkActive=\"active\"\n              >Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              >S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              >Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              >Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              >Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              >Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              >Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              >Admin</a\n            >\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!isLoggedIn\">\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              href=\"javascript:void(0)\"\n              (click)=\"modalLoginRegister()\">\n              <span class=\"glyphicon glyphicon-hand-right\"></span> Rejestracja /\n              <span class=\"glyphicon glyphicon-user\"></span> Logowanie\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />\n", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"] }]
+            args: [{ selector: 'taon-bootstrap-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, NgbCollapseModule, ModalModule, TranslateDirective], standalone: true, template: "<nav class=\"navbar navbar-expand-lg\">\n  <div class=\"container-fluid\">\n    <a\n      class=\"navbar-brand\"\n      routerLink=\"/home\"\n      routerLinkActive=\"active\">\n      translate>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            translate [translate-t]=\"t\">O szkole</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/courses\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Kursy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/opinions\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Opinie</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/instructors\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">Lektorzy</a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            routerLink=\"/contact\"\n            routerLinkActive=\"active\"\n            translate [translate-t]=\"t\">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 translate [translate-t]=\"t\">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              translate [translate-t]=\"t\">Gramatyka</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/vocabulary\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">S\u0142ownictwo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/reading\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Czytanie</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/movies\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Wideo</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/curiosities\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Ciekawostki</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/logout\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Wyloguj</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/profile\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">Profil</a\n            >\n          </li>\n          <li class=\"nav-item\">\n            <a\n              class=\"nav-link\"\n              routerLink=\"/admin\"\n              routerLinkActive=\"active\"\n              translate [translate-t]=\"t\">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>\n              <span translate [translate-t]=\"t\">Rejestracja</span> /\n              <span class=\"glyphicon glyphicon-user\"></span>\n              <span translate [translate-t]=\"t\">Logowanie</span>\n            </a>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</nav>\n<ng-content />\n", styles: [":host{display:block}nav{font-variant-caps:all-small-caps}.navbar-collapse.in{overflow:hidden;max-height:none!important;height:auto!important}\n"] }]
         }], propDecorators: { isLoggedIn: [{
                 type: Input
             }], isCollapsed: [{
                 type: Input
             }] } });
 
+const t$d = Translation.for('src/lib/ui/anonymize-text/anonymize-text.directive.ts', { "src/lib/ui/anonymize-text/anonymize-text.directive.ts": { "en-US": async () => (await import('./taon-ui-websql-anonymize-text.directive.ts.en-US.i18n.data-CmhVgtZ_.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-anonymize-text.directive.ts.pl-PL.i18n.data-CjLDTcNr.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-anonymize-text.directive.ts.de-DE.i18n.data-D7dcIbZH.mjs')).default } });
 class AnonymizeTextDirective {
     constructor() {
+        this.t = t$d.for(this);
+        this.tooltip = this.t.signal.gettext('Click to reveal');
         this.el = inject((ElementRef));
         this.encodedValue = '';
         this.revealed = false;
     }
+    get title() {
+        return this.tooltip();
+    }
     ngOnInit() {
         const original = this.anonymizeText || this.el.nativeElement.textContent || '';
         this.encodedValue = btoa(unescape(encodeURIComponent(original.trim())));
         this.el.nativeElement.textContent = this.maskText(original);
         this.el.nativeElement.style.cursor = 'pointer';
-        this.el.nativeElement.title = 'Click to reveal';
     }
     toggle() {
         this.revealed = !this.revealed;
@@ -167,7 +176,7 @@ class AnonymizeTextDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AnonymizeTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AnonymizeTextDirective, isStandalone: true, selector: "[anonymizeText]", inputs: { anonymizeText: "anonymizeText" }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AnonymizeTextDirective, isStandalone: true, selector: "[anonymizeText]", inputs: { anonymizeText: "anonymizeText" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.title": "this.title" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AnonymizeTextDirective, decorators: [{
             type: Directive,
@@ -175,7 +184,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     selector: '[anonymizeText]',
                     standalone: true,
                 }]
-        }], propDecorators: { anonymizeText: [{
+        }], propDecorators: { title: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }], anonymizeText: [{
                 type: Input
             }], toggle: [{
                 type: HostListener,
@@ -533,10 +545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         }] });
 
 //#endregion
-const t$5 = Translation.for('src/lib/ui/taon-auth/auth-dialog.component.ts', { "src/lib/ui/taon-auth/auth-dialog.component.html": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.html.en-US.i18n.data-DnJeVyiT.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.html.pl-PL.i18n.data-zGFlCL6D.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.html.de-DE.i18n.data-CGSuT8M3.mjs')).default }, "src/lib/ui/taon-auth/auth-dialog.component.ts": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.en-US.i18n.data-Bpc_7pjb.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.pl-PL.i18n.data-BQCb-_f2.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.de-DE.i18n.data-Cm-HD5d6.mjs')).default } });
+const t$c = Translation.for('src/lib/ui/taon-auth/auth-dialog.component.ts', { "src/lib/ui/taon-auth/auth-button.component.html": { "en-US": async () => (await import('./taon-ui-websql-auth-button.component.html.en-US.i18n.data-x6_XrRoU.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-button.component.html.pl-PL.i18n.data-DmtTbOUe.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-button.component.html.de-DE.i18n.data-BC0hpRRH.mjs')).default }, "src/lib/ui/taon-auth/auth-button.component.ts": { "en-US": async () => (await import('./taon-ui-websql-auth-button.component.ts.en-US.i18n.data-CxC575dt.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-button.component.ts.pl-PL.i18n.data-CMBukdvM.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-button.component.ts.de-DE.i18n.data-B7-l90Pm.mjs')).default }, "src/lib/ui/taon-auth/auth-dialog.component.html": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.html.en-US.i18n.data-C0mOOPqj.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.html.pl-PL.i18n.data-BVqm0qNC.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.html.de-DE.i18n.data-B4yX5hcd.mjs')).default }, "src/lib/ui/taon-auth/auth-dialog.component.ts": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.en-US.i18n.data-CrNMtTfd.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.pl-PL.i18n.data-DttKOVo8.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.de-DE.i18n.data-DjgZHF_p.mjs')).default } });
 class AuthDialogComponent {
     constructor() {
-        this.t = t$5.for(this);
+        this.t = t$c.for(this);
+        this.closeDialogLabel = this.t.signal.gettext('Close dialog');
         this.cdr = inject(ChangeDetectorRef);
         this.emailRegex = /^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
         this.form = new FormGroup({
@@ -621,7 +634,7 @@ class AuthDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label\n          *ngIf=\"!diableLoginByEmail\"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is required') }}\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, decorators: [{
             type: Component,
@@ -641,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         ReactiveFormsModule,
                         FormsModule,
                         TranslateDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label\n          *ngIf=\"!diableLoginByEmail\"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is required') }}\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"] }]
         }], propDecorators: { googleClientId: [{
                 type: Input
             }], microsoftClientId: [{
@@ -654,9 +667,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['googleBtn', { static: true }]
             }] } });
 
+const t$b = Translation.for('src/lib/ui/taon-auth/auth-button.component.ts', { "src/lib/ui/taon-auth/auth-button.component.html": { "en-US": async () => (await import('./taon-ui-websql-auth-button.component.html.en-US.i18n.data-x6_XrRoU.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-button.component.html.pl-PL.i18n.data-DmtTbOUe.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-button.component.html.de-DE.i18n.data-BC0hpRRH.mjs')).default }, "src/lib/ui/taon-auth/auth-button.component.ts": { "en-US": async () => (await import('./taon-ui-websql-auth-button.component.ts.en-US.i18n.data-CxC575dt.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-button.component.ts.pl-PL.i18n.data-CMBukdvM.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-button.component.ts.de-DE.i18n.data-B7-l90Pm.mjs')).default }, "src/lib/ui/taon-auth/auth-dialog.component.html": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.html.en-US.i18n.data-C0mOOPqj.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.html.pl-PL.i18n.data-BVqm0qNC.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.html.de-DE.i18n.data-B4yX5hcd.mjs')).default }, "src/lib/ui/taon-auth/auth-dialog.component.ts": { "en-US": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.en-US.i18n.data-CrNMtTfd.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.pl-PL.i18n.data-DttKOVo8.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-auth-dialog.component.ts.de-DE.i18n.data-DjgZHF_p.mjs')).default } });
 class AuthButtonComponent {
     constructor() {
+        this.t = t$b.for(this);
         this.session = inject(SessionService);
+        this.logoutLabel$ = this.session.data$.pipe(switchMap(data => this.t.$.gettext('Logout ([[ displayName ]])', {
+            displayName: data?.displayName ?? '',
+        })));
         this.dialog = inject(MatDialog);
         this.router = inject(Router);
     }
@@ -691,11 +709,17 @@ class AuthButtonComponent {
             : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      <span translate [translate-t]=\"t\">Login</span>\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      <span translate [translate-t]=\"t\">Dashboard</span>\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      {{ logoutLabel$ | async }}\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }, { 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>\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'taon-auth-button', standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        ButtonModule,
+                        MatIconModule,
+                        TranslateDirective,
+                    ], 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      <span translate [translate-t]=\"t\">Login</span>\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      <span translate [translate-t]=\"t\">Dashboard</span>\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      {{ logoutLabel$ | async }}\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { linkToDashboard: [{
                 type: Input,
                 args: [{ required: true }]
@@ -731,16 +755,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
+const t$a = Translation.for('src/lib/ui/taon-github-fork-me-corner/taon-github-fork-me-corner.component.ts', { "src/lib/ui/taon-github-fork-me-corner/taon-github-fork-me-corner.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-github-fork-me-corner.component.ts.en-US.i18n.data-CFHySxim.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-github-fork-me-corner.component.ts.pl-PL.i18n.data-B-0PX0If.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-github-fork-me-corner.component.ts.de-DE.i18n.data-CSDJIjpn.mjs')).default } });
 class TaonGithubForkMeCornerComponent {
     constructor() {
+        this.t = t$a.for(this);
+        this.viewSourceLabel = this.t.signal.gettext('View source on GitHub');
         this.url = 'https://github.com';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeCornerComponent, isStandalone: false, selector: "taon-github-fork-me-corner", inputs: { url: "url" }, ngImport: i0, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeCornerComponent, isStandalone: false, selector: "taon-github-fork-me-corner", inputs: { url: "url" }, ngImport: i0, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  [attr.aria-label]=\"viewSourceLabel()\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeCornerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-github-fork-me-corner', standalone: false, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  aria-label=\"View source on GitHub\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }]
+            args: [{ selector: 'taon-github-fork-me-corner', standalone: false, template: "<a\n  href=\"{{ url }}\"\n  class=\"github-corner\"\n  [attr.aria-label]=\"viewSourceLabel()\"\n  ><svg\n    width=\"80\"\n    height=\"80\"\n    viewBox=\"0 0 250 250\"\n    style=\"\n      fill: #151513;\n      color: #fff;\n      position: absolute;\n      top: 0;\n      border: 0;\n      right: 0;\n    \"\n    aria-hidden=\"true\">\n    <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n    <path\n      d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n      fill=\"currentColor\"\n      style=\"transform-origin: 130px 106px\"\n      class=\"octo-arm\"></path>\n    <path\n      d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n      fill=\"currentColor\"\n      class=\"octo-body\"></path>\n  </svg>\n</a>\n", styles: ["a{opacity:.7}a:hover{opacity:1}.github-corner:hover .octo-arm{opacity:1;animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}\n"] }]
         }], propDecorators: { url: [{
                 type: Input
             }] } });
@@ -764,16 +791,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
+const t$9 = Translation.for('src/lib/ui/taon-github-fork-me-ribbon/taon-github-fork-me-ribbon.component.ts', { "src/lib/ui/taon-github-fork-me-ribbon/taon-github-fork-me-ribbon.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-github-fork-me-ribbon.component.ts.en-US.i18n.data-u6qBMmlL.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-github-fork-me-ribbon.component.ts.pl-PL.i18n.data-Bqs2PSZv.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-github-fork-me-ribbon.component.ts.de-DE.i18n.data-d6Go1SVC.mjs')).default } });
 class TaonGithubForkMeRibbonComponent {
     constructor() {
+        this.t = t$9.for(this);
+        this.altText = this.t.signal.gettext('Fork me on GitHub');
         this.url = 'https://github.com';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeRibbonComponent, isStandalone: false, selector: "taon-github-fork-me-ribbon", inputs: { url: "url" }, ngImport: i0, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>\n", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonGithubForkMeRibbonComponent, isStandalone: false, selector: "taon-github-fork-me-ribbon", inputs: { url: "url" }, ngImport: i0, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    [alt]=\"altText()\"\n    data-recalc-dims=\"1\"\n/></a>\n", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonGithubForkMeRibbonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-github-fork-me-ribbon', standalone: false, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    alt=\"Fork me on GitHub\"\n    data-recalc-dims=\"1\"\n/></a>\n", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }]
+            args: [{ selector: 'taon-github-fork-me-ribbon', standalone: false, template: "<a href=\"{{ url }}\"\n  ><img\n    decoding=\"async\"\n    loading=\"lazy\"\n    width=\"149\"\n    height=\"149\"\n    src=\"data:image/webp;base64,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\"\n    class=\"attachment-full size-full\"\n    [alt]=\"altText()\"\n    data-recalc-dims=\"1\"\n/></a>\n", styles: [":host{position:fixed;top:-2px;right:0;transform:rotate(90deg);z-index:2147483647}a{opacity:.7}a:hover{opacity:1}\n"] }]
         }], propDecorators: { url: [{
                 type: Input
             }] } });
@@ -932,9 +962,9 @@ class TaonIframeSyncComponent {
       class="iframe-loading-placeholder"
       [style.background]="loaderBackgroundColor">
       <div class="spinner"></div>
-      <p>Loading documentation...</p>
+      <p translate [translate-t]="t">Loading documentation...</p>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonIframeSyncComponent, decorators: [{
             type: Component,
@@ -957,9 +987,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
       class="iframe-loading-placeholder"
       [style.background]="loaderBackgroundColor">
       <div class="spinner"></div>
-      <p>Loading documentation...</p>
+      <p translate [translate-t]="t">Loading documentation...</p>
     </div>
-  `, standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+  `, standalone: true, imports: [NgIf, TranslateDirective], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { loaderBackgroundColor: [{
                 type: Input
             }], iframeRef: [{
@@ -978,13 +1008,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region import
 //#endregion
-const t$4 = Translation.for('src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts', { "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.en-US.i18n.data-L4Myx3Qy.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.pl-PL.i18n.data-D2z4X4t3.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.de-DE.i18n.data-Cd9FbUj8.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.en-US.i18n.data-DN8soZSJ.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.pl-PL.i18n.data-BXH1x3RS.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.de-DE.i18n.data-UUFMWd9s.mjs')).default } }, {
+const t$8 = Translation.for('src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts', { "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.en-US.i18n.data-DJjeTGqR.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.pl-PL.i18n.data-Bk-mHFmD.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.html.de-DE.i18n.data-DwHblBd2.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.en-US.i18n.data-yj9v8-NT.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.pl-PL.i18n.data-Bqp3DTeI.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-kv-authorization.component.ts.de-DE.i18n.data-D0zTE02n.mjs')).default } }, {
 // debug: true,
 });
 class TaonKvAuthorizationComponent {
     constructor() {
-        this.t = t$4.for(this);
-        this.infoMsg = t$4.signal.gettext('Loading authorization info...');
+        this.t = t$8.for(this);
+        this.infoMsg = t$8.signal.gettext('Loading authorization info...');
         // asd = t.signal.gettext('You purchased');
         this.cdr = inject(ChangeDetectorRef);
         this.products = [];
@@ -1041,11 +1071,11 @@ class TaonKvAuthorizationComponent {
         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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">product(s)</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonKvAuthorizationComponent, isStandalone: true, selector: "taon-kv-authorization", inputs: { email: "email", url: "url", products: "products" }, outputs: { authorizedProducts: "authorizedProducts" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      {{\n        t.gettext('You purchased [[ count ]] product(s)', {\n          count: authorizedCount(),\n        })\n      }}\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonKvAuthorizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-kv-authorization', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateDirective], template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">product(s)</span>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'taon-kv-authorization', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateDirective], template: "<div class=\"taon-kv-authorization\">\n  <div *ngIf=\"loading()\">{{ infoMsg() }}</div>\n\n  <div *ngIf=\"!loading()\">\n    <div\n      *ngIf=\"authorizedCount() === 0\"\n      translate [translate-t]=\"t\" [translate-t]=\"t\">\n      You did not purchase any products\n    </div>\n\n    <div *ngIf=\"authorizedCount() > 0\">\n      {{\n        t.gettext('You purchased [[ count ]] product(s)', {\n          count: authorizedCount(),\n        })\n      }}\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { email: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1061,10 +1091,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t$3 = Translation.for('src/lib/ui/taon-lang-selector/taon-lang-selector.component.ts', { "src/lib/ui/taon-lang-selector/taon-lang-selector.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.en-US.i18n.data-AvBh0X6D.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.pl-PL.i18n.data-BcEDgtVN.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.de-DE.i18n.data-DUhJE-G6.mjs')).default }, "src/lib/ui/taon-lang-selector/taon-lang-selector.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.en-US.i18n.data-BCegREwL.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.pl-PL.i18n.data-D6svwf3r.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.de-DE.i18n.data-NFS7RWqQ.mjs')).default } });
+const t$7 = Translation.for('src/lib/ui/taon-lang-selector/taon-lang-selector.component.ts', { "src/lib/ui/taon-lang-selector/taon-lang-selector.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.en-US.i18n.data-4nAHk-sm.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.pl-PL.i18n.data-inQnGyU2.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-lang-selector.component.html.de-DE.i18n.data-C4lwsiPb.mjs')).default }, "src/lib/ui/taon-lang-selector/taon-lang-selector.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.en-US.i18n.data-CpCS-iAg.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.pl-PL.i18n.data-Cat8zXyQ.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-lang-selector.component.ts.de-DE.i18n.data-DN4Vfj12.mjs')).default } });
 class TaonLangSelectorComponent {
     constructor() {
-        this.t = t$3.for(this);
+        this.t = t$7.for(this);
         this.translateService = inject(TranslateService);
         this.availableLangs$ = this.translateService.manager.availableLangs$.pipe(
         // tap(availableLangs => {
@@ -1095,20 +1125,26 @@ class TaonLangSelectorComponent {
         await this.translateService.changeGlobalLang(select.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonLangSelectorComponent, isStandalone: true, selector: "taon-lang-selector", ngImport: i0, template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonLangSelectorComponent, isStandalone: true, selector: "taon-lang-selector", ngImport: i0, template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      (isDisabled$ | async)\n        ? t.gettext('Select Language (disabled)')\n        : t.gettext('Select Language')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-lang-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateDirective, JsonPipe], template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'taon-lang-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, TranslateDirective, JsonPipe], template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">\n    {{\n      (isDisabled$ | async)\n        ? t.gettext('Select Language (disabled)')\n        : t.gettext('Select Language')\n    }}\n  </span>\n\n  <!-- currentLang = {{ currentLang | json }} -->\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentLang\"\n    [disabled]=\"isDisabled$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option\n        [value]=\"lang.code\"\n        [selected]=\"lang.code === currentLang\">\n        {{ lang.label }}\n      </option>\n    }\n  </select>\n</label>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
+const t$6 = Translation.for('src/lib/ui/taon-not-found/taon-not-found.component.ts', { "src/lib/ui/taon-not-found/taon-not-found.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-not-found.component.html.en-US.i18n.data-Dgke5R10.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-not-found.component.html.pl-PL.i18n.data-CmevMZSu.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-not-found.component.html.de-DE.i18n.data-Dts2ZKY1.mjs')).default }, "src/lib/ui/taon-not-found/taon-not-found.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-not-found.component.ts.en-US.i18n.data-BD0Yx8ok.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-not-found.component.ts.pl-PL.i18n.data-BC-2xK2m.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-not-found.component.ts.de-DE.i18n.data-Ca5d-GTY.mjs')).default } }, {
+// debug: true,
+});
 class TaonNotFoundComponent {
+    constructor() {
+        this.t = t$6.for(this);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotFoundComponent, isStandalone: true, selector: "taon-not-found", ngImport: i0, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotFoundComponent, isStandalone: true, selector: "taon-not-found", ngImport: i0, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2\n      class=\"text-2xl mb-3\"\n      translate [translate-t]=\"t\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      <span translate [translate-t]=\"t\">The page you are looking for does not exist or has been moved.</span>\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span\n        class=\"p-button-label text-primary no-underline\"\n        translate [translate-t]=\"t\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        ><span translate [translate-t]=\"t\">Powered by</span>\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-not-found', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'taon-not-found', standalone: true, imports: [RouterLink, TranslateDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2\n      class=\"text-2xl mb-3\"\n      translate [translate-t]=\"t\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      <span translate [translate-t]=\"t\">The page you are looking for does not exist or has been moved.</span>\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span\n        class=\"p-button-label text-primary no-underline\"\n        translate [translate-t]=\"t\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        ><span translate [translate-t]=\"t\">Powered by</span>\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }] });
 
 //#region imports
@@ -1302,11 +1338,11 @@ class TaonRumbleComponent {
         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>\n", 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"] }] }); }
+    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 <span translate [translate-t]=\"t\">Private video</span></div>\n  </div>\n</div>\n", 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"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }] }); }
 }
 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>\n", 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"] }]
+            args: [{ selector: 'taon-rumble', standalone: true, imports: [NgIf, TranslateDirective], 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 <span translate [translate-t]=\"t\">Private video</span></div>\n  </div>\n</div>\n", 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: [{
@@ -1331,11 +1367,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }] } });
 
 //#region imports
+//#endregion
+const t$5 = Translation.for('src/lib/ui/taon-session-passcode/taon-session-passcode.component.ts', { "src/lib/ui/taon-session-passcode/taon-session-passcode.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-session-passcode.component.ts.en-US.i18n.data-B9asfoSA.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-session-passcode.component.ts.pl-PL.i18n.data-CsjFV6ev.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-session-passcode.component.ts.de-DE.i18n.data-jn8Xwywn.mjs')).default } });
 class TaonSessionPasscodeComponent {
     constructor(element, domSanitizer, cdr) {
         this.element = element;
         this.domSanitizer = domSanitizer;
         this.cdr = cdr;
+        this.t = t$5.for(this);
         this.destroyRef = inject(DestroyRef);
         this.lastPasscode = TaonStor.inLocalstorage({
             defaultValue: '',
@@ -1348,10 +1387,7 @@ class TaonSessionPasscodeComponent {
     }
     async ngOnInit() {
         if (!this.message) {
-            this.message = `
-      This website is only for testing purpose. Please type passcode bellow to see content.
-
-      `;
+            this.message = this.t.gettext('This website is only for testing purpose. Please type passcode bellow to see content.');
         }
         this.safeMessage = this.domSanitizer.bypassSecurityTrustHtml(this.message);
         await this.lastPasscode.ready();
@@ -1510,10 +1546,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t$2 = Translation.for('src/lib/ui/taon-settings/taon-settings.component.ts', { "src/lib/ui/taon-settings/taon-settings.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-settings.component.html.en-US.i18n.data-B4IEvSls.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-settings.component.html.pl-PL.i18n.data-ByfeWf3E.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-settings.component.html.de-DE.i18n.data-CIjrcJ3G.mjs')).default }, "src/lib/ui/taon-settings/taon-settings.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-settings.component.ts.en-US.i18n.data-Dyz0AWg7.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-settings.component.ts.pl-PL.i18n.data-D2d0O64m.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-settings.component.ts.de-DE.i18n.data-CLNLYilk.mjs')).default } });
+const t$4 = Translation.for('src/lib/ui/taon-settings/taon-settings.component.ts', { "src/lib/ui/taon-settings/taon-settings.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-settings.component.html.en-US.i18n.data-CgRWM-Zb.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-settings.component.html.pl-PL.i18n.data-C5pxe7dK.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-settings.component.html.de-DE.i18n.data-BCqvA8-p.mjs')).default }, "src/lib/ui/taon-settings/taon-settings.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-settings.component.ts.en-US.i18n.data-CjT-Nolg.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-settings.component.ts.pl-PL.i18n.data-DDEYHLAw.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-settings.component.ts.de-DE.i18n.data-DtZogrh0.mjs')).default } });
 class TaonSettingsComponent {
     constructor() {
-        this.t = t$2.for(this);
+        this.t = t$4.for(this);
+        this.closeDialogLabel = this.t.signal.gettext('Close dialog');
         this.TaonThemeMode = TaonThemeMode;
         this.dialogRef = inject((MatDialogRef));
         this.taonTheme = inject(TaonThemeService);
@@ -1522,7 +1559,7 @@ class TaonSettingsComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, decorators: [{
             type: Component,
@@ -1535,13 +1572,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatButtonModule,
                         MatDialogModule,
                         TranslateDirective,
-                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"] }]
         }] });
 
 //#region imports
 //#endregion
+const t$3 = Translation.for('src/lib/ui/taon-simple-layout/taon-simple-layout.component.ts', { "src/lib/ui/taon-simple-layout/taon-simple-layout.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-simple-layout.component.html.en-US.i18n.data-FieC8Y0E.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-simple-layout.component.html.pl-PL.i18n.data-BVZFQc7-.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-simple-layout.component.html.de-DE.i18n.data-BC3-68HZ.mjs')).default }, "src/lib/ui/taon-simple-layout/taon-simple-layout.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-simple-layout.component.ts.en-US.i18n.data-DdPQ2S6M.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-simple-layout.component.ts.pl-PL.i18n.data-BP-vOkfr.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-simple-layout.component.ts.de-DE.i18n.data-fWT0GeZB.mjs')).default } }, {
+// debug: true,
+});
 class TaonSimpleLayoutComponent {
     constructor() {
+        this.t = t$3.for(this);
         this.router = inject(Router);
         this.dialog = inject(MatDialog);
         this.theme = inject(TaonThemeService);
@@ -1574,7 +1615,7 @@ class TaonSimpleLayoutComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { hideThemeSettings: { classPropertyName: "hideThemeSettings", publicName: "hideThemeSettings", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                Settings\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { hideThemeSettings: { classPropertyName: "hideThemeSettings", publicName: "hideThemeSettings", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                <span translate [translate-t]=\"t\">Settings</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    <span translate [translate-t]=\"t\">Please add your component inside</span>\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, decorators: [{
             type: Component,
@@ -1591,7 +1632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatDialogModule,
                         JsonPipe,
                         TaonSettingsComponent,
-                    ], template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                Settings\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    Please add your component inside\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"] }]
+                        TranslateDirective,
+                    ], template: "@if (!hideHeader) {\n  <header class=\"relative z-10 flex w-full flex-row items-center shadow-md\">\n    <!-- LEFT: projected header/logo -->\n    <div class=\"flex shrink-0 items-center\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <!-- DESKTOP NAVIGATION -->\n    @if (navItems()?.length > 0) {\n      <nav\n        class=\"desktop-navigation shrink-0\"\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (item of navItems(); track item.path) {\n          <a\n            mat-tab-link\n            href=\"javascript:void(0)\"\n            [style.text-decoration]=\"\n              (activePath === item.path && !forceShowBaseRootApp) ||\n              ('/' === item.path && forceShowBaseRootApp)\n                ? 'underline'\n                : 'none'\n            \"\n            (click)=\"navigateTo(item)\">\n            @if (item.path === '/') {\n              <mat-icon fontIcon=\"home\"></mat-icon>\n            } @else {\n              {{ item.label }}\n            }\n          </a>\n        }\n      </nav>\n    }\n\n    <!-- spacer -->\n    <div class=\"flex-1\"></div>\n\n    <!-- DESKTOP BUTTONS -->\n    <div class=\"flex shrink-0 flex-row items-center\">\n      <ng-content select=\"[buttons]\"></ng-content>\n\n      @if (!hideThemeSettings) {\n        <button\n          class=\"mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- MOBILE MENU BUTTON -->\n    <div class=\"mobile-menu relative\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\">\n        <mat-icon>\n          {{ mobileMenuOpen() ? 'close' : 'menu' }}\n        </mat-icon>\n      </button>\n\n      @if (mobileMenuOpen()) {\n        <div\n          class=\"absolute right-2 top-full z-[1000] mt-1 min-w-52 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg\">\n          @for (item of navItems() ?? []; track item.path) {\n            <button\n              mat-button\n              class=\"!flex !w-full !justify-start !rounded-none\"\n              (click)=\"navigateToMobile(item)\">\n              @if (item.path === '/') {\n                <mat-icon class=\"mr-2\">home</mat-icon>\n              }\n\n              {{ item.label }}\n            </button>\n          }\n\n          @if (!hideThemeSettings) {\n            <div class=\"border-t border-gray-200\">\n              <button\n                mat-button\n                class=\"!flex !w-full !justify-start !rounded-none\"\n                (click)=\"openSettingsFromMobileMenu()\">\n                <mat-icon class=\"mr-2\">settings</mat-icon>\n                <span translate [translate-t]=\"t\">Settings</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </header>\n}\n\n<mat-tab-nav-panel\n  #tabPanel\n  class=\"pt-2\">\n  <div class=\"projected-wrapper\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"fallback-message\">\n    <span translate [translate-t]=\"t\">Please add your component inside</span>\n    <br />\n\n    <pre>\n      <code class=\"block bg-gray-100\">\n        &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n          &lt;header\n            header\n            class=&quot;flex&quot;&gt;\n\n            &lt;img\n              class=&quot;rounded&quot;\n              src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n              height=&quot;50px&quot; /&gt;\n\n          &lt;/header&gt;\n\n          &lt;br /&gt;\n\n          &lt;h3 class=&quot;text-blue-200&quot;&gt;\n            Welcome to hamster store.\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Buy cheap hamster videos for free!\n          &lt;/h3&gt;\n\n          &lt;h3 class=&quot;text-blue-300&quot;&gt;\n            Subscribe more hamsters video daily!\n          &lt;/h3&gt;\n\n          &lt;ng-container buttons&gt;\n            &lt;button\n              mat-button\n              class=&quot;flex items-center&quot;&gt;\n              Hello friend!\n            &lt;/button&gt;\n          &lt;/ng-container&gt;\n\n        &lt;/taon-simple-layout&gt;\n      </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}:host ::ng-deep .mat-mdc-tab-link-container{border:none!important;box-shadow:none!important;background:transparent!important}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}.desktop-navigation,.desktop-buttons{display:flex}.mobile-menu{display:none}@media(max-width:767px){.desktop-navigation,.desktop-buttons{display:none!important}.mobile-menu{display:block!important}}\n"] }]
         }], propDecorators: { hideThemeSettings: [{
                 type: Input
             }], hideHeader: [{
@@ -1685,12 +1727,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }] } });
 
-const t$1 = Translation.for('src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts', { "src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.en-US.i18n.data-Dm_w_Ca7.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.pl-PL.i18n.data-Ceog6BY8.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.de-DE.i18n.data-qkknVsLY.mjs')).default } }, {
+const t$2 = Translation.for('src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts', { "src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.html.en-US.i18n.data-CEMcheMW.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.html.pl-PL.i18n.data-DfxOdEpv.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.html.de-DE.i18n.data-C8CbDBUW.mjs')).default }, "src/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.en-US.i18n.data-Cdh-Tzdj.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.pl-PL.i18n.data-C1EnH8zG.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-stripe-buy-button.component.ts.de-DE.i18n.data-BcnIhuxH.mjs')).default } }, {
 // debug: true
 });
 class TaonStripeBuyButtonComponent {
     constructor() {
-        this.t = t$1.for(this);
+        this.t = t$2.for(this);
         /**
          * optional label for buy button
          */
@@ -1744,11 +1786,11 @@ class TaonStripeBuyButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonStripeBuyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span\n    *ngIf=\"loading\"\n    translate [translate-t]=\"t\" [translate-t]=\"t\">Redirecting to Stripe...</span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }] }); }
 }
 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  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n" }]
+            args: [{ selector: 'taon-stripe-buy-button', imports: [CommonModule, MatButtonModule, TranslateDirective], template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 rounded-xl whitespace-nowrap ml-2\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span\n    *ngIf=\"loading\"\n    translate [translate-t]=\"t\" [translate-t]=\"t\">Redirecting to Stripe...</span>\n</button>\n" }]
         }], propDecorators: { priceId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1771,13 +1813,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t = Translation.for('src/lib/ui/taon-theme/taon-theme.component.ts', { "src/lib/ui/taon-theme/taon-theme.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-theme.component.html.en-US.i18n.data-B5fS6hsE.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-theme.component.html.pl-PL.i18n.data-DTTt2BG3.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-theme.component.html.de-DE.i18n.data-CA0qy2eB.mjs')).default }, "src/lib/ui/taon-theme/taon-theme.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-theme.component.ts.en-US.i18n.data-BdCsCING.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-theme.component.ts.pl-PL.i18n.data-B0zk5tlU.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-theme.component.ts.de-DE.i18n.data-BHIA7U_e.mjs')).default } });
+const t$1 = Translation.for('src/lib/ui/taon-theme/taon-theme.component.ts', { "src/lib/ui/taon-theme/taon-theme.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-theme.component.html.en-US.i18n.data-BUwcxIB4.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-theme.component.html.pl-PL.i18n.data-CWMkZ7P5.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-theme.component.html.de-DE.i18n.data-Drvknh6e.mjs')).default }, "src/lib/ui/taon-theme/taon-theme.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-theme.component.ts.en-US.i18n.data-DZ61xik4.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-theme.component.ts.pl-PL.i18n.data-BituHlQh.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-theme.component.ts.de-DE.i18n.data-CRr-CEjJ.mjs')).default } });
 /**
  * @deprecated use TaonSettings
  */
 class TaonThemeComponent {
     constructor() {
-        this.t = t.for(this);
+        this.t = t$1.for(this);
+        this.closeDialogLabel = this.t.signal.gettext('Close dialog');
         this.TaonThemeMode = TaonThemeMode;
         this.dialogRef = inject((MatDialogRef));
         this.taonTheme = inject(TaonThemeService);
@@ -1786,7 +1829,7 @@ class TaonThemeComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonThemeComponent, isStandalone: true, selector: "taon-theme", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonThemeComponent, isStandalone: true, selector: "taon-theme", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
             type: Component,
@@ -1796,7 +1839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatButtonModule,
                         MatDialogModule,
                         TranslateDirective,
-                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n" }]
+                    ], template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    [attr.aria-label]=\"closeDialogLabel()\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\">\n     {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n" }]
         }] });
 
 var TaonYouTubeUtils;
@@ -1852,6 +1895,7 @@ var TaonYouTubeUtils;
 
 //#region imports
 //#endregion
+const t = Translation.for('src/lib/ui/taon-youtube-video/taon-youtube-video.component.ts', { "src/lib/ui/taon-youtube-video/taon-youtube-video.component.html": { "en-US": async () => (await import('./taon-ui-websql-taon-youtube-video.component.html.en-US.i18n.data--GoIVRaK.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-youtube-video.component.html.pl-PL.i18n.data-CO2up45E.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-youtube-video.component.html.de-DE.i18n.data-C3dy-DW5.mjs')).default }, "src/lib/ui/taon-youtube-video/taon-youtube-video.component.ts": { "en-US": async () => (await import('./taon-ui-websql-taon-youtube-video.component.ts.en-US.i18n.data-BMIb2hC8.mjs')).default, "pl-PL": async () => (await import('./taon-ui-websql-taon-youtube-video.component.ts.pl-PL.i18n.data-DceaqFCF.mjs')).default, "de-DE": async () => (await import('./taon-ui-websql-taon-youtube-video.component.ts.de-DE.i18n.data-CsLUv0ZA.mjs')).default } });
 class TaonYoutubeVideoComponent {
     get containerStyle() {
         return this.height ? { height: this.height } : null;
@@ -1862,6 +1906,7 @@ class TaonYoutubeVideoComponent {
     //#endregion
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        this.t = t.for(this);
         this.state = 'preview-picture';
         this.paddlockClicked = new EventEmitter();
         this.previewClicked = new EventEmitter();
@@ -2035,11 +2080,17 @@ class TaonYoutubeVideoComponent {
         }), 'https://www.youtube.com');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || t.gettext('YouTube video')\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      <span translate [translate-t]=\"t\">Thanks for buying<br />this video</span>\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, decorators: [{
             type: Component,
-            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  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || 'YouTube video'\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      Thanks for buying<br />\n      this video\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"] }]
+            args: [{ selector: 'taon-youtube-video', standalone: true, imports: [
+                        NgIf,
+                        NgStyle,
+                        MatIconModule,
+                        CommonModule,
+                        TranslateDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- THUMBNAIL -->\n  <div\n    *ngIf=\"!videoActivated()\"\n    class=\"yt-preview\"\n    (click)=\"onPreviewClick()\">\n    <!-- @if (isInViewport()) { -->\n    <img\n      class=\"yt-media\"\n      [src]=\"previewImage()\"\n      [alt]=\"displayTitle || t.gettext('YouTube video')\"\n      decoding=\"async\"\n      draggable=\"false\"\n      (error)=\"onThumbnailError($event)\" />\n    <!-- } -->\n\n    <!-- PLAY -->\n    <div\n      *ngIf=\"state !== 'preview-picture-locked'\"\n      class=\"yt-play-button\">\n      <mat-icon>play_arrow</mat-icon>\n    </div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"state === 'preview-picture-locked'\"\n      class=\"yt-overlay yt-lock\"\n      (click)=\"onLockClick($event)\">\n      <mat-icon>lock</mat-icon>\n    </div>\n  </div>\n\n  <!-- ACTUAL YOUTUBE PLAYER -->\n  <iframe\n    #ytFrame\n    *ngIf=\"videoActivated()\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allow=\"autoplay; encrypted-media; picture-in-picture; web-share\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    *ngIf=\"\n      videoActivated() &&\n      state === 'video-preview-private' &&\n      allowedToBeDisplayedVideoOveraly()\n    \"\n    class=\"yt-overlay-video\"\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    (click)=\"clicked($event)\">\n    <h1 class=\"text-center\">\n      <span translate [translate-t]=\"t\">Thanks for buying<br />this video</span>\n    </h1>\n  </div>\n</div>\n\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\n", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-preview{position:absolute;inset:0;cursor:pointer;touch-action:pan-y}.yt-media{width:100%;height:100%;display:block;object-fit:contain;border:0}img.yt-media{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.yt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.yt-play-button{position:absolute;left:50%;top:50%;width:72px;height:52px;transform:translate(-50%,-50%);border-radius:14px;background:#ff0000e6;display:flex;align-items:center;justify-content:center;pointer-events:none}.yt-play-button mat-icon{width:40px;height:40px;font-size:40px;color:#fff}.yt-preview:hover .yt-play-button{transform:translate(-50%,-50%) scale(1.08)}.yt-lock{background:#0000008c}.yt-lock mat-icon{width:60px;height:60px;font-size:56px;color:#fff}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { videoId: [{
                 type: Input,
                 args: [{ required: true }]