@ojiepermana/angular 21.1.9 → 21.1.12

package/types/ojiepermana-angular-layout.d.ts

@@ -23,10 +23,11 @@ declare class VerticalLayoutComponent {
     readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
     readonly sidebarMode: _angular_core.InputSignal<SidebarMode>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "container" | "wide">;
     protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
     protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
-    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly frameClasses: _angular_core.Signal<string>;
     protected readonly mainClasses: _angular_core.Signal<string>;
@@ -53,15 +54,17 @@ declare class HorizontalLayoutComponent {
     private readonly theme;
     readonly topbarAppearance: _angular_core.InputSignal<TopbarAppearance>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "container" | "wide">;
     protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
     protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
     protected readonly dividerBorderWidth: _angular_core.Signal<string>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly frameClasses: _angular_core.Signal<string>;
     protected readonly mainClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[topbar-start]", "[ui-layout-profile],[topbar-end]"], true, never>;
 }
 
 /**
@@ -83,15 +86,18 @@ declare class EmptyLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
 }
 
-declare const LAYOUT_MODES: readonly ["vertical", "horizontal"];
+declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
 type LayoutMode = (typeof LAYOUT_MODES)[number];
-declare const LAYOUT_WIDTHS: readonly ["full", "fixed"];
+declare const LAYOUT_WIDTHS: readonly ["full", "container", "wide"];
 type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
+/** @deprecated Use `container` instead. */
+type LegacyLayoutWidth = 'fixed';
+type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;
 interface MaterialLayoutConfig {
     /** Initial layout mode. */
     readonly mode?: LayoutMode;
     /** Initial layout width. */
-    readonly width?: LayoutWidth;
+    readonly width?: ConfiguredLayoutWidth;
     /** @deprecated Use `mode` instead. */
     /** Initial layout mode. Defaults to `vertical`. */
     readonly defaultMode?: LayoutMode;
@@ -110,14 +116,15 @@ declare const MATERIAL_LAYOUT_CONFIG: InjectionToken<MaterialLayoutConfig>;
 declare const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig;
 declare function isLayoutMode(value: string | null | undefined): value is LayoutMode;
 declare function isLayoutWidth(value: string | null | undefined): value is LayoutWidth;
+declare function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null;
 
 declare class LayoutService {
     private readonly document;
     private readonly config;
     private readonly _mode;
     private readonly _width;
-    readonly mode: _angular_core.Signal<"vertical" | "horizontal">;
-    readonly width: _angular_core.Signal<"full" | "fixed">;
+    readonly mode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    readonly width: _angular_core.Signal<"full" | "container" | "wide">;
     constructor();
     setMode(mode: LayoutMode): void;
     toggleMode(): void;
@@ -136,5 +143,5 @@ declare function provideMaterialLayout(config?: MaterialLayoutConfig): Environme
 
 declare const LAYOUT_VERSION = "0.0.1";
 
-export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, provideMaterialLayout };
-export type { LayoutMode, LayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, normalizeLayoutWidth, provideMaterialLayout };
+export type { ConfiguredLayoutWidth, LayoutMode, LayoutWidth, LegacyLayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };

package/types/ojiepermana-angular-navigation.d.ts

@@ -131,22 +131,29 @@ declare const DEFAULT_NAVIGATION_ID = "main";
  * Signal-based global state untuk navigation (sidebar/topbar).
  *
  * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
- * Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
+ * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
  */
 declare class NavigationService {
+    private readonly doc;
     private readonly router;
     private readonly destroyRef;
+    private readonly persistedSidebarCollapsed;
     /** Internal version counter — incremented on every registry mutation. */
     private readonly _version;
     /** Internal map of registered navigation trees. */
     private readonly _registry;
+    private readonly _collapsed;
+    private readonly _hasStoredSidebarCollapse;
     /**
      * Backward-compatible accessor — returns items for the default (`'main'`) key.
      * Prefer `getItems(id)` when working with named registries.
      */
     readonly items: _angular_core.Signal<readonly NavigationItem[]>;
+    /** Sidebar appearance preference (`default` or `thin`). */
+    readonly sidebarAppearance: _angular_core.Signal<SidebarAppearance>;
+    readonly hasStoredSidebarCollapse: _angular_core.Signal<boolean>;
     /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
-    readonly collapsed: _angular_core.WritableSignal<boolean>;
+    readonly collapsed: _angular_core.Signal<boolean>;
     /** Sheet drawer terbuka di mobile. */
     readonly mobileOpen: _angular_core.WritableSignal<boolean>;
     /** Set id grup / collapsable yang sedang terbuka. */
@@ -172,6 +179,8 @@ declare class NavigationService {
      * Reactive terhadap perubahan registry.
      */
     getItems(id: string): () => readonly NavigationItem[];
+    setSidebarAppearance(value: SidebarAppearance): void;
+    toggleSidebarAppearance(currentAppearance?: SidebarAppearance): void;
     /** Toggle sidebar collapsed (default ↔ thin). */
     toggleCollapsed(): void;
     setCollapsed(value: boolean): void;
@@ -183,6 +192,8 @@ declare class NavigationService {
     setGroupOpen(id: string, open: boolean): void;
     /** Apakah id termasuk dalam active trail saat ini. */
     isActive(id: string | undefined): boolean;
+    private readPersistedSidebarCollapsed;
+    private persistSidebarCollapsed;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
 }
@@ -284,6 +295,7 @@ declare class SidebarComponent {
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
     private readonly hovered;
+    private readonly suppressHoverUntilLeave;
     private readonly drawerTpl;
     private drawerRef;
     private focusTrap;
@@ -291,27 +303,33 @@ declare class SidebarComponent {
     /** True saat viewport `< md` (767.98px). */
     protected readonly isMobileMedia: _angular_core.Signal<boolean>;
     protected readonly isMobile: _angular_core.Signal<boolean>;
+    protected readonly resolvedCollapsed: _angular_core.Signal<boolean>;
+    protected readonly resolvedAppearance: _angular_core.Signal<SidebarAppearance>;
+    protected readonly hoverActive: _angular_core.Signal<boolean>;
     protected readonly isExpanded: _angular_core.Signal<boolean>;
     protected readonly isCompact: _angular_core.Signal<boolean>;
+    protected readonly toggleButtonLabel: _angular_core.Signal<"Expand sidebar" | "Collapse sidebar">;
     constructor();
     protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly headerSlotClasses: _angular_core.Signal<string>;
+    protected readonly navClasses: _angular_core.Signal<string>;
+    protected readonly footerClasses: _angular_core.Signal<string>;
+    protected readonly footerSlotClasses: _angular_core.Signal<string>;
     protected readonly innerClasses: _angular_core.Signal<string>;
     protected onHoverEnter(): void;
     protected onHoverLeave(): void;
+    protected toggleAppearance(event: MouseEvent): void;
     /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
     protected onHostClick(event: MouseEvent): void;
     private openDrawer;
     private closeDrawer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "ui-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-sidebar-header]", "[ui-sidebar-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
 }
 
 /**
  * Horizontal navigation (topbar) — shadcn-styled.
- *
- * Variants:
- * - `default`: horizontal list; item `collapsable` buka dropdown
- * - `megamenu`: item `mega` buka panel full-width multi-kolom
  */
 declare class TopbarComponent {
     protected readonly nav: NavigationService;
@@ -330,35 +348,30 @@ declare class TopbarComponent {
     /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
     readonly showHamburger: _angular_core.InputSignal<boolean>;
     readonly hamburgerLabel: _angular_core.InputSignal<string>;
-    protected readonly topbarHeight = "var(--layout-topbar-height)";
     /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
     protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
     protected readonly openId: _angular_core.WritableSignal<string | null>;
     private active;
     private readonly dropdownTpl;
-    private readonly megaTpl;
     constructor();
     protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly endSlotClasses: _angular_core.Signal<string>;
     protected asBasic(i: NavigationItem): NavigationBasicItem;
     protected asCollapsable(i: NavigationItem): NavigationCollapsableItem;
     protected asGroup(i: NavigationItem): NavigationGroupItem;
-    protected asMega(i: NavigationItem): NavigationMegaItem;
     protected isItemActive(id: string | undefined): boolean;
-    protected megaGridClasses(columns?: number): string;
     protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void;
     protected openDropdown(trigger: HTMLElement, item: NavigationItem): void;
-    protected toggleMega(trigger: HTMLElement, item: NavigationItem): void;
-    protected openMega(trigger: HTMLElement, item: NavigationItem): void;
     private attach;
     protected closeAll(): void;
     /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
     protected onMenubarKeydown(event: KeyboardEvent): void;
-    /** Arrow-key navigation dalam dropdown/mega panel. */
+    /** Arrow-key navigation dalam dropdown panel. */
     protected onPanelKeydown(event: KeyboardEvent): void;
     private collectPanelFocusables;
     private focusFirstInPanel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TopbarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "ui-topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-topbar-start]", "[ui-topbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[topbar-start]", "[topbar-end]"], true, never>;
 }
 
 declare const DemoNavigationData: NavigationItem[];