npm - @ojiepermana/angular - Versions diffs - 21.3.4 → 22.0.1 - Mend

@ojiepermana/angular 21.3.4 → 22.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (290) hide show

package/fesm2022/ojiepermana-angular-navigation-topbar.mjs CHANGED Viewed

@@ -19,24 +19,50 @@ class TopbarComponent {
     vcr = inject(ViewContainerRef);
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(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 */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    navigationId = input(DEFAULT_NAVIGATION_ID, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
-    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
+    autoRegister = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
     /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
-    showHamburger = input(true, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
-    hamburgerLabel = input('Open navigation', ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
+    showHamburger = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
+    hamburgerLabel = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
     mobileOpen = this.nav.mobileOpen;
+    isFlyout = computed(() => this.variant() === 'flyout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFlyout" }] : /* istanbul ignore next */ []));
+    exactMatch = {
+        exact: true,
+        paths: 'exact',
+        queryParams: 'exact',
+        fragment: 'exact',
+        matrixParams: 'exact',
+    };
+    inexactMatch = {
+        exact: false,
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
     /** 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 */ []));
-    openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    openId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
     active = null;
     dropdownTpl = viewChild.required('dropdownTpl');
     constructor() {
@@ -49,12 +75,14 @@ class TopbarComponent {
     }
     hostClasses = computed(() => {
         return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     endSlotClasses = computed(() => {
         const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];
         base.push('[&>[topbar-end]]:flex', '[&>[topbar-end]]:min-w-0', '[&>[topbar-end]]:max-w-full', '[&>[topbar-end]]:items-center', '[&>[topbar-end]]:justify-end', '[&>[topbar-end]]:gap-2', '[&>[topbar-end]>*]:w-auto', '[&>[topbar-end]>*]:max-w-full', '[&>[topbar-end]>*]:justify-end', '[&>[topbar-end]>*]:gap-0', '[&>[topbar-end]>*]:px-2', '[&>[topbar-end]>*>*:first-child]:ml-auto', '[&>[topbar-end]>*>*:nth-child(n+2)]:hidden');
         return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
     asBasic(i) {
         return i;
     }
@@ -64,9 +92,38 @@ class TopbarComponent {
     asGroup(i) {
         return i;
     }
+    panelClasses(item) {
+        const classes = [
+            'rounded-xl border border-border bg-background/95 p-2 text-foreground shadow-xl backdrop-blur supports-[backdrop-filter]:bg-background/90',
+        ];
+        if (this.isFlyout()) {
+            classes.push(item.children.length >= 4 ? 'w-[min(92vw,42rem)]' : 'w-[min(92vw,28rem)]');
+        }
+        else {
+            classes.push('min-w-56');
+        }
+        return classes.join(' ');
+    }
+    panelGridClasses(item) {
+        const classes = ['grid gap-2'];
+        if (item.children.length >= 4) {
+            classes.push('md:grid-cols-2');
+        }
+        return classes.join(' ');
+    }
+    flyoutItemClasses(active) {
+        return [
+            'block rounded-lg border border-transparent px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            active ? 'border-border bg-accent/50 text-foreground' : 'hover:bg-accent/50 hover:text-accent-foreground',
+        ].join(' ');
+    }
     isItemActive(id) {
         return this.nav.isActive(id);
     }
+    runMenuAction(item) {
+        item.action?.(item);
+        this.closeAll();
+    }
     toggleMobile() {
         this.nav.toggleMobile();
     }
@@ -200,8 +257,8 @@ class TopbarComponent {
         const items = this.collectPanelFocusables(panel);
         items[0]?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TopbarComponent, isStandalone: true, selector: "topbar", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TopbarComponent, isStandalone: true, selector: "topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-variant": "variant()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="flex h-full w-full items-center gap-3 px-1">
       <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
@@ -298,15 +355,105 @@ class TopbarComponent {
     <!-- Dropdown template -->
     <ng-template #dropdownTpl let-item>
-      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
-        @for (child of item.children; track child.id) {
-          <ui-nav-item [item]="child" />
+      <div role="menu" [class]="panelClasses(item)" (keydown)="onPanelKeydown($event)">
+        @if (isFlyout()) {
+          <div [class]="panelGridClasses(item)">
+            @for (child of item.children; track child.id) {
+              @switch (child.type) {
+                @case ('basic') {
+                  @let basic = asBasic(child);
+                  @if (basic.link && !basic.externalLink) {
+                    <a
+                      role="menuitem"
+                      [class]="flyoutItemClasses(rla.isActive)"
+                      [routerLink]="basic.link"
+                      [queryParams]="basic.queryParams"
+                      [queryParamsHandling]="basic.queryParamsHandling ?? null"
+                      [fragment]="basic.fragment ?? undefined"
+                      [preserveFragment]="basic.preserveFragment ?? false"
+                      [target]="basic.target ?? undefined"
+                      routerLinkActive
+                      #rla="routerLinkActive"
+                      [routerLinkActiveOptions]="
+                        basic.isActiveMatchOptions ?? (basic.exactMatch ? exactMatch : inexactMatch)
+                      "
+                      [attr.aria-current]="rla.isActive ? 'page' : null"
+                      (click)="closeAll()">
+                      <div class="flex items-start gap-3">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </a>
+                  } @else if (basic.link && basic.externalLink) {
+                    <a
+                      role="menuitem"
+                      [class]="flyoutItemClasses(false)"
+                      [attr.href]="basic.link"
+                      [attr.target]="basic.target ?? '_blank'"
+                      rel="noopener noreferrer"
+                      (click)="closeAll()">
+                      <div class="flex items-start gap-3">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </a>
+                  } @else {
+                    <button type="button" [class]="flyoutItemClasses(false)" (click)="runMenuAction(basic)">
+                      <div class="flex items-start gap-3 text-left">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </button>
+                  }
+                }
+                @default {
+                  <div class="md:col-span-2">
+                    <ui-nav-item [item]="child" />
+                  </div>
+                }
+              }
+            }
+          </div>
+        } @else {
+          @for (child of item.children; track child.id) {
+            <ui-nav-item [item]="child" />
+          }
         }
       </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", "railConnector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "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.14", ngImport: i0, type: TopbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'topbar',
@@ -316,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[class]': 'hostClasses()',
-                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-variant]': 'variant()',
                     },
                     template: `
     <div class="flex h-full w-full items-center gap-3 px-1">
@@ -415,15 +562,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     <!-- Dropdown template -->
     <ng-template #dropdownTpl let-item>
-      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
-        @for (child of item.children; track child.id) {
-          <ui-nav-item [item]="child" />
+      <div role="menu" [class]="panelClasses(item)" (keydown)="onPanelKeydown($event)">
+        @if (isFlyout()) {
+          <div [class]="panelGridClasses(item)">
+            @for (child of item.children; track child.id) {
+              @switch (child.type) {
+                @case ('basic') {
+                  @let basic = asBasic(child);
+                  @if (basic.link && !basic.externalLink) {
+                    <a
+                      role="menuitem"
+                      [class]="flyoutItemClasses(rla.isActive)"
+                      [routerLink]="basic.link"
+                      [queryParams]="basic.queryParams"
+                      [queryParamsHandling]="basic.queryParamsHandling ?? null"
+                      [fragment]="basic.fragment ?? undefined"
+                      [preserveFragment]="basic.preserveFragment ?? false"
+                      [target]="basic.target ?? undefined"
+                      routerLinkActive
+                      #rla="routerLinkActive"
+                      [routerLinkActiveOptions]="
+                        basic.isActiveMatchOptions ?? (basic.exactMatch ? exactMatch : inexactMatch)
+                      "
+                      [attr.aria-current]="rla.isActive ? 'page' : null"
+                      (click)="closeAll()">
+                      <div class="flex items-start gap-3">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </a>
+                  } @else if (basic.link && basic.externalLink) {
+                    <a
+                      role="menuitem"
+                      [class]="flyoutItemClasses(false)"
+                      [attr.href]="basic.link"
+                      [attr.target]="basic.target ?? '_blank'"
+                      rel="noopener noreferrer"
+                      (click)="closeAll()">
+                      <div class="flex items-start gap-3">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </a>
+                  } @else {
+                    <button type="button" [class]="flyoutItemClasses(false)" (click)="runMenuAction(basic)">
+                      <div class="flex items-start gap-3 text-left">
+                        @if (basic.icon) {
+                          <span
+                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
+                            <ui-nav-icon [name]="basic.icon" [size]="18" />
+                          </span>
+                        }
+                        <div class="min-w-0 space-y-1">
+                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
+                          @if (basic.subtitle) {
+                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
+                          }
+                        </div>
+                      </div>
+                    </button>
+                  }
+                }
+                @default {
+                  <div class="md:col-span-2">
+                    <ui-nav-item [item]="child" />
+                  </div>
+                }
+              }
+            }
+          </div>
+        } @else {
+          @for (child of item.children; track child.id) {
+            <ui-nav-item [item]="child" />
+          }
         }
       </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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ojiepermana-angular-navigation-topbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ojiepermana-angular-navigation-topbar.mjs","sources":["../../../projects/angular/navigation/topbar/src/lib/topbar.component.ts","../../../projects/angular/navigation/topbar/ojiepermana-angular-navigation-topbar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n ViewContainerRef,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';\nimport { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';\nimport { DEFAULT_NAVIGATION_ID, NavigationService } from '@ojiepermana/angular/navigation/service';\nimport type {\n NavigationBasicItem,\n NavigationCollapsableItem,\n NavigationGroupItem,\n NavigationItem,\n TopbarAppearance,\n} from '@ojiepermana/angular/navigation/types';\n\ninterface ActiveOverlay {\n ref: OverlayRef;\n id: string;\n}\n\n/*\n Horizontal navigation (topbar) — shadcn-styled.\n /\n@Component({\n selector: 'topbar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],\n host: {\n role: 'navigation',\n '[attr.aria-label]': 'ariaLabel()',\n '[class]': 'hostClasses()',\n '[attr.data-appearance]': 'appearance()',\n },\n template: `\n <div class=\"flex h-full w-full items-center gap-3 px-1\">\n <div data-topbar-slot=\"start\" class=\"flex shrink-0 items-center gap-2\">\n @if (showHamburger()) {\n <button\n type=\"button\"\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden\"\n [attr.aria-label]=\"hamburgerLabel()\"\n [attr.aria-expanded]=\"mobileOpen()\"\n (click)=\"toggleMobile()\">\n <ui-nav-icon name=\"menu\" [size]=\"18\" />\n </button>\n }\n <ng-content select=\"[topbar-start]\" />\n </div>\n\n <div data-topbar-slot=\"nav\" class=\"flex min-w-0 flex-1 items-center justify-center\">\n <ul\n class=\"flex min-w-0 flex-1 items-center justify-center gap-1\"\n role=\"menubar\"\n (keydown)=\"onMenubarKeydown($event)\">\n @for (item of resolvedItems(); track item.id) {\n <li role=\"none\" class=\"relative\">\n @switch (item.type) {\n @case ('basic') {\n @let basic = asBasic(item);\n <a\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary\"\n [routerLink]=\"basic.link\"\n routerLinkActive\n #rla=\"routerLinkActive\"\n [class.text-primary]=\"rla.isActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n [target]=\"basic.target ?? undefined\">\n @if (basic.icon) {\n <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n }\n <span>{{ basic.title }}</span>\n </a>\n }\n @case ('collapsable') {\n @let col = asCollapsable(item);\n <button\n #trigger\n type=\"button\"\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n [class.text-primary]=\"isItemActive(col.id)\"\n [attr.aria-expanded]=\"openId() === col.id\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleDropdown(trigger, item)\"\n (mouseenter)=\"openDropdown(trigger, item)\">\n @if (col.icon) {\n <ui-nav-icon [name]=\"col.icon\" [size]=\"18\" />\n }\n <span>{{ col.title }}</span>\n <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n }\n @case ('group') {\n @let group = asGroup(item);\n <button\n #trigger\n type=\"button\"\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n [class.text-primary]=\"isItemActive(group.id)\"\n [attr.aria-expanded]=\"openId() === group.id\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleDropdown(trigger, item)\"\n (mouseenter)=\"openDropdown(trigger, item)\">\n @if (group.icon) {\n <ui-nav-icon [name]=\"group.icon\" [size]=\"18\" />\n }\n <span>{{ group.title }}</span>\n <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n }\n @default {\n <span class=\"ui-nav-heading px-3 py-2 text-muted-foreground\">\n {{ item.title }}\n </span>\n }\n }\n </li>\n }\n </ul>\n </div>\n\n <div data-topbar-slot=\"end\" [class]=\"endSlotClasses()\">\n <ng-content select=\"[topbar-end]\" />\n </div>\n </div>\n\n <!-- Dropdown template -->\n <ng-template #dropdownTpl let-item>\n <div role=\"menu\" class=\"min-w-56 border border-brand bg-background/95 p-1\" (keydown)=\"onPanelKeydown($event)\">\n @for (child of item.children; track child.id) {\n <ui-nav-item [item]=\"child\" />\n }\n </div>\n </ng-template>\n `,\n})\nexport class TopbarComponent {\n protected readonly nav = inject(NavigationService);\n private readonly overlay = inject(Overlay);\n private readonly vcr = inject(ViewContainerRef);\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly items = input<NavigationItem[]>([]);\n /* Registry key di `NavigationService`. Default `'main'`. /\n readonly navigationId = input<string>(DEFAULT_NAVIGATION_ID);\n readonly appearance = input<TopbarAppearance>('default');\n readonly ariaLabel = input<string>('Primary');\n readonly class = input<string>('');\n /* Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. /\n readonly autoRegister = input<boolean>(true);\n /* Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. /\n readonly showHamburger = input<boolean>(true);\n readonly hamburgerLabel = input<string>('Open navigation');\n protected readonly mobileOpen = this.nav.mobileOpen;\n\n /* Resolved items: input jika disediakan, fallback ke registry NavigationService. /\n protected readonly resolvedItems = computed(() => {\n const explicit = this.items();\n return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();\n });\n\n protected readonly openId = signal<string \| null>(null);\n private active: ActiveOverlay \| null = null;\n\n private readonly dropdownTpl = viewChild.required<TemplateRef<unknown>>('dropdownTpl');\n\n constructor() {\n effect(() => {\n const explicit = this.items();\n if (this.autoRegister() && explicit.length > 0) this.nav.registerItems(this.navigationId(), explicit);\n });\n this.destroyRef.onDestroy(() => this.closeAll());\n }\n\n protected readonly hostClasses = computed(() => {\n return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');\n });\n\n protected readonly endSlotClasses = computed(() => {\n const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];\n base.push(\n '[&>[topbar-end]]:flex',\n '[&>[topbar-end]]:min-w-0',\n '[&>[topbar-end]]:max-w-full',\n '[&>[topbar-end]]:items-center',\n '[&>[topbar-end]]:justify-end',\n '[&>[topbar-end]]:gap-2',\n '[&>[topbar-end]>]:w-auto',\n '[&>[topbar-end]>]:max-w-full',\n '[&>[topbar-end]>]:justify-end',\n '[&>[topbar-end]>]:gap-0',\n '[&>[topbar-end]>]:px-2',\n '[&>[topbar-end]>>:first-child]:ml-auto',\n '[&>[topbar-end]>>:nth-child(n+2)]:hidden',\n );\n return base.join(' ');\n });\n\n protected asBasic(i: NavigationItem): NavigationBasicItem {\n return i as NavigationBasicItem;\n }\n protected asCollapsable(i: NavigationItem): NavigationCollapsableItem {\n return i as NavigationCollapsableItem;\n }\n protected asGroup(i: NavigationItem): NavigationGroupItem {\n return i as NavigationGroupItem;\n }\n\n protected isItemActive(id: string \| undefined): boolean {\n return this.nav.isActive(id);\n }\n\n protected toggleMobile(): void {\n this.nav.toggleMobile();\n }\n\n protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void {\n if (this.openId() === item.id) this.closeAll();\n else this.openDropdown(trigger, item);\n }\n\n protected openDropdown(trigger: HTMLElement, item: NavigationItem): void {\n if (this.openId() === item.id) return;\n this.closeAll();\n this.attach(trigger, item, this.dropdownTpl());\n }\n\n private attach(trigger: HTMLElement, item: NavigationItem, tpl: TemplateRef<unknown>): void {\n const strategy = this.overlay\n .position()\n .flexibleConnectedTo(trigger)\n .withFlexibleDimensions(false)\n .withPush(false)\n .withPositions([\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 4,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -4,\n },\n ]);\n\n const ref = this.overlay.create({\n positionStrategy: strategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n panelClass: ['ui-dropdown-panel'],\n });\n\n const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });\n ref.attach(portal);\n this.active = { ref, id: item.id ?? '' };\n this.openId.set(item.id ?? null);\n\n merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.closeAll();\n trigger.focus();\n });\n }\n\n protected closeAll(): void {\n if (this.active) {\n this.active.ref.dispose();\n this.active = null;\n }\n this.openId.set(null);\n }\n\n /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. /\n protected onMenubarKeydown(event: KeyboardEvent): void {\n const key = event.key;\n const root = this.host.nativeElement;\n const triggers = Array.from(root.querySelectorAll<HTMLElement>('ul[role=\"menubar\"] [role=\"menuitem\"]')).filter(\n (el) => !el.hasAttribute('disabled'),\n );\n if (triggers.length === 0) return;\n const currentIndex = triggers.indexOf(document.activeElement as HTMLElement);\n\n if (key === 'ArrowDown' && currentIndex !== -1) {\n event.preventDefault();\n // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).\n queueMicrotask(() => this.focusFirstInPanel());\n return;\n }\n if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return;\n let nextIndex = currentIndex;\n if (key === 'ArrowRight') nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;\n else if (key === 'ArrowLeft') nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n else if (key === 'Home') nextIndex = 0;\n else if (key === 'End') nextIndex = triggers.length - 1;\n if (nextIndex !== currentIndex && triggers[nextIndex]) {\n event.preventDefault();\n triggers[nextIndex].focus();\n }\n }\n\n /* Arrow-key navigation dalam dropdown panel. /\n protected onPanelKeydown(event: KeyboardEvent): void {\n const key = event.key;\n if (\n key !== 'ArrowDown' &&\n key !== 'ArrowUp' &&\n key !== 'ArrowLeft' &&\n key !== 'ArrowRight' &&\n key !== 'Home' &&\n key !== 'End'\n )\n return;\n const panel = this.active?.ref.overlayElement;\n if (!panel) return;\n const items = this.collectPanelFocusables(panel);\n if (items.length === 0) return;\n const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n let nextIndex = currentIndex;\n if (key === 'ArrowDown' \|\| key === 'ArrowRight') nextIndex = (currentIndex + 1 + items.length) % items.length;\n else if (key === 'ArrowUp' \|\| key === 'ArrowLeft') nextIndex = (currentIndex - 1 + items.length) % items.length;\n else if (key === 'Home') nextIndex = 0;\n else if (key === 'End') nextIndex = items.length - 1;\n if (nextIndex !== currentIndex && items[nextIndex]) {\n event.preventDefault();\n items[nextIndex].focus();\n }\n }\n\n private collectPanelFocusables(root: HTMLElement): HTMLElement[] {\n return Array.from(\n root.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'),\n ).filter((el) => el.offsetParent !== null \|\| el.getClientRects().length > 0);\n }\n\n private focusFirstInPanel(): void {\n const panel = this.active?.ref.overlayElement;\n if (!panel) return;\n const items = this.collectPanelFocusables(panel);\n items[0]?.focus();\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ojiepermana-angular-navigation-topbar.mjs","sources":["../../../projects/angular/navigation/topbar/default/topbar.component.ts","../../../projects/angular/navigation/topbar/ojiepermana-angular-navigation-topbar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n ViewContainerRef,\n computed,\n effect,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\nimport { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';\nimport { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';\nimport { DEFAULT_NAVIGATION_ID, NavigationService } from '@ojiepermana/angular/navigation/service';\nimport type {\n NavigationBasicItem,\n NavigationCollapsableItem,\n NavigationGroupItem,\n NavigationItem,\n TopbarVariant,\n} from '@ojiepermana/angular/navigation/types';\n\ninterface ActiveOverlay {\n ref: OverlayRef;\n id: string;\n}\n\ntype DropdownPanelItem = NavigationCollapsableItem \| NavigationGroupItem;\n\n/*\n Horizontal navigation (topbar) — shadcn-styled.\n /\n@Component({\n selector: 'topbar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],\n host: {\n role: 'navigation',\n '[attr.aria-label]': 'ariaLabel()',\n '[class]': 'hostClasses()',\n '[attr.data-variant]': 'variant()',\n },\n template: `\n <div class=\"flex h-full w-full items-center gap-3 px-1\">\n <div data-topbar-slot=\"start\" class=\"flex shrink-0 items-center gap-2\">\n @if (showHamburger()) {\n <button\n type=\"button\"\n class=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden\"\n [attr.aria-label]=\"hamburgerLabel()\"\n [attr.aria-expanded]=\"mobileOpen()\"\n (click)=\"toggleMobile()\">\n <ui-nav-icon name=\"menu\" [size]=\"18\" />\n </button>\n }\n <ng-content select=\"[topbar-start]\" />\n </div>\n\n <div data-topbar-slot=\"nav\" class=\"flex min-w-0 flex-1 items-center justify-center\">\n <ul\n class=\"flex min-w-0 flex-1 items-center justify-center gap-1\"\n role=\"menubar\"\n (keydown)=\"onMenubarKeydown($event)\">\n @for (item of resolvedItems(); track item.id) {\n <li role=\"none\" class=\"relative\">\n @switch (item.type) {\n @case ('basic') {\n @let basic = asBasic(item);\n <a\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary\"\n [routerLink]=\"basic.link\"\n routerLinkActive\n #rla=\"routerLinkActive\"\n [class.text-primary]=\"rla.isActive\"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n [target]=\"basic.target ?? undefined\">\n @if (basic.icon) {\n <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n }\n <span>{{ basic.title }}</span>\n </a>\n }\n @case ('collapsable') {\n @let col = asCollapsable(item);\n <button\n #trigger\n type=\"button\"\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n [class.text-primary]=\"isItemActive(col.id)\"\n [attr.aria-expanded]=\"openId() === col.id\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleDropdown(trigger, item)\"\n (mouseenter)=\"openDropdown(trigger, item)\">\n @if (col.icon) {\n <ui-nav-icon [name]=\"col.icon\" [size]=\"18\" />\n }\n <span>{{ col.title }}</span>\n <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n }\n @case ('group') {\n @let group = asGroup(item);\n <button\n #trigger\n type=\"button\"\n role=\"menuitem\"\n class=\"ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n [class.text-primary]=\"isItemActive(group.id)\"\n [attr.aria-expanded]=\"openId() === group.id\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleDropdown(trigger, item)\"\n (mouseenter)=\"openDropdown(trigger, item)\">\n @if (group.icon) {\n <ui-nav-icon [name]=\"group.icon\" [size]=\"18\" />\n }\n <span>{{ group.title }}</span>\n <ui-nav-icon name=\"expand_more\" [size]=\"18\" />\n </button>\n }\n @default {\n <span class=\"ui-nav-heading px-3 py-2 text-muted-foreground\">\n {{ item.title }}\n </span>\n }\n }\n </li>\n }\n </ul>\n </div>\n\n <div data-topbar-slot=\"end\" [class]=\"endSlotClasses()\">\n <ng-content select=\"[topbar-end]\" />\n </div>\n </div>\n\n <!-- Dropdown template -->\n <ng-template #dropdownTpl let-item>\n <div role=\"menu\" [class]=\"panelClasses(item)\" (keydown)=\"onPanelKeydown($event)\">\n @if (isFlyout()) {\n <div [class]=\"panelGridClasses(item)\">\n @for (child of item.children; track child.id) {\n @switch (child.type) {\n @case ('basic') {\n @let basic = asBasic(child);\n @if (basic.link && !basic.externalLink) {\n <a\n role=\"menuitem\"\n [class]=\"flyoutItemClasses(rla.isActive)\"\n [routerLink]=\"basic.link\"\n [queryParams]=\"basic.queryParams\"\n [queryParamsHandling]=\"basic.queryParamsHandling ?? null\"\n [fragment]=\"basic.fragment ?? undefined\"\n [preserveFragment]=\"basic.preserveFragment ?? false\"\n [target]=\"basic.target ?? undefined\"\n routerLinkActive\n #rla=\"routerLinkActive\"\n [routerLinkActiveOptions]=\"\n basic.isActiveMatchOptions ?? (basic.exactMatch ? exactMatch : inexactMatch)\n \"\n [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n (click)=\"closeAll()\">\n <div class=\"flex items-start gap-3\">\n @if (basic.icon) {\n <span\n class=\"mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground\">\n <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n </span>\n }\n <div class=\"min-w-0 space-y-1\">\n <div class=\"font-medium leading-none text-foreground\">{{ basic.title }}</div>\n @if (basic.subtitle) {\n <p class=\"line-clamp-2 text-sm leading-5 text-muted-foreground\">{{ basic.subtitle }}</p>\n }\n </div>\n </div>\n </a>\n } @else if (basic.link && basic.externalLink) {\n <a\n role=\"menuitem\"\n [class]=\"flyoutItemClasses(false)\"\n [attr.href]=\"basic.link\"\n [attr.target]=\"basic.target ?? '_blank'\"\n rel=\"noopener noreferrer\"\n (click)=\"closeAll()\">\n <div class=\"flex items-start gap-3\">\n @if (basic.icon) {\n <span\n class=\"mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground\">\n <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n </span>\n }\n <div class=\"min-w-0 space-y-1\">\n <div class=\"font-medium leading-none text-foreground\">{{ basic.title }}</div>\n @if (basic.subtitle) {\n <p class=\"line-clamp-2 text-sm leading-5 text-muted-foreground\">{{ basic.subtitle }}</p>\n }\n </div>\n </div>\n </a>\n } @else {\n <button type=\"button\" [class]=\"flyoutItemClasses(false)\" (click)=\"runMenuAction(basic)\">\n <div class=\"flex items-start gap-3 text-left\">\n @if (basic.icon) {\n <span\n class=\"mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground\">\n <ui-nav-icon [name]=\"basic.icon\" [size]=\"18\" />\n </span>\n }\n <div class=\"min-w-0 space-y-1\">\n <div class=\"font-medium leading-none text-foreground\">{{ basic.title }}</div>\n @if (basic.subtitle) {\n <p class=\"line-clamp-2 text-sm leading-5 text-muted-foreground\">{{ basic.subtitle }}</p>\n }\n </div>\n </div>\n </button>\n }\n }\n @default {\n <div class=\"md:col-span-2\">\n <ui-nav-item [item]=\"child\" />\n </div>\n }\n }\n }\n </div>\n } @else {\n @for (child of item.children; track child.id) {\n <ui-nav-item [item]=\"child\" />\n }\n }\n </div>\n </ng-template>\n `,\n})\nexport class TopbarComponent {\n protected readonly nav = inject(NavigationService);\n private readonly overlay = inject(Overlay);\n private readonly vcr = inject(ViewContainerRef);\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly items = input<NavigationItem[]>([]);\n /* Registry key di `NavigationService`. Default `'main'`. /\n readonly navigationId = input<string>(DEFAULT_NAVIGATION_ID);\n readonly variant = input<TopbarVariant>('default');\n readonly ariaLabel = input<string>('Primary');\n readonly class = input<string>('');\n /* Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. /\n readonly autoRegister = input<boolean>(true);\n /* Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. /\n readonly showHamburger = input<boolean>(true);\n readonly hamburgerLabel = input<string>('Open navigation');\n protected readonly mobileOpen = this.nav.mobileOpen;\n protected readonly isFlyout = computed(() => this.variant() === 'flyout');\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 exact: false,\n paths: 'subset',\n queryParams: 'subset',\n fragment: 'ignored',\n matrixParams: 'ignored',\n } as const;\n\n /* Resolved items: input jika disediakan, fallback ke registry NavigationService. /\n protected readonly resolvedItems = computed(() => {\n const explicit = this.items();\n return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();\n });\n\n protected readonly openId = signal<string \| null>(null);\n private active: ActiveOverlay \| null = null;\n\n private readonly dropdownTpl = viewChild.required<TemplateRef<unknown>>('dropdownTpl');\n\n constructor() {\n effect(() => {\n const explicit = this.items();\n if (this.autoRegister() && explicit.length > 0) this.nav.registerItems(this.navigationId(), explicit);\n });\n this.destroyRef.onDestroy(() => this.closeAll());\n }\n\n protected readonly hostClasses = computed(() => {\n return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');\n });\n\n protected readonly endSlotClasses = computed(() => {\n const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];\n base.push(\n '[&>[topbar-end]]:flex',\n '[&>[topbar-end]]:min-w-0',\n '[&>[topbar-end]]:max-w-full',\n '[&>[topbar-end]]:items-center',\n '[&>[topbar-end]]:justify-end',\n '[&>[topbar-end]]:gap-2',\n '[&>[topbar-end]>]:w-auto',\n '[&>[topbar-end]>]:max-w-full',\n '[&>[topbar-end]>]:justify-end',\n '[&>[topbar-end]>]:gap-0',\n '[&>[topbar-end]>]:px-2',\n '[&>[topbar-end]>>:first-child]:ml-auto',\n '[&>[topbar-end]>>:nth-child(n+2)]:hidden',\n );\n return base.join(' ');\n });\n\n protected asBasic(i: NavigationItem): NavigationBasicItem {\n return i as NavigationBasicItem;\n }\n protected asCollapsable(i: NavigationItem): NavigationCollapsableItem {\n return i as NavigationCollapsableItem;\n }\n protected asGroup(i: NavigationItem): NavigationGroupItem {\n return i as NavigationGroupItem;\n }\n\n protected panelClasses(item: DropdownPanelItem): string {\n const classes = [\n 'rounded-xl border border-border bg-background/95 p-2 text-foreground shadow-xl backdrop-blur supports-[backdrop-filter]:bg-background/90',\n ];\n\n if (this.isFlyout()) {\n classes.push(item.children.length >= 4 ? 'w-[min(92vw,42rem)]' : 'w-[min(92vw,28rem)]');\n } else {\n classes.push('min-w-56');\n }\n\n return classes.join(' ');\n }\n\n protected panelGridClasses(item: DropdownPanelItem): string {\n const classes = ['grid gap-2'];\n\n if (item.children.length >= 4) {\n classes.push('md:grid-cols-2');\n }\n\n return classes.join(' ');\n }\n\n protected flyoutItemClasses(active: boolean): string {\n return [\n 'block rounded-lg border border-transparent px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n active ? 'border-border bg-accent/50 text-foreground' : 'hover:bg-accent/50 hover:text-accent-foreground',\n ].join(' ');\n }\n\n protected isItemActive(id: string \| undefined): boolean {\n return this.nav.isActive(id);\n }\n\n protected runMenuAction(item: NavigationBasicItem): void {\n item.action?.(item);\n this.closeAll();\n }\n\n protected toggleMobile(): void {\n this.nav.toggleMobile();\n }\n\n protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void {\n if (this.openId() === item.id) this.closeAll();\n else this.openDropdown(trigger, item);\n }\n\n protected openDropdown(trigger: HTMLElement, item: NavigationItem): void {\n if (this.openId() === item.id) return;\n this.closeAll();\n this.attach(trigger, item, this.dropdownTpl());\n }\n\n private attach(trigger: HTMLElement, item: NavigationItem, tpl: TemplateRef<unknown>): void {\n const strategy = this.overlay\n .position()\n .flexibleConnectedTo(trigger)\n .withFlexibleDimensions(false)\n .withPush(false)\n .withPositions([\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 4,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -4,\n },\n ]);\n\n const ref = this.overlay.create({\n positionStrategy: strategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n panelClass: ['ui-dropdown-panel'],\n });\n\n const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });\n ref.attach(portal);\n this.active = { ref, id: item.id ?? '' };\n this.openId.set(item.id ?? null);\n\n merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.closeAll();\n trigger.focus();\n });\n }\n\n protected closeAll(): void {\n if (this.active) {\n this.active.ref.dispose();\n this.active = null;\n }\n this.openId.set(null);\n }\n\n /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. /\n protected onMenubarKeydown(event: KeyboardEvent): void {\n const key = event.key;\n const root = this.host.nativeElement;\n const triggers = Array.from(root.querySelectorAll<HTMLElement>('ul[role=\"menubar\"] [role=\"menuitem\"]')).filter(\n (el) => !el.hasAttribute('disabled'),\n );\n if (triggers.length === 0) return;\n const currentIndex = triggers.indexOf(document.activeElement as HTMLElement);\n\n if (key === 'ArrowDown' && currentIndex !== -1) {\n event.preventDefault();\n // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).\n queueMicrotask(() => this.focusFirstInPanel());\n return;\n }\n if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return;\n let nextIndex = currentIndex;\n if (key === 'ArrowRight') nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;\n else if (key === 'ArrowLeft') nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n else if (key === 'Home') nextIndex = 0;\n else if (key === 'End') nextIndex = triggers.length - 1;\n if (nextIndex !== currentIndex && triggers[nextIndex]) {\n event.preventDefault();\n triggers[nextIndex].focus();\n }\n }\n\n /* Arrow-key navigation dalam dropdown panel. /\n protected onPanelKeydown(event: KeyboardEvent): void {\n const key = event.key;\n if (\n key !== 'ArrowDown' &&\n key !== 'ArrowUp' &&\n key !== 'ArrowLeft' &&\n key !== 'ArrowRight' &&\n key !== 'Home' &&\n key !== 'End'\n )\n return;\n const panel = this.active?.ref.overlayElement;\n if (!panel) return;\n const items = this.collectPanelFocusables(panel);\n if (items.length === 0) return;\n const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n let nextIndex = currentIndex;\n if (key === 'ArrowDown' \|\| key === 'ArrowRight') nextIndex = (currentIndex + 1 + items.length) % items.length;\n else if (key === 'ArrowUp' \|\| key === 'ArrowLeft') nextIndex = (currentIndex - 1 + items.length) % items.length;\n else if (key === 'Home') nextIndex = 0;\n else if (key === 'End') nextIndex = items.length - 1;\n if (nextIndex !== currentIndex && items[nextIndex]) {\n event.preventDefault();\n items[nextIndex].focus();\n }\n }\n\n private collectPanelFocusables(root: HTMLElement): HTMLElement[] {\n return Array.from(\n root.querySelectorAll<HTMLElement>('a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'),\n ).filter((el) => el.offsetParent !== null \|\| el.getClientRects().length > 0);\n }\n\n private focusFirstInPanel(): void {\n const panel = this.active?.ref.overlayElement;\n if (!panel) return;\n const items = this.collectPanelFocusables(panel);\n items[0]?.focus();\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-theme-provider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ojiepermana-angular-theme-provider.mjs","sources":["../../../projects/angular/theme/provider/~~src/lib/~~theme.provider.ts","../../../projects/angular/theme/provider/ojiepermana-angular-theme-provider.ts"],"sourcesContent":["import {\n inject,\n type EnvironmentProviders,\n type Provider,\n makeEnvironmentProviders,\n provideEnvironmentInitializer,\n} from '@angular/core';\nimport { THEME_PANEL_THEME_PORT } from '@ojiepermana/angular/layout/component';\nimport { ThemeService } from '@ojiepermana/angular/theme/services';\nimport { MATERIAL_THEME_CONFIG, type MaterialThemeConfig } from '@ojiepermana/angular/theme/token';\nimport { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\nexport interface MaterialThemeFeature {\n readonly providers: Provider[];\n}\n\nexport function provideMaterialTheme(\n config: MaterialThemeConfig = {},\n ...features: MaterialThemeFeature[]\n): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: MATERIAL_THEME_CONFIG, useValue: config },\n { provide: THEME_PANEL_THEME_PORT, useExisting: ThemeService },\n provideEnvironmentInitializer(() => {\n inject(ThemeService);\n }),\n ...features.flatMap((feature) => feature.providers),\n ]);\n}\n\nexport function withMaterialDefaults(): MaterialThemeFeature {\n return {\n providers: [\n { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },\n {\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },\n },\n ],\n };\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;SAiBgB,oBAAoB,CAClC,SAA8B,EAAE,EAChC,GAAG,QAAgC,EAAA;AAEnC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,EAAE;AACpD,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,YAAY,EAAE;QAC9D,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,YAAY,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC;AACpD,KAAA,CAAC;AACJ;SAEgB,oBAAoB,GAAA;IAClC,OAAO;AACL,QAAA,SAAS,EAAE;YACT,EAAE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;AACpE,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;gBACvC,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE;AAChE,aAAA;AACF,SAAA;KACF;AACH;;ACzCA;;AAEG;;;;"}
1	+ {"version":3,"file":"ojiepermana-angular-theme-provider.mjs","sources":["../../../projects/angular/theme/provider/theme.provider.ts","../../../projects/angular/theme/provider/ojiepermana-angular-theme-provider.ts"],"sourcesContent":["import {\n inject,\n type EnvironmentProviders,\n type Provider,\n makeEnvironmentProviders,\n provideEnvironmentInitializer,\n} from '@angular/core';\nimport { THEME_PANEL_THEME_PORT } from '@ojiepermana/angular/layout/component';\nimport { ThemeService } from '@ojiepermana/angular/theme/services';\nimport { MATERIAL_THEME_CONFIG, type MaterialThemeConfig } from '@ojiepermana/angular/theme/token';\nimport { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\n\nexport interface MaterialThemeFeature {\n readonly providers: Provider[];\n}\n\nexport function provideMaterialTheme(\n config: MaterialThemeConfig = {},\n ...features: MaterialThemeFeature[]\n): EnvironmentProviders {\n return makeEnvironmentProviders([\n { provide: MATERIAL_THEME_CONFIG, useValue: config },\n { provide: THEME_PANEL_THEME_PORT, useExisting: ThemeService },\n provideEnvironmentInitializer(() => {\n inject(ThemeService);\n }),\n ...features.flatMap((feature) => feature.providers),\n ]);\n}\n\nexport function withMaterialDefaults(): MaterialThemeFeature {\n return {\n providers: [\n { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },\n {\n provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,\n useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },\n },\n ],\n };\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;SAiBgB,oBAAoB,CAClC,SAA8B,EAAE,EAChC,GAAG,QAAgC,EAAA;AAEnC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,EAAE;AACpD,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,YAAY,EAAE;QAC9D,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,YAAY,CAAC;AACtB,QAAA,CAAC,CAAC;AACF,QAAA,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC;AACpD,KAAA,CAAC;AACJ;SAEgB,oBAAoB,GAAA;IAClC,OAAO;AACL,QAAA,SAAS,EAAE;YACT,EAAE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;AACpE,YAAA;AACE,gBAAA,OAAO,EAAE,8BAA8B;gBACvC,QAAQ,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE;AAChE,aAAA;AACF,SAAA;KACF;AACH;;ACzCA;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-theme-services.mjs CHANGED Viewed

@@ -8,24 +8,32 @@ class ThemeService {
     destroyRef = inject(DestroyRef);
     config = this.resolveConfig();
     initialBrand = this.readPersistedBrand() ?? this.config.defaultBrand;
-    _modePreference = signal(this.readPersistedMode() ?? this.config.defaultMode, ...(ngDevMode ? [{ debugName: "_modePreference" }] : /* istanbul ignore next */ []));
-    _brand = signal(this.initialBrand, ...(ngDevMode ? [{ debugName: "_brand" }] : /* istanbul ignore next */ []));
-    _color = signal(this.initialBrand ? this.config.defaultColor : (this.readPersistedColor() ?? this.config.defaultColor), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _style = signal(this.initialBrand ? this.config.defaultStyle : (this.readPersistedStyle() ?? this.config.defaultStyle), ...(ngDevMode ? [{ debugName: "_style" }] : /* istanbul ignore next */ []));
-    _systemPrefersDark = signal(this.prefersDark(), ...(ngDevMode ? [{ debugName: "_systemPrefersDark" }] : /* istanbul ignore next */ []));
+    _modePreference = signal(this.readPersistedMode() ?? this.config.defaultMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_modePreference" }] : /* istanbul ignore next */ []));
+    _brand = signal(this.initialBrand, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_brand" }] : /* istanbul ignore next */ []));
+    _color = signal(this.initialBrand ? this.config.defaultColor : (this.readPersistedColor() ?? this.config.defaultColor), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _style = signal(this.initialBrand ? this.config.defaultStyle : (this.readPersistedStyle() ?? this.config.defaultStyle), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_style" }] : /* istanbul ignore next */ []));
+    _systemPrefersDark = signal(this.prefersDark(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_systemPrefersDark" }] : /* istanbul ignore next */ []));
     scheme = this._modePreference.asReadonly();
     brand = this._brand.asReadonly();
     color = this._color.asReadonly();
     theme = this._color.asReadonly();
     style = this._style.asReadonly();
-    mode = computed(() => this.resolveMode(this._modePreference()), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    mode = computed(() => this.resolveMode(this._modePreference()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     snapshot = computed(() => ({
         mode: this.mode(),
         brand: this._brand(),
         color: this._color(),
         style: this._style(),
-    }), ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
-    isDark = computed(() => this.mode() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    isDark = computed(() => this.mode() === 'dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
     constructor() {
         this.watchSystemScheme();
         effect(() => {
@@ -270,10 +278,10 @@ class ThemeService {
             /* ignore */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });