@ojiepermana/angular 21.3.0 → 21.3.3

package/fesm2022/ojiepermana-angular-navigation-service.mjs

@@ -0,0 +1,204 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, computed, effect, Injectable } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+
+/** Default registry key used when no id is specified. */
+const DEFAULT_NAVIGATION_ID = 'main';
+const SIDEBAR_COLLAPSE_STORAGE_KEY = 'sidebar-collapse';
+const LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY = 'sidebar-appearance';
+function parseSidebarCollapsed(value) {
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    return null;
+}
+/**
+ * Signal-based global state untuk navigation (sidebar/topbar).
+ *
+ * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
+ * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
+ */
+class NavigationService {
+    doc = inject(DOCUMENT);
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    persistedSidebarCollapsed = this.readPersistedSidebarCollapsed();
+    /** Internal version counter — incremented on every registry mutation. */
+    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+    /** Internal map of registered navigation trees. */
+    _registry = new Map();
+    _collapsed = signal(this.persistedSidebarCollapsed ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+    _hasStoredSidebarCollapse = signal(this.persistedSidebarCollapsed !== null, ...(ngDevMode ? [{ debugName: "_hasStoredSidebarCollapse" }] : /* istanbul ignore next */ []));
+    /**
+     * Backward-compatible accessor — returns items for the default (`'main'`) key.
+     * Prefer `getItems(id)` when working with named registries.
+     */
+    items = computed(() => this.getItems(DEFAULT_NAVIGATION_ID)(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Sidebar appearance preference (`default` or `thin`). */
+    sidebarAppearance = computed(() => (this._collapsed() ? 'thin' : 'default'), ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
+    hasStoredSidebarCollapse = this._hasStoredSidebarCollapse.asReadonly();
+    /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
+    collapsed = this._collapsed.asReadonly();
+    /** Sheet drawer terbuka di mobile. */
+    mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    /** Set id grup / collapsable yang sedang terbuka. */
+    openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : /* istanbul ignore next */ []));
+    /** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */
+    activeUrl = signal(this.router.url, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    /** Trail id item yang sedang match dengan URL aktif (across ALL registries). */
+    activeTrail = computed(() => {
+        this._version(); // track changes
+        const url = this.activeUrl();
+        const trail = new Set();
+        const walk = (list, ancestors) => {
+            let matched = false;
+            for (const item of list) {
+                const id = item.id;
+                const link = 'link' in item ? item.link : undefined;
+                let selfMatch = false;
+                if (link) {
+                    selfMatch = url === link || url.startsWith(link + '/') || url.startsWith(link + '?');
+                }
+                const children = 'children' in item ? (item.children ?? []) : [];
+                const nextAncestors = id ? [...ancestors, id] : ancestors;
+                const childMatch = children.length > 0 && walk(children, nextAncestors);
+                if (selfMatch || childMatch) {
+                    if (id)
+                        trail.add(id);
+                    for (const a of ancestors)
+                        trail.add(a);
+                    matched = true;
+                }
+            }
+            return matched;
+        };
+        for (const items of this._registry.values()) {
+            walk(items, []);
+        }
+        return trail;
+    }, ...(ngDevMode ? [{ debugName: "activeTrail" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this._hasStoredSidebarCollapse()) {
+                return;
+            }
+            this.persistSidebarCollapsed(this._collapsed());
+        });
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe((e) => this.activeUrl.set(e.urlAfterRedirects));
+    }
+    registerItems(idOrItems, maybeItems) {
+        const [id, items] = typeof idOrItems === 'string' ? [idOrItems, maybeItems] : [DEFAULT_NAVIGATION_ID, idOrItems];
+        this._registry.set(id, items);
+        this._version.update((v) => v + 1);
+    }
+    /** Remove a named registry entry. */
+    removeItems(id) {
+        this._registry.delete(id);
+        this._version.update((v) => v + 1);
+    }
+    /**
+     * Computed yang mengembalikan items untuk key tertentu.
+     * Reactive terhadap perubahan registry.
+     */
+    getItems(id) {
+        return computed(() => {
+            this._version(); // track changes
+            return this._registry.get(id) ?? [];
+        });
+    }
+    setSidebarAppearance(value) {
+        this.setCollapsed(value === 'thin');
+    }
+    toggleSidebarAppearance(currentAppearance = this.sidebarAppearance()) {
+        this.setCollapsed(currentAppearance !== 'thin');
+    }
+    /** Toggle sidebar collapsed (default ↔ thin). */
+    toggleCollapsed() {
+        this.setCollapsed(!this._collapsed());
+    }
+    setCollapsed(value) {
+        this._collapsed.set(value);
+        this._hasStoredSidebarCollapse.set(true);
+    }
+    openMobile() {
+        this.mobileOpen.set(true);
+    }
+    closeMobile() {
+        this.mobileOpen.set(false);
+    }
+    toggleMobile() {
+        this.mobileOpen.update((v) => !v);
+    }
+    isGroupOpen(id) {
+        return this.openGroups().has(id);
+    }
+    toggleGroup(id) {
+        const next = new Set(this.openGroups());
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.openGroups.set(next);
+    }
+    setGroupOpen(id, open) {
+        const next = new Set(this.openGroups());
+        if (open)
+            next.add(id);
+        else
+            next.delete(id);
+        this.openGroups.set(next);
+    }
+    /** Apakah id termasuk dalam active trail saat ini. */
+    isActive(id) {
+        return !!id && this.activeTrail().has(id);
+    }
+    readPersistedSidebarCollapsed() {
+        try {
+            const storage = this.doc.defaultView?.localStorage;
+            const collapsed = parseSidebarCollapsed(storage?.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY));
+            if (collapsed !== null) {
+                return collapsed;
+            }
+            const legacyAppearance = storage?.getItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
+            if (legacyAppearance === 'thin') {
+                return true;
+            }
+            if (legacyAppearance === 'default') {
+                return false;
+            }
+            return null;
+        }
+        catch {
+            return null;
+        }
+    }
+    persistSidebarCollapsed(value) {
+        try {
+            const storage = this.doc.defaultView?.localStorage;
+            storage?.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, String(value));
+            storage?.removeItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_NAVIGATION_ID, NavigationService };
+//# sourceMappingURL=ojiepermana-angular-navigation-service.mjs.map

package/fesm2022/ojiepermana-angular-navigation-service.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-navigation-service.mjs","sources":["../../../projects/angular/navigation/service/src/lib/navigation.service.ts","../../../projects/angular/navigation/service/ojiepermana-angular-navigation-service.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Injectable, computed, effect, inject, signal } from '@angular/core';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter } from 'rxjs/operators';\nimport { DestroyRef } from '@angular/core';\nimport type { NavigationItem, SidebarAppearance } from '@ojiepermana/angular/navigation/types';\n\n/** Default registry key used when no id is specified. */\nexport const DEFAULT_NAVIGATION_ID = 'main';\nconst SIDEBAR_COLLAPSE_STORAGE_KEY = 'sidebar-collapse';\nconst LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY = 'sidebar-appearance';\n\nfunction parseSidebarCollapsed(value: string | null | undefined): boolean | null {\n  if (value === 'true') return true;\n  if (value === 'false') return false;\n  return null;\n}\n\n/**\n * Signal-based global state untuk navigation (sidebar/topbar).\n *\n * Items disimpan dalam registry ber-key. Key default adalah `'main'`.\n * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.\n */\n@Injectable({ providedIn: 'root' })\nexport class NavigationService {\n  private readonly doc = inject(DOCUMENT);\n  private readonly router = inject(Router);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly persistedSidebarCollapsed = this.readPersistedSidebarCollapsed();\n\n  /** Internal version counter — incremented on every registry mutation. */\n  private readonly _version = signal(0);\n\n  /** Internal map of registered navigation trees. */\n  private readonly _registry = new Map<string, NavigationItem[]>();\n  private readonly _collapsed = signal(this.persistedSidebarCollapsed ?? false);\n  private readonly _hasStoredSidebarCollapse = signal(this.persistedSidebarCollapsed !== null);\n\n  /**\n   * Backward-compatible accessor — returns items for the default (`'main'`) key.\n   * Prefer `getItems(id)` when working with named registries.\n   */\n  readonly items = computed(() => this.getItems(DEFAULT_NAVIGATION_ID)());\n\n  /** Sidebar appearance preference (`default` or `thin`). */\n  readonly sidebarAppearance = computed<SidebarAppearance>(() => (this._collapsed() ? 'thin' : 'default'));\n  readonly hasStoredSidebarCollapse = this._hasStoredSidebarCollapse.asReadonly();\n\n  /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */\n  readonly collapsed = this._collapsed.asReadonly();\n\n  /** Sheet drawer terbuka di mobile. */\n  readonly mobileOpen = signal<boolean>(false);\n\n  /** Set id grup / collapsable yang sedang terbuka. */\n  readonly openGroups = signal<ReadonlySet<string>>(new Set<string>());\n\n  /** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */\n  readonly activeUrl = signal<string>(this.router.url);\n\n  /** Trail id item yang sedang match dengan URL aktif (across ALL registries). */\n  readonly activeTrail = computed<ReadonlySet<string>>(() => {\n    this._version(); // track changes\n    const url = this.activeUrl();\n    const trail = new Set<string>();\n    const walk = (list: readonly NavigationItem[], ancestors: string[]): boolean => {\n      let matched = false;\n      for (const item of list) {\n        const id = item.id;\n        const link = 'link' in item ? item.link : undefined;\n        let selfMatch = false;\n        if (link) {\n          selfMatch = url === link || url.startsWith(link + '/') || url.startsWith(link + '?');\n        }\n        const children = 'children' in item ? (item.children ?? []) : [];\n        const nextAncestors = id ? [...ancestors, id] : ancestors;\n        const childMatch = children.length > 0 && walk(children, nextAncestors);\n        if (selfMatch || childMatch) {\n          if (id) trail.add(id);\n          for (const a of ancestors) trail.add(a);\n          matched = true;\n        }\n      }\n      return matched;\n    };\n    for (const items of this._registry.values()) {\n      walk(items, []);\n    }\n    return trail;\n  });\n\n  constructor() {\n    effect(() => {\n      if (!this._hasStoredSidebarCollapse()) {\n        return;\n      }\n\n      this.persistSidebarCollapsed(this._collapsed());\n    });\n\n    this.router.events\n      .pipe(\n        filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe((e) => this.activeUrl.set(e.urlAfterRedirects));\n  }\n\n  /**\n   * Register items di registry.\n   *\n   * Overload:\n   * - `registerItems(items)` → key `'main'`\n   * - `registerItems(id, items)` → key spesifik\n   */\n  registerItems(items: NavigationItem[]): void;\n  registerItems(id: string, items: NavigationItem[]): void;\n  registerItems(idOrItems: string | NavigationItem[], maybeItems?: NavigationItem[]): void {\n    const [id, items] = typeof idOrItems === 'string' ? [idOrItems, maybeItems!] : [DEFAULT_NAVIGATION_ID, idOrItems];\n    this._registry.set(id, items);\n    this._version.update((v) => v + 1);\n  }\n\n  /** Remove a named registry entry. */\n  removeItems(id: string): void {\n    this._registry.delete(id);\n    this._version.update((v) => v + 1);\n  }\n\n  /**\n   * Computed yang mengembalikan items untuk key tertentu.\n   * Reactive terhadap perubahan registry.\n   */\n  getItems(id: string): () => readonly NavigationItem[] {\n    return computed(() => {\n      this._version(); // track changes\n      return this._registry.get(id) ?? [];\n    });\n  }\n\n  setSidebarAppearance(value: SidebarAppearance): void {\n    this.setCollapsed(value === 'thin');\n  }\n\n  toggleSidebarAppearance(currentAppearance: SidebarAppearance = this.sidebarAppearance()): void {\n    this.setCollapsed(currentAppearance !== 'thin');\n  }\n\n  /** Toggle sidebar collapsed (default ↔ thin). */\n  toggleCollapsed(): void {\n    this.setCollapsed(!this._collapsed());\n  }\n\n  setCollapsed(value: boolean): void {\n    this._collapsed.set(value);\n    this._hasStoredSidebarCollapse.set(true);\n  }\n\n  openMobile(): void {\n    this.mobileOpen.set(true);\n  }\n\n  closeMobile(): void {\n    this.mobileOpen.set(false);\n  }\n\n  toggleMobile(): void {\n    this.mobileOpen.update((v) => !v);\n  }\n\n  isGroupOpen(id: string): boolean {\n    return this.openGroups().has(id);\n  }\n\n  toggleGroup(id: string): void {\n    const next = new Set(this.openGroups());\n    if (next.has(id)) next.delete(id);\n    else next.add(id);\n    this.openGroups.set(next);\n  }\n\n  setGroupOpen(id: string, open: boolean): void {\n    const next = new Set(this.openGroups());\n    if (open) next.add(id);\n    else next.delete(id);\n    this.openGroups.set(next);\n  }\n\n  /** Apakah id termasuk dalam active trail saat ini. */\n  isActive(id: string | undefined): boolean {\n    return !!id && this.activeTrail().has(id);\n  }\n\n  private readPersistedSidebarCollapsed(): boolean | null {\n    try {\n      const storage = this.doc.defaultView?.localStorage;\n      const collapsed = parseSidebarCollapsed(storage?.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY));\n      if (collapsed !== null) {\n        return collapsed;\n      }\n\n      const legacyAppearance = storage?.getItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);\n      if (legacyAppearance === 'thin') {\n        return true;\n      }\n      if (legacyAppearance === 'default') {\n        return false;\n      }\n\n      return null;\n    } catch {\n      return null;\n    }\n  }\n\n  private persistSidebarCollapsed(value: boolean): void {\n    try {\n      const storage = this.doc.defaultView?.localStorage;\n      storage?.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, String(value));\n      storage?.removeItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-navigation-sidebar.mjs

@@ -0,0 +1,373 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, computed, signal, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { map, filter } from 'rxjs/operators';
+import { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';
+import { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';
+import { NavigationService, DEFAULT_NAVIGATION_ID } from '@ojiepermana/angular/navigation/service';
+import { ScrollAreaComponent } from '@ojiepermana/angular/component/scroll-area';
+
+/**
+ * Vertical navigation (sidebar) — shadcn-styled.
+ *
+ * Variants:
+ * - `default`: 17.5rem, label + icon
+ * - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)
+ *
+ * Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan
+ * dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka
+ * dikontrol lewat `NavigationService.mobileOpen`.
+ */
+class SidebarComponent {
+    nav = inject(NavigationService);
+    bp = inject(BreakpointObserver);
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    doc = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Registry key di `NavigationService`. Default `'main'`. */
+    navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */
+    borderSource = input('component', ...(ngDevMode ? [{ debugName: "borderSource" }] : /* istanbul ignore next */ []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    header = input(true, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Auto switch ke CDK overlay drawer saat viewport `< md`. */
+    autoMobile = input(true, ...(ngDevMode ? [{ debugName: "autoMobile" }] : /* istanbul ignore next */ []));
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    resolvedItems = computed(() => {
+        const explicit = this.items();
+        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    suppressHoverUntilLeave = signal(false, ...(ngDevMode ? [{ debugName: "suppressHoverUntilLeave" }] : /* istanbul ignore next */ []));
+    drawerTpl = viewChild.required('drawerTpl');
+    drawerRef = null;
+    focusTrap = null;
+    previouslyFocused = null;
+    /** True saat viewport `< md` (767.98px). */
+    isMobileMedia = toSignal(this.bp.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {
+        initialValue: false,
+    });
+    isMobile = computed(() => this.autoMobile() && this.isMobileMedia(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    resolvedCollapsed = computed(() => {
+        if (this.nav.hasStoredSidebarCollapse()) {
+            return this.nav.collapsed();
+        }
+        return this.appearance() === 'thin';
+    }, ...(ngDevMode ? [{ debugName: "resolvedCollapsed" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => {
+        return this.resolvedCollapsed() ? 'thin' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    hoverActive = computed(() => this.hovered() && !this.suppressHoverUntilLeave(), ...(ngDevMode ? [{ debugName: "hoverActive" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => !this.resolvedCollapsed() || this.hoverActive(), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isCompact = computed(() => !this.isMobile() && this.resolvedCollapsed() && !this.hoverActive(), ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    toggleButtonLabel = computed(() => this.resolvedCollapsed() ? 'Expand sidebar' : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleButtonLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Auto-register items ke service untuk active trail (hanya jika input non-kosong).
+        effect(() => {
+            const explicit = this.items();
+            if (this.autoRegister() && explicit.length > 0)
+                this.nav.registerItems(this.navigationId(), explicit);
+        });
+        // Kelola overlay drawer berdasarkan mobileOpen + isMobile.
+        effect(() => {
+            const open = this.nav.mobileOpen();
+            const mobile = this.isMobile();
+            if (mobile && open)
+                this.openDrawer();
+            else
+                this.closeDrawer();
+        });
+        this.destroyRef.onDestroy(() => this.closeDrawer());
+    }
+    hostClasses = computed(() => {
+        const base = ['relative flex shrink-0 text-foreground', 'transition-[width] duration-200 ease-out'];
+        if (this.resolvedCollapsed())
+            base.push('w-16');
+        else
+            base.push('[width:17.5rem]');
+        if (this.borderSource() === 'component') {
+            if (this.position() === 'right')
+                base.push('border-l', 'border-primary/30');
+            else
+                base.push('border-r', 'border-primary/30');
+        }
+        return [...base, this.class()].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    headerClasses = computed(() => {
+        const base = ['flex items-center gap-1 border-b border-primary/30'];
+        if (this.isCompact()) {
+            base.push('h-12', 'justify-center', 'px-2');
+        }
+        else {
+            base.push('h-12', 'pr-2');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    headerSlotClasses = computed(() => {
+        const base = ['min-w-0'];
+        if (this.isCompact()) {
+            base.push('flex flex-1 items-center justify-center overflow-hidden', '[&>[sidebar-header]>*]:mx-auto', '[&>[sidebar-header]>*]:w-auto', '[&>[sidebar-header]>*]:max-w-full', '[&>[sidebar-header]>*]:justify-center', '[&>[sidebar-header]>*]:gap-0', '[&>[sidebar-header]>*]:px-0', '[&>[sidebar-header]>*]:shrink-0', '[&>[sidebar-header]>*>*:first-child]:mx-auto', '[&>[sidebar-header]>*>*:nth-child(n+2)]:hidden');
+        }
+        else {
+            base.push('flex min-w-0 flex-1 items-center');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "headerSlotClasses" }] : /* istanbul ignore next */ []));
+    navClasses = computed(() => {
+        const base = ['min-h-full'];
+        if (this.isCompact()) {
+            base.push('px-2', '[&_.ui-nav-text]:mx-auto', '[&_.ui-nav-text]:w-10', '[&_.ui-nav-text]:justify-center', '[&_.ui-nav-text]:px-0');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    scrollViewportClasses = computed(() => 'overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10', ...(ngDevMode ? [{ debugName: "scrollViewportClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => {
+        const base = ['h-12 border-t border-primary/30'];
+        if (this.isCompact()) {
+            base.push('flex items-center justify-center px-2');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    footerSlotClasses = computed(() => {
+        const base = ['h-full'];
+        if (this.isCompact()) {
+            base.push('flex h-full items-center justify-center overflow-hidden', '[&>[sidebar-footer]>*]:mx-auto', '[&>[sidebar-footer]>*]:w-auto', '[&>[sidebar-footer]>*]:max-w-full', '[&>[sidebar-footer]>*]:justify-center', '[&>[sidebar-footer]>*]:gap-0', '[&>[sidebar-footer]>*]:px-0', '[&>[sidebar-footer]>*>*:first-child]:mx-auto', '[&>[sidebar-footer]>*>*:nth-child(n+2)]:hidden');
+        }
+        else {
+            base.push('w-full');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => {
+        const overlayActive = this.resolvedCollapsed() && this.hoverActive();
+        const base = ['flex h-full flex-col transition-[width] duration-200 ease-out'];
+        if (this.resolvedCollapsed()) {
+            base.push('bg-background');
+        }
+        if (overlayActive) {
+            base.push('absolute inset-y-0 z-30 border-l border-r border-primary/30 shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0' : 'left-0');
+        }
+        else {
+            base.push('w-full');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    onHoverEnter() {
+        if (!this.resolvedCollapsed() || this.isMobile() || this.suppressHoverUntilLeave())
+            return;
+        this.hovered.set(true);
+    }
+    onHoverLeave() {
+        this.suppressHoverUntilLeave.set(false);
+        if (this.resolvedCollapsed())
+            this.hovered.set(false);
+    }
+    toggleAppearance(event) {
+        event.stopPropagation();
+        const nextCollapsed = !this.resolvedCollapsed();
+        this.nav.setCollapsed(nextCollapsed);
+        this.hovered.set(false);
+        this.suppressHoverUntilLeave.set(nextCollapsed);
+    }
+    /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
+    onHostClick(event) {
+        if (!this.resolvedCollapsed() || this.isMobile())
+            return;
+        if (this.hovered())
+            return;
+        const target = event.target;
+        // Biarkan klik pada control interaktif terus propagate (tidak intercept).
+        if (target && target.closest('a,button,[role="menuitem"]'))
+            return;
+        this.hovered.set(true);
+    }
+    openDrawer() {
+        if (this.drawerRef)
+            return;
+        const side = this.position();
+        const pos = this.overlay.position().global().top('0');
+        if (side === 'right')
+            pos.right('0');
+        else
+            pos.left('0');
+        this.drawerRef = this.overlay.create({
+            positionStrategy: pos,
+            height: '100vh',
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            panelClass: ['sidebar-drawer'],
+        });
+        const portal = new TemplatePortal(this.drawerTpl(), this.vcr);
+        const viewRef = this.drawerRef.attach(portal);
+        viewRef.detectChanges();
+        const root = this.drawerRef.overlayElement;
+        this.focusTrap = this.focusTrapFactory.create(root);
+        this.previouslyFocused = this.doc.activeElement;
+        queueMicrotask(() => this.focusTrap?.focusInitialElementWhenReady());
+        this.drawerRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.nav.closeMobile());
+        this.drawerRef
+            .keydownEvents()
+            .pipe(filter((e) => e.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.nav.closeMobile());
+    }
+    closeDrawer() {
+        if (!this.drawerRef)
+            return;
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+        this.drawerRef.dispose();
+        this.drawerRef = null;
+        this.previouslyFocused?.focus?.();
+        this.previouslyFocused = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, borderSource: { classPropertyName: "borderSource", publicName: "borderSource", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "resolvedAppearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="innerClasses()">
+      <ng-container [ngTemplateOutlet]="body" />
+    </div>
+
+    <ng-template #body>
+      @if (header()) {
+        <div [class]="headerClasses()">
+          <div [class]="headerSlotClasses()">
+            <ng-content select="[sidebar-header]" />
+          </div>
+          @if (!isMobile() && !isCompact()) {
+            <button
+              type="button"
+              data-sidebar-toggle
+              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [attr.aria-label]="toggleButtonLabel()"
+              [attr.title]="toggleButtonLabel()"
+              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
+              (click)="toggleAppearance($event)">
+              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
+            </button>
+          }
+        </div>
+      }
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
+        <nav [class]="navClasses()">
+          @for (item of resolvedItems(); track item.id) {
+            <ui-nav-item [item]="item" [compact]="isCompact()" />
+          }
+        </nav>
+      </ui-scroll-area>
+      <div [class]="footerClasses()">
+        <div [class]="footerSlotClasses()">
+          <ng-content select="[sidebar-footer]" />
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #drawerTpl>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="ariaLabel()"
+        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
+        [class.border-r]="position() === 'left'"
+        [class.border-l]="position() === 'right'"
+        [class.border-primary/30]="position() === 'left' || position() === 'right'">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class", "viewportClass", "viewportAriaLabel", "viewportTabIndex"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact", "railConnector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sidebar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, ScrollAreaComponent, UiNavIconComponent, UiNavItemComponent],
+                    host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'hostClasses()',
+                        '[attr.data-appearance]': 'resolvedAppearance()',
+                        '[attr.data-position]': 'position()',
+                        '[attr.data-expanded]': 'isExpanded()',
+                        '[hidden]': 'isMobile()',
+                        '(mouseenter)': 'onHoverEnter()',
+                        '(mouseleave)': 'onHoverLeave()',
+                        '(focusin)': 'onHoverEnter()',
+                        '(click)': 'onHostClick($event)',
+                    },
+                    template: `
+    <div [class]="innerClasses()">
+      <ng-container [ngTemplateOutlet]="body" />
+    </div>
+
+    <ng-template #body>
+      @if (header()) {
+        <div [class]="headerClasses()">
+          <div [class]="headerSlotClasses()">
+            <ng-content select="[sidebar-header]" />
+          </div>
+          @if (!isMobile() && !isCompact()) {
+            <button
+              type="button"
+              data-sidebar-toggle
+              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              [attr.aria-label]="toggleButtonLabel()"
+              [attr.title]="toggleButtonLabel()"
+              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
+              (click)="toggleAppearance($event)">
+              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
+            </button>
+          }
+        </div>
+      }
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
+        <nav [class]="navClasses()">
+          @for (item of resolvedItems(); track item.id) {
+            <ui-nav-item [item]="item" [compact]="isCompact()" />
+          }
+        </nav>
+      </ui-scroll-area>
+      <div [class]="footerClasses()">
+        <div [class]="footerSlotClasses()">
+          <ng-content select="[sidebar-footer]" />
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #drawerTpl>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="ariaLabel()"
+        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
+        [class.border-r]="position() === 'left'"
+        [class.border-l]="position() === 'right'"
+        [class.border-primary/30]="position() === 'left' || position() === 'right'">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], borderSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderSource", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMobile", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], drawerTpl: [{ type: i0.ViewChild, args: ['drawerTpl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SidebarComponent };
+//# sourceMappingURL=ojiepermana-angular-navigation-sidebar.mjs.map