@ojiepermana/angular 21.2.4 → 21.3.3

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

@@ -0,0 +1,548 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { MatTooltip } from '@angular/material/tooltip';
+import { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';
+import { NavigationService } from '@ojiepermana/angular/navigation/service';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** Concatenate and dedupe Tailwind class names. */
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Recursive navigation item renderer (vertical context).
+ *
+ * Menerima item polymorphic dan delegasi ke template sesuai `type`.
+ * Mega dirender sebagai group biasa saat muncul di konteks vertical.
+ */
+class UiNavItemComponent {
+    nav = inject(NavigationService);
+    cn = cn;
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    /** Compact / icon-only rendering (sidebar `thin`). */
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    /** True when this branch sits inside a collapsable rail and can draw a connector back to it. */
+    railConnector = input(false, ...(ngDevMode ? [{ debugName: "railConnector" }] : /* istanbul ignore next */ []));
+    railConnectorDotClasses = 'pointer-events-none absolute -left-[11px] top-1/2 z-10 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/80';
+    exactMatch = {
+        exact: true,
+        paths: 'exact',
+        queryParams: 'exact',
+        fragment: 'exact',
+        matrixParams: 'exact',
+    };
+    inexactMatch = {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
+    type = computed(() => this.item().type, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    groupItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "groupItem" }] : /* istanbul ignore next */ []));
+    collapsableItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "collapsableItem" }] : /* istanbul ignore next */ []));
+    megaItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "megaItem" }] : /* istanbul ignore next */ []));
+    asideItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "asideItem" }] : /* istanbul ignore next */ []));
+    basicItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "basicItem" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => {
+        const id = this.item().id ?? '';
+        return `nav-group-${id}`;
+    }, ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    isGroupOpen() {
+        const id = this.item().id;
+        if (!id)
+            return false;
+        // auto-open when any descendant is active
+        if (this.nav.isActive(id) && 'children' in this.item())
+            return true;
+        return this.nav.isGroupOpen(id);
+    }
+    isTrailActive() {
+        return this.nav.isActive(this.item().id);
+    }
+    railConnectorClasses(active) {
+        if (!active || !this.railConnector())
+            return '';
+        return ('relative after:pointer-events-none after:absolute after:-left-3 after:top-1/2 after:z-0 after:h-px ' +
+            "after:w-3 after:-translate-y-1/2 after:rounded-full after:bg-primary/30 after:content-['']");
+    }
+    showRailConnector(active) {
+        return active && this.railConnector();
+    }
+    toggleGroup() {
+        const id = this.item().id;
+        if (id)
+            this.nav.toggleGroup(id);
+    }
+    runAction() {
+        const item = this.item();
+        if ('action' in item && typeof item.action === 'function') {
+            item.action(item);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, railConnector: { classPropertyName: "railConnector", publicName: "railConnector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @switch (type()) {
+      @case ('divider') {
+        <hr class="my-2 border-t border-border" role="separator" />
+      }
+      @case ('spacer') {
+        <div class="flex-1"></div>
+      }
+      @case ('group') {
+        <div role="group" [attr.aria-labelledby]="headingId()">
+          @if (!compact()) {
+            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
+              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
+                {{ item().title }}
+              </div>
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of groupItem().children; track child.id) {
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('collapsable') {
+        @let id = collapsableItem().id ?? '';
+        @let open = isGroupOpen();
+        @let active = isTrailActive();
+        <button
+          type="button"
+          [class]="
+            cn(
+              'ui-nav-text ui-nav-hover-surface group/ni flex w-full items-center gap-3 rounded p-3 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              active && 'text-primary',
+              railConnectorClasses(active),
+              item().classes?.wrapper
+            )
+          "
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="id + '-panel'"
+          [disabled]="collapsableItem().disabled || null"
+          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()"
+          (click)="toggleGroup()">
+          @if (showRailConnector(active)) {
+            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+          }
+          @if (collapsableItem().icon) {
+            <span
+              [class]="
+                cn(
+                  'inline-flex shrink-0 items-center justify-center',
+                  open && 'h-7 w-7 rounded-full border border-brand'
+                )
+              ">
+              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            </span>
+          }
+          @if (!compact()) {
+            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
+              {{ collapsableItem().title }}
+            </span>
+            @if (collapsableItem().badge; as badge) {
+              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+            }
+            <ui-nav-icon
+              [name]="'chevron_right'"
+              [size]="18"
+              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
+          }
+        </button>
+        @if (!compact() && open) {
+          <div
+            [id]="id + '-panel'"
+            role="region"
+            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-primary/30 before:content-['']">
+            @for (child of collapsableItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
+            }
+          </div>
+        }
+      }
+      @case ('mega') {
+        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
+        <div class="mt-4 py-3 first:mt-0" role="group">
+          @if (!compact()) {
+            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
+              {{ item().title }}
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of megaItem().children; track child.id) {
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('aside') {
+        <a
+          [class]="
+            cn(
+              'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
+              railConnectorClasses(rla.isActive),
+              item().classes?.wrapper
+            )
+          "
+          routerLinkActive="text-primary"
+          #rla="routerLinkActive"
+          [attr.aria-current]="rla.isActive ? 'page' : null"
+          [routerLink]="asideItem().link"
+          [queryParams]="asideItem().queryParams"
+          [fragment]="asideItem().fragment ?? undefined"
+          [target]="asideItem().target ?? undefined"
+          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()">
+          @if (showRailConnector(rla.isActive)) {
+            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+          }
+          @if (asideItem().icon) {
+            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
+          }
+          @if (!compact()) {
+            <span class="flex-1 truncate">{{ asideItem().title }}</span>
+          }
+        </a>
+      }
+      @default {
+        <!-- basic -->
+        @if (basicItem().link && !basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                railConnectorClasses(rla.isActive),
+                item().classes?.wrapper
+              )
+            "
+            routerLinkActive="text-primary"
+            #rla="routerLinkActive"
+            [routerLinkActiveOptions]="
+              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
+            "
+            [attr.aria-current]="rla.isActive ? 'page' : null"
+            [attr.aria-disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            [routerLink]="basicItem().link"
+            [queryParams]="basicItem().queryParams"
+            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
+            [fragment]="basicItem().fragment ?? undefined"
+            [preserveFragment]="basicItem().preserveFragment ?? false"
+            [target]="basicItem().target ?? undefined"
+            (click)="runAction()">
+            @if (showRailConnector(rla.isActive)) {
+              <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+            }
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            }
+            @if (!compact()) {
+              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
+              @if (basicItem().badge; as badge) {
+                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+              }
+            }
+          </a>
+        } @else if (basicItem().link && basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                item().classes?.wrapper
+              )
+            "
+            [attr.href]="basicItem().link"
+            [attr.target]="basicItem().target ?? '_blank'"
+            rel="noopener noreferrer"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex w-full items-center gap-3 rounded px-3 py-2 text-left text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            [disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </button>
+        }
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact", "railConnector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterLink, RouterLinkActive, MatTooltip, UiNavIconComponent],
+                    template: `
+    @switch (type()) {
+      @case ('divider') {
+        <hr class="my-2 border-t border-border" role="separator" />
+      }
+      @case ('spacer') {
+        <div class="flex-1"></div>
+      }
+      @case ('group') {
+        <div role="group" [attr.aria-labelledby]="headingId()">
+          @if (!compact()) {
+            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
+              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
+                {{ item().title }}
+              </div>
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of groupItem().children; track child.id) {
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('collapsable') {
+        @let id = collapsableItem().id ?? '';
+        @let open = isGroupOpen();
+        @let active = isTrailActive();
+        <button
+          type="button"
+          [class]="
+            cn(
+              'ui-nav-text ui-nav-hover-surface group/ni flex w-full items-center gap-3 rounded p-3 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              active && 'text-primary',
+              railConnectorClasses(active),
+              item().classes?.wrapper
+            )
+          "
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="id + '-panel'"
+          [disabled]="collapsableItem().disabled || null"
+          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()"
+          (click)="toggleGroup()">
+          @if (showRailConnector(active)) {
+            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+          }
+          @if (collapsableItem().icon) {
+            <span
+              [class]="
+                cn(
+                  'inline-flex shrink-0 items-center justify-center',
+                  open && 'h-7 w-7 rounded-full border border-brand'
+                )
+              ">
+              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            </span>
+          }
+          @if (!compact()) {
+            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
+              {{ collapsableItem().title }}
+            </span>
+            @if (collapsableItem().badge; as badge) {
+              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+            }
+            <ui-nav-icon
+              [name]="'chevron_right'"
+              [size]="18"
+              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
+          }
+        </button>
+        @if (!compact() && open) {
+          <div
+            [id]="id + '-panel'"
+            role="region"
+            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-primary/30 before:content-['']">
+            @for (child of collapsableItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
+            }
+          </div>
+        }
+      }
+      @case ('mega') {
+        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
+        <div class="mt-4 py-3 first:mt-0" role="group">
+          @if (!compact()) {
+            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
+              {{ item().title }}
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of megaItem().children; track child.id) {
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('aside') {
+        <a
+          [class]="
+            cn(
+              'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
+              railConnectorClasses(rla.isActive),
+              item().classes?.wrapper
+            )
+          "
+          routerLinkActive="text-primary"
+          #rla="routerLinkActive"
+          [attr.aria-current]="rla.isActive ? 'page' : null"
+          [routerLink]="asideItem().link"
+          [queryParams]="asideItem().queryParams"
+          [fragment]="asideItem().fragment ?? undefined"
+          [target]="asideItem().target ?? undefined"
+          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()">
+          @if (showRailConnector(rla.isActive)) {
+            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+          }
+          @if (asideItem().icon) {
+            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
+          }
+          @if (!compact()) {
+            <span class="flex-1 truncate">{{ asideItem().title }}</span>
+          }
+        </a>
+      }
+      @default {
+        <!-- basic -->
+        @if (basicItem().link && !basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                railConnectorClasses(rla.isActive),
+                item().classes?.wrapper
+              )
+            "
+            routerLinkActive="text-primary"
+            #rla="routerLinkActive"
+            [routerLinkActiveOptions]="
+              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
+            "
+            [attr.aria-current]="rla.isActive ? 'page' : null"
+            [attr.aria-disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            [routerLink]="basicItem().link"
+            [queryParams]="basicItem().queryParams"
+            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
+            [fragment]="basicItem().fragment ?? undefined"
+            [preserveFragment]="basicItem().preserveFragment ?? false"
+            [target]="basicItem().target ?? undefined"
+            (click)="runAction()">
+            @if (showRailConnector(rla.isActive)) {
+              <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
+            }
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            }
+            @if (!compact()) {
+              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
+              @if (basicItem().badge; as badge) {
+                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+              }
+            }
+          </a>
+        } @else if (basicItem().link && basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                item().classes?.wrapper
+              )
+            "
+            [attr.href]="basicItem().link"
+            [attr.target]="basicItem().target ?? '_blank'"
+            rel="noopener noreferrer"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="
+              cn(
+                'ui-nav-text ui-nav-hover-surface flex w-full items-center gap-3 rounded px-3 py-2 text-left text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            [disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </button>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], railConnector: [{ type: i0.Input, args: [{ isSignal: true, alias: "railConnector", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiNavItemComponent };
+//# sourceMappingURL=ojiepermana-angular-navigation-item.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-navigation-item.mjs","sources":["../../../projects/angular/navigation/item/src/lib/cn.util.ts","../../../projects/angular/navigation/item/src/lib/nav-item.component.ts","../../../projects/angular/navigation/item/ojiepermana-angular-navigation-item.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/** Concatenate and dedupe Tailwind class names. */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';\nimport { NavigationService } from '@ojiepermana/angular/navigation/service';\nimport type {\n  NavigationAsideItem,\n  NavigationBasicItem,\n  NavigationCollapsableItem,\n  NavigationGroupItem,\n  NavigationItem,\n  NavigationMegaItem,\n} from '@ojiepermana/angular/navigation/types';\nimport { cn } from './cn.util';\n\n/**\n * Recursive navigation item renderer (vertical context).\n *\n * Menerima item polymorphic dan delegasi ke template sesuai `type`.\n * Mega dirender sebagai group biasa saat muncul di konteks vertical.\n */\n@Component({\n  selector: 'ui-nav-item',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink, RouterLinkActive, MatTooltip, UiNavIconComponent],\n  template: `\n    @switch (type()) {\n      @case ('divider') {\n        <hr class=\"my-2 border-t border-border\" role=\"separator\" />\n      }\n      @case ('spacer') {\n        <div class=\"flex-1\"></div>\n      }\n      @case ('group') {\n        <div role=\"group\" [attr.aria-labelledby]=\"headingId()\">\n          @if (!compact()) {\n            <div class=\"sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent\">\n              <div [id]=\"headingId()\" [class]=\"cn('ui-nav-heading text-muted-foreground', item().classes?.title)\">\n                {{ item().title }}\n              </div>\n            </div>\n          }\n          <div class=\"flex flex-col gap-0.5\">\n            @for (child of groupItem().children; track child.id) {\n              <ui-nav-item\n                [item]=\"child\"\n                [level]=\"level() + 1\"\n                [compact]=\"compact()\"\n                [railConnector]=\"railConnector()\" />\n            }\n          </div>\n        </div>\n      }\n      @case ('collapsable') {\n        @let id = collapsableItem().id ?? '';\n        @let open = isGroupOpen();\n        @let active = isTrailActive();\n        <button\n          type=\"button\"\n          [class]=\"\n            cn(\n              'ui-nav-text ui-nav-hover-surface group/ni flex w-full items-center gap-3 rounded p-3 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n              active && 'text-primary',\n              railConnectorClasses(active),\n              item().classes?.wrapper\n            )\n          \"\n          [attr.aria-expanded]=\"open\"\n          [attr.aria-controls]=\"id + '-panel'\"\n          [disabled]=\"collapsableItem().disabled || null\"\n          [matTooltip]=\"compact() ? (collapsableItem().title ?? '') : ''\"\n          matTooltipPosition=\"right\"\n          [matTooltipDisabled]=\"!compact()\"\n          (click)=\"toggleGroup()\">\n          @if (showRailConnector(active)) {\n            <span aria-hidden=\"true\" data-nav-rail-dot [class]=\"railConnectorDotClasses\"></span>\n          }\n          @if (collapsableItem().icon) {\n            <span\n              [class]=\"\n                cn(\n                  'inline-flex shrink-0 items-center justify-center',\n                  open && 'h-7 w-7 rounded-full border border-brand'\n                )\n              \">\n              <ui-nav-icon [name]=\"collapsableItem().icon!\" [size]=\"18\" [class]=\"item().classes?.icon ?? ''\" />\n            </span>\n          }\n          @if (!compact()) {\n            <span [class]=\"cn('flex-1 truncate text-left', item().classes?.title)\">\n              {{ collapsableItem().title }}\n            </span>\n            @if (collapsableItem().badge; as badge) {\n              <span [class]=\"badge.classes ?? 'ui-nav-badge ml-auto'\">{{ badge.title }}</span>\n            }\n            <ui-nav-icon\n              [name]=\"'chevron_right'\"\n              [size]=\"18\"\n              [class]=\"cn('transition-transform duration-200', open && 'rotate-90')\" />\n          }\n        </button>\n        @if (!compact() && open) {\n          <div\n            [id]=\"id + '-panel'\"\n            role=\"region\"\n            class=\"relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-primary/30 before:content-['']\">\n            @for (child of collapsableItem().children; track child.id) {\n              <ui-nav-item [item]=\"child\" [level]=\"level() + 1\" [compact]=\"false\" [railConnector]=\"true\" />\n            }\n          </div>\n        }\n      }\n      @case ('mega') {\n        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->\n        <div class=\"mt-4 py-3 first:mt-0\" role=\"group\">\n          @if (!compact()) {\n            <div class=\"ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground\">\n              {{ item().title }}\n            </div>\n          }\n          <div class=\"flex flex-col gap-0.5\">\n            @for (child of megaItem().children; track child.id) {\n              <ui-nav-item\n                [item]=\"child\"\n                [level]=\"level() + 1\"\n                [compact]=\"compact()\"\n                [railConnector]=\"railConnector()\" />\n            }\n          </div>\n        </div>\n      }\n      @case ('aside') {\n        <a\n          [class]=\"\n            cn(\n              'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',\n              railConnectorClasses(rla.isActive),\n              item().classes?.wrapper\n            )\n          \"\n          routerLinkActive=\"text-primary\"\n          #rla=\"routerLinkActive\"\n          [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n          [routerLink]=\"asideItem().link\"\n          [queryParams]=\"asideItem().queryParams\"\n          [fragment]=\"asideItem().fragment ?? undefined\"\n          [target]=\"asideItem().target ?? undefined\"\n          [matTooltip]=\"compact() ? (asideItem().title ?? '') : ''\"\n          matTooltipPosition=\"right\"\n          [matTooltipDisabled]=\"!compact()\">\n          @if (showRailConnector(rla.isActive)) {\n            <span aria-hidden=\"true\" data-nav-rail-dot [class]=\"railConnectorDotClasses\"></span>\n          }\n          @if (asideItem().icon) {\n            <ui-nav-icon [name]=\"asideItem().icon!\" [size]=\"18\" />\n          }\n          @if (!compact()) {\n            <span class=\"flex-1 truncate\">{{ asideItem().title }}</span>\n          }\n        </a>\n      }\n      @default {\n        <!-- basic -->\n        @if (basicItem().link && !basicItem().externalLink) {\n          <a\n            [class]=\"\n              cn(\n                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',\n                railConnectorClasses(rla.isActive),\n                item().classes?.wrapper\n              )\n            \"\n            routerLinkActive=\"text-primary\"\n            #rla=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"\n              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)\n            \"\n            [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"basicItem().disabled || null\"\n            [matTooltip]=\"compact() ? (basicItem().title ?? '') : ''\"\n            matTooltipPosition=\"right\"\n            [matTooltipDisabled]=\"!compact()\"\n            [routerLink]=\"basicItem().link\"\n            [queryParams]=\"basicItem().queryParams\"\n            [queryParamsHandling]=\"basicItem().queryParamsHandling ?? null\"\n            [fragment]=\"basicItem().fragment ?? undefined\"\n            [preserveFragment]=\"basicItem().preserveFragment ?? false\"\n            [target]=\"basicItem().target ?? undefined\"\n            (click)=\"runAction()\">\n            @if (showRailConnector(rla.isActive)) {\n              <span aria-hidden=\"true\" data-nav-rail-dot [class]=\"railConnectorDotClasses\"></span>\n            }\n            @if (basicItem().icon) {\n              <ui-nav-icon [name]=\"basicItem().icon!\" [size]=\"18\" [class]=\"item().classes?.icon ?? ''\" />\n            }\n            @if (!compact()) {\n              <span [class]=\"cn('flex-1 truncate', item().classes?.title)\">{{ basicItem().title }}</span>\n              @if (basicItem().badge; as badge) {\n                <span [class]=\"badge.classes ?? 'ui-nav-badge ml-auto'\">{{ badge.title }}</span>\n              }\n            }\n          </a>\n        } @else if (basicItem().link && basicItem().externalLink) {\n          <a\n            [class]=\"\n              cn(\n                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                item().classes?.wrapper\n              )\n            \"\n            [attr.href]=\"basicItem().link\"\n            [attr.target]=\"basicItem().target ?? '_blank'\"\n            rel=\"noopener noreferrer\"\n            [matTooltip]=\"compact() ? (basicItem().title ?? '') : ''\"\n            matTooltipPosition=\"right\"\n            [matTooltipDisabled]=\"!compact()\">\n            @if (basicItem().icon) {\n              <ui-nav-icon [name]=\"basicItem().icon!\" [size]=\"18\" />\n            }\n            @if (!compact()) {\n              <span class=\"flex-1 truncate\">{{ basicItem().title }}</span>\n            }\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"\n              cn(\n                'ui-nav-text ui-nav-hover-surface flex w-full items-center gap-3 rounded px-3 py-2 text-left text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n                item().classes?.wrapper\n              )\n            \"\n            [disabled]=\"basicItem().disabled || null\"\n            [matTooltip]=\"compact() ? (basicItem().title ?? '') : ''\"\n            matTooltipPosition=\"right\"\n            [matTooltipDisabled]=\"!compact()\"\n            (click)=\"runAction()\">\n            @if (basicItem().icon) {\n              <ui-nav-icon [name]=\"basicItem().icon!\" [size]=\"18\" />\n            }\n            @if (!compact()) {\n              <span class=\"flex-1 truncate\">{{ basicItem().title }}</span>\n            }\n          </button>\n        }\n      }\n    }\n  `,\n})\nexport class UiNavItemComponent {\n  private readonly nav = inject(NavigationService);\n  protected readonly cn = cn;\n\n  readonly item = input.required<NavigationItem>();\n  readonly level = input<number>(0);\n  /** Compact / icon-only rendering (sidebar `thin`). */\n  readonly compact = input<boolean>(false);\n  /** True when this branch sits inside a collapsable rail and can draw a connector back to it. */\n  readonly railConnector = input<boolean>(false);\n\n  protected readonly railConnectorDotClasses =\n    'pointer-events-none absolute -left-[11px] top-1/2 z-10 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/80';\n\n  protected readonly exactMatch = {\n    exact: true,\n    paths: 'exact',\n    queryParams: 'exact',\n    fragment: 'exact',\n    matrixParams: 'exact',\n  } as const;\n  protected readonly inexactMatch = {\n    paths: 'subset',\n    queryParams: 'subset',\n    fragment: 'ignored',\n    matrixParams: 'ignored',\n  } as const;\n\n  protected readonly type = computed(() => this.item().type);\n\n  protected readonly groupItem = computed(() => this.item() as NavigationGroupItem);\n  protected readonly collapsableItem = computed(() => this.item() as NavigationCollapsableItem);\n  protected readonly megaItem = computed(() => this.item() as NavigationMegaItem);\n  protected readonly asideItem = computed(() => this.item() as NavigationAsideItem);\n  protected readonly basicItem = computed(() => this.item() as NavigationBasicItem);\n\n  protected readonly headingId = computed(() => {\n    const id = this.item().id ?? '';\n    return `nav-group-${id}`;\n  });\n\n  protected isGroupOpen(): boolean {\n    const id = this.item().id;\n    if (!id) return false;\n    // auto-open when any descendant is active\n    if (this.nav.isActive(id) && 'children' in this.item()) return true;\n    return this.nav.isGroupOpen(id);\n  }\n\n  protected isTrailActive(): boolean {\n    return this.nav.isActive(this.item().id);\n  }\n\n  protected railConnectorClasses(active: boolean): string {\n    if (!active || !this.railConnector()) return '';\n\n    return (\n      'relative after:pointer-events-none after:absolute after:-left-3 after:top-1/2 after:z-0 after:h-px ' +\n      \"after:w-3 after:-translate-y-1/2 after:rounded-full after:bg-primary/30 after:content-['']\"\n    );\n  }\n\n  protected showRailConnector(active: boolean): boolean {\n    return active && this.railConnector();\n  }\n\n  protected toggleGroup(): void {\n    const id = this.item().id;\n    if (id) this.nav.toggleGroup(id);\n  }\n\n  protected runAction(): void {\n    const item = this.item();\n    if ('action' in item && typeof item.action === 'function') {\n      item.action(item);\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;AAGA;AACM,SAAU,EAAE,CAAC,GAAG,MAAoB,EAAA;AACxC,IAAA,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B;;ACSA;;;;;AAKG;MAqOU,kBAAkB,CAAA;AACZ,IAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;IAC7B,EAAE,GAAG,EAAE;AAEjB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAkB;AACvC,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,4EAAC;;AAExB,IAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;;AAE/B,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,oFAAC;IAE3B,uBAAuB,GACxC,gIAAgI;AAE/G,IAAA,UAAU,GAAG;AAC9B,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,WAAW,EAAE,OAAO;AACpB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,YAAY,EAAE,OAAO;KACb;AACS,IAAA,YAAY,GAAG;AAChC,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,QAAQ,EAAE,SAAS;AACnB,QAAA,YAAY,EAAE,SAAS;KACf;AAES,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,2EAAC;IAEvC,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAyB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC9D,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAA+B,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC1E,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAwB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC5D,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAyB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC9D,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAyB,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAE9D,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;QAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE;QAC/B,OAAO,CAAA,UAAA,EAAa,EAAE,CAAA,CAAE;AAC1B,IAAA,CAAC,gFAAC;IAEQ,WAAW,GAAA;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE;AACzB,QAAA,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,KAAK;;AAErB,QAAA,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,UAAU,IAAI,IAAI,CAAC,IAAI,EAAE;AAAE,YAAA,OAAO,IAAI;QACnE,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACjC;IAEU,aAAa,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;IAC1C;AAEU,IAAA,oBAAoB,CAAC,MAAe,EAAA;AAC5C,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE;AAE/C,QAAA,QACE,qGAAqG;AACrG,YAAA,4FAA4F;IAEhG;AAEU,IAAA,iBAAiB,CAAC,MAAe,EAAA;AACzC,QAAA,OAAO,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE;IACvC;IAEU,WAAW,GAAA;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE;AACzB,QAAA,IAAI,EAAE;AAAE,YAAA,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC;IAEU,SAAS,GAAA;AACjB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,IAAI,QAAQ,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE;AACzD,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACnB;IACF;wGA5EW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhOnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8NT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEU,kBAAkB,+GAjOnB,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,iRAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAiO3D,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBApO9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;oBACvB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,CAAC;AACvE,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8NT,EAAA,CAAA;AACF,iBAAA;;;ACxPD;;AAEG;;;;"}