@ojiepermana/angular-navigation 22.0.32 → 22.0.33

package/README.md

@@ -48,8 +48,7 @@ Type dipilih lewat komponen anak deklaratif — `NavigationSidebar`, `Navigation
 
 ## API Notes
 
-- `data` is the preferred source of navigation data.
-- `items` is still accepted as a compatibility alias while consumers migrate.
+- `data` is the source of navigation data.
 - Type is declared by the child component: `NavigationSidebar`/`NavigationDockbar` (vertical), `NavigationNavbar`/`NavigationFlyout` (horizontal). Orientation is implied by the type child.
 - `id` identifies a navigation instance so multiple navs can keep distinct service state.
 - `position` on `NavigationSidebar`/`NavigationDockbar` accepts `left` or `right` (vertical).
@@ -59,7 +58,7 @@ Type dipilih lewat komponen anak deklaratif — `NavigationSidebar`, `Navigation
 - `label` on `NavigationFlyout` sets the single trigger label and defaults to `Menu`.
 - `icon` on `NavigationFlyout` renders a Material Symbols icon on the trigger; `icon-position` (`start`/`end`) sets its placement and `icon-only` hides the label visually while keeping it as the accessible name (compact mode is always icon-only and falls back to the `menu` icon).
 - `nav-position` on `NavigationNavbar`/`NavigationFlyout` accepts `top` (default) or `bottom`. With `bottom`, the navbar grid panel opens upward with squared bottom corners, and the flyout panel anchors to the container's bottom edge with the tab row docked at the bottom — seamless for bars placed below the content.
-- `nav-type-style` on `NavigationNavbar`/`NavigationFlyout` accepts `default` or `border-rail`. `border-rail` squares the panel (no rounding), frames entry icons with dimmed blueprint-style rail lines plus dashed center cross lines (instead of rounded boxes), renders the nested-collapse rail dashed, and replaces hover/active backgrounds with primary-colored text. `default` keeps the current visuals.
+- `nav-appearance` on `NavigationNavbar`/`NavigationFlyout` accepts `flat` or `border-rail` (same vocabulary as the layout's `layout-appearance`). `border-rail` squares the panel (no rounding), frames entry icons with dimmed blueprint-style rail lines plus dashed center cross lines (instead of rounded boxes), renders the nested-collapse rail dashed, and replaces hover/active backgrounds with primary-colored text. `flat` keeps the current visuals.
 - The `navbar` type renders root items inline immediately; clicking a group (hover does not open it) opens a full-width grid panel below the bar with the same flyout-style entries, responsive columns, and nested collapse.
 - The `flyout` type renders one trigger button that opens a floating panel overlaying the parent container exactly (same top position and width, covering the trigger with no visible gap; `display: contents` wrappers are skipped when measuring the container). Root items with children become the horizontal navigation inside the panel (their `icon` renders in the row), their children render as title/subtitle entries in a responsive grid (1 column on mobile, 2 from `sm`, 3 from `md`, 4 from `lg` and up; `columns` caps the maximum at 1–4), and deeper children render as a vertical collapse below their entry — expanded by default every time the panel opens, collapsible per entry via the chevron, with the child icons aligned on the same vertical line as the parent entry icon. The panel closes on `Escape`, outside clicks, the close button, or leaf selection.
 - Items with children render a `chevron_right` icon pinned at the right edge and vertically centered: it points right by default and rotates down (in place, no layout shift) only while open — hover does not move it. This applies to flyout tabs and entries, navbar branch triggers, and collapsible items.
@@ -87,8 +86,7 @@ Inputs pada `<Navigation>` (container):
 | API               | Type                                               | Notes                                                                           |
 | ----------------- | -------------------------------------------------- | ------------------------------------------------------------------------------- |
 | `id`              | `string`                                           | Navigation instance id. `main` is the only id persisted to `localStorage`.      |
-| `data`            | `readonly NavigationItem[]`                        | Preferred source of items.                                                      |
-| `items`           | `readonly NavigationItem[]`                        | Compatibility alias for `data`.                                                 |
+| `data`            | `readonly NavigationItem[]`                        | Source of navigation items.                                                     |
 | `ariaLabel`       | `string`                                           | Accessible label on the host navigation landmark.                               |
 | `compact`         | `boolean`                                          | Compatibility alias for collapsed-rail item layout.                             |
 | `collapse-tree`   | `stairs \| straight`                               | Controls nested connector styling for collapsible items.                        |
@@ -110,9 +108,9 @@ Inputs pada komponen type:
 | `NavigationSidebar` | `previewExpanded`      | `boolean`                  | Forces a collapsed sidebar to render expanded for preview.                    |
 | `NavigationDockbar` | `mode`                 | `sticky \| drawer \| null` | Docked aside beside the rail, or overlay drawer.                              |
 | `NavigationDockbar` | `position`             | `left \| right \| null`    | Side the rail docks to.                                                       |
-| `NavigationNavbar`  | `nav-type-style`       | `default \| border-rail`   | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
+| `NavigationNavbar`  | `nav-appearance`       | `flat \| border-rail`      | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
 | `NavigationFlyout`  | `label`                | `string`                   | Trigger label. Defaults to `Menu`.                                            |
-| `NavigationFlyout`  | `nav-type-style`       | `default \| border-rail`   | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
+| `NavigationFlyout`  | `nav-appearance`       | `flat \| border-rail`      | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
 
 Semua type juga menerima `class` untuk kelas tambahan pada elemen shell-nya.
 
@@ -201,7 +199,7 @@ Any other navigation id, such as `erp-navbar`, only keeps its state in memory fo
 Saat `item.icon` tersedia, `nav` akan merender Material Symbols secara default melalui `@ojiepermana/angular-component/icon`. Jalankan `provideUiTheme()` untuk preload global, atau biarkan `IconComponent` melakukan lazy-load saat icon pertama dipakai.
 
 ```html
-<Navigation [items]="items">
+<Navigation [data]="items">
   <NavigationSidebar />
 </Navigation>
 ```
@@ -209,7 +207,7 @@ Saat `item.icon` tersedia, `nav` akan merender Material Symbols secara default m
 Gunakan template `NavigationIcon` hanya bila consumer ingin override renderer bawaan.
 
 ```html
-<Navigation [items]="items">
+<Navigation [data]="items">
   <NavigationSidebar />
 
   <ng-template NavigationIcon let-icon let-item="item" let-active="active" let-level="level">

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

@@ -15,14 +15,6 @@ const DEFAULT_DOCKBAR_MODE = 'sticky';
 const INSTANCE_STORAGE_PROPERTIES = ['orientation', 'appearance', 'position', 'collapsed', 'dockbar-mode'];
 const PERSISTED_STORAGE_PROPERTIES = ['orientation', 'type', 'position'];
 const TYPE_MODE_STORAGE_KEY = 'nav-type-mode';
-/** Nama properti legacy untuk tiap properti persisted saat membaca key `nav:<id>:*` generasi lama. */
-const LEGACY_PROPERTY_NAMES = {
-    orientation: 'orientation',
-    type: 'appearance',
-    position: 'position',
-};
-const LEGACY_NAV_STORAGE_KEYS = ['nav-appearance', 'nav-vertical-appearance', 'nav-horizontal-appearance'];
-const LEGACY_TYPE_MODE_STORAGE_KEYS = ['nav-appearance-mode', 'nav-collapsed', 'nav-dockbar-mode'];
 class NavigationService {
     documentRef = inject(DOCUMENT, { optional: true });
     router = inject(Router, { optional: true });
@@ -51,7 +43,6 @@ class NavigationService {
         matrixParams: 'ignored',
     };
     constructor() {
-        this.cleanupLegacyStorage();
         this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this.routerUrl.set(event.urlAfterRedirects);
@@ -321,26 +312,6 @@ class NavigationService {
     defaultType(orientation) {
         return orientation === 'vertical' ? DEFAULT_VERTICAL_TYPE : DEFAULT_HORIZONTAL_TYPE;
     }
-    cleanupLegacyStorage() {
-        this.migrateLegacyPersistedStorage();
-        for (const key of LEGACY_NAV_STORAGE_KEYS) {
-            this.removeStorage(key);
-        }
-        for (const key of LEGACY_TYPE_MODE_STORAGE_KEYS) {
-            this.removeStorage(key);
-        }
-        const storage = this.storage();
-        const keysToRemove = [];
-        for (let index = 0; index < (storage?.length ?? 0); index += 1) {
-            const key = storage?.key(index);
-            if (key && this.isLegacyInstanceStorageKey(key)) {
-                keysToRemove.push(key);
-            }
-        }
-        for (const key of keysToRemove) {
-            this.removeStorage(key);
-        }
-    }
     storage() {
         try {
             return this.documentRef?.defaultView?.localStorage ?? null;
@@ -391,37 +362,6 @@ class NavigationService {
             this.removeStorage(this.instanceStorageKey(id, property));
         }
     }
-    migrateLegacyPersistedStorage() {
-        // Generasi sebelumnya memakai istilah "appearance" — salin nilainya ke key "type" baru.
-        if (this.readStorage(this.persistedStorageKey('type')) === null) {
-            const legacyType = this.readStorage('nav-appearance');
-            if (legacyType !== null) {
-                this.writeStorage(this.persistedStorageKey('type'), legacyType);
-            }
-        }
-        if (this.readStorage(TYPE_MODE_STORAGE_KEY) === null) {
-            const legacyTypeMode = this.readStorage('nav-appearance-mode');
-            if (legacyTypeMode !== null) {
-                this.writeStorage(TYPE_MODE_STORAGE_KEY, legacyTypeMode);
-            }
-        }
-        for (const property of PERSISTED_STORAGE_PROPERTIES) {
-            const nextKey = this.persistedStorageKey(property);
-            const legacyKey = this.instanceStorageKey(PERSISTED_NAV_ID, LEGACY_PROPERTY_NAMES[property]);
-            const nextValue = this.readStorage(nextKey);
-            const legacyValue = this.readStorage(legacyKey);
-            if (nextValue === null && legacyValue !== null) {
-                this.writeStorage(nextKey, legacyValue);
-            }
-        }
-        if (this.readStorage(TYPE_MODE_STORAGE_KEY) !== null) {
-            return;
-        }
-        const migratedTypeMode = this.resolveLegacyTypeMode();
-        if (migratedTypeMode !== null) {
-            this.writeStorage(TYPE_MODE_STORAGE_KEY, migratedTypeMode);
-        }
-    }
     instanceStorageKey(id, property) {
         return `nav:${id}:${property}`;
     }
@@ -434,35 +374,9 @@ class NavigationService {
         }
         return state.collapsed ? 'collapsed' : 'default';
     }
-    resolveLegacyTypeMode() {
-        const type = this.readStorage(this.persistedStorageKey('type')) ??
-            this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'appearance'));
-        const collapsed = this.readStorage('nav-collapsed') ?? this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'collapsed'));
-        const dockbarMode = this.readStorage('nav-dockbar-mode') ??
-            this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'dockbar-mode'));
-        if (type === 'dockbar' && this.isDockbarMode(dockbarMode)) {
-            return dockbarMode;
-        }
-        if (type === 'sidebar') {
-            return collapsed === 'true' ? 'collapsed' : 'default';
-        }
-        if (this.isDockbarMode(dockbarMode)) {
-            return dockbarMode;
-        }
-        if (collapsed === 'true') {
-            return 'collapsed';
-        }
-        if (collapsed === 'false') {
-            return 'default';
-        }
-        return null;
-    }
     shouldPersistInstanceState(id) {
         return id === PERSISTED_NAV_ID;
     }
-    isLegacyInstanceStorageKey(key) {
-        return key.startsWith('nav:');
-    }
     isPersistedTypeMode(value) {
         return value === 'default' || value === 'collapsed' || this.isDockbarMode(value);
     }