taon-ui 21.0.48 → 21.0.49

package/html/lib/ui/taon-github-fork-me-corner/taon-github-fork-me-corner.component.html

@@ -0,0 +1,29 @@
+<a
+  href="{{ url }}"
+  class="github-corner"
+  aria-label="View source on GitHub"
+  ><svg
+    width="80"
+    height="80"
+    viewBox="0 0 250 250"
+    style="
+      fill: #151513;
+      color: #fff;
+      position: absolute;
+      top: 0;
+      border: 0;
+      right: 0;
+    "
+    aria-hidden="true">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+    <path
+      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+      fill="currentColor"
+      style="transform-origin: 130px 106px"
+      class="octo-arm"></path>
+    <path
+      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+      fill="currentColor"
+      class="octo-body"></path>
+  </svg>
+</a>

package/html/lib/ui/taon-github-fork-me-ribbon/taon-github-fork-me-ribbon.component.html

@@ -0,0 +1,11 @@
+<a href="{{ url }}"
+  ><img
+    decoding="async"
+    loading="lazy"
+    width="149"
+    height="149"
+    src="data:image/webp;base64,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"
+    class="attachment-full size-full"
+    alt="Fork me on GitHub"
+    data-recalc-dims="1"
+/></a>

package/html/lib/ui/taon-kv-authorization/taon-kv-authorization.component.html

@@ -0,0 +1,11 @@
+<div class="taon-kv-authorization">
+  <div *ngIf="loading()">Loading authorization info...</div>
+
+  <div *ngIf="!loading()">
+    <div *ngIf="authorizedCount() === 0">You did not purchase any products</div>
+
+    <div *ngIf="authorizedCount() > 0">
+      You purchased {{ authorizedCount() }} products
+    </div>
+  </div>
+</div>

package/html/lib/ui/taon-not-found/taon-not-found.component.html

@@ -0,0 +1,40 @@
+<div class="flex align-items-center justify-content-center min-h-screen px-3">
+  <div
+    class="text-center surface-card p-5 border-round shadow-2 w-full"
+    style="max-width: 600px">
+    <h1 class="text-6xl font-bold mb-3 text-red-500">404</h1>
+
+    <h2 class="text-2xl mb-3">Page not found</h2>
+
+    <p class="text-color-secondary mb-4">
+      The page you are looking for does not exist or has been moved.
+    </p>
+
+    <a
+      routerLink="/"
+      class="p-button p-component no-underline">
+      <span class="p-button-label text-primary no-underline">Go to Home</span>
+    </a>
+
+    <br />
+    <br />
+    <br />
+
+    <h4
+      class="flex flex-row align-content-center justify-content-center align-items-center">
+      <img
+        height="20px"
+        src="src/assets/shared/taon-small-logo-for-not-found.png"
+        alt="" />
+
+      <span class="p-2 text-gray-200"
+        >Powered by
+        <a
+          class="text-gray-200"
+          href="https://taon.dev">
+          Taon.Dev
+        </a></span
+      >
+    </h4>
+  </div>
+</div>

package/html/lib/ui/taon-notifications/taon-notifications.component.html

@@ -0,0 +1,3 @@
+<!-- <p>
+  notyfications works!
+</p> -->

package/html/lib/ui/taon-progress-bar/taon-progress-bar.component.html

@@ -0,0 +1,23 @@
+<!--  <ng-progress
+  #labProgress
+  id="lab"
+  [meteor]="options.meteor"
+  [color]="options.color"
+  [min]="options.min"
+  [max]="options.max"
+  [speed]="options.speed"
+  [spinner]="
+    options.spinner &&
+    (!admin.adminPanelIsOpen ||
+      (admin.adminPanelIsOpen && (admin.draggablePopupMode || !isDesktop)))
+  "
+  [spinnerPosition]="options.spinnerPosition"
+  [direction]="options.direction"
+  [trickleSpeed]="options.trickleSpeed"
+  [debounceTime]="options.debounceTime"
+  [ease]="options.ease"
+  [thick]="options.thick"
+  [fixed]="options.fixed">
+</ng-progress>
+(started)="onProgressStarted()"
+             (completed)="onProgressCompleted()" -->

package/html/lib/ui/taon-rumble/taon-rumble.component.html

@@ -0,0 +1,46 @@
+<div class="taon-rumble">
+  <!-- PREVIEW MODE -->
+  <div
+    *ngIf="isPreview()"
+    class="preview"
+    (click)="onPreviewClick()">
+    <img
+      class="preview-img"
+      [src]="picturePreviewUrl"
+      [alt]="title" />
+
+    <div class="title">
+      {{ title }}
+    </div>
+
+    <!-- PLAY BUTTON -->
+    <div class="play-button">▶</div>
+
+    <!-- LOCK -->
+    <div
+      *ngIf="isLocked()"
+      class="lock"
+      (click)="onPadlockClick($event)">
+      🔒
+    </div>
+  </div>
+
+  <!-- VIDEO OPEN -->
+  <div
+    *ngIf="isVideoOpen()"
+    class="video">
+    <iframe
+      class="rumble-frame"
+      [src]="embedUrl()"
+      frameborder="0"
+      allowfullscreen>
+    </iframe>
+  </div>
+
+  <!-- PRIVATE VIDEO -->
+  <div
+    *ngIf="isPrivate()"
+    class="private">
+    <div class="private-box">🔒 Private video</div>
+  </div>
+</div>

package/html/lib/ui/taon-session-passcode/taon-session-passcode.component.html

@@ -0,0 +1,20 @@
+<form
+  [formGroup]="form"
+  content="notranslate"
+  autocomplete="off"
+  (click)="focus()"
+  (ngSubmit)="submit(form.value)"
+  class="flex flex-col items-center w-full h-full">
+  <div class="flex content-center w-full justify-center mt-8">
+    <p
+      class="p-3 max-w-[400px] min-h-[100px]"
+      [innerHtml]="safeMessage"></p>
+  </div>
+
+  <input
+    type="password"
+    class="text-5xl md:text-8xl pointer-events-none"
+    #taonpasscode
+    (keyup)="onKeyup($event)"
+    formControlName="passcode" />
+</form>

package/html/lib/ui/taon-simple-layout/taon-simple-layout.component.html

@@ -0,0 +1,88 @@
+@if (!hideHeader) {
+  <header
+    class="shadow-1 inline-flex w-full justify-content-end align-items-center flex-row">
+    <div class="flex-grow-1 align-items-center justify-content-center flex-row">
+      @if (navItems()?.length > 0) {
+        <nav
+          mat-tab-nav-bar
+          [tabPanel]="tabPanel">
+          @for (item of navItems(); track item.path) {
+            <a
+              mat-tab-link
+              href="javascript:void(0)"
+              [style.text-decoration]="
+                (activePath === item.path && !forceShowBaseRootApp) ||
+                ('/' === item.path && forceShowBaseRootApp)
+                  ? 'underline'
+                  : 'none'
+              "
+              (click)="navigateTo(item)">
+              @if (item.path === '/') {
+                <mat-icon
+                  aria-hidden="false"
+                  aria-label="Example home icon"
+                  fontIcon="home"></mat-icon>
+              } @else {
+                {{ item.label }}
+              }
+            </a>
+          }
+        </nav>
+      }
+      <ng-content select="[header]"></ng-content>
+    </div>
+
+    <div
+      class="flex-grow-0 flex align-items-center justify-content-center flex-row">
+      <!-- <taon-theme class="right-0" /> -->
+      <ng-content select="[buttons]"></ng-content>
+      @if (!hideThemeSettings) {
+        <button
+          class="flex mr-2"
+          (click)="openDialog(200, 200)"
+          mat-icon-button>
+          <mat-icon>settings</mat-icon>
+        </button>
+      }
+    </div>
+  </header>
+}
+
+<mat-tab-nav-panel
+  #tabPanel
+  class="pt-2">
+  <div class="projected-wrapper">
+    <ng-content></ng-content>
+  </div>
+
+  <div class="fallback-message">
+    Please add your component inside
+    <br />
+    <pre>
+    <code class="surface-100 block">
+      &lt;taon-simple-layout class=&quot;p-4&quot;&gt;
+        &lt;header
+          header
+          class=&quot;flex-item&quot;&gt;
+          &lt;img
+            class=&quot;border-round&quot;
+            src=&quot;src/assets/images/pluszka-logo.png&quot;
+            height=&quot;50px&quot; /&gt;
+        &lt;/header&gt;
+        &lt;br /&gt;
+        &lt;h3 class=&quot;text-blue-200&quot;&gt;Welcome to hamster store.&lt;/h3&gt;
+        &lt;h3 class=&quot;text-blue-300&quot;&gt;Buy cheap hamster videos for free!&lt;/h3&gt;
+        &lt;h3 class=&quot;text-blue-300&quot;&gt;Subscribe more hamsters video daily!&lt;/h3&gt;
+
+        &lt;ng-container buttons&gt;
+          &lt;button
+            mat-button
+            class=&quot;flex align-items-center&quot;&gt;
+            Hello niga!
+          &lt;/button&gt;
+        &lt;/ng-container&gt;
+      &lt;/taon-simple-layout&gt;
+    </code>
+    </pre>
+  </div>
+</mat-tab-nav-panel>

package/html/lib/ui/taon-stripe-buy-button/taon-stripe-buy-button.component.html

@@ -0,0 +1,17 @@
+<button
+  type="button"
+  matButton="filled"
+  (click)="buy()"
+  [disabled]="loading">
+  <span *ngIf="!loading">
+    {{ label }}
+  </span>
+  <span
+    class="line-through absolute bg-red-500 p-1 border-round white-space-nowrap"
+    style="margin-top: -25px"
+    *ngIf="promotionPreviousPrice">
+    {{ promotionPreviousPrice }}
+  </span>
+
+  <span *ngIf="loading"> Redirecting to Stripe... </span>
+</button>

package/html/lib/ui/taon-table/taon-table.component.html

@@ -0,0 +1,50 @@
+<br />
+<columns-container *ngIf="!hideSearch">
+  <column grow>
+    <mat-form-field class="search-input">
+      <input
+        matInput
+        placeholder="Type to search table..."
+        #search />
+    </mat-form-field>
+  </column>
+  <column [width]="80">
+    <button
+      mat-fab
+      [ngClass]="{ 'half-opacity': !search.value }"
+      class="undo-button"
+      color="secondary"
+      (click)="search.value = ''">
+      <mat-icon>close </mat-icon>
+    </button>
+  </column>
+
+  <column [width]="80">
+    <button
+      mat-fab
+      (click)="addingItem.next()"
+      class="undo-button"
+      color="primary">
+      <mat-icon>add</mat-icon>
+    </button>
+  </column>
+</columns-container>
+
+<mtx-grid
+  *ngIf="rows && columns"
+  [data]="rows"
+  [columns]="columns"
+  [expandable]="expandable"
+  [expansionTemplate]="expansionTemplate"
+  (expansionChange)="expansionRow($event)"
+  [length]="totalElements"
+
+  [pageOnFront]="false"
+  [pageIndex]="pageNumber - 1"
+  [pageSize]="pageSize"
+  [pageSizeOptions]="pageSizeOptions"
+  [showPaginator]="showPaginator"
+  (page)="getNextPage($event)">
+</mtx-grid>
+
+<!-- [loading]="isLoading" -->

package/html/lib/ui/taon-theme/taon-theme.component.html

@@ -0,0 +1,26 @@
+<div class="absolute top-2 right-2">
+  <button
+    mat-icon-button
+    aria-label="Close dialog"
+    (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+<div class="p-4">
+  <h2>Theme settings</h2>
+
+  <mat-slide-toggle
+    class="p-2"
+    [checked]="taonTheme.isAuto()"
+    (change)="taonTheme.toogleAuto($event.checked)">
+    Sync colors with system
+  </mat-slide-toggle>
+
+  <mat-slide-toggle
+    class="p-2"
+    [checked]="taonTheme.isDark()"
+    [disabled]="taonTheme.isAuto()"
+    (change)="taonTheme.setDark($event.checked)">
+    Dark mode
+  </mat-slide-toggle>
+</div>

package/html/lib/ui/taon-youtube-video/taon-youtube-video.component.html

@@ -0,0 +1,71 @@
+<div
+  class="yt-container"
+  [ngClass]="state"
+  [ngStyle]="containerStyle">
+  <!-- PREVIEW IMAGE -->
+  <img
+    *ngIf="state === 'preview-picture' || state === 'preview-picture-locked'"
+    class="yt-media"
+    [src]="previewImage()"
+    [alt]="displayTitle"
+    (click)="onPreviewClick()" />
+
+  <!-- VIDEO -->
+  <iframe
+    #ytFrame
+    *ngIf="state === 'video-preview-open' || state === 'video-preview-private'"
+    class="yt-media"
+    [src]="embedUrl()"
+    frameborder="0"
+    allowfullscreen>
+  </iframe>
+
+  <!-- PRIVATE OVERLAY -->
+  <div
+    (contextmenu)="onRightClick($event)"
+    (dblclick)="clicked($event)"
+    *ngIf="
+      state === 'video-preview-private' && allowedToBeDisplayedVideoOveraly()
+    "
+    (click)="clicked($event)"
+    class="yt-overlay-video">
+    <h1 class="text-center" >Thanks for buying <br>this video</h1>
+  </div>
+
+  <!-- LOCK OVERLAY -->
+  <div
+    *ngIf="state === 'preview-picture-locked'"
+    class="yt-overlay yt-lock"
+    (click)="onLockClick($event)">
+    <mat-icon>lock</mat-icon>
+  </div>
+</div>
+
+<!-- CONTROLS BELOW VIDEO -->
+<!-- <div
+  *ngIf="state === 'video-preview-private'"
+  class="yt-controls">
+  <button
+    mat-icon-button
+    (click)="play()">
+    <mat-icon>play_arrow</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    (click)="pause()">
+    <mat-icon>pause</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    (click)="restart()">
+    <mat-icon>replay</mat-icon>
+  </button>
+</div> -->
+<div class="w-full mb-1"></div>
+<div
+  class="yt-title"
+  *ngIf="displayTitle">
+  {{ displayTitle }}
+</div>

package/lib/build-info._auto-generated_.d.ts

@@ -21,4 +21,4 @@ export declare const CURRENT_PACKAGE_TAON_VERSION = "v21";
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-export declare const CURRENT_PACKAGE_VERSION = "21.0.48";
+export declare const CURRENT_PACKAGE_VERSION = "21.0.49";

package/lib/build-info._auto-generated_.js

@@ -25,6 +25,6 @@ exports.CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-exports.CURRENT_PACKAGE_VERSION = '21.0.48';
+exports.CURRENT_PACKAGE_VERSION = '21.0.49';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 //# sourceMappingURL=build-info._auto-generated_.js.map

package/lib/layouts/taon-bootstrap-navbar/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531360 = dummy1779561531360;
-function dummy1779561531360() { }
+exports.dummy1780916107470 = dummy1780916107470;
+function dummy1780916107470() { }
 //# sourceMappingURL=index.js.map

package/lib/package.json

@@ -1,4 +1,4 @@
 {
   "name": "taon-ui/lib",
-  "version": "21.0.48"
+  "version": "21.0.49"
 }

package/lib/ui/directives/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531394 = dummy1779561531394;
-function dummy1779561531394() { }
+exports.dummy1780916107482 = dummy1780916107482;
+function dummy1780916107482() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561530832 = dummy1779561530832;
-function dummy1779561530832() { }
+exports.dummy1780916107043 = dummy1780916107043;
+function dummy1780916107043() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-admin-mode-configuration/taon-admin-mode-configuration.component.d.ts

@@ -14,11 +14,11 @@ export declare class TaonAdminModeConfigurationComponent implements OnInit, Afte
     showPasscode: boolean;
     passcode: string;
     message: string;
-    dragPositionX: import("taon-storage/source").StorSignal<number>;
-    dragPositionY: import("taon-storage/source").StorSignal<number>;
+    dragPositionX: import("taon-storage").StorSignal<number>;
+    dragPositionY: import("taon-storage").StorSignal<number>;
     dragPositionZero: Point;
     dragPosition: Point;
-    selectedIndex: import("taon-storage/source").StorSignal<number>;
+    selectedIndex: import("taon-storage").StorSignal<number>;
     ngOnInit(): Promise<void>;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/lib/ui/taon-github-fork-me-corner/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531580 = dummy1779561531580;
-function dummy1779561531580() { }
+exports.dummy1780916107563 = dummy1780916107563;
+function dummy1780916107563() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-github-fork-me-ribbon/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531611 = dummy1779561531611;
-function dummy1779561531611() { }
+exports.dummy1780916107605 = dummy1780916107605;
+function dummy1780916107605() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-iframe-sync/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531646 = dummy1779561531646;
-function dummy1779561531646() { }
+exports.dummy1780916107629 = dummy1780916107629;
+function dummy1780916107629() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-progress-bar/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531758 = dummy1779561531758;
-function dummy1779561531758() { }
+exports.dummy1780916107742 = dummy1780916107742;
+function dummy1780916107742() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-session-passcode/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531816 = dummy1779561531816;
-function dummy1779561531816() { }
+exports.dummy1780916107787 = dummy1780916107787;
+function dummy1780916107787() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-session-passcode/taon-session-passcode.component.d.ts

@@ -19,7 +19,7 @@ export declare class TaonSessionPasscodeComponent implements OnInit, AfterViewIn
     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;

package/lib/ui/taon-simple-layout/taon-simple-layout.component.d.ts

@@ -7,6 +7,7 @@ export declare class TaonSimpleLayoutComponent {
     protected dialog: MatDialog;
     protected theme: TaonThemeService;
     hideThemeSettings: boolean;
+    hideHeader: boolean;
     navItems: import("@angular/core", { with: { "resolution-mode": "import" } }).InputSignal<TaonSimpleLayoutNavItem[]>;
     navigateTo(item: {
         path: string;

package/lib/ui/taon-table/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1779561531909 = dummy1779561531909;
-function dummy1779561531909() { }
+exports.dummy1780916107870 = dummy1780916107870;
+function dummy1780916107870() { }
 //# sourceMappingURL=index.js.map

package/lib/ui/taon-theme/taon-theme.component.d.ts

@@ -1,5 +1,7 @@
 import { TaonThemeMode, TaonThemeService } from './taon-theme.service';
 export declare class TaonThemeComponent {
     TaonThemeMode: typeof TaonThemeMode;
+    private readonly dialogRef;
+    close(): void;
     taonTheme: TaonThemeService;
 }

package/lib-esm/app.electron.d.ts

@@ -1 +1 @@
-export declare function dummy1779561530584(): void;
+export declare function dummy1780916106862(): void;

package/lib-esm/app.electron.js

@@ -1,2 +1,2 @@
-export function dummy1779561530584() { }
+export function dummy1780916106862() { }
 //# sourceMappingURL=app.electron.js.map

package/lib-esm/app.hosts.d.ts

@@ -24,7 +24,7 @@ export declare const CLIENT_DEV_WEBSQL_APP_PORT_1: any;
 /**
  * Electron/angular website url for electron app purpose (ipc backend)
  */
-export declare const FRONTEND_NORMAL_ELECTRON_PORT_1 = 4291;
+export declare const FRONTEND_NORMAL_ELECTRON_PORT_1 = 4214;
 /**
  * Backend url - use as "host" inside your context
  *
@@ -65,7 +65,7 @@ export declare const CLIENT_DEV_WEBSQL_APP_PORT: any;
 /**
  * Electron/angular website url for electron app purpose (ipc backend)
  */
-export declare const FRONTEND_NORMAL_ELECTRON_PORT = 4291;
+export declare const FRONTEND_NORMAL_ELECTRON_PORT = 4214;
 /**
  * Backend url - use as "host" inside your context
  * @deprecated use HOST_URL_n instead