taon-ui 21.0.75 → 21.0.77

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.html.de-DE.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+msgid "Theme settings"
+msgstr "Ustawienia motywu"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+#: src/lib/ui/taon-theme/taon-theme.component.html:12
+msgid "Settings can't ba changed"
+msgstr "Ustawienia nie mogą być zmienione"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:20
+msgid "Sync colors with system"
+msgstr "Synchronizuj motyw koloru z systemem"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:28
+msgid "Dark mode"
+msgstr "Tryb ciemny"

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.html.en-US.i18n.data.ts

@@ -0,0 +1,47 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml {
+    "en-US": {
+        "": {
+            "Dark mode"?: string;
+            "Settings can't ba changed"?: string;
+            "Sync colors with system"?: string;
+            "Theme settings"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-theme/taon-theme.component.html",
+    "tags": [
+        {
+            "gettextString": "Theme settings",
+            "lineNumber": 11
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 11
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 12
+        },
+        {
+            "gettextString": "Sync colors with system",
+            "lineNumber": 20
+        },
+        {
+            "gettextString": "Dark mode",
+            "lineNumber": 28
+        }
+    ]
+};

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.html.en-US.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+msgid "Theme settings"
+msgstr ""
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+#: src/lib/ui/taon-theme/taon-theme.component.html:12
+msgid "Settings can't ba changed"
+msgstr ""
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:20
+msgid "Sync colors with system"
+msgstr ""
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:28
+msgid "Dark mode"
+msgstr ""

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.html.pl-PL.i18n.data.ts

@@ -0,0 +1,52 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml {
+    "pl-PL": {
+        "": {
+            "Dark mode"?: string;
+            "Settings can't ba changed"?: string;
+            "Sync colors with system"?: string;
+            "Theme settings"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-theme/taon-theme.component.html",
+    "tags": [
+        {
+            "gettextString": "Theme settings",
+            "lineNumber": 11,
+            "translation": "Ustawienia motywu"
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 11,
+            "translation": "Ustawienia nie mogą być zmienione"
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 12,
+            "translation": "Ustawienia nie mogą być zmienione"
+        },
+        {
+            "gettextString": "Sync colors with system",
+            "lineNumber": 20,
+            "translation": "Synchronizuj motyw koloru z systemem"
+        },
+        {
+            "gettextString": "Dark mode",
+            "lineNumber": 28,
+            "translation": "Tryb ciemny"
+        }
+    ]
+};

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.html.pl-PL.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+msgid "Theme settings"
+msgstr "Ustawienia motywu"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:11
+#: src/lib/ui/taon-theme/taon-theme.component.html:12
+msgid "Settings can't ba changed"
+msgstr "Ustawienia nie mogą być zmienione"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:20
+msgid "Sync colors with system"
+msgstr "Synchronizuj motyw koloru z systemem"
+
+#: src/lib/ui/taon-theme/taon-theme.component.html:28
+msgid "Dark mode"
+msgstr "Tryb ciemny"

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.de-DE.i18n.data.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface DeDeTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs {
+    "de-DE": {};
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-theme/taon-theme.component.ts",
+    "tags": []
+};

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.de-DE.po

@@ -0,0 +1,5 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.en-US.i18n.data.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs {
+    "en-US": {};
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-theme/taon-theme.component.ts",
+    "tags": []
+};

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.en-US.po

@@ -0,0 +1,5 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.pl-PL.i18n.data.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export interface PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs {
+    "pl-PL": {};
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-theme/taon-theme.component.ts",
+    "tags": []
+};

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.component.ts.pl-PL.po

@@ -0,0 +1,5 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.translation.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/ui/taon-theme/i18n/taon-theme.translation.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { CoreModels__NS__BaseProjectType, CoreModels__NS__BaseProjectTypeArr, CoreModels__NS__BuildType, CoreModels__NS__BuildTypeArr, CoreModels__NS__buildTypeToWatcherFn, CoreModels__NS__BuildWatcherErrorType, CoreModels__NS__BuildWatcherType, CoreModels__NS__BuildWatcherTypeArr, CoreModels__NS__CfontAlign, CoreModels__NS__CfontStyle, CoreModels__NS__ClassNameStaticProperty, CoreModels__NS__ContentType, CoreModels__NS__ContentTypeKeys, CoreModels__NS__CoreLibCategory, CoreModels__NS__CutableFileExt, CoreModels__NS__DatabaseType, CoreModels__NS__DeepPartial, CoreModels__NS__FileEvent, CoreModels__NS__FileExtension, CoreModels__NS__FirstParamsFrom, CoreModels__NS__FrameworkVersion, CoreModels__NS__GitConnection, CoreModels__NS__GitConnectionArr, CoreModels__NS__GlobalDependencies, CoreModels__NS__hasExitCleaningFunction, CoreModels__NS__HttpCode, CoreModels__NS__HttpMethod, CoreModels__NS__HttpMethodArr, CoreModels__NS__ImageFileExtension, CoreModels__NS__ImageFileExtensionArr, CoreModels__NS__InstalationType, CoreModels__NS__InstalationTypeArr, CoreModels__NS__LibType, CoreModels__NS__localhostDomain, CoreModels__NS__localhostIp127, CoreModels__NS__ManifestIcon, CoreModels__NS__MediaType, CoreModels__NS__MediaTypeAllArr, CoreModels__NS__mimeTypes, CoreModels__NS__NewFactoryType, CoreModels__NS__NpmInstallOptions, CoreModels__NS__NpmPublishOptions, CoreModels__NS__NpmSpecialVersions, CoreModels__NS__OrignalClassKey, CoreModels__NS__OutFolder, CoreModels__NS__Package, CoreModels__NS__ParamType, CoreModels__NS__parentLocation, CoreModels__NS__pathToChildren, CoreModels__NS__Position, CoreModels__NS__PreReleaseVersionTag, CoreModels__NS__PROGRESS_DATA_TYPE, CoreModels__NS__PUSHTYPE, CoreModels__NS__PwaManifest, CoreModels__NS__ReleaseVersionType, CoreModels__NS__ReleaseVersionTypeEnum, CoreModels__NS__RunOptions, CoreModels__NS__Size, CoreModels__NS__SPECIAL_APP_READY_MESSAGE, CoreModels__NS__SPECIAL_WORKER_READY_MESSAGE, CoreModels__NS__StatusCode401, CoreModels__NS__tagForTaskName, CoreModels__NS__TaonHttpErrorCustomProp, CoreModels__NS__TsUsage, CoreModels__NS__UIFramework, CoreModels__NS__ValueOf, CoreModels__NS__VSCodeSettings } from 'tnp-core/websql-prod';
+import { EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml } from './taon-theme.component.html.en-US.i18n.data';
+import { PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml } from './taon-theme.component.html.pl-PL.i18n.data';
+import { DeDeTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml } from './taon-theme.component.html.de-DE.i18n.data';
+import { EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs } from './taon-theme.component.ts.en-US.i18n.data';
+import { PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs } from './taon-theme.component.ts.pl-PL.i18n.data';
+import { DeDeTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs } from './taon-theme.component.ts.de-DE.i18n.data';
+;
+export type TaonThemeOverride = CoreModels__NS__DeepPartial<EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml | PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml | DeDeTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentHtml | EnUsTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs | PlPlTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs | DeDeTraslationOverrideSrcLibUiTaonThemeTaonThemeComponentTs>;

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.component.html

@@ -0,0 +1,43 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<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">
+  <h3 class="bold">
+     {{ t.gettext('Theme settings') }}
+    {{ taonTheme.pernamentMode ? t.gettext("Settings can't ba changed") : '' }}
+  </h3>
+
+  <mat-slide-toggle
+    class="p-2"
+    [checked]="taonTheme.isAuto()"
+    [disabled]="taonTheme.pernamentMode"
+    (change)="taonTheme.toogleAuto($event.checked)">
+    {{ t.gettext('Sync colors with system') }}
+  </mat-slide-toggle>
+
+  <mat-slide-toggle
+    class="p-2"
+    [checked]="taonTheme.isDark()"
+    [disabled]="taonTheme.isAuto() || taonTheme.pernamentMode"
+    (change)="taonTheme.setDark($event.checked)">
+    {{ t.gettext('Dark mode') }}
+  </mat-slide-toggle>
+</div>

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.component.ts

@@ -0,0 +1,41 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Component, inject } from '@angular/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { TaonThemeMode, TaonThemeService } from './taon-theme.service';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { Translatable, TranslateDirective, TranslateService, Translation, } from '@taon-dev/i18n/websql-prod';
+import { Taon__NS____FILE_RELATIVE_PATH, Taon__NS__asset, Taon__NS__assetsFrom, Taon__NS__assetsListFrom, Taon__NS__createContext, Taon__NS__createContextTemplate, Taon__NS__error, Taon__NS__getResponseValue, Taon__NS__isBrowser, Taon__NS__isElectron, Taon__NS__isNode, Taon__NS__isWebSQL, Taon__NS__LANG_IMPORT_MAP, Taon__NS__removeLoader, Taon__NS__Response, Taon__NS__ResponseHtml, Taon__NS__StartParams } from 'taon/websql-prod';
+const t = Translation.for('src/lib/ui/taon-theme/taon-theme.component.ts', { "src/lib/ui/taon-theme/taon-theme.component.html": { "en-US": async () => (await import('./i18n/taon-theme.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-theme.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-theme.component.html.de-DE.i18n.data')).default }, "src/lib/ui/taon-theme/taon-theme.component.ts": { "en-US": async () => (await import('./i18n/taon-theme.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-theme.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-theme.component.ts.de-DE.i18n.data')).default } } as any);
+@Component({
+    selector: 'taon-theme',
+    imports: [
+        MatSlideToggleModule,
+        MatIconModule,
+        MatButtonModule,
+        MatDialogModule,
+        TranslateDirective,
+    ],
+    templateUrl: './taon-theme.component.html',
+})
+export class TaonThemeComponent implements Translatable {
+    t = t.for(this);
+    TaonThemeMode = TaonThemeMode;
+    private readonly dialogRef = inject(MatDialogRef<TaonThemeComponent>);
+    close(): void {
+        this.dialogRef.close();
+    }
+    taonTheme = inject(TaonThemeService);
+}

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.service.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/ui/taon-theme/taon-theme.service.ts

@@ -0,0 +1,89 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { isPlatformBrowser } from '@angular/common';
+import { Injectable, signal, effect, inject, PLATFORM_ID } from '@angular/core';
+export enum TaonThemeMode {
+    AUTO = 'auto',
+    LIGHT = 'light',
+    DARK = 'dark'
+}
+@Injectable({ providedIn: 'root' })
+export class TaonThemeService {
+    private readonly TAON_THEME_KEY = 'taon-theme-mode';
+    private platformId = inject(PLATFORM_ID);
+    private isBrowser = isPlatformBrowser(this.platformId);
+    private mediaQuery: MediaQueryList | null = null;
+    public pernamentMode = false;
+    mode = signal<TaonThemeMode>(TaonThemeMode.AUTO);
+    isDark = signal<boolean>(false);
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const saved = localStorage.getItem(this.TAON_THEME_KEY) as TaonThemeMode | null;
+        if (saved) {
+            this.mode.set(saved);
+        }
+        this.mediaQuery.addEventListener('change', e => {
+            if (this.pernamentMode) {
+                return;
+            }
+            if (this.mode() === TaonThemeMode.AUTO) {
+                this.apply(e.matches);
+            }
+        });
+        effect(() => {
+            const currentMode = this.mode();
+            localStorage.setItem(this.TAON_THEME_KEY, currentMode);
+            const dark = currentMode === TaonThemeMode.AUTO
+                ? (this.mediaQuery?.matches ?? false)
+                : currentMode === TaonThemeMode.DARK;
+            this.apply(dark);
+        });
+    }
+    private apply(dark: boolean): void {
+        this.isDark.set(dark);
+        const root = document.documentElement;
+        root.classList.toggle('dark-taon-theme', dark);
+        root.classList.toggle('light-taon-theme', !dark);
+    }
+    setMode(mode: TaonThemeMode, options?: {
+        pernamentMode?: boolean;
+    }): void {
+        options = options || {};
+        this.pernamentMode = options.pernamentMode ?? false;
+        this.mode.set(mode);
+    }
+    toogleAuto(auto: boolean): void {
+        if (auto) {
+            this.mode.set(TaonThemeMode.AUTO);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    setDark(yes: boolean): void {
+        if (yes) {
+            this.mode.set(TaonThemeMode.DARK);
+        }
+        else {
+            this.mode.set(TaonThemeMode.LIGHT);
+        }
+    }
+    toggle(): void {
+        this.setMode(this.isDark() ? TaonThemeMode.LIGHT : TaonThemeMode.DARK);
+    }
+    isAuto(): boolean {
+        return this.mode() === TaonThemeMode.AUTO;
+    }
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.html

@@ -0,0 +1,82 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<div
+  class="yt-container"
+  [ngClass]="state"
+  [ngStyle]="containerStyle">
+  
+  <div
+    *ngIf="!videoActivated()"
+    class="yt-preview"
+    (click)="onPreviewClick()">
+    
+    <img
+      class="yt-media"
+      [src]="previewImage()"
+      [alt]="displayTitle || 'YouTube video'"
+      decoding="async"
+      draggable="false"
+      (error)="onThumbnailError($event)" />
+    
+
+    
+    <div
+      *ngIf="state !== 'preview-picture-locked'"
+      class="yt-play-button">
+      <mat-icon>play_arrow</mat-icon>
+    </div>
+
+    
+    <div
+      *ngIf="state === 'preview-picture-locked'"
+      class="yt-overlay yt-lock"
+      (click)="onLockClick($event)">
+      <mat-icon>lock</mat-icon>
+    </div>
+  </div>
+
+  
+  <iframe
+    #ytFrame
+    *ngIf="videoActivated()"
+    class="yt-media"
+    [src]="embedUrl()"
+    frameborder="0"
+    allow="autoplay; encrypted-media; picture-in-picture; web-share"
+    allowfullscreen>
+  </iframe>
+
+  
+  <div
+    *ngIf="
+      videoActivated() &&
+      state === 'video-preview-private' &&
+      allowedToBeDisplayedVideoOveraly()
+    "
+    class="yt-overlay-video"
+    (contextmenu)="onRightClick($event)"
+    (dblclick)="clicked($event)"
+    (click)="clicked($event)">
+    <h1 class="text-center">
+      Thanks for buying<br />
+      this video
+    </h1>
+  </div>
+</div>
+
+<div
+  class="yt-title"
+  *ngIf="displayTitle">
+  {{ displayTitle }}
+</div>

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.scss

@@ -0,0 +1,111 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside taon-ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+.yt-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid var(--surface-border);
+
+  &:not([style*='height']) {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+.yt-preview {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+
+  touch-action: pan-y;
+}
+
+.yt-media {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  border: 0;
+}
+
+img.yt-media {
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.yt-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.yt-play-button {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+
+  width: 72px;
+  height: 52px;
+
+  transform: translate(-50%, -50%);
+
+  border-radius: 14px;
+  background: rgba(255, 0, 0, 0.9);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  pointer-events: none;
+
+  mat-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    color: white;
+  }
+}
+
+.yt-preview:hover .yt-play-button {
+  transform: translate(-50%, -50%) scale(1.08);
+}
+
+.yt-lock {
+  background: rgba(0, 0, 0, 0.55);
+
+  mat-icon {
+    width: 60px;
+    height: 60px;
+    font-size: 56px;
+    color: white;
+  }
+}
+
+.yt-overlay-video {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: rgba(200, 200, 200, 0.5);
+}
+
+.yt-title {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}

package/ts-source/websql-code-prod/ui/taon-youtube-video/taon-youtube-video.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}