mtrl 0.3.8 → 0.4.0

package/src/components/navigation/system/state.ts

@@ -1,77 +0,0 @@
-// src/components/navigation/system/state.ts
-
-import { NavigationSystemConfig, NavigationSystemState } from './types';
-
-/**
- * Create the initial state for the navigation system
- * 
- * @param options - Configuration options
- * @returns Initial system state
- */
-export const createInitialState = (options: NavigationSystemConfig = {}): NavigationSystemState => {
-  return {
-    rail: null,
-    drawer: null,
-    activeSection: options.activeSection || null,
-    activeSubsection: options.activeSubsection || null,
-    items: options.items || {},
-    mouseInDrawer: false,
-    mouseInRail: false,
-    hoverTimer: null,
-    closeTimer: null,
-    processingChange: false,
-    isMobile: false,
-    overlayElement: null,
-    closeButtonElement: null,
-    resizeObserver: null,
-    outsideClickHandler: null,
-    outsideClickHandlerSet: false
-  };
-};
-
-/**
- * Create default configuration with sensible defaults
- * 
- * @param options - User-provided configuration
- * @returns Complete configuration with defaults
- */
-export const createConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
-  'animateDrawer' | 'showLabelsOnRail' | 'hideDrawerOnClick' | 'expanded' | 
-  'hoverDelay' | 'closeDelay' | 'railOptions' | 'drawerOptions'>> => {
-  return {
-    // Display options
-    animateDrawer: options.animateDrawer !== false,
-    showLabelsOnRail: options.showLabelsOnRail !== false,
-    hideDrawerOnClick: options.hideDrawerOnClick || false,
-    expanded: options.expanded === true,
-    
-    // Timing options (ms)
-    hoverDelay: options.hoverDelay || 200,
-    closeDelay: options.closeDelay || 100,
-    
-    // Component options
-    railOptions: options.railOptions || {},
-    drawerOptions: options.drawerOptions || {}
-  };
-};
-
-/**
- * Create mobile configuration with defaults
- * 
- * @param options - User-provided configuration
- * @returns Mobile-specific configuration
- */
-export const createMobileConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
-  'breakpoint' | 'lockBodyScroll' | 'hideOnClickOutside' | 'enableSwipeGestures' | 
-  'optimizeForTouch' | 'overlayClass' | 'closeButtonClass' | 'bodyLockClass'>> => {
-  return {
-    breakpoint: options.breakpoint || 960,
-    lockBodyScroll: options.lockBodyScroll !== false,
-    hideOnClickOutside: options.hideOnClickOutside !== false,
-    enableSwipeGestures: options.enableSwipeGestures !== false,
-    optimizeForTouch: options.optimizeForTouch !== false,
-    overlayClass: options.overlayClass || 'mtrl-nav-overlay',
-    closeButtonClass: options.closeButtonClass || 'mtrl-nav-close-btn',
-    bodyLockClass: options.bodyLockClass || 'mtrl-body-drawer-open'
-  };
-};

package/src/components/navigation/system/types.ts

@@ -1,364 +0,0 @@
-// src/components/navigation/system/types.ts
-
-/**
- * Configuration options for the navigation system
- */
-export interface NavigationSystemConfig {
-  /**
-   * Screen width breakpoint for mobile mode (in pixels)
-   * @default 960
-   */
-  breakpoint?: number;
-  
-  /**
-   * Prevent body scrolling when mobile drawer is open
-   * @default true
-   */
-  lockBodyScroll?: boolean;
-  
-  /**
-   * Close drawer when clicking outside of it in mobile mode
-   * @default true
-   */
-  hideOnClickOutside?: boolean;
-  
-  /**
-   * Enable swipe gestures for mobile navigation
-   * @default true
-   */
-  enableSwipeGestures?: boolean;
-  
-  /**
-   * Optimize touch targets for mobile devices
-   * @default true
-   */
-  optimizeForTouch?: boolean;
-  
-  /**
-   * CSS class for the overlay element
-   * @default 'mtrl-nav-overlay'
-   */
-  overlayClass?: string;
-  
-  /**
-   * CSS class for the close button
-   * @default 'mtrl-nav-close-btn'
-   */
-  closeButtonClass?: string;
-  
-  /**
-   * CSS class applied to body when drawer is open (to prevent scrolling)
-   * @default 'mtrl-body-drawer-open'
-   */
-  bodyLockClass?: string;
-  
-  /**
-   * Display labels on rail navigation items
-   * @default true
-   */
-  showLabelsOnRail?: boolean;
-  
-  /**
-   * Hide drawer when an item is clicked
-   * @default false
-   */
-  hideDrawerOnClick?: boolean;
-  
-  /**
-   * Start with drawer expanded
-   * @default false
-   */
-  expanded?: boolean;
-  
-  /**
-   * Delay before opening drawer on hover (in ms)
-   * @default 200
-   */
-  hoverDelay?: number;
-  
-  /**
-   * Delay before closing drawer after mouseleave (in ms)
-   * @default 100
-   */
-  closeDelay?: number;
-  
-  /**
-   * ID of the initially active section
-   */
-  activeSection?: string;
-  
-  /**
-   * ID of the initially active subsection
-   */
-  activeSubsection?: string;
-  
-  /**
-   * Navigation items configuration
-   */
-  items?: Record<string, NavigationSection>;
-  
-  /**
-   * Additional options for the rail component
-   */
-  railOptions?: Record<string, any>;
-  
-  /**
-   * Additional options for the drawer component
-   */
-  drawerOptions?: Record<string, any>;
-}
-
-/**
- * Navigation section configuration
- */
-export interface NavigationSection {
-  /**
-   * Display label for the section
-   */
-  label: string;
-  
-  /**
-   * Icon for the section
-   */
-  icon?: string;
-  
-  /**
-   * Subsection items
-   */
-  items?: NavigationItem[];
-}
-
-/**
- * Navigation item configuration
- */
-export interface NavigationItem {
-  /**
-   * Unique identifier for the item
-   */
-  id: string;
-  
-  /**
-   * Display label for the item
-   */
-  label: string;
-  
-  /**
-   * Icon for the item
-   */
-  icon?: string;
-  
-  /**
-   * Whether the item is currently active
-   */
-  active?: boolean;
-  
-  /**
-   * Additional properties
-   */
-  [key: string]: any;
-}
-
-/**
- * Navigation system state interface
- */
-export interface NavigationSystemState {
-  /**
-   * Rail navigation component instance
-   */
-  rail: any;
-  
-  /**
-   * Drawer navigation component instance
-   */
-  drawer: any;
-  
-  /**
-   * ID of the active section
-   */
-  activeSection: string | null;
-  
-  /**
-   * ID of the active subsection
-   */
-  activeSubsection: string | null;
-  
-  /**
-   * Navigation items configuration
-   */
-  items: Record<string, NavigationSection>;
-  
-  /**
-   * Whether the mouse is currently inside the drawer
-   */
-  mouseInDrawer: boolean;
-  
-  /**
-   * Whether the mouse is currently inside the rail
-   */
-  mouseInRail: boolean;
-  
-  /**
-   * Timer ID for hover delay
-   */
-  hoverTimer: number | null;
-  
-  /**
-   * Timer ID for close delay
-   */
-  closeTimer: number | null;
-  
-  /**
-   * Whether the system is currently processing a change
-   */
-  processingChange: boolean;
-  
-  /**
-   * Whether the system is in mobile mode
-   */
-  isMobile: boolean;
-  
-  /**
-   * Overlay element for mobile mode
-   */
-  overlayElement: HTMLElement | null;
-  
-  /**
-   * Close button element for mobile mode
-   */
-  closeButtonElement: HTMLElement | null;
-  
-  /**
-   * ResizeObserver instance for responsive behavior
-   */
-  resizeObserver: ResizeObserver | null;
-  
-  /**
-   * Handler function for outside clicks
-   */
-  outsideClickHandler: ((event: Event) => void) | null;
-  
-  /**
-   * Whether outside click handling is set up
-   */
-  outsideClickHandlerSet: boolean;
-}
-
-/**
- * View change event data
- */
-export interface ViewChangeEvent {
-  /**
-   * Whether the system is now in mobile mode
-   */
-  mobile: boolean;
-  
-  /**
-   * Whether the system was previously in mobile mode
-   */
-  previousMobile: boolean;
-  
-  /**
-   * Current window width
-   */
-  width: number;
-}
-
-/**
- * Navigation system API interface
- */
-export interface NavigationSystem {
-  /**
-   * Initialize the navigation system
-   */
-  initialize(): NavigationSystem;
-  
-  /**
-   * Clean up resources
-   */
-  cleanup(): void;
-  
-  /**
-   * Navigate to a specific section and subsection
-   * @param section - Section ID
-   * @param subsection - Subsection ID (optional)
-   * @param silent - Whether to suppress change events
-   */
-  navigateTo(section: string, subsection?: string, silent?: boolean): void;
-  
-  /**
-   * Get the rail navigation component
-   */
-  getRail(): any;
-  
-  /**
-   * Get the drawer navigation component
-   */
-  getDrawer(): any;
-  
-  /**
-   * Get the active section ID
-   */
-  getActiveSection(): string | null;
-  
-  /**
-   * Get the active subsection ID
-   */
-  getActiveSubsection(): string | null;
-  
-  /**
-   * Show the drawer
-   */
-  showDrawer(): void;
-  
-  /**
-   * Hide the drawer
-   */
-  hideDrawer(): void;
-  
-  /**
-   * Check if the drawer is visible
-   */
-  isDrawerVisible(): boolean;
-  
-  /**
-   * Update configuration
-   * @param newConfig - New configuration options
-   */
-  configure(newConfig: Partial<NavigationSystemConfig>): NavigationSystem;
-  
-  /**
-   * Set processing change state
-   * @param isProcessing - Whether a change is being processed
-   */
-  setProcessingChange(isProcessing: boolean): void;
-  
-  /**
-   * Check if a change is being processed
-   */
-  isProcessingChange(): boolean;
-  
-  /**
-   * Check if the system is in mobile mode
-   */
-  isMobile(): boolean;
-  
-  /**
-   * Check and update mobile state
-   */
-  checkMobileState(): void;
-  
-  /**
-   * Handler for section changes
-   */
-  onSectionChange?: (sectionId: string, eventData: any) => void;
-  
-  /**
-   * Handler for item selection
-   */
-  onItemSelect?: (event: any) => void;
-  
-  /**
-   * Handler for view changes (mobile/desktop)
-   */
-  onViewChange?: (event: ViewChangeEvent) => void;
-}

package/src/components/navigation/types.ts

@@ -1,292 +0,0 @@
-// src/components/navigation/types.ts
-
-/**
- * Navigation variants following Material Design 3
- * @category Components
- */
-export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
-
-/**
- * Navigation variants enum
- * @category Components
- */
-export const NAV_VARIANTS: Record<string, NavVariant> = {
-  RAIL: 'rail',
-  DRAWER: 'drawer',
-  BAR: 'bar',
-  MODAL: 'modal',
-  STANDARD: 'standard'
-} as const;
-
-/**
- * Navigation positions
- * @category Components
- */
-export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
-
-/**
- * Navigation positions enum
- * @category Components
- */
-export const NAV_POSITIONS: Record<string, NavPosition> = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  BOTTOM: 'bottom'
-} as const;
-
-/**
- * Navigation behaviors
- * @category Components
- */
-export type NavBehavior = 'fixed' | 'dismissible' | 'modal';
-
-/**
- * Navigation behaviors enum
- * @category Components
- */
-export const NAV_BEHAVIORS: Record<string, NavBehavior> = {
-  FIXED: 'fixed',
-  DISMISSIBLE: 'dismissible',
-  MODAL: 'modal'
-} as const;
-
-/**
- * Navigation item state
- * @category Components
- */
-export type NavItemState = 'active' | 'disabled' | 'expanded' | 'collapsed' | 'hovered' | 'focused' | 'pressed';
-
-/**
- * Navigation element class names
- * Used internally to maintain consistent class names
- * @internal
- */
-export const NavClass = {
-  ITEM: 'nav-item',
-  ITEM_CONTAINER: 'nav-item-container',
-  ICON: 'nav-item-icon',
-  LABEL: 'nav-item-label',
-  BADGE: 'nav-item-badge',
-  DIVIDER: 'nav-divider',
-  SCRIM: 'nav-scrim',
-  GROUP: 'nav-group',
-  GROUP_TITLE: 'nav-group-title',
-  SUBTITLE: 'nav-subtitle',
-  NESTED_CONTAINER: 'nav-nested-container',
-  NESTED_ITEM: 'nav-nested-item',
-  EXPAND_ICON: 'nav-expand-icon'
-} as const;
-
-/**
- * Navigation item configuration
- */
-export interface NavItemConfig {
-  /** Unique identifier for the item */
-  id: string;
-  
-  /** Icon HTML content */
-  icon?: string;
-  
-  /** Text label */
-  label?: string;
-  
-  /** Badge text */
-  badge?: string;
-  
-  /** Whether the item is disabled */
-  disabled?: boolean;
-  
-  /** Whether the item is active */
-  active?: boolean;
-  
-  /** Whether nested items are expanded */
-  expanded?: boolean;
-  
-  /** Subtitle text (for drawer items) */
-  subtitle?: string;
-  
-  /** Group ID this item belongs to */
-  groupId?: string;
-  
-  /** Nested navigation items */
-  items?: NavItemConfig[];
-}
-
-/**
- * Navigation group configuration
- */
-export interface NavGroupConfig {
-  /** Unique identifier for the group */
-  id: string;
-  
-  /** Group title text */
-  title: string;
-  
-  /** Whether the group is expanded */
-  expanded?: boolean;
-}
-
-/**
- * Navigation item data
- */
-export interface NavItemData {
-  /** The item's DOM element */
-  element: HTMLElement;
-  
-  /** Item configuration */
-  config: NavItemConfig;
-}
-
-/**
- * Navigation change event data
- */
-export interface NavChangeEvent {
-  /** ID of the selected item */
-  id: string;
-  
-  /** Selected item data */
-  item: NavItemData;
-  
-  /** Previously selected item data */
-  previousItem?: NavItemData | null;
-  
-  /** Path of parent item IDs */
-  path: string[];
-}
-
-/**
- * Configuration interface for the Navigation component
- */
-export interface NavigationConfig {
-  /** Navigation variant */
-  variant?: NavVariant | string;
-  
-  /** Navigation position */
-  position?: NavPosition | string;
-  
-  /** Navigation behavior */
-  behavior?: NavBehavior | string;
-  
-  /** Navigation items */
-  items?: NavItemConfig[];
-  
-  /** Navigation groups */
-  groups?: NavGroupConfig[];
-  
-  /** Whether the navigation is disabled */
-  disabled?: boolean;
-  
-  /** Whether the navigation is expanded (for drawer) */
-  expanded?: boolean;
-  
-  /** Whether to show item labels */
-  showLabels?: boolean;
-  
-  /** Whether to enable background scrim (for modal drawer) */
-  scrimEnabled?: boolean;
-  
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Accessibility label */
-  ariaLabel?: string;
-  
-  /** Component prefix for class names */
-  prefix?: string;
-  
-  /** Component name */
-  componentName?: string;
-}
-
-/**
- * Navigation component interface
- */
-export interface NavigationComponent {
-  /** The navigation's DOM element */
-  element: HTMLElement;
-  
-  /** Map of navigation items */
-  items: Map<string, NavItemData>;
-  
-  /** Adds a navigation item */
-  addItem: (config: NavItemConfig) => NavigationComponent;
-  
-  /** Removes a navigation item */
-  removeItem: (id: string) => NavigationComponent;
-  
-  /** Gets a navigation item by ID */
-  getItem: (id: string) => NavItemData | undefined;
-  
-  /** Gets all navigation items */
-  getAllItems: () => NavItemData[];
-  
-  /** Gets the active navigation item */
-  getActive: () => NavItemData | null;
-  
-  /** Gets the path to an item (parent IDs) */
-  getItemPath: (id: string) => string[];
-  
-  /** Sets the active navigation item */
-  setActive: (id: string) => NavigationComponent;
-  
-  /** Enables the navigation */
-  enable: () => NavigationComponent;
-  
-  /** Disables the navigation */
-  disable: () => NavigationComponent;
-  
-  /** Expands the navigation (for drawer) */
-  expand: () => NavigationComponent;
-  
-  /** Collapses the navigation (for drawer) */
-  collapse: () => NavigationComponent;
-  
-  /** Checks if the navigation is expanded */
-  isExpanded: () => boolean;
-  
-  /** Toggles the navigation expansion state */
-  toggle: () => NavigationComponent;
-  
-  /** Adds an event listener */
-  on: (event: string, handler: Function) => NavigationComponent;
-  
-  /** Removes an event listener */
-  off: (event: string, handler: Function) => NavigationComponent;
-  
-  /** Destroys the navigation component */
-  destroy: () => void;
-}
-
-/**
- * Base component interface
- */
-export interface BaseComponent {
-  element: HTMLElement;
-  prefix?: string;
-  items?: Map<string, NavItemData>;
-  emit?: (event: string, data: any) => void;
-  on?: (event: string, handler: Function) => any;
-  off?: (event: string, handler: Function) => any;
-  lifecycle?: {
-    destroy: () => void;
-  };
-  disabled?: {
-    enable: () => any;
-    disable: () => any;
-  };
-  [key: string]: any;
-}
-
-/**
- * API options interface
- */
-export interface ApiOptions {
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-  };
-  lifecycle: {
-    destroy: () => void;
-  };
-}