taon-ui 21.0.75 → 21.0.77

package/ts-source/websql-code/ui/taon-progress-bar/taon-progress-bar.component.html

@@ -0,0 +1,13 @@
+<!--
+==============================================================================
+
+- 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.
+  
+==============================================================================
+-->
+

package/ts-source/websql-code/ui/taon-progress-bar/taon-progress-bar.component.scss

@@ -0,0 +1,14 @@
+/* ============================================================================
+ 
+- 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.
+  
+ * ========================================================================== */
+
+:host {
+  display: block;
+}

package/ts-source/websql-code/ui/taon-progress-bar/taon-progress-bar.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, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, OnDestroy, AfterViewInit, } from '@angular/core';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { Taon } from 'taon/websql';
+import { _ } from 'tnp-core/websql';
+const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total;
+declare const ENV: any;
+@Component({
+    selector: 'taon-progress-bar',
+    templateUrl: './taon-progress-bar.component.html',
+    styleUrls: ['./taon-progress-bar.component.scss'],
+    standalone: false,
+})
+export class TaonProgressBarComponent implements OnInit, OnDestroy, AfterViewInit {
+    @ViewChild('labProgress')
+    labProgress: any;
+    @Input()
+    isDesktop: boolean;
+    admin: any;
+    handlers: Subscription[] = [];
+    constructor() { }
+    ngOnInit() { }
+    ngOnDestroy(): void {
+        this.handlers.forEach(h => h.unsubscribe());
+    }
+    ngAfterViewInit(): void {
+    }
+    loadProgressBar(config) {
+    }
+}

package/ts-source/websql-code/ui/taon-progress-bar/taon-progress-bar.module.ts

@@ -0,0 +1,24 @@
+// @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TaonProgressBarComponent } from './taon-progress-bar.component';
+@NgModule({
+    imports: [
+        CommonModule,
+    ],
+    declarations: [TaonProgressBarComponent],
+    exports: [TaonProgressBarComponent],
+})
+export class TaonProgressBarModule {
+}

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

@@ -0,0 +1,59 @@
+<!--
+==============================================================================
+
+- 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="taon-rumble">
+  
+  <div
+    *ngIf="isPreview()"
+    class="preview"
+    (click)="onPreviewClick()">
+    <img
+      class="preview-img"
+      [src]="picturePreviewUrl"
+      [alt]="title" />
+
+    <div class="title">
+      {{ title }}
+    </div>
+
+    
+    <div class="play-button">▶</div>
+
+    
+    <div
+      *ngIf="isLocked()"
+      class="lock"
+      (click)="onPadlockClick($event)">
+      🔒
+    </div>
+  </div>
+
+  
+  <div
+    *ngIf="isVideoOpen()"
+    class="video">
+    <iframe
+      class="rumble-frame"
+      [src]="embedUrl()"
+      frameborder="0"
+      allowfullscreen>
+    </iframe>
+  </div>
+
+  
+  <div
+    *ngIf="isPrivate()"
+    class="private">
+    <div class="private-box">🔒 Private video</div>
+  </div>
+</div>

package/ts-source/websql-code/ui/taon-rumble/taon-rumble.component.scss

@@ -0,0 +1,107 @@
+/* ============================================================================
+ 
+- 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.
+  
+ * ========================================================================== */
+
+.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, rgba(0, 0, 0, 0.8));
+
+  color: white;
+  font-size: 14px;
+}
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  font-size: 40px;
+  color: white;
+
+  background: rgba(0, 0, 0, 0.5);
+  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: rgba(0, 0, 0, 0.6);
+  color: white;
+
+  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: white;
+}
+
+.private-box {
+  opacity: 0.7;
+}

package/ts-source/websql-code/ui/taon-rumble/taon-rumble.component.ts

@@ -0,0 +1,65 @@
+// @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 { NgIf } from '@angular/common';
+import { Component, Input, Output, EventEmitter, computed, inject, } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+export type TaonRumbleState = 'preview-picture' | 'preview-picture-locked' | 'video-preview-open' | 'video-preview-private';
+@Component({
+    selector: 'taon-rumble',
+    standalone: true,
+    imports: [NgIf],
+    templateUrl: './taon-rumble.component.html',
+    styleUrls: ['./taon-rumble.component.scss'],
+})
+export class TaonRumbleComponent {
+    sanitizer = inject(DomSanitizer);
+    @Input({
+        required: true,
+    })
+    title!: string;
+    @Input({
+        required: true,
+    })
+    clipId!: string;
+    @Input({
+        required: true,
+    })
+    picturePreviewUrl!: string;
+    @Input()
+    state: TaonRumbleState = 'video-preview-open';
+    @Output()
+    paddlockClicked = new EventEmitter<void>();
+    @Output()
+    previewClicked = new EventEmitter<void>();
+    embedUrl = computed<SafeResourceUrl>(() => this.sanitizer.bypassSecurityTrustResourceUrl(`https://rumble.com/embed/${this.clipId}`));
+    onPreviewClick() {
+        this.previewClicked.emit();
+    }
+    onPadlockClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.paddlockClicked.emit();
+    }
+    isPreview() {
+        return (this.state === 'preview-picture' ||
+            this.state === 'preview-picture-locked');
+    }
+    isLocked() {
+        return this.state === 'preview-picture-locked';
+    }
+    isVideoOpen() {
+        return this.state === 'video-preview-open';
+    }
+    isPrivate() {
+        return this.state === 'video-preview-private';
+    }
+}

package/ts-source/websql-code/ui/taon-session-passcode/index.ts

@@ -0,0 +1,13 @@
+// @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 * from './taon-session-passcode.component';

package/ts-source/websql-code/ui/taon-session-passcode/taon-session-passcode.component.html

@@ -0,0 +1,33 @@
+<!--
+==============================================================================
+
+- 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.
+  
+==============================================================================
+-->
+
+<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/ts-source/websql-code/ui/taon-session-passcode/taon-session-passcode.component.scss

@@ -0,0 +1,30 @@
+/* ============================================================================
+ 
+- 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.
+  
+ * ========================================================================== */
+
+:host {
+  position: fixed;
+  background-color: rgb(159 159 159 / 34%);
+  z-index: 2147483647;
+  backdrop-filter: blur(50px);
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+input {
+  background: rgb(255, 255, 255);
+  border-radius: 6px;
+  outline: 0px;
+  border: 0px;
+  color: gray;
+  text-align: center;
+  width: 500px;
+}

package/ts-source/websql-code/ui/taon-session-passcode/taon-session-passcode.component.ts

@@ -0,0 +1,118 @@
+// @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 { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, DestroyRef, ElementRef, HostBinding, Input, OnInit, Self, inject, AfterViewInit, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, } from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { PasswordModule } from 'primeng/password';
+import { interval, take, tap } from 'rxjs';
+import { TaonStor } from 'taon-storage/websql';
+export interface TaonSessionPasscodeModel {
+    passcode: string;
+}
+export type TaonSessionPasscodeForm = {
+    [prop in keyof TaonSessionPasscodeModel]: FormControl<TaonSessionPasscodeModel[prop]>;
+};
+@Component({
+    selector: 'taon-session-passcode',
+    templateUrl: './taon-session-passcode.component.html',
+    styleUrls: ['./taon-session-passcode.component.scss'],
+    standalone: true,
+    imports: [PasswordModule, CommonModule, ReactiveFormsModule, FormsModule],
+})
+export class TaonSessionPasscodeComponent implements OnInit, AfterViewInit {
+    destroyRef = inject(DestroyRef);
+    @Input({
+        required: true,
+    })
+    public passcode: string;
+    @Input()
+    public message: string;
+    public safeMessage: SafeHtml;
+    private lastPasscode = TaonStor.inLocalstorage({
+        defaultValue: '',
+        keyOrPath: 'lastPasscode',
+    }, TaonSessionPasscodeComponent);
+    @HostBinding('style.display')
+    public display = 'none';
+    public form: FormGroup<TaonSessionPasscodeForm> = new FormGroup<TaonSessionPasscodeForm>({
+        passcode: new FormControl(),
+    });
+    constructor(
+    @Self()
+    private element: ElementRef<HTMLElement>, private domSanitizer: DomSanitizer, private cdr: ChangeDetectorRef) { }
+    async ngOnInit() {
+        if (!this.message) {
+            this.message = `
+      This website is only for testing purpose. Please type passcode bellow to see content.
+
+      `;
+        }
+        this.safeMessage = this.domSanitizer.bypassSecurityTrustHtml(this.message);
+        await this.lastPasscode.ready();
+        if (this.lastPasscode()?.toString() === this.passcode?.toString()) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focus();
+        }
+        this.cdr.markForCheck();
+        interval(1000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
+            this.focus();
+            this.cdr.markForCheck();
+        }))
+            .subscribe();
+    }
+    submit({ passcode }: Partial<TaonSessionPasscodeModel>) {
+        if (this.isPasscodeOK(passcode || '')) {
+            this.hide();
+        }
+        else {
+            this.clear();
+        }
+    }
+    private isPasscodeOK(passcode: string) {
+        this.lastPasscode.set(passcode.toString());
+        return this.passcode.toString() === passcode;
+    }
+    ngAfterViewInit(): void { }
+    public focus(): void {
+        this.element.nativeElement.querySelector('input')?.focus();
+    }
+    hide() {
+        this.display = 'none';
+    }
+    show() {
+        this.display = 'block';
+    }
+    clear() {
+        this.form.controls.passcode.setValue('');
+    }
+    onKeyup(event: KeyboardEvent & {
+        target: {
+            value: string;
+        };
+    }) {
+        if (this.isPasscodeOK(event.target.value || '')) {
+            this.hide();
+            return;
+        }
+        const key = event.keyCode || event.charCode;
+        if (key === 8 || key === 46 || this.lastPasscode()?.length > 5) {
+            this.clear();
+        }
+    }
+}

package/ts-source/websql-code/ui/taon-settings/i18n/taon-settings.component.html.de-DE.i18n.data.ts

@@ -0,0 +1,58 @@
+// @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 DeDeTraslationOverrideSrcLibUiTaonSettingsTaonSettingsComponentHtml {
+    "de-DE": {
+        "": {
+            "Dark mode"?: string;
+            "Language Settings"?: string;
+            "Settings can't ba changed"?: string;
+            "Sync colors with system"?: string;
+            "Theme settings"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-settings/taon-settings.component.html",
+    "tags": [
+        {
+            "gettextString": "Language Settings",
+            "lineNumber": 10,
+            "translation": "Sprachenanforderungen"
+        },
+        {
+            "gettextString": "Theme settings",
+            "lineNumber": 17,
+            "translation": "Themenanpassungen"
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 17,
+            "translation": "Die Einstellungen können nicht geändert werden."
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 18,
+            "translation": "Die Einstellungen können nicht geändert werden."
+        },
+        {
+            "gettextString": "Sync colors with system",
+            "lineNumber": 26,
+            "translation": "Synchronisieren von Farben mit dem System"
+        },
+        {
+            "gettextString": "Dark mode",
+            "lineNumber": 34,
+            "translation": "Dunkler Modus"
+        }
+    ]
+};

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

@@ -0,0 +1,26 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/ui/taon-settings/taon-settings.component.html:10
+msgid "Language Settings"
+msgstr "Sprachenanforderungen"
+
+#: src/lib/ui/taon-settings/taon-settings.component.html:17
+msgid "Theme settings"
+msgstr "Themenanpassungen"
+
+#: src/lib/ui/taon-settings/taon-settings.component.html:17
+#: src/lib/ui/taon-settings/taon-settings.component.html:18
+msgid "Settings can't ba changed"
+msgstr "Die Einstellungen können nicht geändert werden."
+
+#: src/lib/ui/taon-settings/taon-settings.component.html:26
+msgid "Sync colors with system"
+msgstr "Synchronisieren von Farben mit dem System"
+
+#: src/lib/ui/taon-settings/taon-settings.component.html:34
+msgid "Dark mode"
+msgstr "Dunkler Modus"

package/ts-source/websql-code/ui/taon-settings/i18n/taon-settings.component.html.en-US.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 EnUsTraslationOverrideSrcLibUiTaonSettingsTaonSettingsComponentHtml {
+    "en-US": {
+        "": {
+            "Dark mode"?: string;
+            "Language Settings"?: string;
+            "Settings can't ba changed"?: string;
+            "Sync colors with system"?: string;
+            "Theme settings"?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/ui/taon-settings/taon-settings.component.html",
+    "tags": [
+        {
+            "gettextString": "Language Settings",
+            "lineNumber": 10
+        },
+        {
+            "gettextString": "Theme settings",
+            "lineNumber": 17
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 17
+        },
+        {
+            "gettextString": "Settings can't ba changed",
+            "lineNumber": 18
+        },
+        {
+            "gettextString": "Sync colors with system",
+            "lineNumber": 26
+        },
+        {
+            "gettextString": "Dark mode",
+            "lineNumber": 34
+        }
+    ]
+};

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

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