@ojiepermana/angular 21.1.26 → 21.1.30

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -277,6 +277,9 @@ class UiNavItemComponent {
     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',
@@ -312,6 +315,15 @@ class UiNavItemComponent {
     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)
@@ -324,7 +336,7 @@ class UiNavItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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" />
@@ -343,7 +355,11 @@ class UiNavItemComponent {
           }
           <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()" />
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
             }
           </div>
         </div>
@@ -351,12 +367,14 @@ class UiNavItemComponent {
       @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',
-              isTrailActive() && 'text-primary',
+              active && 'text-primary',
+              railConnectorClasses(active),
               item().classes?.wrapper
             )
           "
@@ -367,6 +385,9 @@ class UiNavItemComponent {
           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]="
@@ -397,7 +418,7 @@ class UiNavItemComponent {
             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" />
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
             }
           </div>
         }
@@ -412,7 +433,11 @@ class UiNavItemComponent {
           }
           <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()" />
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
             }
           </div>
         </div>
@@ -422,6 +447,7 @@ class UiNavItemComponent {
           [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
             )
           "
@@ -435,6 +461,9 @@ class UiNavItemComponent {
           [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" />
           }
@@ -450,6 +479,7 @@ class UiNavItemComponent {
             [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
               )
             "
@@ -470,6 +500,9 @@ class UiNavItemComponent {
             [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 ?? ''" />
             }
@@ -525,7 +558,7 @@ class UiNavItemComponent {
         }
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }, { 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 });
+  `, 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.13", ngImport: i0, type: UiNavItemComponent, decorators: [{
             type: Component,
@@ -552,7 +585,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           }
           <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()" />
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
             }
           </div>
         </div>
@@ -560,12 +597,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
       @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',
-              isTrailActive() && 'text-primary',
+              active && 'text-primary',
+              railConnectorClasses(active),
               item().classes?.wrapper
             )
           "
@@ -576,6 +615,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           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]="
@@ -606,7 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             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" />
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
             }
           </div>
         }
@@ -621,7 +663,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           }
           <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()" />
+              <ui-nav-item
+                [item]="child"
+                [level]="level() + 1"
+                [compact]="compact()"
+                [railConnector]="railConnector()" />
             }
           </div>
         </div>
@@ -631,6 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           [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
             )
           "
@@ -644,6 +691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
           [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" />
           }
@@ -659,6 +709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             [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
               )
             "
@@ -679,6 +730,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             [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 ?? ''" />
             }
@@ -736,7 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
     }
   `,
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }] } });
 
 /**
  * Vertical navigation (sidebar) — shadcn-styled.
@@ -1015,7 +1069,7 @@ class SidebarComponent {
         <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"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class", "viewportClass"] }, { 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.13", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -1381,7 +1435,7 @@ class TopbarComponent {
         }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ 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: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ 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: "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.13", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,