nath-angular-ui 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nath-angular-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "peerDependencies": {
     "@angular/aria": "^22.0.0",
     "@angular/cdk": "^22.0.0",

package/styles/styles.css

@@ -131,12 +131,16 @@
   .button:not(.icon-button):not(.button-unstyled) {
     @apply cursor-pointer
     rounded-md box-border border border-transparent
-    focus:outline-none
+    focus:outline-1 focus:outline-zinc-500
     inline-flex gap-2 items-center justify-center leading-5
     px-2 py-2.5
     hover:no-underline
     transition duration-200
     disabled:opacity-50 disabled:cursor-not-allowed;
+
+    .dark & {
+      @apply focus:outline-white;
+    }
   }
 
   button:disabled,

package/types/nath-angular-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef, InjectionToken, Injector, EmbeddedViewRef, OnInit, OnDestroy, AfterContentInit, Signal, StaticProvider } from '@angular/core';
+import { ElementRef, TemplateRef, InjectionToken, Injector, EmbeddedViewRef, OnInit, OnDestroy, AfterContentInit, AfterViewInit, Signal, StaticProvider } from '@angular/core';
 import { FormValueControl, Field, FieldState } from '@angular/forms/signals';
 import { LucideIcon, isLucideIconComponent, LucideMinimize2, LucideMaximize2, LucideMoon, LucideSun } from '@lucide/angular';
 import * as nath_angular_ui from 'nath-angular-ui';
@@ -96,7 +96,7 @@ interface Breadcrumb {
     disabled?: boolean;
 }
 
-declare class BreadcrumbService {
+declare class NathBreadcrumbService {
     private readonly _home;
     private readonly _breadcrumbs;
     home: _angular_core.Signal<Breadcrumb | null>;
@@ -110,15 +110,29 @@ declare class BreadcrumbService {
      * Set the breadcrumbs for the current view.
      * @param crumbs Array of breadcrumbs items
      */
-    set(crumbs: Breadcrumb[]): void;
+    set(crumbs: (Breadcrumb | null)[]): void;
+    /**
+     * Add a new breadcrumb to the current breadcrumbs array.
+     * @param crumb
+     */
     add(crumb: Breadcrumb): void;
+    /**
+     * Update a breadcrumb at a specific index.
+     * @param index
+     * @param crumb
+     */
     update(index: number, crumb: Breadcrumb): void;
     /**
-     * Clears the breadcrumbs when leaving a page.
+     * Remove a breadcrumb at a specific index.
+     * @param index
+     */
+    remove(index: number): void;
+    /**
+     * Clear all breadcrumbs.
      */
     clear(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<BreadcrumbService>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NathBreadcrumbService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NathBreadcrumbService>;
 }
 
 interface CodeFile {
@@ -342,7 +356,7 @@ declare class NathImagePreview {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NathImagePreview, "nath-image-preview", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "fallbackIcon": { "alias": "fallbackIcon"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; }, { "imageClick": "imageClick"; }, never, never, true, never>;
 }
 
-interface MenuItemCommandEvent {
+interface NathMenuItemCommandEvent {
     /**
      * Browser event.
      */
@@ -350,13 +364,13 @@ interface MenuItemCommandEvent {
     /**
      * Selected menu item.
      */
-    item?: MenuItem;
+    item?: NathMenuItem;
     /**
      * Index of the selected item.
      */
     index?: number;
 }
-interface MenuItem {
+interface NathMenuItem {
     /**
      * Text of the item.
      */
@@ -368,7 +382,7 @@ interface MenuItem {
     /**
      * Callback to execute when item is clicked.
      */
-    command?(event: MenuItemCommandEvent): void;
+    command?(event: NathMenuItemCommandEvent): void;
     /**
      * External link to navigate when item is clicked.
      */
@@ -376,7 +390,7 @@ interface MenuItem {
     /**
      * An array of children menuitems.
      */
-    items?: MenuItem[];
+    items?: NathMenuItem[];
     /**
      * Visibility of submenu.
      */
@@ -509,15 +523,10 @@ interface MenuItem {
     linkClass?: string;
     /**
      * Developer-defined state that can be passed to any navigation.
-     * @see {MenuItemState}
      */
     state?: {
         [k: string]: any;
     };
-    /**
-     * Options of the item's tooltip.
-     * @see {TooltipOptions}
-     */
     /**
      * Optional
      */
@@ -529,8 +538,9 @@ type NathMenuPositionY = 'auto' | 'top' | 'bottom';
 
 declare class NathMenu implements AfterContentInit, OnDestroy {
     private readonly document;
-    model: _angular_core.ModelSignal<MenuItem[]>;
+    model: _angular_core.ModelSignal<NathMenuItem[]>;
     styleClass: _angular_core.ModelSignal<string | null | undefined>;
+    panelStyleClass: _angular_core.ModelSignal<string | null | undefined>;
     positionX: _angular_core.InputSignal<NathMenuPositionX>;
     positionY: _angular_core.InputSignal<NathMenuPositionY>;
     inline: _angular_core.InputSignal<boolean>;
@@ -550,43 +560,91 @@ declare class NathMenu implements AfterContentInit, OnDestroy {
     /**
      * Show menu in popup mode
      */
-    show(event: MouseEvent): void;
+    show(event: Event): void;
     hide(): void;
     toggle(event: MouseEvent): void;
     handleCommand(payload: {
-        item: MenuItem;
+        item: NathMenuItem;
         index?: number;
         event?: Event;
     }): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NathMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NathMenu, "nath-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "positionX": { "alias": "positionX"; "required": false; "isSignal": true; }; "positionY": { "alias": "positionY"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "styleClass": "styleClassChange"; "whenHide": "whenHide"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NathMenu, "nath-menu", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; "isSignal": true; }; "positionX": { "alias": "positionX"; "required": false; "isSignal": true; }; "positionY": { "alias": "positionY"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "styleClass": "styleClassChange"; "panelStyleClass": "panelStyleClassChange"; "whenHide": "whenHide"; }, never, never, true, never>;
 }
 
-declare class NathMenuList {
+declare class NathMenuList implements AfterViewInit {
+    private readonly document;
     private readonly sanitizer;
-    items: _angular_core.InputSignal<MenuItem[]>;
+    private readonly destroyRef;
+    private readonly elementRef;
+    items: _angular_core.InputSignal<NathMenuItem[]>;
     direction: _angular_core.InputSignal<"left" | "right">;
     flat: _angular_core.InputSignal<boolean>;
     whenCommand: _angular_core.OutputEmitterRef<{
-        item: MenuItem;
+        item: NathMenuItem;
         index?: number;
         event?: Event;
     }>;
     private readonly submenuContainers;
-    protected readonly activeItem: _angular_core.WritableSignal<MenuItem | null>;
+    protected readonly activeItem: _angular_core.WritableSignal<NathMenuItem | null>;
+    readonly focusedIndex: _angular_core.WritableSignal<number>;
     protected readonly submenuTop: _angular_core.WritableSignal<number>;
     protected readonly submenuLeft: _angular_core.WritableSignal<number>;
     protected readonly nextSubmenuDirection: _angular_core.WritableSignal<"left" | "right">;
-    protected getMenuLabel(item: MenuItem): string | SafeHtml;
-    protected onItemHover(item: MenuItem, event: Event): void;
+    private readonly menuItemsElements;
+    ngAfterViewInit(): void;
+    protected getMenuLabel(item: NathMenuItem): string | SafeHtml;
+    protected onItemHover(item: NathMenuItem, event: Event): void;
     private executeItem;
     protected onItemClick(item: any, $index: number, $event: Event): void;
     protected readonly isLucideIconComponent: typeof isLucideIconComponent;
+    protected onMouseLeave(event: MouseEvent): void;
+    private readonly debounce;
+    protected handleKeyDown: (...args: any) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NathMenuList, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NathMenuList, "nath-menu-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; }, { "whenCommand": "whenCommand"; }, never, never, true, never>;
 }
 
+declare class NathMenuBar implements AfterViewInit, OnDestroy {
+    private readonly document;
+    private readonly sanitizer;
+    private readonly destroyRef;
+    model: _angular_core.InputSignal<NathMenuItem[]>;
+    styleClass: _angular_core.InputSignal<string | null | undefined>;
+    whenCommand: _angular_core.OutputEmitterRef<{
+        item: NathMenuItem;
+        index?: number;
+        event?: Event;
+    }>;
+    menuBarElement: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    dropdownMenu: _angular_core.Signal<NathMenu | undefined>;
+    readonly isMobileMenuOpen: _angular_core.WritableSignal<boolean>;
+    readonly activeItem: _angular_core.WritableSignal<NathMenuItem | null>;
+    readonly activeItemIndex: _angular_core.WritableSignal<number>;
+    readonly focusedIndex: _angular_core.WritableSignal<number>;
+    private readonly menuItemsElements;
+    ngAfterViewInit(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    handleItemClick(item: NathMenuItem, index: number, event: Event): void;
+    handleItemHover(item: NathMenuItem, index: number, event: MouseEvent): void;
+    toggleSubmenu(item: NathMenuItem, index: number, event: Event): void;
+    closeAllMenus(): void;
+    toggleMobileMenu(): void;
+    executeItem(item: NathMenuItem, index?: number, event?: Event): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleSubmenuCommand(payload: {
+        item: NathMenuItem;
+        index?: number;
+        event?: Event;
+    }): void;
+    protected getMenuLabel(item: NathMenuItem): string | SafeHtml;
+    protected readonly isLucideIconComponent: typeof isLucideIconComponent;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NathMenuBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NathMenuBar, "nath-menu-bar", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, { "whenCommand": "whenCommand"; }, never, never, true, never>;
+}
+
 declare class NathMultiselect implements FormValueControl<any[]> {
     protected readonly elementRef: ElementRef<any>;
     private readonly uniqueId;
@@ -1041,7 +1099,7 @@ declare class NathSortIcon {
 }
 
 declare class NathSplitButton {
-    menu: _angular_core.InputSignal<MenuItem[]>;
+    menu: _angular_core.InputSignal<NathMenuItem[]>;
     buttonClass: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     positionX: _angular_core.InputSignal<NathMenuPositionX>;
@@ -1119,7 +1177,7 @@ declare class NathThemeSwitch {
     darkText: _angular_core.InputSignal<string>;
     systemText: _angular_core.InputSignal<string>;
     switchTooltip: _angular_core.InputSignal<string>;
-    themes: MenuItem[];
+    themes: NathMenuItem[];
     protected readonly LucideMoon: typeof LucideMoon;
     protected readonly LucideSun: typeof LucideSun;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NathThemeSwitch, never>;
@@ -1233,7 +1291,7 @@ declare const validateAllFormFields: (formGroup: FormGroup) => void;
 declare function hasRequiredValidator(control: AbstractControl | null): boolean;
 declare function isRequired(fieldState: FieldState<any, any> | null): boolean;
 
-declare function next(el: Element, selector?: string): Element | null;
+declare function nextSibling(el: Element, selector?: string): Element | null;
 
 declare const isTruthy: <T>(x: T | undefined | null) => x is T;
 
@@ -1243,5 +1301,5 @@ declare const rangeNotMinMax: (range: number[] | undefined, min: number | undefi
 
 declare function isSortOrderValid(order: string): boolean;
 
-export { BreadcrumbService, DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
-export type { BooleanDisplayMode, Breadcrumb, CodeFile, MenuItem, NathConfirmationButton, NathConfirmationConfig, NathDialogConfig, NathMenuPositionX, NathMenuPositionY, NathToastPosition, NathToastType, NathTooltipPosition, PaginatorChangeEvent, RadioOption, SelectItem, SliderValue, ThemeConfig, Toast, TrackByFnOrKey, TristateValue };
+export { DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbService, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuBar, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, nextSibling, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
+export type { BooleanDisplayMode, Breadcrumb, CodeFile, NathConfirmationButton, NathConfirmationConfig, NathDialogConfig, NathMenuItem, NathMenuPositionX, NathMenuPositionY, NathToastPosition, NathToastType, NathTooltipPosition, PaginatorChangeEvent, RadioOption, SelectItem, SliderValue, ThemeConfig, Toast, TrackByFnOrKey, TristateValue };