@taon-dev/ui 21.0.18 → 21.0.19

package/ts-source/browser-code/taon-detachable-dialog-content/taon-detached-window-content.component.ts

@@ -0,0 +1,474 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, ApplicationRef, ChangeDetectionStrategy, Component, ComponentRef, ElementRef, EnvironmentInjector, Injectable, InjectionToken, Injector, Input, OnDestroy, Type, ViewChild, createComponent, inject, signal, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, ActivatedRouteSnapshot, Params, Router, } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+export const TAON_IS_DETACHED_WINDOW = new InjectionToken<boolean>('TAON_IS_DETACHED_WINDOW', {
+    factory: () => false,
+});
+export interface TaonDetachedRouteState {
+    url: string;
+    params: Params;
+    queryParams: Params;
+    fragment: string | null;
+    data: Record<string, any>;
+}
+export interface TaonDetachedWindow {
+    id: string;
+    title: string;
+    component: Type<any>;
+    routeState: TaonDetachedRouteState;
+    zIndex: number;
+    componentRef?: ComponentRef<any>;
+}
+function cloneObject<T extends Record<string, any>>(value: T | undefined): T {
+    return {
+        ...(value || {}),
+    } as T;
+}
+function createDetachedActivatedRoute(state: TaonDetachedRouteState): ActivatedRoute {
+    const params$ = new BehaviorSubject<Params>(cloneObject(state.params));
+    const queryParams$ = new BehaviorSubject<Params>(cloneObject(state.queryParams));
+    const fragment$ = new BehaviorSubject<string | null>(state.fragment);
+    const data$ = new BehaviorSubject<Record<string, any>>(cloneObject(state.data));
+    const snapshot = {
+        params: cloneObject(state.params),
+        queryParams: cloneObject(state.queryParams),
+        fragment: state.fragment,
+        data: cloneObject(state.data),
+        paramMap: undefined,
+        queryParamMap: undefined,
+    } as unknown as ActivatedRouteSnapshot;
+    return {
+        snapshot,
+        params: params$.asObservable(),
+        queryParams: queryParams$.asObservable(),
+        fragment: fragment$.asObservable(),
+        data: data$.asObservable(),
+    } as unknown as ActivatedRoute;
+}
+@Injectable({
+    providedIn: 'root',
+})
+export class TaonDetachedWindowsService {
+    private readonly baseZIndex = 10000;
+    private zIndexCounter = this.baseZIndex;
+    readonly windows = signal<TaonDetachedWindow[]>([]);
+    open(options: {
+        title: string;
+        component: Type<any>;
+        routeState: TaonDetachedRouteState;
+    }): string {
+        const id = typeof crypto !== 'undefined' && crypto.randomUUID
+            ? crypto.randomUUID()
+            : `taon-window-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const zIndex = ++this.zIndexCounter;
+        this.windows.update(windows => [
+            ...windows,
+            {
+                id,
+                title: options.title,
+                component: options.component,
+                routeState: options.routeState,
+                zIndex,
+            },
+        ]);
+        return id;
+    }
+    focus(id: string): void {
+        const windows = this.windows();
+        const windowToFocus = windows.find(window => window.id === id);
+        if (!windowToFocus) {
+            return;
+        }
+        const highestZIndex = Math.max(...windows.map(window => window.zIndex));
+        if (windowToFocus.zIndex === highestZIndex) {
+            return;
+        }
+        const zIndex = ++this.zIndexCounter;
+        this.windows.update(currentWindows => currentWindows.map(window => window.id === id
+            ? {
+                ...window,
+                zIndex,
+            }
+            : window));
+    }
+    close(id: string): void {
+        const detachedWindow = this.windows().find(current => current.id === id);
+        if (detachedWindow?.componentRef) {
+            detachedWindow.componentRef.destroy();
+        }
+        this.windows.update(windows => windows.filter(current => current.id !== id));
+    }
+    registerComponentRef(id: string, componentRef: ComponentRef<any>): void {
+        this.windows.update(windows => windows.map(window => window.id === id
+            ? {
+                ...window,
+                componentRef,
+            }
+            : window));
+    }
+}
+@Component({
+    selector: 'taon-detached-window',
+    standalone: true,
+    imports: [
+        CommonModule,
+        CdkDrag,
+        CdkDragHandle,
+        MatIconModule,
+        MatButtonModule,
+        MatTooltipModule,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+      :host {
+        display: block;
+      }
+
+      .taon-detached-window {
+        position: absolute;
+
+        top: 80px;
+        left: 80px;
+
+        width: min(900px, calc(100vw - 80px));
+        height: min(700px, calc(100vh - 80px));
+
+        min-width: 320px;
+        min-height: 200px;
+
+        display: flex;
+        flex-direction: column;
+
+        background: var(--mat-sys-surface, white);
+
+        color: var(--mat-sys-on-surface, black);
+
+        border: 1px solid var(--mat-sys-outline-variant, #ccc);
+
+        border-radius: 8px;
+
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+
+        overflow: hidden;
+
+        resize: both;
+      }
+
+      .taon-detached-window-header {
+        height: 40px;
+
+        flex: 0 0 40px;
+
+        display: flex;
+        align-items: center;
+
+        padding-left: 12px;
+
+        border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc);
+
+        user-select: none;
+      }
+
+      .taon-detached-window-drag-handle {
+        flex: 1;
+
+        height: 100%;
+
+        display: flex;
+        align-items: center;
+
+        cursor: move;
+
+        overflow: hidden;
+      }
+
+      .taon-detached-window-title {
+        overflow: hidden;
+
+        white-space: nowrap;
+
+        text-overflow: ellipsis;
+
+        font-weight: 500;
+      }
+
+      .taon-detached-window-actions {
+        display: flex;
+
+        align-items: center;
+
+        padding-right: 4px;
+      }
+
+      .taon-detached-window-body {
+        flex: 1;
+
+        min-height: 0;
+
+        overflow: auto;
+      }
+
+      .taon-detached-window-component-host {
+        display: block;
+
+        min-height: 100%;
+      }
+    `,
+    ],
+    template: `
+    <div
+      class="taon-detached-window"
+      cdkDrag
+      [style.z-index]="window.zIndex"
+      (pointerdown)="focus()">
+      <header class="taon-detached-window-header">
+        <div
+          class="taon-detached-window-drag-handle"
+          cdkDragHandle>
+          <span class="taon-detached-window-title">
+            {{ window.title }}
+          </span>
+        </div>
+
+        <div class="taon-detached-window-actions">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Close"
+            (click)="close()">
+            <mat-icon> close </mat-icon>
+          </button>
+        </div>
+      </header>
+
+      <main class="taon-detached-window-body">
+        <div
+          #componentHost
+          class="taon-detached-window-component-host"></div>
+      </main>
+    </div>
+  `,
+})
+export class TaonDetachedWindowComponent implements AfterViewInit, OnDestroy {
+    private readonly windowsService = inject(TaonDetachedWindowsService);
+    private readonly appRef = inject(ApplicationRef);
+    private readonly environmentInjector = inject(EnvironmentInjector);
+    private readonly injector = inject(Injector);
+    @Input({
+        required: true,
+    })
+    window!: TaonDetachedWindow;
+    @ViewChild('componentHost', {
+        static: true,
+    })
+    componentHost!: ElementRef<HTMLElement>;
+    private componentRef?: ComponentRef<any>;
+    ngAfterViewInit(): void {
+        this.createDetachedComponent();
+    }
+    ngOnDestroy(): void {
+        this.destroyDetachedComponent();
+    }
+    focus(): void {
+        this.windowsService.focus(this.window.id);
+    }
+    private createDetachedComponent(): void {
+        const detachedActivatedRoute = createDetachedActivatedRoute(this.window.routeState);
+        const detachedInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: detachedActivatedRoute,
+                },
+                {
+                    provide: TAON_IS_DETACHED_WINDOW,
+                    useValue: true,
+                },
+            ],
+        });
+        const componentRef = createComponent(this.window.component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: detachedInjector,
+            hostElement: this.componentHost.nativeElement,
+        });
+        this.componentRef = componentRef;
+        this.appRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        this.windowsService.registerComponentRef(this.window.id, componentRef);
+    }
+    private destroyDetachedComponent(): void {
+        if (!this.componentRef) {
+            return;
+        }
+        try {
+            this.appRef.detachView(this.componentRef.hostView);
+        }
+        catch { }
+        if (!this.componentRef.hostView.destroyed) {
+            this.componentRef.destroy();
+        }
+        this.componentRef = undefined;
+    }
+    close(): void {
+        this.windowsService.close(this.window.id);
+    }
+}
+@Component({
+    selector: 'taon-detached-windows-host',
+    standalone: true,
+    imports: [CommonModule, TaonDetachedWindowComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+      :host {
+        position: fixed;
+
+        inset: 0;
+
+        pointer-events: none;
+
+        /*
+         * This only establishes the workspace stacking
+         * context. Individual windows control their
+         * own z-index.
+         */
+        z-index: 10000;
+      }
+
+      taon-detached-window {
+        pointer-events: auto;
+      }
+    `,
+    ],
+    template: `
+    @for (window of windowsService.windows(); track window.id) {
+      <taon-detached-window [window]="window" />
+    }
+  `,
+})
+export class TaonDetachedWindowsHostComponent {
+    readonly windowsService = inject(TaonDetachedWindowsService);
+}
+@Component({
+    selector: 'taon-detachable-dialog-content',
+    standalone: true,
+    imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [
+        `
+      :host {
+        display: block;
+      }
+
+      .taon-detachable-content {
+        display: flex;
+
+        flex-direction: column;
+
+        min-height: 0;
+      }
+
+      .taon-detachable-content-toolbar {
+        min-height: 36px;
+
+        display: flex;
+
+        align-items: center;
+
+        justify-content: flex-end;
+
+        border-bottom: 1px solid var(--mat-sys-outline-variant, #ddd);
+      }
+
+      .taon-detachable-content-body {
+        min-height: 0;
+      }
+    `,
+    ],
+    template: `
+    <section class="taon-detachable-content">
+      @if (!isDetached) {
+        <header class="taon-detachable-content-toolbar">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Detach"
+            (click)="detach()">
+            <mat-icon> open_in_new </mat-icon>
+          </button>
+        </header>
+      }
+
+      <div class="taon-detachable-content-body">
+        <ng-content />
+      </div>
+    </section>
+  `,
+})
+export class TaonDetachableDialogContentComponent {
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
+    private readonly windowsService = inject(TaonDetachedWindowsService);
+    readonly isDetached = inject(TAON_IS_DETACHED_WINDOW);
+    @Input({
+        required: true,
+    })
+    component!: Type<any>;
+    @Input()
+    title?: string;
+    detach(): void {
+        if (this.isDetached) {
+            return;
+        }
+        const snapshot = this.route.snapshot;
+        const routeState: TaonDetachedRouteState = {
+            url: this.router.url,
+            params: this.collectParams(snapshot),
+            queryParams: cloneObject(snapshot.queryParams),
+            fragment: snapshot.fragment,
+            data: this.collectData(snapshot),
+        };
+        this.windowsService.open({
+            title: this.title || this.component.name || 'Detached window',
+            component: this.component,
+            routeState,
+        });
+    }
+    private collectParams(snapshot: ActivatedRouteSnapshot): Params {
+        const params: Params = {};
+        let current: ActivatedRouteSnapshot | null = snapshot;
+        while (current) {
+            Object.assign(params, current.params);
+            current = current.parent;
+        }
+        return params;
+    }
+    private collectData(snapshot: ActivatedRouteSnapshot): Record<string, any> {
+        const data: Record<string, any> = {};
+        let current: ActivatedRouteSnapshot | null = snapshot;
+        while (current) {
+            Object.assign(data, current.data);
+            current = current.parent;
+        }
+        return data;
+    }
+}

package/ts-source/browser-code/taon-purchase-status/taon-purchase-status.dialog.component.html

@@ -0,0 +1,32 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+<h2 mat-dialog-title>
+  {{
+    data.success
+      ? 'Payment successful'
+      : 'Payment cancelled'
+  }}
+</h2>
+
+<div mat-dialog-content>{{ data.message }}</div>
+
+<div
+  mat-dialog-actions
+  align="end">
+  <button
+    mat-button
+    mat-dialog-close>
+    OK
+  </button>
+</div>

package/ts-source/browser-code/taon-purchase-status/taon-purchase-status.dialog.component.ts

@@ -0,0 +1,29 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+@Component({
+    selector: 'taon-purchase-status-dialog',
+    standalone: true,
+    imports: [MatDialogModule, MatButtonModule],
+    templateUrl: './taon-purchase-status.dialog.component.html',
+})
+export class TaonPurchaseStatusDialogComponent {
+    constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+        success: boolean;
+        message: string;
+    }) { }
+}

package/ts-source/browser-code-prod/build-info._auto-generated_.ts

@@ -15,4 +15,4 @@ export const APP_ID = 'com.domain.example.ui';
 export const BUILD_BASE_HREF = '';
 export const PROJECT_NPM_NAME = '@taon-dev/ui';
 export const CURRENT_PACKAGE_TAON_VERSION = 'v21';
-export const CURRENT_PACKAGE_VERSION = '21.0.18';
+export const CURRENT_PACKAGE_VERSION = '21.0.19';

package/ts-source/browser-code-prod/index._auto-generated_.ts

@@ -32,7 +32,9 @@ export * from './taon-confirm-dialog/taon-confirm-dialog.models';
 export * from './taon-datatable/taon-datatable.component';
 export * from './taon-datatable/taon-datatable.models';
 export * from './taon-datatable/taon-datatable.routes';
+export * from './taon-detachable-dialog-content/taon-detached-window-content.component';
 export * from './taon-draggable-button-panel/taon-draggable-button-panel.component';
 export * from './taon-draggable-button-panel/taon-draggable-button-panel.models';
 export * from './taon-draggable-button-panel/taon-draggable-button-panel.routes';
+export * from './taon-purchase-status/taon-purchase-status.dialog.component';
 export * from './taon-under-construction/taon-under-construction.component';

package/ts-source/browser-code-prod/taon-admin-layout/taon-admin-page-tabs.component.ts

@@ -139,7 +139,7 @@ export class TaonAdminPageTabsComponent implements OnInit {
             return;
         }
         let children = await this.loadChildren(activeRoute);
-        children = this.unwrapEmptyPathRoutes(children);
+        children = this.unwrapEmptyPathRoutes(children).filter(f => !!f.data);
         if (!children.length) {
             return;
         }

package/ts-source/browser-code-prod/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.en-US.i18n.data.ts

@@ -22,7 +22,7 @@ export default {
     "tags": [
         {
             "gettextString": "Unknown error",
-            "lineNumber": 64
+            "lineNumber": 81
         }
     ]
 };

package/ts-source/browser-code-prod/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.en-US.po

@@ -4,6 +4,6 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:64
+#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:81
 msgid "Unknown error"
 msgstr ""

package/ts-source/browser-code-prod/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.pl-PL.i18n.data.ts

@@ -22,7 +22,7 @@ export default {
     "tags": [
         {
             "gettextString": "Unknown error",
-            "lineNumber": 64
+            "lineNumber": 81
         }
     ]
 };

package/ts-source/browser-code-prod/taon-backoffice-notifications/i18n/taon-backoffice-notifications.component.ts.pl-PL.po

@@ -4,6 +4,6 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:64
+#: src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts:81
 msgid "Unknown error"
 msgstr ""

package/ts-source/browser-code-prod/taon-backoffice-notifications/taon-backoffice-notifications.component.ts

@@ -31,6 +31,18 @@ export class TaonBackofficeNotificationsComponent {
     private readonly taonAdminService = inject(TaonAdminService);
     @Input()
     filter: (err: HttpResponseError<RestErrorResponseWrapper>) => HttpResponseError<RestErrorResponseWrapper>;
+    private readonly shownNotifications = new Set<string>();
+    private showErrorNotification(title: string, details?: string): void {
+        const key = JSON.stringify([title, details]);
+        if (this.shownNotifications.has(key)) {
+            return;
+        }
+        this.shownNotifications.add(key);
+        this.notification.error({
+            title,
+            details,
+        });
+    }
     constructor() {
         Resource__NS__listenErrors
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -48,10 +60,9 @@ export class TaonBackofficeNotificationsComponent {
                 console.log(`[@taon-dev/sudo] Skipping notificaiton for message "${jsonMsg.message}" (code=${statusCode})`);
             }
             else {
-                this.notification.error({
-                    title: t.translate(jsonMsg.message) || t.gettext('Unknown error'),
-                    details: jsonMsg?.details,
-                });
+                const title = t.translate(jsonMsg.message) || t.gettext('Unknown error');
+                const details = jsonMsg?.details;
+                this.showErrorNotification(title, details);
             }
         });
     }

package/ts-source/browser-code-prod/taon-backoffice-notifications/taon-backoffice-notifications.service.ts

@@ -19,6 +19,9 @@ import { TaonErrorToastComponent, TaonErrorToastData, } from './taon-error-toast
 })
 export class TaonBackofficeNotificationsService {
     private readonly toast = inject(HotToastService);
+    constructor() {
+        this.toast.defaultConfig.dismissible = true;
+    }
     private normalize(input: TaonNotificationInput): TaonNotificationOptions {
         return typeof input === 'string' ? { title: input } : input;
     }