taon-ui 21.0.55 → 21.0.56

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

@@ -52,7 +52,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import * as i1 from '@angular/common';
-import { CommonModule, NgIf, AsyncPipe, isPlatformBrowser, JsonPipe, NgStyle } from '@angular/common';
+import { CommonModule, NgIf, AsyncPipe, JsonPipe, isPlatformBrowser, NgStyle } from '@angular/common';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { ModalModule } from 'ngx-bootstrap/modal';
@@ -64,7 +64,7 @@ import * as i2$1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import * as i3 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
-import { interval, tap, Subject, Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, of, Subscription, defer, fromEvent, debounceTime, share } from 'rxjs';
+import { interval, tap, Subject, Observable, BehaviorSubject, map, distinctUntilChanged, shareReplay, take, withLatestFrom, Subscription, defer, fromEvent, debounceTime, share } from 'rxjs';
 import * as i4$1 from 'static-columns/browser';
 import { StaticColumnsModule } from 'static-columns/browser';
 import { TaonAdminPanelMode, TaonAdminService, Symbols } from 'taon/browser';
@@ -110,7 +110,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.55';
+const CURRENT_PACKAGE_VERSION = '21.0.56';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 function myOrgProj() { }
@@ -866,11 +866,11 @@ class TaonSessionPasscodeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, deps: [{ token: i0.ElementRef, self: true }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSessionPasscodeComponent, isStandalone: true, selector: "taon-session-passcode", inputs: { passcode: "passcode", message: "message" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSessionPasscodeComponent, isStandalone: true, selector: "taon-session-passcode", inputs: { passcode: "passcode", message: "message" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSessionPasscodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-session-passcode', standalone: true, imports: [PasswordModule, CommonModule, ReactiveFormsModule, FormsModule], template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n</form>\n", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"] }]
+            args: [{ selector: 'taon-session-passcode', standalone: true, imports: [PasswordModule, CommonModule, ReactiveFormsModule, FormsModule], template: "<form\n  [formGroup]=\"form\"\n  content=\"notranslate\"\n  autocomplete=\"off\"\n  (click)=\"focus()\"\n  (ngSubmit)=\"submit(form.value)\"\n  class=\"flex flex-col items-center w-full h-full\">\n  <div class=\"flex content-center w-full justify-center mt-8\">\n    <p\n      class=\"p-3 max-w-[400px] min-h-[100px]\"\n      [innerHtml]=\"safeMessage\"></p>\n  </div>\n\n  <input\n    type=\"password\"\n    class=\"text-5xl md:text-8xl pointer-events-none\"\n    #taonpasscode\n    (keyup)=\"onKeyup($event)\"\n    formControlName=\"passcode\" />\n</form>", styles: [":host{position:fixed;background-color:#9f9f9f57;z-index:2147483647;backdrop-filter:blur(50px);width:100%;height:100%;display:none}input{background:#fff;border-radius:6px;outline:0px;border:0px;color:gray;text-align:center;width:500px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
                     type: Self
                 }] }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { passcode: [{
@@ -976,7 +976,7 @@ class TaonAdminModeConfigurationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { scrollableEnabled: "scrollableEnabled", showPasscode: "showPasscode", passcode: "passcode", message: "message" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i3.NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { scrollableEnabled: "scrollableEnabled", showPasscode: "showPasscode", passcode: "passcode", message: "message" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i3.NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: 
                 // TaonDbAdminComponent,
                 TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
 }
@@ -1000,7 +1000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         DragDropModule,
                         // TaonDbAdminComponent,
                         TaonSessionPasscodeComponent,
-                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
+                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [taonAdminService.isDesktop()]=\"taonAdminService.isDesktop()\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe\n  \"\n  (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<!-- #region content or content with scrollbar-->\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n<!-- #endregion-->\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n\n  <div\n    class=\"bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <img\n      class=\"p-2 flex\"\n      style=\"height: 45px\"\n      src=\"assets/assets-for/taon-ui/assets/shared/logo-header-admin-mode.png\" />\n\n    <div class=\"flex flex-row\">\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)\"\n        class=\"\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)\"\n        class=\"\">\n        <mat-icon>minimize</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"\n          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)\n        \"\n        class=\"\">\n        <mat-icon>fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>close_fullscreen</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE\"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)\"\n        class=\"\">\n        <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n      </button>\n\n      <button\n        style=\"width: 40px\"\n        *ngIf=\"\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&\n          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN\n        \"\n        mat-icon-button\n        (click)=\"taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)\"\n        class=\"\">\n        <mat-icon>launch</mat-icon>\n      </button>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <div\n    class=\"w-full flex flex-row align-items-center\"\n    [ngClass]=\"{\n      'block w-full':\n        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,\n    }\">\n    <div class=\"w-full\">\n      <!-- (wheel)=\"scrollTabs($event)\" -->\n      <mat-tab-group\n        dynamicHeight\n        [selectedIndex]=\"selectedIndex()\"\n        (selectedIndexChange)=\"selectedIndex.set($event)\">\n        <mat-tab label=\"Settings\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload()\"\n                  (change)=\"\n                    taonAdminService.keepWebsqlDbDataAfterReload.set(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when re-loading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n\n        @for (\n          additonalTab of taonAdminService.additionalTabs();\n          track additonalTab.name\n        ) {\n          <mat-tab [label]=\"additonalTab.name\">\n            <section>\n              @if (isLink(additonalTab.templateOrIframeLink)) {\n                <iframe\n                  class=\"block w-full\"\n                  [src]=\"additonalTab.templateOrIframeLink\"\n                  frameborder=\"0\"\n                  allowfullscreen>\n                </iframe>\n              } @else {\n                <div class=\"block w-full\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      additonalTab.templateOrIframeLink\n                    \"></ng-container>\n                </div>\n              }\n            </section>\n            <br />\n            <taon-db-admin />\n          </mat-tab>\n        }\n      </mat-tab-group>\n    </div>\n  </div>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content in side mode -->\n<!-- <mat-drawer-container (backdropClick)=\"opened = false\" -->\n<!-- [style.height.px]=\"height\" -->\n<mat-drawer-container\n  *ngIf=\"\n    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n    taonAdminService.isDesktop() &&\n    !taonAdminService.isIframe &&\n    !reloading()\n  \"\n  class=\"example-container h-screen\"\n  style=\"background-color: transparent\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 450px\"\n    [opened]=\"true\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      [ngTemplateOutlet]=\"\n        scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->\n\n<!-- #region content in any other mode than side side mode -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    !(\n      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&\n      taonAdminService.isDesktop() &&\n      !taonAdminService.isIframe &&\n      !reloading()\n    )\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->", styles: ["section{display:block;padding:15px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
         }], propDecorators: { scrollableEnabled: [{
                 type: Input
             }], showPasscode: [{
@@ -1280,7 +1280,7 @@ class AuthDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>\n", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthDialogComponent, isStandalone: true, selector: "app-auth-dialog", inputs: { googleClientId: "googleClientId", microsoftClientId: "microsoftClientId" }, viewQueries: [{ propertyName: "emailLoginBtn", first: true, predicate: ["emailLoginBtn"], descendants: true, static: true }, { propertyName: "googleBtn", first: true, predicate: ["googleBtn"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"auth-dialog p-5\">\n  <h4\n    class=\"mb-3\"\n    translate [translate-t]=\"t\">\n    Login or Register\n  </h4>\n\n  <div\n    class=\"w-full pt-3\"\n    #emailLoginBtn>\n    <form\n      [formGroup]=\"form\"\n      (ngSubmit)=\"loginByEmail()\"\n      class=\"w-full\">\n      <mat-form-field\n        appearance=\"outline\"\n        class=\"w-full email-field\">\n        <mat-label *ngIf=\"!diableLoginByEmail\">Email</mat-label>\n\n        <input\n          matInput\n          formControlName=\"email\"\n          class=\"pl-1\"\n          type=\"email\"\n          [placeholder]=\"\n            diableLoginByEmail ? t.gettext('Login by email (disabled)') : ''\n          \" />\n\n        <button\n          mat-icon-button\n          [disabled]=\"diableLoginByEmail\"\n          matSuffix\n          color=\"primary\">\n          <mat-icon>mail</mat-icon>\n        </button>\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('pattern') && form.get('email')?.touched\n          \"\n          translate [translate-t]=\"t\" [translate-t]=\"t\">\n          Please enter a valid email address\n        </mat-error>\n\n        <mat-error\n          *ngIf=\"\n            form.get('email')?.hasError('required') &&\n            form.get('email')?.touched\n          \">\n          {{ t.gettext('Email is') }} <strong translate [translate-t]=\"t\">required</strong>\n        </mat-error>\n      </mat-form-field>\n    </form>\n\n    <div class=\"divider\">\n      <span translate [translate-t]=\"t\">or</span>\n    </div>\n\n    <!-- GOOGLE BUTTON -->\n    <div\n      #googleBtn\n      class=\"google-container\">\n      <span\n        *ngIf=\"!googleButtonLoaded\"\n        class=\"text-300 p-2\"\n        translate\n         [translate-t]=\"t\" [translate-t]=\"t\">loading google button..</span\n      >\n      <mat-progress-bar\n        *ngIf=\"!googleButtonLoaded\"\n        mode=\"indeterminate\"\n        class=\"auth-progress\" />\n    </div>\n\n    <!-- MICROSOFT BUTTON -->\n    <div\n      *ngIf=\"microsoftClientId\"\n      #microsoftBtn\n      class=\"microsoft-container\">\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        class=\"w-full microsoft-btn\"\n        (click)=\"loginWithMicrosoft()\">\n        <mat-icon class=\"mr-2\">login</mat-icon>\n        {{ t.gettext('Continue with Microsoft') }}\n      </button>\n    </div>\n  </div>\n\n  <br />\n\n  <div class=\"flex justify-content-end\">\n    <button\n      mat-button\n      mat-dialog-close>\n      {{ t.gettext('Cancel') }}\n    </button>\n  </div>\n</div>", styles: [".auth-dialog{width:100%}.google-container{width:100%;height:50px;border-color:#9ca3af!important}.microsoft-container{width:100%}.microsoft-btn{height:40px;border-radius:4px!important;border-color:#9ca3af!important;background-color:#fff}:host::ng-deep .email-field .mdc-notched-outline__trailing,:host::ng-deep .email-field .mdc-notched-outline__leading,:host::ng-deep .email-field .mdc-notched-outline__notch{border-color:#9ca3af!important}:host ::ng-deep .auth-progress .mdc-linear-progress__bar-inner{border-color:#9ca3af!important}.divider{display:flex;align-items:center;text-align:center;width:100%;margin:1rem 0}.divider:before,.divider:after{content:\"\";flex:1;border-bottom:1px solid #ccc}.divider span{padding:0 10px;color:#666;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MtxLoaderModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthDialogComponent, decorators: [{
             type: Component,
@@ -1300,7 +1300,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    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>", 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: [{
@@ -1350,11 +1350,11 @@ class AuthButtonComponent {
             : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AuthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: AuthButtonComponent, isStandalone: true, selector: "taon-auth-button", inputs: { linkToDashboard: "linkToDashboard", googleClientId: "googleClientId", microsoftClientId: "microsoftClientId", displayDashboardButton: "displayDashboardButton" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 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], template: "<div class=\"flex align-items-center gap-2\">\n  <ng-container *ngIf=\"(session.isLoggedIn$ | async) === false; else loggedIn\">\n    <button\n      mat-button\n      (click)=\"openLogin()\">\n      Login\n    </button>\n  </ng-container>\n\n  <ng-template #loggedIn>\n    <button\n      *ngIf=\"displayDashboardButton\"\n      mat-button\n      color=\"primary\"\n      class=\"auth-btn\"\n      (click)=\"goDashboard()\">\n      <mat-icon>dashboard</mat-icon>\n      Dashboard\n    </button>\n\n    <button\n      mat-button\n      class=\"ml-2\"\n      (click)=\"logout()\">\n      Logout ({{ (session.data$ | async)?.displayName }})\n    </button>\n  </ng-template>\n</div>", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { linkToDashboard: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1637,7 +1637,7 @@ 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-browser-taon-kv-authorization.component.html.en-US.i18n.data-C8oLV101.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-DIy8LL8b.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.en-US.i18n.data-CQWIs9wW.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.pl-PL.i18n.data-2Tqg8qKV.mjs')).default } }, {
+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-browser-taon-kv-authorization.component.html.en-US.i18n.data-C8oLV101.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.html.pl-PL.i18n.data-DIy8LL8b.mjs')).default }, "src/lib/ui/taon-kv-authorization/taon-kv-authorization.component.ts": { "en-US": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.en-US.i18n.data-DN8soZSJ.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-kv-authorization.component.ts.pl-PL.i18n.data-BXH1x3RS.mjs')).default } }, {
 // debug: true,
 });
 class TaonKvAuthorizationComponent {
@@ -1700,11 +1700,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\">products</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      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">products</span>\n    </div>\n  </div>\n</div>", 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\">products</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      <span translate [translate-t]=\"t\">You purchased </span> {{ authorizedCount() }}\n      <span translate [translate-t]=\"t\">products</span>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { email: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1720,36 +1720,40 @@ 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-browser-taon-lang-selector.component.html.en-US.i18n.data-CA40eqtb.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-lang-selector.component.html.pl-PL.i18n.data-zvYqVx6M.mjs')).default } });
+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-browser-taon-lang-selector.component.html.en-US.i18n.data-BvWzPc-J.mjs')).default, "pl-PL": async () => (await import('./taon-ui-browser-taon-lang-selector.component.html.pl-PL.i18n.data-BGKH8jX_.mjs')).default } });
 class TaonLangSelectorComponent {
     constructor() {
         this.t = t$3.for(this);
         this.translateService = inject(TranslateService);
-        this.availableLangs$ = this.translateService.manager.availableLangs$.pipe(tap(availableLangs => {
-            // console.log({ availableLangs });
+        this.availableLangs$ = this.translateService.manager.availableLangs$.pipe(
+        // tap(availableLangs => {
+        //   console.log({ availableLangs });
+        // }),
+        );
+        this.currentGlobalLanguage$ = this.translateService.manager.currentGlobalLanguage$.pipe(withLatestFrom(this.availableLangs$), map(([currentGlobalLanguage, availableLangs]) => {
+            return availableLangs.find(c => c.code === currentGlobalLanguage)?.code;
         }));
-        this.currentGlobalLanguage$ = this.translateService.currentGlobalLanguage$;
-        this.isLoading$ = of(false); // this.langSelectorService.isLoading$;
+        this.isDisabled$ = this.availableLangs$.pipe(map(c => c.length <= 1));
     }
     async changeLanguage(event) {
         const select = event.target;
         await this.translateService.changeGlobalLang(select.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonLangSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonLangSelectorComponent, isStandalone: true, selector: "taon-lang-selector", ngImport: i0, template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">{{\n    t.gettext('Select Language')\n  }}</span>\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentGlobalLanguage$ | async\"\n    [disabled]=\"isLoading$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option [value]=\"lang.code\">\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      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  @if (currentGlobalLanguage$ | async; as currentLang) {\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  }\n</label>", 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], template: "<label class=\"taon-lang-selector\">\n  <span class=\"taon-lang-selector__label\">{{\n    t.gettext('Select Language')\n  }}</span>\n\n  <select\n    class=\"taon-lang-selector__select\"\n    [value]=\"currentGlobalLanguage$ | async\"\n    [disabled]=\"isLoading$ | async\"\n    (change)=\"changeLanguage($event)\">\n    @for (lang of availableLangs$ | async; track lang.code) {\n      <option [value]=\"lang.code\">\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      t.gettext('Select Language') +\n        ' ' +\n        ((isDisabled$ | async) ? t.gettext('(disabled)') : '')\n    }}\n  </span>\n\n  @if (currentGlobalLanguage$ | async; as currentLang) {\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  }\n</label>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
 class TaonNotFoundComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonNotFoundComponent, isStandalone: true, selector: "taon-not-found", ngImport: i0, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-not-found', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center justify-content-center min-h-screen px-3\">\n  <div\n    class=\"text-center surface-card p-5 border-round shadow-2 w-full\"\n    style=\"max-width: 600px\">\n    <h1 class=\"text-6xl font-bold mb-3 text-red-500\">404</h1>\n\n    <h2 class=\"text-2xl mb-3\">Page not found</h2>\n\n    <p class=\"text-color-secondary mb-4\">\n      The page you are looking for does not exist or has been moved.\n    </p>\n\n    <a\n      routerLink=\"/\"\n      class=\"p-button p-component no-underline\">\n      <span class=\"p-button-label text-primary no-underline\">Go to Home</span>\n    </a>\n\n    <br />\n    <br />\n    <br />\n\n    <h4\n      class=\"flex flex-row align-content-center justify-content-center align-items-center\">\n      <img\n        height=\"20px\"\n        src=\"assets/assets-for/taon-ui/assets/shared/taon-small-logo-for-not-found.png\"\n        alt=\"\" />\n\n      <span class=\"p-2 text-gray-200\"\n        >Powered by\n        <a\n          class=\"text-gray-200\"\n          href=\"https://taon.dev\">\n          Taon.Dev\n        </a></span\n      >\n    </h4>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            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>", styles: [":host{display:block}\n"] }]
         }] });
 
 class TaonRumbleComponent {
@@ -1784,11 +1788,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 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonRumbleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-rumble', standalone: true, imports: [NgIf], template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>\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], template: "<div class=\"taon-rumble\">\n  <!-- PREVIEW MODE -->\n  <div\n    *ngIf=\"isPreview()\"\n    class=\"preview\"\n    (click)=\"onPreviewClick()\">\n    <img\n      class=\"preview-img\"\n      [src]=\"picturePreviewUrl\"\n      [alt]=\"title\" />\n\n    <div class=\"title\">\n      {{ title }}\n    </div>\n\n    <!-- PLAY BUTTON -->\n    <div class=\"play-button\">\u25B6</div>\n\n    <!-- LOCK -->\n    <div\n      *ngIf=\"isLocked()\"\n      class=\"lock\"\n      (click)=\"onPadlockClick($event)\">\n      \uD83D\uDD12\n    </div>\n  </div>\n\n  <!-- VIDEO OPEN -->\n  <div\n    *ngIf=\"isVideoOpen()\"\n    class=\"video\">\n    <iframe\n      class=\"rumble-frame\"\n      [src]=\"embedUrl()\"\n      frameborder=\"0\"\n      allowfullscreen>\n    </iframe>\n  </div>\n\n  <!-- PRIVATE VIDEO -->\n  <div\n    *ngIf=\"isPrivate()\"\n    class=\"private\">\n    <div class=\"private-box\">\uD83D\uDD12 Private video</div>\n  </div>\n</div>", styles: [".taon-rumble{width:100%;max-width:640px;margin:auto;position:relative;font-family:inherit}.preview{position:relative;cursor:pointer;overflow:hidden;border-radius:10px}.preview-img{width:100%;display:block}.title{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#000c);color:#fff;font-size:14px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;background:#00000080;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%}.lock{position:absolute;top:10px;right:10px;font-size:20px;background:#0009;color:#fff;padding:6px 8px;border-radius:6px}.video{position:relative;padding-top:56.25%}.rumble-frame{position:absolute;top:0;left:0;width:100%;height:100%}.private{display:flex;align-items:center;justify-content:center;height:200px;background:#111;color:#fff}.private-box{opacity:.7}\n"] }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{
@@ -1909,7 +1913,7 @@ class TaonSettingsComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonSettingsComponent, isStandalone: true, selector: "taon-settings", ngImport: i0, template: "<div class=\"absolute top-2 right-2\">\n  <button\n    mat-icon-button\n    aria-label=\"Close dialog\"\n    (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n<div class=\"p-4\">\n  <h3 class=\"bold\" translate [translate-t]=\"t\">Language Settings</h3>\n  <taon-lang-selector />\n\n  <br />\n  <hr />\n  <br />\n  <h3 class=\"bold\">\n    {{ t.gettext('Theme settings') }}\n    {{ taonTheme.pernamentMode ? t.gettext(\"Settings can't ba changed\") : '' }}\n  </h3>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isAuto()\"\n    [disabled]=\"taonTheme.pernamentMode\"\n    (change)=\"taonTheme.toogleAuto($event.checked)\">\n    {{ t.gettext('Sync colors with system') }}\n  </mat-slide-toggle>\n\n  <mat-slide-toggle\n    class=\"p-2\"\n    [checked]=\"taonTheme.isDark()\"\n    [disabled]=\"taonTheme.isAuto() || taonTheme.pernamentMode\"\n    (change)=\"taonTheme.setDark($event.checked)\">\n    {{ t.gettext('Dark mode') }}\n  </mat-slide-toggle>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TaonLangSelectorComponent, selector: "taon-lang-selector" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate]", inputs: ["translate-t", "translate-params", "translate-context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSettingsComponent, decorators: [{
             type: Component,
@@ -1922,7 +1926,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\" 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    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>", styles: [":host{display:block}\n"] }]
         }] });
 
 //#region imports
@@ -1942,7 +1946,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$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    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>", dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonThemeComponent, decorators: [{
             type: Component,
@@ -1952,7 +1956,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    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>" }]
         }] });
 
 //#region imports
@@ -1975,7 +1979,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\n    class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n    <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\"></mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div\n      class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n      <!-- <taon-theme class=\"right-0\" /> -->\n      <ng-content select=\"[buttons]\"></ng-content>\n      @if (!hideThemeSettings) {\n        <button\n          class=\"flex mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\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    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello friend!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSimpleLayoutComponent, isStandalone: true, selector: "taon-simple-layout", inputs: { hideThemeSettings: { classPropertyName: "hideThemeSettings", publicName: "hideThemeSettings", isSignal: false, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: false, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!hideHeader) {\n  <header\n    class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n    <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\"></mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div\n      class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n      <!-- <taon-theme class=\"right-0\" /> -->\n      <ng-content select=\"[buttons]\"></ng-content>\n      @if (!hideThemeSettings) {\n        <button\n          class=\"flex mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\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    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello friend!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSimpleLayoutComponent, decorators: [{
             type: Component,
@@ -1992,7 +1996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatDialogModule,
                         JsonPipe,
                         TaonThemeComponent,
-                    ], template: "@if (!hideHeader) {\n  <header\n    class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n    <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\"></mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div\n      class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n      <!-- <taon-theme class=\"right-0\" /> -->\n      <ng-content select=\"[buttons]\"></ng-content>\n      @if (!hideThemeSettings) {\n        <button\n          class=\"flex mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\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    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello friend!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>\n", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"] }]
+                    ], template: "@if (!hideHeader) {\n  <header\n    class=\"shadow-1 inline-flex w-full justify-content-end align-items-center flex-row\">\n    <div class=\"flex-grow-1 align-items-center justify-content-center flex-row\">\n      @if (navItems()?.length > 0) {\n        <nav\n          mat-tab-nav-bar\n          [tabPanel]=\"tabPanel\">\n          @for (item of navItems(); track item.path) {\n            <a\n              mat-tab-link\n              href=\"javascript:void(0)\"\n              [style.text-decoration]=\"\n                (activePath === item.path && !forceShowBaseRootApp) ||\n                ('/' === item.path && forceShowBaseRootApp)\n                  ? 'underline'\n                  : 'none'\n              \"\n              (click)=\"navigateTo(item)\">\n              @if (item.path === '/') {\n                <mat-icon\n                  aria-hidden=\"false\"\n                  aria-label=\"Example home icon\"\n                  fontIcon=\"home\"></mat-icon>\n              } @else {\n                {{ item.label }}\n              }\n            </a>\n          }\n        </nav>\n      }\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n\n    <div\n      class=\"flex-grow-0 flex align-items-center justify-content-center flex-row\">\n      <!-- <taon-theme class=\"right-0\" /> -->\n      <ng-content select=\"[buttons]\"></ng-content>\n      @if (!hideThemeSettings) {\n        <button\n          class=\"flex mr-2\"\n          (click)=\"openDialog(200, 200)\"\n          mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </button>\n      }\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    <pre>\n    <code class=\"surface-100 block\">\n      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;\n        &lt;header\n          header\n          class=&quot;flex-item&quot;&gt;\n          &lt;img\n            class=&quot;border-round&quot;\n            src=&quot;assets/assets-for/taon-ui/assets/images/pluszka-logo.png&quot;\n            height=&quot;50px&quot; /&gt;\n        &lt;/header&gt;\n        &lt;br /&gt;\n        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;\n        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;\n\n        &lt;ng-container buttons&gt;\n          &lt;button\n            mat-button\n            class=&quot;flex align-items-center&quot;&gt;\n            Hello friend!\n          &lt;/button&gt;\n        &lt;/ng-container&gt;\n      &lt;/taon-simple-layout&gt;\n    </code>\n    </pre>\n  </div>\n</mat-tab-nav-panel>", styles: [":host{display:block}:host header{z-index:999}:host header nav{max-width:400px}.projected-wrapper:not(:empty)+.fallback-message{display:none}.projected-wrapper:empty{display:none}\n"] }]
         }], propDecorators: { hideThemeSettings: [{
                 type: Input
             }], hideHeader: [{
@@ -2071,11 +2075,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 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonStripeBuyButtonComponent, isStandalone: true, selector: "taon-stripe-buy-button", inputs: { priceId: "priceId", productId: "productId", promotionPreviousPrice: "promotionPreviousPrice", workerUrl: "workerUrl", email: "email", successUrl: "successUrl", cancelUrl: "cancelUrl" }, ngImport: i0, template: "<button\n  type=\"button\"\n  matButton=\"filled\"\n  (click)=\"buy()\"\n  [disabled]=\"loading\">\n  <span *ngIf=\"!loading\">\n    {{ label() }}\n  </span>\n  <span\n    class=\"line-through absolute bg-red-500 p-1 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 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 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\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], 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 border-round white-space-nowrap\"\n    style=\"margin-top: -25px\"\n    *ngIf=\"promotionPreviousPrice\">\n    {{ promotionPreviousPrice }}\n  </span>\n\n  <span *ngIf=\"loading\"> Redirecting to Stripe... </span>\n</button>" }]
         }], propDecorators: { priceId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2275,11 +2279,11 @@ class TaonTableComponent {
         log.i('context menu event', e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonTableComponent, isStandalone: false, selector: "taon-table", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", rows: "rows", entityCrudController: "entityCrudController", columns: "columns", pageSizeOptions: "pageSizeOptions", hideSearch: "hideSearch" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i4$1.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i4$1.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonTableComponent, isStandalone: false, selector: "taon-table", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", rows: "rows", entityCrudController: "entityCrudController", columns: "columns", pageSizeOptions: "pageSizeOptions", hideSearch: "hideSearch" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i4$1.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i4$1.DirectiveGrow, selector: "[grow]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-table', standalone: false, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->\n", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"] }]
+            args: [{ selector: 'taon-table', standalone: false, template: "<br />\n<columns-container *ngIf=\"!hideSearch\">\n  <column grow>\n    <mat-form-field class=\"search-input\">\n      <input\n        matInput\n        placeholder=\"Type to search table...\"\n        #search />\n    </mat-form-field>\n  </column>\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      [ngClass]=\"{ 'half-opacity': !search.value }\"\n      class=\"undo-button\"\n      color=\"secondary\"\n      (click)=\"search.value = ''\">\n      <mat-icon>close </mat-icon>\n    </button>\n  </column>\n\n  <column [width]=\"80\">\n    <button\n      mat-fab\n      (click)=\"addingItem.next()\"\n      class=\"undo-button\"\n      color=\"primary\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </column>\n</columns-container>\n\n<mtx-grid\n  *ngIf=\"rows && columns\"\n  [data]=\"rows\"\n  [columns]=\"columns\"\n  [expandable]=\"expandable\"\n  [expansionTemplate]=\"expansionTemplate\"\n  (expansionChange)=\"expansionRow($event)\"\n  [length]=\"totalElements\"\n\n  [pageOnFront]=\"false\"\n  [pageIndex]=\"pageNumber - 1\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showPaginator]=\"showPaginator\"\n  (page)=\"getNextPage($event)\">\n</mtx-grid>\n\n<!-- [loading]=\"isLoading\" -->", styles: [":host{min-height:250px}.search-input{width:100%}.undo-button{margin-left:10px}.half-opacity{opacity:.2}\n"] }]
         }], propDecorators: { pageNumber: [{
                 type: Input
             }], pageSize: [{
@@ -2500,11 +2504,11 @@ class TaonYoutubeVideoComponent {
         this.postCommand('pauseVideo');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonYoutubeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\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-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonYoutubeVideoComponent, isStandalone: true, selector: "taon-youtube-video", inputs: { videoId: "videoId", title: "title", height: "height", state: "state" }, outputs: { paddlockClicked: "paddlockClicked", previewClicked: "previewClicked" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["ytFrame"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>\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-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"] }]
+            args: [{ selector: 'taon-youtube-video', standalone: true, imports: [NgIf, NgStyle, MatIconModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"yt-container\"\n  [ngClass]=\"state\"\n  [ngStyle]=\"containerStyle\">\n  <!-- PREVIEW IMAGE -->\n  <img\n    *ngIf=\"state === 'preview-picture' || state === 'preview-picture-locked'\"\n    class=\"yt-media\"\n    [src]=\"previewImage()\"\n    [alt]=\"displayTitle\"\n    (click)=\"onPreviewClick()\" />\n\n  <!-- VIDEO -->\n  <iframe\n    #ytFrame\n    *ngIf=\"state === 'video-preview-open' || state === 'video-preview-private'\"\n    class=\"yt-media\"\n    [src]=\"embedUrl()\"\n    frameborder=\"0\"\n    allowfullscreen>\n  </iframe>\n\n  <!-- PRIVATE OVERLAY -->\n  <div\n    (contextmenu)=\"onRightClick($event)\"\n    (dblclick)=\"clicked($event)\"\n    *ngIf=\"\n      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()\n    \"\n    (click)=\"clicked($event)\"\n    class=\"yt-overlay-video\">\n    <h1 class=\"text-center\" >Thanks for buying <br>this video</h1>\n  </div>\n\n  <!-- LOCK OVERLAY -->\n  <div\n    *ngIf=\"state === 'preview-picture-locked'\"\n    class=\"yt-overlay yt-lock\"\n    (click)=\"onLockClick($event)\">\n    <mat-icon>lock</mat-icon>\n  </div>\n</div>\n\n<!-- CONTROLS BELOW VIDEO -->\n<!-- <div\n  *ngIf=\"state === 'video-preview-private'\"\n  class=\"yt-controls\">\n  <button\n    mat-icon-button\n    (click)=\"play()\">\n    <mat-icon>play_arrow</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"pause()\">\n    <mat-icon>pause</mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    (click)=\"restart()\">\n    <mat-icon>replay</mat-icon>\n  </button>\n</div> -->\n<div class=\"w-full mb-1\"></div>\n<div\n  class=\"yt-title\"\n  *ngIf=\"displayTitle\">\n  {{ displayTitle }}\n</div>", styles: [".yt-container{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--surface-border)}.yt-container:not([style*=height]){aspect-ratio:16/9}.yt-media{width:100%;height:100%;display:block;object-fit:cover;position:relative;z-index:1}iframe.yt-media{border:none}.yt-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}.yt-overlay-video{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#c8c8c880}.yt-lock{background:#0000008c;cursor:pointer}.yt-lock mat-icon{height:60px;width:60px;font-size:56px;color:#fff}.yt-private{background:transparent;pointer-events:all}.yt-title{margin-top:.5rem;font-size:.9rem;font-weight:500}.yt-play-button{width:80px;height:80px;border-radius:50%;background:#ff0000d9;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.yt-play-button mat-icon{font-size:48px;color:#fff;width:48px;height:48px}.yt-play-button:hover{transform:scale(1.1)}.yt-controls{display:flex;gap:8px;margin-top:8px}.yt-controls button{background:#00000014}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { videoId: [{
                 type: Input,
                 args: [{ required: true }]