@taon-dev/ui 21.0.13 → 21.0.14

package/ts-source/browser-code/taon-draggable-button-panel/index.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export * from './taon-draggable-button-panel.component';

package/ts-source/browser-code/taon-draggable-button-panel/taon-draggable-button-panel.component.html

@@ -0,0 +1,116 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {
+  @if (iconTemplate) {
+    <ng-container [ngTemplateOutlet]="iconTemplate" />
+  } @else {
+    <button
+      class="taon-admin-panel-toogle-open-button"
+      [class.taon-admin-panel-toogle-button-dimmer-opacity]="
+        effectiveState() !== State.CLICKABLE_BUTTON
+      "
+      mat-icon-button
+      type="button"
+      [matTooltip]="title"
+      (click)="toggle()">
+      <mat-icon>{{ buttonIcon }}</mat-icon>
+    </button>
+  }
+}
+
+<section
+  cdkDrag
+  [hidden]="currentState() === State.CLICKABLE_BUTTON"
+  [cdkDragDisabled]="!isDraggingEnabled()"
+  class="taon-draggable-panel"
+  [class.taon-window]="effectiveState() === State.WINDOW"
+  [class.taon-window-full]="effectiveState() !== State.WINDOW"
+  [class.taon-fullscreen]="
+    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||
+    effectiveState() === State.FULL_SCREEN_LOCKED
+  ">
+  <header
+    cdkDragHandle
+    (dblclick)="toogleFullscreen($event)"
+    class="taon-window-bar">
+    
+    <div class="flex min-w-0 flex-1 items-center gap-2">
+      <mat-icon class="text-gray-500"> admin_panel_settings </mat-icon>
+
+      <span class="truncate font-medium">
+        {{ title }}
+      </span>
+    </div>
+
+    
+    <div class="flex min-w-0 items-center justify-center">
+      @if (headerCenterTemplate) {
+        <ng-container [ngTemplateOutlet]="headerCenterTemplate" />
+      }
+    </div>
+
+    
+    <div class="flex shrink-0 items-center">
+      
+      @if (!forceFullScreen()) {
+        @if (currentState() !== State.WINDOW) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Window mode"
+            (click)="windowMode()">
+            <mat-icon>filter_none</mat-icon>
+          </button>
+        }
+
+        @if (currentState() === State.WINDOW) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Full screen"
+            (click)="fullScreenDraggable()">
+            <mat-icon>fullscreen</mat-icon>
+          </button>
+        }
+
+        @if (currentState() !== State.FULL_SCREEN_LOCKED) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Lock full screen"
+            (click)="lockFullScreen()">
+            <mat-icon>lock_open</mat-icon>
+          </button>
+        } @else {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Unlock"
+            (click)="fullScreenDraggable()">
+            <mat-icon>lock</mat-icon>
+          </button>
+        }
+      }
+
+      
+      <button
+        mat-icon-button
+        type="button"
+        matTooltip="Close admin panel"
+        (click)="returnToButton()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    
+  </header>
+
+  <div class="min-h-0 flex-1 overflow-hidden">
+    <ng-content />
+  </div>
+</section>

package/ts-source/browser-code/taon-draggable-button-panel/taon-draggable-button-panel.component.scss

@@ -0,0 +1,70 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+:host {
+  display: contents;
+}
+
+.taon-admin-panel-toogle-button-dimmer-opacity {
+  opacity: 0.6;
+}
+
+.taon-draggable-panel {
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+
+  min-width: 320px;
+  min-height: 240px;
+
+  overflow: hidden;
+
+  background: white;
+
+  border: 1px solid #e5e7eb;
+
+  box-shadow: 0 20px 50px rgb(0 0 0 / 15%);
+
+  z-index: 1000;
+}
+
+.taon-window {
+  width: 70vw;
+  height: 70vh;
+
+  left: 15vw;
+  top: 25vh;
+
+  border-radius: 6px;
+}
+
+.taon-fullscreen {
+  width: 100vw;
+  height: 100dvh;
+
+  left: 0;
+  top: 0;
+
+  border-radius: 0;
+}
+
+.taon-window-bar {
+  height: 48px;
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+
+  flex-shrink: 0;
+  padding-left: 12px;
+
+  border-bottom: 1px solid #e5e7eb;
+  background: #fafafa;
+
+  user-select: none;
+  cursor: move;
+}

package/ts-source/browser-code/taon-draggable-button-panel/taon-draggable-button-panel.component.ts

@@ -0,0 +1,262 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output, signal, TemplateRef, ViewChild, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, firstValueFrom, Subscription, take } from 'rxjs';
+import { TaonAdminMenuContext } from '../taon-admin-layout/taon-admin-menu-context';
+import { TaonDraggableButtonPanelState } from './taon-draggable-button-panel.models';
+@Component({
+    selector: 'taon-draggable-button-panel',
+    standalone: true,
+    imports: [
+        CdkDrag,
+        CdkDragHandle,
+        NgIf,
+        NgTemplateOutlet,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+    ],
+    templateUrl: './taon-draggable-button-panel.component.html',
+    styleUrls: ['./taon-draggable-button-panel.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TaonAdminMenuContext],
+})
+export class TaonDraggableButtonPanelComponent<TContext = unknown> implements OnInit, OnDestroy {
+    readonly State = TaonDraggableButtonPanelState;
+    private readonly menuContext = inject(TaonAdminMenuContext);
+    @Input()
+    set context(context: TContext) {
+        this.menuContext.context.set(context);
+    }
+    @ViewChild(CdkDrag)
+    private drag?: CdkDrag;
+    @Input()
+    basePath = '';
+    @Input()
+    buttonIcon = 'admin_panel_settings';
+    @Input()
+    title = 'Admin';
+    @Input()
+    outlet?: string;
+    @Input()
+    stateParamName = 'state';
+    @Input()
+    set state(state: TaonDraggableButtonPanelState) {
+        this.currentState.set(state);
+    }
+    @Output()
+    readonly stateChange = new EventEmitter<TaonDraggableButtonPanelState>();
+    protected readonly forceFullScreen = signal(window.innerWidth < 900);
+    private readonly resizeListener = (): void => {
+        const wasForceFullScreen = this.forceFullScreen();
+        const forceFullScreen = window.innerWidth < 900;
+        this.forceFullScreen.set(forceFullScreen);
+        if (!wasForceFullScreen && forceFullScreen) {
+            this.resetDragPosition();
+        }
+    };
+    protected readonly currentState = signal(TaonDraggableButtonPanelState.CLICKABLE_BUTTON);
+    private routerSubscription?: Subscription;
+    @Input()
+    autoHideIcon = true;
+    @Input()
+    iconTemplate?: TemplateRef<unknown>;
+    @Input()
+    headerCenterTemplate?: TemplateRef<unknown>;
+    constructor(private readonly router: Router) { }
+    async ngOnInit(): Promise<void> {
+        window.addEventListener('resize', this.resizeListener);
+        await this.waitForInitialNavigation();
+        await this.ensureOutletBasePath();
+        this.restoreStateFromUrl();
+        this.routerSubscription = this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+            this.restoreStateFromUrl();
+        });
+    }
+    ngOnDestroy(): void {
+        window.removeEventListener('resize', this.resizeListener);
+        this.routerSubscription?.unsubscribe();
+    }
+    protected toogleFullscreen(event: Event) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.forceFullScreen()) {
+            return;
+        }
+        if (this.currentState() === TaonDraggableButtonPanelState.WINDOW) {
+            this.resetDragPosition();
+            void this.setState(TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED);
+        }
+        else if ([
+            TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE,
+            TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED,
+        ].includes(this.currentState())) {
+            this.resetDragPosition();
+            void this.setState(TaonDraggableButtonPanelState.WINDOW);
+        }
+    }
+    protected effectiveState(): TaonDraggableButtonPanelState {
+        if (this.forceFullScreen() &&
+            this.currentState() !== TaonDraggableButtonPanelState.CLICKABLE_BUTTON) {
+            return TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED;
+        }
+        return this.currentState();
+    }
+    private async waitForInitialNavigation(): Promise<void> {
+        if (this.router.navigated) {
+            return;
+        }
+        await firstValueFrom(this.router.events.pipe(filter(event => event instanceof NavigationEnd), take(1)));
+    }
+    private async ensureOutletBasePath(): Promise<void> {
+        if (!this.outlet || !this.basePath) {
+            return;
+        }
+        const tree = this.router.parseUrl(this.router.url);
+        if (tree.root.children[this.outlet]) {
+            return;
+        }
+        const baseSegments = this.basePath.split('/').filter(Boolean);
+        if (!baseSegments.length) {
+            return;
+        }
+        await this.router.navigate([
+            {
+                outlets: {
+                    [this.outlet]: baseSegments,
+                },
+            },
+        ], {
+            replaceUrl: true,
+        });
+    }
+    protected async setState(next: TaonDraggableButtonPanelState): Promise<void> {
+        if (!this.isTransitionAllowed(next)) {
+            return;
+        }
+        this.currentState.set(next);
+        this.stateChange.emit(next);
+        await this.saveStateToUrl(next);
+    }
+    protected open(): void {
+        void this.setState(TaonDraggableButtonPanelState.WINDOW);
+    }
+    protected toggle(): void {
+        if (this.currentState() === this.State.CLICKABLE_BUTTON) {
+            this.open();
+        }
+        else {
+            this.returnToButton();
+        }
+    }
+    protected returnToButton(): void {
+        this.resetDragPosition();
+        void this.setState(TaonDraggableButtonPanelState.CLICKABLE_BUTTON);
+    }
+    protected windowMode(): void {
+        void this.setState(TaonDraggableButtonPanelState.WINDOW);
+    }
+    protected fullScreenDraggable(): void {
+        this.resetDragPosition();
+        void this.setState(TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE);
+    }
+    protected lockFullScreen(): void {
+        this.resetDragPosition();
+        void this.setState(TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED);
+    }
+    protected isDraggingEnabled(): boolean {
+        if (this.forceFullScreen()) {
+            return false;
+        }
+        return (this.currentState() === TaonDraggableButtonPanelState.WINDOW ||
+            this.currentState() ===
+                TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE);
+    }
+    private restoreStateFromUrl(): void {
+        if (!this.outlet) {
+            return;
+        }
+        const tree = this.router.parseUrl(this.router.url);
+        const outletGroup = tree.root.children[this.outlet];
+        if (!outletGroup) {
+            return;
+        }
+        const rootSegment = outletGroup.segments[0];
+        if (!rootSegment) {
+            return;
+        }
+        const state = rootSegment.parameters[this.stateParamName];
+        if (!this.isValidState(state)) {
+            return;
+        }
+        this.currentState.set(state);
+        if (state === TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE ||
+            state === TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED) {
+            queueMicrotask(() => {
+                this.resetDragPosition();
+            });
+        }
+    }
+    private async saveStateToUrl(state: TaonDraggableButtonPanelState): Promise<void> {
+        if (!this.outlet) {
+            return;
+        }
+        const tree = this.router.parseUrl(this.router.url);
+        const outletGroup = tree.root.children[this.outlet];
+        if (!outletGroup || outletGroup.segments.length === 0) {
+            return;
+        }
+        const rootSegment = outletGroup.segments[0];
+        rootSegment.parameters = {
+            ...rootSegment.parameters,
+            [this.stateParamName]: state,
+        };
+        await this.router.navigateByUrl(tree, {
+            replaceUrl: true,
+        });
+    }
+    private isValidState(value: string | undefined): value is TaonDraggableButtonPanelState {
+        return Object.values(TaonDraggableButtonPanelState).includes(value as TaonDraggableButtonPanelState);
+    }
+    private resetDragPosition(): void {
+        this.drag?.reset();
+    }
+    private isTransitionAllowed(next: TaonDraggableButtonPanelState): boolean {
+        const current = this.currentState();
+        const transitions: Record<TaonDraggableButtonPanelState, TaonDraggableButtonPanelState[]> = {
+            [TaonDraggableButtonPanelState.CLICKABLE_BUTTON]: [
+                TaonDraggableButtonPanelState.WINDOW,
+            ],
+            [TaonDraggableButtonPanelState.WINDOW]: [
+                TaonDraggableButtonPanelState.CLICKABLE_BUTTON,
+                TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE,
+                TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED,
+            ],
+            [TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE]: [
+                TaonDraggableButtonPanelState.CLICKABLE_BUTTON,
+                TaonDraggableButtonPanelState.WINDOW,
+                TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED,
+            ],
+            [TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED]: [
+                TaonDraggableButtonPanelState.CLICKABLE_BUTTON,
+                TaonDraggableButtonPanelState.WINDOW,
+                TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE,
+            ],
+        };
+        return transitions[current].includes(next);
+    }
+}

package/ts-source/browser-code/taon-draggable-button-panel/taon-draggable-button-panel.models.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export enum TaonDraggableButtonPanelState {
+    CLICKABLE_BUTTON = 'CLICKABLE_BUTTON',
+    WINDOW = 'WINDOW',
+    FULL_SCREEN_DRAGGABLE = 'FULL_SCREEN_DRAGGABLE',
+    FULL_SCREEN_LOCKED = 'FULL_SCREEN_LOCKED'
+}
+export namespace TaonDraggableButtonPanelModels { }

package/ts-source/browser-code/taon-draggable-button-panel/taon-draggable-button-panel.routes.ts

@@ -0,0 +1,16 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { Routes } from '@angular/router';
+import { TaonDraggableButtonPanelComponent } from './taon-draggable-button-panel.component';
+export const TaonDraggableButtonPanelRoutes: Routes = [
+    {
+        path: '',
+        component: TaonDraggableButtonPanelComponent,
+    },
+];
+export default TaonDraggableButtonPanelRoutes;

package/ts-source/browser-code/taon-under-construction/i18n/taon-under-construction.component.ts.en-US.i18n.data.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export interface EnUsTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs {
+    "en-US": {
+        "": {
+            "Coming soon"?: string;
+            "This section is currently under construction and will be available soon."?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/taon-under-construction/taon-under-construction.component.ts",
+    "tags": [
+        {
+            "gettextString": "Coming soon",
+            "lineNumber": 19
+        },
+        {
+            "gettextString": "This section is currently under construction and will be available soon.",
+            "lineNumber": 22
+        }
+    ]
+};

package/ts-source/browser-code/taon-under-construction/i18n/taon-under-construction.component.ts.en-US.po

@@ -0,0 +1,13 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-under-construction/taon-under-construction.component.ts:19
+msgid "Coming soon"
+msgstr ""
+
+#: src/lib/taon-under-construction/taon-under-construction.component.ts:22
+msgid "This section is currently under construction and will be available soon."
+msgstr ""

package/ts-source/browser-code/taon-under-construction/i18n/taon-under-construction.component.ts.pl-PL.i18n.data.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export interface PlPlTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs {
+    "pl-PL": {
+        "": {
+            "Coming soon"?: string;
+            "This section is currently under construction and will be available soon."?: string;
+        };
+    };
+}
+export default {
+    "fileRelativePath": "src/lib/taon-under-construction/taon-under-construction.component.ts",
+    "tags": [
+        {
+            "gettextString": "Coming soon",
+            "lineNumber": 19
+        },
+        {
+            "gettextString": "This section is currently under construction and will be available soon.",
+            "lineNumber": 22
+        }
+    ]
+};

package/ts-source/browser-code/taon-under-construction/i18n/taon-under-construction.component.ts.pl-PL.po

@@ -0,0 +1,13 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-under-construction/taon-under-construction.component.ts:19
+msgid "Coming soon"
+msgstr ""
+
+#: src/lib/taon-under-construction/taon-under-construction.component.ts:22
+msgid "This section is currently under construction and will be available soon."
+msgstr ""

package/ts-source/browser-code/taon-under-construction/i18n/taon-under-construction.translation.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { CoreModels } from 'tnp-core/browser';
+import { EnUsTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs } from './taon-under-construction.component.ts.en-US.i18n.data';
+import { PlPlTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs } from './taon-under-construction.component.ts.pl-PL.i18n.data';
+;
+export type TaonUnderConstructionOverride = CoreModels.DeepPartial<EnUsTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs | PlPlTraslationOverrideSrcLibTaonUnderConstructionTaonUnderConstructionComponentTs>;

package/ts-source/browser-code/taon-under-construction/taon-under-construction.component.html

@@ -0,0 +1,22 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div class="under-construction">
+  <div class="icon-wrapper">
+    <mat-icon>{{ icon() }}</mat-icon>
+  </div>
+
+  <h2>{{ title() }}</h2>
+
+  <p>{{ description() }}</p>
+
+  <div class="status">
+    <mat-icon>construction</mat-icon>
+    Work in progress
+  </div>
+</div>