@taon-dev/ui 21.0.12 → 21.0.14

package/ts-source/websql-code/taon-admin-layout/taon-admin-layout.component.scss

@@ -0,0 +1,331 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+
+
+
+.admin-layout {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+
+  background: white;
+}
+
+.admin-layout-dialog {
+  min-width: 500px;
+  min-height: 350px;
+}
+
+
+
+
+.admin-header {
+  display: flex;
+  align-items: center;
+
+  flex: 0 0 64px;
+  height: 64px;
+
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+.admin-menu-button {
+  flex: 0 0 auto;
+  margin-left: 8px;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.admin-header-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+
+
+
+.admin-body {
+  position: relative;
+
+  display: flex;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+}
+
+
+
+
+.admin-aside {
+  position: absolute;
+
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 30;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 288px;
+  min-height: 0;
+
+  overflow: hidden;
+
+  background: white;
+  border-right: 1px solid var(--mat-sys-outline-variant);
+
+  transform: translateX(-100%);
+
+  transition:
+    transform 200ms ease,
+    width 200ms ease;
+}
+
+.admin-aside-open {
+  transform: translateX(0);
+}
+
+.admin-aside-content {
+  flex: 1 1 auto;
+
+  min-height: 0;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.admin-aside-footer {
+  flex: 0 0 auto;
+
+  padding: 12px;
+
+  border-top: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+
+
+
+.admin-menu {
+  display: block;
+
+  mat-expansion-panel {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+
+    border-radius: 0 !important;
+    box-shadow: none !important;
+
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+  }
+
+  mat-expansion-panel:first-of-type,
+  mat-expansion-panel:last-of-type,
+  mat-expansion-panel-header {
+    border-radius: 0 !important;
+  }
+}
+
+.admin-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.admin-level2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-level2-item {
+  display: flex;
+  align-items: center;
+
+  gap: 12px;
+
+  padding: 10px 24px;
+
+  cursor: pointer;
+}
+
+.admin-level2-item:hover,
+.admin-level2-item-active {
+  background: #f5f5f5;
+}
+
+.admin-level2-item-active {
+  font-weight: 600;
+}
+
+.admin-level1-item {
+  display: flex;
+  align-items: center;
+
+  height: 56px;
+
+  gap: 12px;
+  padding: 0 24px;
+
+  cursor: pointer;
+}
+
+.admin-level1-item:hover,
+.admin-level1-item-active {
+  background: #f5f5f5;
+}
+
+.admin-level1-item-active {
+  font-weight: 600;
+}
+
+.admin-loading {
+  padding: 8px 16px;
+  opacity: 0.6;
+}
+
+.admin-menu-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+
+
+.admin-main {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+}
+
+.admin-tabs {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.admin-content {
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  padding: 24px;
+
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.admin-content-footer {
+  flex: 0 0 auto;
+
+  padding: 12px 24px;
+
+  border-top: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+
+
+
+.admin-aside-backdrop {
+  position: absolute;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 20;
+
+  background: rgba(0, 0, 0, 0.3);
+}
+
+
+
+
+@media (min-width: 768px) {
+  .admin-aside {
+    position: relative;
+
+    top: auto;
+    bottom: auto;
+    left: auto;
+
+    z-index: auto;
+
+    width: 0;
+
+    transform: none;
+  }
+
+  .admin-aside-open {
+    width: 288px;
+    min-width: 288px;
+  }
+
+  .admin-aside-backdrop {
+    display: none;
+  }
+}
+
+
+
+
+.admin-resize-handle {
+  position: absolute;
+
+  right: 0;
+  bottom: 0;
+
+  z-index: 100;
+
+  width: 18px;
+  height: 18px;
+
+  cursor: nwse-resize;
+}
+
+.admin-resize-handle::after {
+  content: '';
+
+  position: absolute;
+
+  right: 4px;
+  bottom: 4px;
+
+  width: 8px;
+  height: 8px;
+
+  border-right: 2px solid #777;
+  border-bottom: 2px solid #777;
+}

package/ts-source/websql-code/taon-admin-layout/taon-admin-layout.component.ts

@@ -0,0 +1,398 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, signal, } from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Route, Router, RouterLink, RouterOutlet, Routes, } from '@angular/router';
+import { filter } from 'rxjs';
+import { TaonAdminRoute } from './taon-admin-layout.models';
+import { TaonAdminMenuContext } from './taon-admin-menu-context';
+import { TaonAdminPageTabsComponent } from './taon-admin-page-tabs.component';
+@Component({
+    selector: 'taon-admin-layout',
+    standalone: true,
+    imports: [
+        CommonModule,
+        RouterOutlet,
+        RouterLink,
+        MatExpansionModule,
+        MatIconModule,
+        MatTooltipModule,
+        TaonAdminPageTabsComponent,
+    ],
+    templateUrl: './taon-admin-layout.component.html',
+    styleUrls: ['./taon-admin-layout.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaonAdminLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
+    protected readonly menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
+        new TaonAdminMenuContext();
+    @Input({ required: true })
+    routes!: Routes;
+    @Input()
+    basePath = '';
+    @Input()
+    outlet: string;
+    protected readonly layoutWidth = signal<number | undefined>(undefined);
+    protected readonly layoutHeight = signal<number | undefined>(undefined);
+    protected readonly level2Routes = signal(new Map<Route, Routes>());
+    protected readonly currentUrl = signal('');
+    protected readonly loadingRoutes = signal(new Set<Route>());
+    protected readonly asideOpened = signal(window.innerWidth >= 768);
+    private resizeObserver?: ResizeObserver;
+    private mutationObserver?: MutationObserver;
+    private resizing = false;
+    private resizeStartX = 0;
+    private resizeStartY = 0;
+    private resizeStartWidth = 0;
+    private resizeStartHeight = 0;
+    private readonly minDialogWidth = 500;
+    private readonly minDialogHeight = 350;
+    protected get isDialogMode(): boolean {
+        const windowElement = this.getWindowElement();
+        if (!windowElement) {
+            return false;
+        }
+        return !windowElement.classList.contains('taon-fullscreen');
+    }
+    private get basePathSegments(): string[] {
+        return this.basePath.split('/').filter(Boolean);
+    }
+    protected get normalizedBasePath(): string {
+        const value = '/' + this.basePath.split('/').filter(Boolean).join('/');
+        return value === '/' ? '/' : value;
+    }
+    constructor(private readonly router: Router, private readonly hostElement: ElementRef<HTMLElement>) { }
+    async ngOnInit(): Promise<void> {
+        await this.loadCurrentLevel1Route();
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(async () => {
+            await this.loadCurrentLevel1Route();
+        });
+    }
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            const windowElement = this.getWindowElement();
+            this.updateLayoutSize();
+            this.startWindowObservers();
+        }, 500);
+    }
+    ngOnDestroy(): void {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        window.removeEventListener('pointermove', this.resize);
+        window.removeEventListener('pointerup', this.stopResize);
+    }
+    private getWindowElement(): HTMLElement | undefined {
+        return (document.querySelector<HTMLElement>('.taon-window') ??
+            document.querySelector<HTMLElement>('.taon-window-full') ??
+            undefined);
+    }
+    private getDraggablePanelElement(): HTMLElement | undefined {
+        return (document.querySelector<HTMLElement>('.taon-draggable-panel') ?? undefined);
+    }
+    private startWindowObservers(): void {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        const host = this.hostElement.nativeElement;
+        const windowElement = this.getWindowElement();
+        const observedElement = windowElement ?? host.parentElement;
+        if (observedElement) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateLayoutSize();
+            });
+            this.resizeObserver.observe(observedElement);
+        }
+        if (windowElement) {
+            this.mutationObserver = new MutationObserver(mutations => {
+                const classChanged = mutations.some(mutation => mutation.type === 'attributes' &&
+                    mutation.attributeName === 'class');
+                if (!classChanged) {
+                    return;
+                }
+                this.windowModeChanged(windowElement);
+            });
+            this.mutationObserver.observe(windowElement, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+    }
+    private windowModeChanged(windowElement: HTMLElement): void {
+        const fullscreen = windowElement.classList.contains('taon-fullscreen');
+        if (fullscreen) {
+            this.clearWindowResize(windowElement);
+        }
+        requestAnimationFrame(() => {
+            this.updateLayoutSize();
+        });
+    }
+    private clearWindowResize(windowElement: HTMLElement): void {
+        windowElement.style.removeProperty('width');
+        windowElement.style.removeProperty('height');
+    }
+    @HostListener('window:resize')
+    protected windowResized(): void {
+        this.updateLayoutSize();
+    }
+    private updateLayoutSize(): void {
+        const host = this.hostElement.nativeElement;
+        const hostRect = host.getBoundingClientRect();
+        const windowElement = this.getWindowElement();
+        const dialogMode = !!windowElement && !windowElement.classList.contains('taon-fullscreen');
+        if (!dialogMode) {
+            this.layoutWidth.set(Math.floor(hostRect.width));
+            this.layoutHeight.set(Math.max(0, Math.floor(window.innerHeight - hostRect.top)));
+            return;
+        }
+        const windowRect = windowElement.getBoundingClientRect();
+        this.layoutWidth.set(Math.max(0, Math.floor(windowRect.right - hostRect.left)));
+        this.layoutHeight.set(Math.max(0, Math.floor(windowRect.bottom - hostRect.top)));
+    }
+    protected startResize(event: PointerEvent): void {
+        if (!this.isDialogMode) {
+            return;
+        }
+        const windowElement = this.getWindowElement();
+        if (!windowElement) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const windowRect = windowElement.getBoundingClientRect();
+        this.resizing = true;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        this.resizeStartWidth = windowRect.width;
+        this.resizeStartHeight = windowRect.height;
+        window.addEventListener('pointermove', this.resize);
+        window.addEventListener('pointerup', this.stopResize);
+    }
+    private readonly resize = (event: PointerEvent): void => {
+        if (!this.resizing) {
+            return;
+        }
+        const windowElement = this.getWindowElement();
+        if (!windowElement) {
+            return;
+        }
+        const windowRect = windowElement.getBoundingClientRect();
+        const deltaX = event.clientX - this.resizeStartX;
+        const deltaY = event.clientY - this.resizeStartY;
+        const maxWidth = window.innerWidth - windowRect.left;
+        const maxHeight = window.innerHeight - windowRect.top;
+        const width = Math.min(maxWidth, Math.max(this.minDialogWidth, this.resizeStartWidth + deltaX));
+        const height = Math.min(maxHeight, Math.max(this.minDialogHeight, this.resizeStartHeight + deltaY));
+        windowElement.style.width = `${width}px`;
+        windowElement.style.height = `${height}px`;
+    };
+    private readonly stopResize = (): void => {
+        if (!this.resizing) {
+            return;
+        }
+        this.resizing = false;
+        window.removeEventListener('pointermove', this.resize);
+        window.removeEventListener('pointerup', this.stopResize);
+    };
+    protected toggleAside(): void {
+        this.asideOpened.update(opened => !opened);
+    }
+    protected closeAside(): void {
+        this.asideOpened.set(false);
+    }
+    private closeAsideOnMobile(): void {
+        if (window.innerWidth < 768) {
+            this.closeAside();
+        }
+    }
+    protected async level1Clicked(route: Route): Promise<void> {
+        if (!route.path ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
+            return;
+        }
+        await this.navigateTo([route.path]);
+        await this.ensureLevel2Loaded(route);
+        if (!this.isExpandable(route)) {
+            this.closeAsideOnMobile();
+        }
+    }
+    protected async panelExpanded(route: Route, expanded: boolean): Promise<void> {
+        if (!expanded ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
+            return;
+        }
+        await this.ensureLevel2Loaded(route);
+    }
+    protected isLevel1Active(route: Route): boolean {
+        if (!route.path) {
+            return false;
+        }
+        return this.isPathActive([route.path]);
+    }
+    protected async level2Clicked(level1: Route, level2: Route): Promise<void> {
+        if (!level1.path ||
+            !level2.path ||
+            !this.menuContext.isVisible(level1) ||
+            this.menuContext.isDisabled(level1) ||
+            !this.menuContext.isVisible(level2) ||
+            this.menuContext.isDisabled(level2)) {
+            return;
+        }
+        await this.navigateTo([level1.path, level2.path]);
+        this.closeAsideOnMobile();
+    }
+    protected getLevel2Routes(route: Route): Routes {
+        return this.level2Routes().get(route) ?? [];
+    }
+    protected isLevel2Active(level1: Route, level2: Route): boolean {
+        if (!level1.path || !level2.path) {
+            return false;
+        }
+        return this.isPathActive([level1.path, level2.path]);
+    }
+    protected level2Link(level1: Route, level2: Route): string[] {
+        return [this.normalizedBasePath, level1.path!, level2.path!];
+    }
+    private outletBaseMatrixParams(): Record<string, string> {
+        if (!this.outlet) {
+            return {};
+        }
+        const tree = this.router.parseUrl(this.router.url);
+        const outletGroup = tree.root.children[this.outlet];
+        return {
+            ...outletGroup?.segments[0]?.parameters,
+        };
+    }
+    private async navigateTo(routeSegments: string[]): Promise<boolean> {
+        const segments = [...this.basePathSegments, ...routeSegments];
+        if (this.outlet) {
+            const [firstSegment, ...remainingSegments] = segments;
+            if (!firstSegment) {
+                return false;
+            }
+            const matrixParams = this.outletBaseMatrixParams();
+            return this.router.navigate([
+                {
+                    outlets: {
+                        [this.outlet]: [firstSegment, matrixParams, ...remainingSegments],
+                    },
+                },
+            ]);
+        }
+        return this.router.navigate(['/', ...segments]);
+    }
+    private async ensureLevel2Loaded(level1: Route): Promise<void> {
+        if (this.level2Routes().has(level1)) {
+            return;
+        }
+        if (this.loadingRoutes().has(level1)) {
+            return;
+        }
+        this.setLoading(level1, true);
+        try {
+            const lazyRoutes = await this.loadRouteChildren(level1);
+            const level2 = this.unwrapEmptyPathRoutes(lazyRoutes);
+            const map = new Map(this.level2Routes());
+            map.set(level1, level2);
+            this.level2Routes.set(map);
+        }
+        finally {
+            this.setLoading(level1, false);
+        }
+    }
+    private async loadRouteChildren(route: Route): Promise<Routes> {
+        if (route.children) {
+            return route.children;
+        }
+        const adminRoute = route as TaonAdminRoute;
+        if (adminRoute.loadAdminChildren) {
+            return await adminRoute.loadAdminChildren();
+        }
+        return [];
+    }
+    private unwrapEmptyPathRoutes(routes: Routes): Routes {
+        const result: Routes = [];
+        for (const route of routes) {
+            if (route.path === '' && route.children) {
+                result.push(...this.unwrapEmptyPathRoutes(route.children));
+                continue;
+            }
+            if (route.redirectTo !== undefined || route.data?.['hideInNavigation']) {
+                continue;
+            }
+            result.push(route);
+        }
+        return result;
+    }
+    private async loadCurrentLevel1Route(): Promise<void> {
+        const relativeSegments = this.currentRelativeSegments();
+        const level1Path = relativeSegments[0];
+        if (!level1Path) {
+            return;
+        }
+        const level1 = this.routes.find(route => route.path === level1Path);
+        if (level1) {
+            await this.ensureLevel2Loaded(level1);
+        }
+    }
+    protected label(route: Route): string {
+        return route.data?.['menuItem'] ?? this.startCase(route.path ?? '');
+    }
+    protected color(route: Route): string {
+        return route.data?.['color'];
+    }
+    protected icon(route: Route): string | undefined {
+        return route.data?.['icon'];
+    }
+    protected isLoading(route: Route): boolean {
+        return this.loadingRoutes().has(route);
+    }
+    protected isExpandable(route: Route): boolean {
+        return route.data?.['expandable'] !== false;
+    }
+    private isPathActive(routeSegments: string[]): boolean {
+        const current = this.currentRelativeSegments();
+        if (current.length < routeSegments.length) {
+            return false;
+        }
+        return routeSegments.every((segment, index) => current[index] === segment);
+    }
+    private currentRelativeSegments(): string[] {
+        const current = this.currentOutletSegments();
+        return current.slice(this.basePathSegments.length);
+    }
+    private currentOutletSegments(): string[] {
+        const tree = this.router.parseUrl(this.router.url);
+        const outletName = this.outlet || 'primary';
+        const group = tree.root.children[outletName];
+        if (!group) {
+            return [];
+        }
+        return group.segments.map(segment => segment.path);
+    }
+    private setLoading(route: Route, loading: boolean): void {
+        const set = new Set(this.loadingRoutes());
+        if (loading) {
+            set.add(route);
+        }
+        else {
+            set.delete(route);
+        }
+        this.loadingRoutes.set(set);
+    }
+    private startCase(value: string): string {
+        return value
+            .replace(/[-_]+/g, ' ')
+            .replace(/\b\w/g, char => char.toUpperCase());
+    }
+}