@ojiepermana/angular 21.0.8 → 21.1.4

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -3,7 +3,7 @@ import { inject, DestroyRef, signal, computed, Injectable, PLATFORM_ID, input, C
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { filter, map } from 'rxjs/operators';
-import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -837,19 +837,20 @@ class SidebarComponent {
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col bg-background text-foreground shadow-xl"
-        [ngClass]="position() === 'right' ? 'border-l border-border' : 'border-r border-border'">
+        class="flex h-full w-72 max-w-[85vw] flex-col border-border bg-background text-foreground shadow-xl"
+        [class.border-l]="position() === 'right'"
+        [class.border-r]="position() !== 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-sidebar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, NgTemplateOutlet, UiNavItemComponent],
+                    imports: [NgTemplateOutlet, UiNavItemComponent],
                     host: {
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
@@ -889,8 +890,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col bg-background text-foreground shadow-xl"
-        [ngClass]="position() === 'right' ? 'border-l border-border' : 'border-r border-border'">
+        class="flex h-full w-72 max-w-[85vw] flex-col border-border bg-background text-foreground shadow-xl"
+        [class.border-l]="position() === 'right'"
+        [class.border-r]="position() !== 'right'">
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
@@ -922,6 +924,7 @@ class TopbarComponent {
     /** 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 */ []));
+    topbarHeight = 'var(--layout-topbar-height)';
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     resolvedItems = computed(() => {
         const explicit = this.items();
@@ -960,22 +963,29 @@ class TopbarComponent {
     isItemActive(id) {
         return this.nav.isActive(id);
     }
-    megaColsClass(columns) {
+    megaGridClasses(columns) {
         const c = Math.min(Math.max(columns ?? 4, 1), 6);
+        const classes = ['grid', 'gap-6'];
         switch (c) {
             case 1:
-                return 'grid-cols-1';
+                classes.push('grid-cols-1');
+                break;
             case 2:
-                return 'md:grid-cols-2';
+                classes.push('md:grid-cols-2');
+                break;
             case 3:
-                return 'md:grid-cols-3';
+                classes.push('md:grid-cols-3');
+                break;
             case 5:
-                return 'md:grid-cols-5';
+                classes.push('md:grid-cols-5');
+                break;
             case 6:
-                return 'md:grid-cols-6';
+                classes.push('md:grid-cols-6');
+                break;
             default:
-                return 'md:grid-cols-4';
+                classes.push('md:grid-cols-4');
         }
+        return classes.join(' ');
     }
     toggleDropdown(trigger, item) {
         if (this.openId() === item.id)
@@ -1139,8 +1149,8 @@ class TopbarComponent {
         items[0]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TopbarComponent, isStandalone: true, selector: "ui-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 }, { propertyName: "megaTpl", first: true, predicate: ["megaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="flex h-14 w-full items-center gap-3 px-3">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TopbarComponent, isStandalone: true, selector: "ui-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()", "style.height": "topbarHeight" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "megaTpl", first: true, predicate: ["megaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex h-full w-full items-center gap-3 px-3">
       <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
           <button
@@ -1271,7 +1281,7 @@ class TopbarComponent {
         role="menu"
         class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
         (keydown)="onPanelKeydown($event)">
-        <div class="grid gap-6" [ngClass]="megaColsClass(item.columns)">
+        <div [class]="megaGridClasses(item.columns)">
           @for (col of item.children; track col.id) {
             <div>
               <div class="ui-nav-heading mb-2 text-muted-foreground">
@@ -1287,22 +1297,23 @@ class TopbarComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-topbar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
+                    imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
                     host: {
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[class]': 'hostClasses()',
                         '[attr.data-appearance]': 'appearance()',
+                        '[style.height]': 'topbarHeight',
                     },
                     template: `
-    <div class="flex h-14 w-full items-center gap-3 px-3">
+    <div class="flex h-full w-full items-center gap-3 px-3">
       <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
         @if (showHamburger()) {
           <button
@@ -1433,7 +1444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         role="menu"
         class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
         (keydown)="onPanelKeydown($event)">
-        <div class="grid gap-6" [ngClass]="megaColsClass(item.columns)">
+        <div [class]="megaGridClasses(item.columns)">
           @for (col of item.children; track col.id) {
             <div>
               <div class="ui-nav-heading mb-2 text-muted-foreground">