taon-ui 21.0.48 → 21.0.49

package/browser-prod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taon-ui/browser-prod",
-  "version": "21.0.48",
+  "version": "21.0.49",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0"

package/browser-prod/types/taon-ui-browser-prod.d.ts

@@ -85,7 +85,7 @@ declare const CURRENT_PACKAGE_TAON_VERSION = "v21";
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-declare const CURRENT_PACKAGE_VERSION = "21.0.48";
+declare const CURRENT_PACKAGE_VERSION = "21.0.49";
 
 declare function myOrgProj(): void;
 
@@ -478,7 +478,7 @@ declare class TaonSessionPasscodeComponent implements OnInit, AfterViewInit {
     display: string;
     form: FormGroup<TaonSessionPasscodeForm>;
     constructor(element: ElementRef<HTMLElement>, domSanitizer: DomSanitizer, cdr: ChangeDetectorRef);
-    ngOnInit(): void;
+    ngOnInit(): Promise<void>;
     submit({ passcode }: Partial<TaonSessionPasscodeModel>): void;
     private isPasscodeOK;
     ngAfterViewInit(): void;
@@ -492,7 +492,7 @@ declare class TaonSessionPasscodeComponent implements OnInit, AfterViewInit {
         };
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TaonSessionPasscodeComponent, [{ self: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TaonSessionPasscodeComponent, "taon-session-passcode", never, { "passcode": { "alias": "passcode"; "required": false; }; "message": { "alias": "message"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaonSessionPasscodeComponent, "taon-session-passcode", never, { "passcode": { "alias": "passcode"; "required": true; }; "message": { "alias": "message"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare enum TaonThemeMode {
@@ -528,6 +528,7 @@ declare class TaonSimpleLayoutComponent {
     protected dialog: MatDialog;
     protected theme: TaonThemeService;
     hideThemeSettings: boolean;
+    hideHeader: boolean;
     navItems: i0.InputSignal<TaonSimpleLayoutNavItem[]>;
     navigateTo(item: {
         path: string;
@@ -535,7 +536,7 @@ declare class TaonSimpleLayoutComponent {
     }): void;
     openDialog(enterAnimationDuration: string | number, exitAnimationDuration: string | number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TaonSimpleLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TaonSimpleLayoutComponent, "taon-simple-layout", never, { "hideThemeSettings": { "alias": "hideThemeSettings"; "required": false; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[buttons]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaonSimpleLayoutComponent, "taon-simple-layout", never, { "hideThemeSettings": { "alias": "hideThemeSettings"; "required": false; }; "hideHeader": { "alias": "hideHeader"; "required": false; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "[buttons]", "*"], true, never>;
 }
 
 declare const TaonSimpleLayoutRoutes: Routes;
@@ -613,6 +614,8 @@ declare class TaonTableModule {
 
 declare class TaonThemeComponent {
     TaonThemeMode: typeof TaonThemeMode;
+    private readonly dialogRef;
+    close(): void;
     taonTheme: TaonThemeService;
     static ɵfac: i0.ɵɵFactoryDeclaration<TaonThemeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TaonThemeComponent, "taon-theme", never, {}, {}, never, never, true, never>;

package/html/assets/generated/pwa/html-pwa.html

@@ -0,0 +1,60 @@
+<link rel="icon" type="image/x-icon" href="/assets/assets-for/taon-ui/assets/generated/pwa/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/assets-for/taon-ui/assets/generated/pwa/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/assets-for/taon-ui/assets/generated/pwa/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/assets/assets-for/taon-ui/assets/generated/pwa/favicon-48x48.png">
+<link rel="manifest" href="/assets/assets-for/taon-ui/assets/generated/pwa/manifest.webmanifest">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#fff">
+<meta name="application-name">
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-icon-1024x1024.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-640x1136.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1136x640.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-750x1334.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1334x750.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1125x2436.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2436x1125.png">
+<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1170x2532.png">
+<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2532x1170.png">
+<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1179x2556.png">
+<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2556x1179.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-828x1792.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1792x828.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1242x2688.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2688x1242.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1242x2208.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2208x1242.png">
+<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1284x2778.png">
+<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2778x1284.png">
+<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1290x2796.png">
+<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2796x1290.png">
+<link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1488x2266.png">
+<link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2266x1488.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1536x2048.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2048x1536.png">
+<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1620x2160.png">
+<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2160x1620.png">
+<link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1640x2160.png">
+<link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2160x1640.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1668x2388.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2388x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-1668x2224.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2224x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2048x2732.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/assets-for/taon-ui/assets/generated/pwa/apple-touch-startup-image-2732x2048.png">
+<meta name="msapplication-TileColor" content="#fff">
+<meta name="msapplication-TileImage" content="/assets/assets-for/taon-ui/assets/generated/pwa/mstile-144x144.png">
+<meta name="msapplication-config" content="/assets/assets-for/taon-ui/assets/generated/pwa/browserconfig.xml">
+<link rel="yandex-tableau-widget" href="/assets/assets-for/taon-ui/assets/generated/pwa/yandex-browser-manifest.json">

package/html/lib/layouts/taon-bootstrap-navbar/taon-bootstrap-navbar.component.html

@@ -0,0 +1,149 @@
+<nav class="navbar navbar-expand-lg">
+  <div class="container-fluid">
+    <a
+      class="navbar-brand"
+      routerLink="/home"
+      routerLinkActive="active">
+      Home</a
+    >
+    <button
+      class="navbar-toggler"
+      type="button"
+      (click)="isCollapsed = !isCollapsed">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div
+      [ngbCollapse]="isCollapsed"
+      class="navbar-collapse">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/about"
+            routerLinkActive="active"
+            >O szkole</a
+          >
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/courses"
+            routerLinkActive="active"
+            >Kursy</a
+          >
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/opinions"
+            routerLinkActive="active"
+            >Opinie</a
+          >
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/instructors"
+            routerLinkActive="active"
+            >Lektorzy</a
+          >
+        </li>
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            routerLink="/contact"
+            routerLinkActive="active"
+            >Kontakt</a
+          >
+        </li>
+        <ng-container *ngIf="isLoggedIn">
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/test"
+              routerLinkActive="active"
+              ><b>Test plasujący</b></a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/grammar"
+              routerLinkActive="active"
+              >Gramatyka</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/vocabulary"
+              routerLinkActive="active"
+              >Słownictwo</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/reading"
+              routerLinkActive="active"
+              >Czytanie</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/movies"
+              routerLinkActive="active"
+              >Wideo</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/curiosities"
+              routerLinkActive="active"
+              >Ciekawostki</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/logout"
+              routerLinkActive="active"
+              >Wyloguj</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/profile"
+              routerLinkActive="active"
+              >Profil</a
+            >
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              routerLink="/admin"
+              routerLinkActive="active"
+              >Admin</a
+            >
+          </li>
+        </ng-container>
+        <ng-container *ngIf="!isLoggedIn">
+          <li class="nav-item">
+            <a
+              class="nav-link"
+              href="javascript:void(0)"
+              (click)="modalLoginRegister()">
+              <span class="glyphicon glyphicon-hand-right"></span> Rejestracja /
+              <span class="glyphicon glyphicon-user"></span> Logowanie
+            </a>
+          </li>
+        </ng-container>
+      </ul>
+    </div>
+  </div>
+</nav>
+<ng-content />

package/html/lib/ui/taon-admin-mode-configuration/taon-admin-mode-configuration.component.html

@@ -0,0 +1,266 @@
+<!-- #region basic global components  -->
+<taon-session-passcode
+  *ngIf="showPasscode"
+  [passcode]="passcode"
+  [message]="message" />
+<!-- <taon-progress-bar [taonAdminService.isDesktop()]="taonAdminService.isDesktop()"></taon-progress-bar> -->
+<!-- <taon-notifications></taon-notifications> -->
+<button
+  mat-fab
+  class="fab-button"
+  color="accent"
+  aria-label="Taon Admin Mode"
+  *ngIf="
+    taonAdminService.adminPanelMode() === TaonAdminPanelMode.ICON &&
+    taonAdminService.isDesktop() &&
+    !taonAdminService.isIframe
+  "
+  (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)">
+  <mat-icon>build</mat-icon>
+</button>
+<!-- #endregion -->
+
+<!-- #region small hidden button -->
+<!-- <button class="admin-show-button"
+        *ngIf="!taonAdminService.draggablePopupMode && taonAdminService.isDesktop()"
+        (click)="toogle()"> Admin </button> -->
+<!-- #endregion -->
+
+<!-- #region content or content with scrollbar-->
+<ng-template #contentNoScroll>
+  <ng-content> </ng-content>
+</ng-template>
+
+<ng-template #content>
+  <ng-scrollbar>
+    <ng-container [ngTemplateOutlet]="contentNoScroll"></ng-container>
+  </ng-scrollbar>
+</ng-template>
+<!-- #endregion-->
+
+<!-- #region admin tabs -->
+<ng-template #adminTabs>
+  <!-- #region admin tabs / header -->
+
+  <div
+    class="bg-white taon-header-admin overflow-hidden w-full flex flex-row align-items-center align-content-center justify-content-between"
+    [ngClass]="{
+      'block w-full':
+        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,
+    }">
+    <img
+      class="p-2 flex"
+      style="height: 45px"
+      src="/src/assets/shared/logo-header-admin-mode.png" />
+
+    <div class="flex flex-row">
+      <button
+        style="width: 40px"
+        mat-icon-button
+        (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.NONE)"
+        class="">
+        <mat-icon>close</mat-icon>
+      </button>
+
+      <button
+        style="width: 40px"
+        mat-icon-button
+        (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.ICON)"
+        class="">
+        <mat-icon>minimize</mat-icon>
+      </button>
+
+      <button
+        *ngIf="
+          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN
+        "
+        mat-icon-button
+        (click)="
+          taonAdminService.adminPanelMode.set(TaonAdminPanelMode.FULL_SCREEN)
+        "
+        class="">
+        <mat-icon>fullscreen</mat-icon>
+      </button>
+
+      <button
+        style="width: 40px"
+        *ngIf="
+          taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN
+        "
+        mat-icon-button
+        (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)"
+        class="">
+        <mat-icon>close_fullscreen</mat-icon>
+      </button>
+
+      <button
+        style="width: 40px"
+        *ngIf="taonAdminService.adminPanelMode() !== TaonAdminPanelMode.SIDE"
+        mat-icon-button
+        (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.SIDE)"
+        class="">
+        <mat-icon style="transform: rotate(180deg)">login</mat-icon>
+      </button>
+
+      <button
+        style="width: 40px"
+        *ngIf="
+          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.POPUP &&
+          taonAdminService.adminPanelMode() !== TaonAdminPanelMode.FULL_SCREEN
+        "
+        mat-icon-button
+        (click)="taonAdminService.adminPanelMode.set(TaonAdminPanelMode.POPUP)"
+        class="">
+        <mat-icon>launch</mat-icon>
+      </button>
+    </div>
+  </div>
+  <!-- #endregion -->
+
+  <div
+    class="w-full flex flex-row align-items-center"
+    [ngClass]="{
+      'block w-full':
+        taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP,
+    }">
+    <div class="w-full">
+      <!-- (wheel)="scrollTabs($event)" -->
+      <mat-tab-group
+        dynamicHeight
+        [selectedIndex]="selectedIndex()"
+        (selectedIndexChange)="selectedIndex.set($event)">
+        <mat-tab label="Settings">
+          <section>
+            <mat-card>
+              <mat-card-header>
+                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>
+              </mat-card-header>
+              <mat-card-content>
+                <mat-checkbox
+                  [disabled]="!isWebSQLMode"
+                  [ngModel]="taonAdminService.keepWebsqlDbDataAfterReload()"
+                  (change)="
+                    taonAdminService.keepWebsqlDbDataAfterReload.set(
+                      $event.checked
+                    )
+                  ">
+                  Don't remove data when re-loading
+                </mat-checkbox>
+              </mat-card-content>
+            </mat-card>
+          </section>
+          <br />
+          <taon-db-admin />
+        </mat-tab>
+
+        @for (
+          additonalTab of taonAdminService.additionalTabs();
+          track additonalTab.name
+        ) {
+          <mat-tab [label]="additonalTab.name">
+            <section>
+              @if (isLink(additonalTab.templateOrIframeLink)) {
+                <iframe
+                  class="block w-full"
+                  [src]="additonalTab.templateOrIframeLink"
+                  frameborder="0"
+                  allowfullscreen>
+                </iframe>
+              } @else {
+                <div class="block w-full">
+                  <ng-container
+                    *ngTemplateOutlet="
+                      additonalTab.templateOrIframeLink
+                    "></ng-container>
+                </div>
+              }
+            </section>
+            <br />
+            <taon-db-admin />
+          </mat-tab>
+        }
+      </mat-tab-group>
+    </div>
+  </div>
+</ng-template>
+<!-- #endregion -->
+
+<!-- #region small/mobile draggable popup windows -->
+<div
+  class="draggable-popup-mode-window"
+  *ngIf="
+    taonAdminService.adminPanelMode() === TaonAdminPanelMode.POPUP &&
+    !taonAdminService.isIframe &&
+    !reloading()
+  "
+  cdkDrag
+  [cdkDragFreeDragPosition]="dragPosition"
+  (cdkDragEnded)="moved($event)">
+  <ng-scrollbar>
+    <ng-container [ngTemplateOutlet]="adminTabs"></ng-container>
+  </ng-scrollbar>
+</div>
+<!-- #endregion -->
+
+<!-- #region fullscreen draggable popup window -->
+<div
+  class="draggable-popup-mode-window-full"
+  *ngIf="
+    taonAdminService.adminPanelMode() === TaonAdminPanelMode.FULL_SCREEN &&
+    !taonAdminService.isIframe &&
+    !reloading()
+  "
+  cdkDrag
+  [cdkDragFreeDragPosition]="dragPositionZero">
+  <ng-container [ngTemplateOutlet]="adminTabs"></ng-container>
+</div>
+<!-- #endregion -->
+
+<!-- #region content in side mode -->
+<!-- <mat-drawer-container (backdropClick)="opened = false" -->
+<!-- [style.height.px]="height" -->
+<mat-drawer-container
+  *ngIf="
+    taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&
+    taonAdminService.isDesktop() &&
+    !taonAdminService.isIframe &&
+    !reloading()
+  "
+  class="example-container h-screen"
+  style="background-color: transparent"
+  [hasBackdrop]="false">
+  <mat-drawer
+    #drawer
+    style="width: 450px"
+    [opened]="true"
+    [mode]="'side'">
+    <ng-container [ngTemplateOutlet]="adminTabs"></ng-container>
+  </mat-drawer>
+  <mat-drawer-content style="overflow: hidden">
+    <ng-container
+      [ngTemplateOutlet]="
+        scrollableEnabled ? content : contentNoScroll
+      "></ng-container>
+  </mat-drawer-content>
+</mat-drawer-container>
+<!-- #endregion -->
+
+<!-- #region content in any other mode than side side mode -->
+<div
+  [style.height.px]="height"
+  *ngIf="
+    !(
+      taonAdminService.adminPanelMode() === TaonAdminPanelMode.SIDE &&
+      taonAdminService.isDesktop() &&
+      !taonAdminService.isIframe &&
+      !reloading()
+    )
+  "
+  style="width: 100%; display: block"
+  class="content">
+  <ng-container
+    [ngTemplateOutlet]="
+      scrollableEnabled ? content : contentNoScroll
+    "></ng-container>
+</div>
+<!-- #endregion -->

package/html/lib/ui/taon-auth/auth-button.component.html

@@ -0,0 +1,28 @@
+<div class="flex align-items-center gap-2">
+  <ng-container *ngIf="(session.isLoggedIn$ | async) === false; else loggedIn">
+    <button
+      mat-button
+      (click)="openLogin()">
+      Login
+    </button>
+  </ng-container>
+
+  <ng-template #loggedIn>
+    <button
+      *ngIf="displayDashboardButton"
+      mat-button
+      color="primary"
+      class="auth-btn"
+      (click)="goDashboard()">
+      <mat-icon>dashboard</mat-icon>
+      Dashboard
+    </button>
+
+    <button
+      mat-button
+      class="ml-2"
+      (click)="logout()">
+      Logout ({{ (session.data$ | async)?.displayName }})
+    </button>
+  </ng-template>
+</div>

package/html/lib/ui/taon-auth/auth-dialog.component.html

@@ -0,0 +1,93 @@
+<div class="auth-dialog p-4">
+  <h4 class="mb-3">Login or register</h4>
+
+  <div
+    class="w-full"
+    #emailLoginBtn>
+    <form
+      [formGroup]="form"
+      (ngSubmit)="loginByEmail()"
+      class="w-full">
+      <mat-form-field
+        appearance="outline"
+        class="w-full email-field">
+        <mat-label *ngIf="!diableLoginByEmail">Email</mat-label>
+
+        <input
+          matInput
+          formControlName="email"
+          class="pl-1"
+          type="email"
+          [placeholder]="
+            diableLoginByEmail ? 'Login by email (disabled)' : ''
+          " />
+
+        <button
+          mat-icon-button
+          [disabled]="diableLoginByEmail"
+          matSuffix
+          color="primary">
+          <mat-icon>mail</mat-icon>
+        </button>
+        <mat-error
+          *ngIf="
+            form.get('email')?.hasError('pattern') && form.get('email')?.touched
+          ">
+          Please enter a valid email address
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            form.get('email')?.hasError('required') &&
+            form.get('email')?.touched
+          ">
+          Email is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+    </form>
+
+    <div class="divider">
+      <span>or</span>
+    </div>
+
+    <!-- GOOGLE BUTTON -->
+    <div
+      #googleBtn
+      class="google-container">
+      <span
+        *ngIf="!googleButtonLoaded"
+        class="text-300 p-2"
+        >loading google button..</span
+      >
+      <mat-progress-bar
+        *ngIf="!googleButtonLoaded"
+        mode="indeterminate"
+        class="auth-progress" />
+    </div>
+
+    <!-- MICROSOFT BUTTON -->
+    <div
+      *ngIf="microsoftClientId"
+      #microsoftBtn
+      class="microsoft-container">
+      <button
+        mat-stroked-button
+        color="primary"
+        class="w-full microsoft-btn"
+        (click)="loginWithMicrosoft()">
+        <mat-icon class="mr-2">login</mat-icon>
+        Continue with Microsoft
+      </button>
+    </div>
+  </div>
+
+  <br />
+
+  <div class="flex justify-content-end">
+    <button
+      mat-button
+      mat-dialog-close>
+      Cancel
+    </button>
+  </div>
+</div>