mtrl 0.3.8 → 0.4.0

package/dist/components/navigation/api.d.ts

@@ -0,0 +1,8 @@
+import { NavigationComponent, BaseComponent, ApiOptions } from './types';
+/**
+ * Enhances a component with navigation-specific API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: BaseComponent) => NavigationComponent;
+export default withAPI;

package/dist/components/navigation/config.d.ts

@@ -0,0 +1,34 @@
+import { NavigationConfig, BaseComponent, ApiOptions } from './types';
+/**
+ * Default configuration for the Navigation component
+ */
+export declare const defaultConfig: NavigationConfig;
+/**
+ * Creates the base configuration for Navigation component
+ * @param {NavigationConfig} config - User provided configuration
+ * @returns {NavigationConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: NavigationConfig) => NavigationConfig;
+/**
+ * Generates element configuration for the Navigation component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: NavigationConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Navigation component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {ApiOptions} API configuration object
+ */
+export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export default defaultConfig;

package/dist/components/navigation/constants.d.ts

@@ -0,0 +1,137 @@
+/**
+ * Navigation variants following Material Design 3
+ */
+export declare const NAV_VARIANTS: {
+    /** Navigation rail - thin vertical bar with icons and optional labels */
+    readonly RAIL: "rail";
+    /** Drawer navigation - wider drawer that can expand/collapse */
+    readonly DRAWER: "drawer";
+    /** Bar navigation - horizontal navigation bar */
+    readonly BAR: "bar";
+    /** Modal navigation - floating navigation that appears on demand */
+    readonly MODAL: "modal";
+    /** Standard navigation - basic navigation layout */
+    readonly STANDARD: "standard";
+};
+/**
+ * Navigation positions
+ */
+export declare const NAV_POSITIONS: {
+    /** Left side of the screen */
+    readonly LEFT: "left";
+    /** Right side of the screen */
+    readonly RIGHT: "right";
+    /** Top of the screen */
+    readonly TOP: "top";
+    /** Bottom of the screen */
+    readonly BOTTOM: "bottom";
+};
+/**
+ * Navigation behaviors
+ */
+export declare const NAV_BEHAVIORS: {
+    /** Fixed in place, always visible */
+    readonly FIXED: "fixed";
+    /** Can be dismissed/hidden */
+    readonly DISMISSIBLE: "dismissible";
+    /** Modal overlay that can be opened/closed */
+    readonly MODAL: "modal";
+};
+/**
+ * Navigation item states
+ */
+export declare const NAV_ITEM_STATES: {
+    /** Currently selected item */
+    readonly ACTIVE: "active";
+    /** Item cannot be interacted with */
+    readonly DISABLED: "disabled";
+    /** Item with children is expanded */
+    readonly EXPANDED: "expanded";
+    /** Item with children is collapsed */
+    readonly COLLAPSED: "collapsed";
+    /** Mouse is hovering over the item */
+    readonly HOVERED: "hovered";
+    /** Item has keyboard focus */
+    readonly FOCUSED: "focused";
+    /** Item is being pressed */
+    readonly PRESSED: "pressed";
+};
+/**
+ * Navigation event names
+ */
+export declare const NAV_EVENTS: {
+    /** Fired when an item is selected */
+    readonly CHANGE: "change";
+    /** Fired when navigation is expanded */
+    readonly EXPAND: "expand";
+    /** Fired when navigation is collapsed */
+    readonly COLLAPSE: "collapse";
+    /** Fired when a nested item group is expanded */
+    readonly GROUP_EXPAND: "group:expand";
+    /** Fired when a nested item group is collapsed */
+    readonly GROUP_COLLAPSE: "group:collapse";
+};
+/**
+ * Default configuration values
+ */
+export declare const NAV_DEFAULTS: {
+    /** Default navigation variant */
+    readonly VARIANT: "standard";
+    /** Default navigation position */
+    readonly POSITION: "left";
+    /** Default navigation behavior */
+    readonly BEHAVIOR: "fixed";
+    /** Whether navigation is expanded by default */
+    readonly EXPANDED: false;
+    /** Whether to show item labels by default */
+    readonly SHOW_LABELS: true;
+    /** Whether scrim is enabled for modal navigation */
+    readonly SCRIM_ENABLED: true;
+};
+/**
+ * CSS classes for navigation elements
+ */
+export declare const NAV_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "nav";
+    /** Navigation variant class prefix */
+    readonly VARIANT_PREFIX: "nav--";
+    /** Navigation position class prefix */
+    readonly POSITION_PREFIX: "nav--pos-";
+    /** Navigation behavior class prefix */
+    readonly BEHAVIOR_PREFIX: "nav--";
+    /** Expanded state class */
+    readonly EXPANDED: "nav--expanded";
+    /** Disabled state class */
+    readonly DISABLED: "nav--disabled";
+    /** Navigation item */
+    readonly ITEM: "nav-item";
+    /** Item container (wrapper) */
+    readonly ITEM_CONTAINER: "nav-item-container";
+    /** Navigation item icon */
+    readonly ICON: "nav-item-icon";
+    /** Navigation item text label */
+    readonly LABEL: "nav-item-label";
+    /** Navigation item badge */
+    readonly BADGE: "nav-item-badge";
+    /** Navigation divider */
+    readonly DIVIDER: "nav-divider";
+    /** Modal background scrim */
+    readonly SCRIM: "nav-scrim";
+    /** Navigation item group */
+    readonly GROUP: "nav-group";
+    /** Group title */
+    readonly GROUP_TITLE: "nav-group-title";
+    /** Item subtitle */
+    readonly SUBTITLE: "nav-subtitle";
+    /** Container for nested items */
+    readonly NESTED_CONTAINER: "nav-nested-container";
+    /** Nested navigation item */
+    readonly NESTED_ITEM: "nav-nested-item";
+    /** Icon for expanding/collapsing nested items */
+    readonly EXPAND_ICON: "nav-expand-icon";
+    /** Active state class */
+    readonly ACTIVE: "nav-item--active";
+    /** Disabled state class */
+    readonly ITEM_DISABLED: "nav-item--disabled";
+};

package/dist/components/navigation/features/controller.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponent } from '../types';
+/**
+ * Configuration interface for controller feature
+ */
+interface ControllerConfig {
+    /** Component prefix for class names */
+    prefix?: string;
+    /** Debug mode flag */
+    debug?: boolean;
+    /** Component name */
+    componentName?: string;
+    /** Additional configuration options */
+    [key: string]: any;
+}
+/**
+ * Enhanced component with controller capabilities
+ */
+interface ControllerComponent extends BaseComponent {
+    /** Handler method for item click events */
+    handleItemClick: (id: string) => void;
+}
+/**
+ * Adds event delegation controller to a navigation component
+ * This centralizes event handling for all navigation items
+ *
+ * @param {ControllerConfig} config - Controller configuration
+ * @returns {Function} Component enhancer function
+ */
+export declare const withController: (config: ControllerConfig) => (component: BaseComponent) => ControllerComponent;
+export default withController;

package/dist/components/navigation/features/items.d.ts

@@ -0,0 +1,32 @@
+import { NavItemConfig, NavItemData, BaseComponent } from '../types';
+/**
+ * Interface for a component with items management capabilities
+ * @internal
+ */
+interface ItemsComponent extends BaseComponent {
+    items: Map<string, NavItemData>;
+    addItem: (config: NavItemConfig) => ItemsComponent;
+    removeItem: (id: string) => ItemsComponent;
+    getItem: (id: string) => NavItemData | undefined;
+    getAllItems: () => NavItemData[];
+    getActive: () => NavItemData | null;
+    getItemPath: (id: string) => string[];
+    setActive: (id: string) => ItemsComponent;
+}
+/**
+ * Interface for navigation configuration
+ * @internal
+ */
+interface NavigationConfig {
+    prefix?: string;
+    items?: NavItemConfig[];
+    debug?: boolean;
+    [key: string]: any;
+}
+/**
+ * Adds navigation items management to a component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {Function} Component enhancer function
+ */
+export declare const withNavItems: (config: NavigationConfig) => (component: BaseComponent) => ItemsComponent;
+export {};

package/dist/components/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './navigation';
+export { NavigationConfig, NavigationComponent, NavItemConfig, NavGroupConfig } from './types';
+export { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES } from './constants';

package/dist/components/navigation/nav-item.d.ts

@@ -0,0 +1,30 @@
+import { NavItemConfig } from './types';
+/**
+ * Creates an expand/collapse icon element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Expand icon element
+ */
+export declare const createExpandIcon: (prefix: string) => HTMLElement;
+/**
+ * Creates a nested items container
+ * @param {NavItemConfig[]} items - Nested items configuration
+ * @param {string} prefix - CSS class prefix
+ * @param {Function} createItem - Item creation function
+ * @returns {HTMLElement} Nested items container
+ */
+export declare const createNestedContainer: (items: NavItemConfig[], prefix: string, createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement) => HTMLElement;
+/**
+ * Creates a navigation item element
+ * @param {NavItemConfig} config - Item configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Created navigation item
+ */
+export declare const createNavItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement;
+/**
+ * Recursively gets all nested items from a navigation item
+ * @param {HTMLElement} item - Navigation item element
+ * @param {string} prefix - CSS class prefix
+ * @returns {Array<HTMLElement>} Array of all nested items
+ */
+export declare const getAllNestedItems: (item: HTMLElement, prefix: string) => HTMLElement[];

package/dist/components/navigation/navigation.d.ts

@@ -0,0 +1,8 @@
+import { NavigationConfig, NavigationComponent } from './types';
+/**
+ * Creates a new Navigation component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {NavigationComponent} Navigation component instance
+ */
+declare const createNavigation: (config?: NavigationConfig) => NavigationComponent;
+export default createNavigation;

package/dist/components/navigation/system/core.d.ts

@@ -0,0 +1,72 @@
+import { NavigationSystemState } from './types';
+/**
+ * Update drawer content for a specific section WITHOUT changing visibility
+ *
+ * @param state - System state
+ * @param sectionId - Section ID to display
+ * @param showDrawer - Function to show the drawer
+ * @param hideDrawer - Function to hide the drawer
+ */
+export declare const updateDrawerContent: (state: NavigationSystemState, sectionId: string, showDrawer: () => void, hideDrawer: () => void) => void;
+/**
+ * Creates the rail navigation component
+ *
+ * @param state - System state
+ * @param config - System configuration
+ * @returns Rail navigation component
+ */
+export declare const createRailNavigation: (state: NavigationSystemState, config: any) => any;
+/**
+ * Creates the drawer navigation component
+ *
+ * @param state - System state
+ * @param config - System configuration
+ * @returns Drawer navigation component
+ */
+export declare const createDrawerNavigation: (state: NavigationSystemState, config: any) => any;
+/**
+ * Shows the drawer with mobile-specific behaviors
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export declare const showDrawer: (state: NavigationSystemState, mobileConfig: any) => void;
+/**
+ * Hides the drawer with mobile-specific behaviors
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export declare const hideDrawer: (state: NavigationSystemState, mobileConfig: any) => void;
+/**
+ * Checks if drawer is visible
+ *
+ * @param state - System state
+ * @returns true if drawer is visible
+ */
+export declare const isDrawerVisible: (state: NavigationSystemState) => boolean;
+/**
+ * Checks and updates the mobile state
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param setupMobileMode - Function to set up mobile mode
+ * @param teardownMobileMode - Function to tear down mobile mode
+ * @param systemApi - Reference to the public system API
+ */
+export declare const checkMobileState: (state: NavigationSystemState, mobileConfig: any, setupMobileMode: () => void, teardownMobileMode: () => void, systemApi: any) => void;
+/**
+ * Clean up resources when the system is destroyed
+ *
+ * @param state - System state
+ */
+export declare const cleanupResources: (state: NavigationSystemState) => void;
+/**
+ * Navigate to a specific section and subsection
+ *
+ * @param state - System state
+ * @param section - Section ID
+ * @param subsection - Subsection ID (optional)
+ * @param silent - Whether to suppress change events
+ */
+export declare const navigateTo: (state: NavigationSystemState, section: string, subsection?: string, silent?: boolean) => void;

package/dist/components/navigation/system/events.d.ts

@@ -0,0 +1,35 @@
+import { NavigationSystemState } from './types';
+/**
+ * Registers rail navigation event handlers
+ *
+ * @param state - System state
+ * @param config - System configuration
+ * @param updateDrawerContent - Function to update drawer content
+ * @param showDrawer - Function to show the drawer
+ * @param hideDrawer - Function to hide the drawer
+ * @param systemApi - Reference to the public system API
+ */
+export declare const registerRailEvents: (state: NavigationSystemState, config: any, updateDrawerContent: (sectionId: string) => void, showDrawer: () => void, hideDrawer: () => void, systemApi: any) => void;
+/**
+ * Registers drawer navigation event handlers
+ *
+ * @param state - System state
+ * @param config - System configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @param systemApi - Reference to the public system API
+ */
+export declare const registerDrawerEvents: (state: NavigationSystemState, config: any, hideDrawer: () => void, systemApi: any) => void;
+/**
+ * Sets up window resize and orientation change handling
+ *
+ * @param state - System state
+ * @param checkMobileState - Function to check and update mobile state
+ */
+export declare const setupResponsiveHandling: (state: NavigationSystemState, checkMobileState: () => void) => void;
+/**
+ * Cleans up all event handlers and resources
+ *
+ * @param state - System state
+ * @param checkMobileState - Function reference to remove event handlers
+ */
+export declare const cleanupEvents: (state: NavigationSystemState, checkMobileState: () => void) => void;

package/dist/components/navigation/system/index.d.ts

@@ -0,0 +1,10 @@
+import { NavigationSystemConfig, NavigationSystem } from './types';
+/**
+ * Creates a complete navigation system with synchronized rail and drawer components
+ *
+ * @param options - System configuration options
+ * @returns Navigation system API
+ */
+export declare const createNavigationSystem: (options?: NavigationSystemConfig) => NavigationSystem;
+export default createNavigationSystem;
+export * from './types';

package/dist/components/navigation/system/mobile.d.ts

@@ -0,0 +1,52 @@
+import { NavigationSystemState } from './types';
+/**
+ * Creates and appends overlay element for mobile
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @returns Overlay element
+ */
+export declare const createOverlay: (state: NavigationSystemState, mobileConfig: any, hideDrawer: () => void) => HTMLElement;
+/**
+ * Creates and adds close button to the drawer
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @returns Close button element
+ */
+export declare const createCloseButton: (state: NavigationSystemState, mobileConfig: any, hideDrawer: () => void) => HTMLElement | null;
+/**
+ * Sets up mobile mode features
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export declare const setupMobileMode: (state: NavigationSystemState, mobileConfig: any, hideDrawer: () => void, isDrawerVisible: () => boolean) => void;
+/**
+ * Sets up outside click handling for mobile
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export declare const setupOutsideClickHandling: (state: NavigationSystemState, mobileConfig: any, hideDrawer: () => void, isDrawerVisible: () => boolean) => void;
+/**
+ * Sets up touch gestures for mobile
+ *
+ * @param state - System state
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export declare const setupTouchGestures: (state: NavigationSystemState, hideDrawer: () => void, isDrawerVisible: () => boolean, showDrawer?: () => void) => void;
+/**
+ * Tears down mobile-specific features
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export declare const teardownMobileMode: (state: NavigationSystemState, mobileConfig: any) => void;

package/dist/components/navigation/system/state.d.ts

@@ -0,0 +1,22 @@
+import { NavigationSystemConfig, NavigationSystemState } from './types';
+/**
+ * Create the initial state for the navigation system
+ *
+ * @param options - Configuration options
+ * @returns Initial system state
+ */
+export declare const createInitialState: (options?: NavigationSystemConfig) => NavigationSystemState;
+/**
+ * Create default configuration with sensible defaults
+ *
+ * @param options - User-provided configuration
+ * @returns Complete configuration with defaults
+ */
+export declare const createConfig: (options?: NavigationSystemConfig) => Required<Pick<NavigationSystemConfig, "animateDrawer" | "showLabelsOnRail" | "hideDrawerOnClick" | "expanded" | "hoverDelay" | "closeDelay" | "railOptions" | "drawerOptions">>;
+/**
+ * Create mobile configuration with defaults
+ *
+ * @param options - User-provided configuration
+ * @returns Mobile-specific configuration
+ */
+export declare const createMobileConfig: (options?: NavigationSystemConfig) => Required<Pick<NavigationSystemConfig, "breakpoint" | "lockBodyScroll" | "hideOnClickOutside" | "enableSwipeGestures" | "optimizeForTouch" | "overlayClass" | "closeButtonClass" | "bodyLockClass">>;