mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,305 @@
+/**
+ * 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;
+    /**
+     * Show drawer transition animations
+     * @default true
+     */
+    animateDrawer?: boolean;
+    /**
+     * 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/dist/components/navigation/types.d.ts

@@ -0,0 +1,216 @@
+/**
+ * Navigation variants following Material Design 3
+ * @category Components
+ */
+export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
+/**
+ * Navigation variants enum
+ * @category Components
+ */
+export declare const NAV_VARIANTS: Record<string, NavVariant>;
+/**
+ * Navigation positions
+ * @category Components
+ */
+export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Navigation positions enum
+ * @category Components
+ */
+export declare const NAV_POSITIONS: Record<string, NavPosition>;
+/**
+ * Navigation behaviors
+ * @category Components
+ */
+export type NavBehavior = 'fixed' | 'dismissible' | 'modal';
+/**
+ * Navigation behaviors enum
+ * @category Components
+ */
+export declare const NAV_BEHAVIORS: Record<string, NavBehavior>;
+/**
+ * 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 declare const NavClass: {
+    readonly ITEM: "nav-item";
+    readonly ITEM_CONTAINER: "nav-item-container";
+    readonly ICON: "nav-item-icon";
+    readonly LABEL: "nav-item-label";
+    readonly BADGE: "nav-item-badge";
+    readonly DIVIDER: "nav-divider";
+    readonly SCRIM: "nav-scrim";
+    readonly GROUP: "nav-group";
+    readonly GROUP_TITLE: "nav-group-title";
+    readonly SUBTITLE: "nav-subtitle";
+    readonly NESTED_CONTAINER: "nav-nested-container";
+    readonly NESTED_ITEM: "nav-nested-item";
+    readonly EXPAND_ICON: "nav-expand-icon";
+};
+/**
+ * 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;
+    };
+}

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

@@ -0,0 +1,46 @@
+import { ProgressComponent, ProgressThickness, ProgressShape } from './types';
+/**
+ * API configuration options for canvas-based progress component
+ */
+interface ApiOptions {
+    value: {
+        getValue: () => number;
+        setValue: (value: number) => void;
+        getMax: () => number;
+    };
+    buffer: {
+        getBuffer: () => number;
+        setBuffer: (value: number) => void;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    label: {
+        show?: () => void;
+        hide?: () => void;
+        format?: (formatter: (value: number, max: number) => string) => void;
+        formatter?: (value: number, max: number) => string;
+    };
+    thickness?: {
+        getThickness: () => number;
+        setThickness: (thickness: ProgressThickness) => void;
+    };
+    shape?: {
+        getShape: () => ProgressShape;
+        setShape: (shape: ProgressShape) => void;
+    };
+    state: {
+        setIndeterminate: (indeterminate: boolean) => void;
+        isIndeterminate: () => boolean;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a canvas-based progress component with a streamlined API
+ */
+export declare const withAPI: (options: ApiOptions) => (comp: any) => ProgressComponent;
+export {};

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

@@ -0,0 +1,72 @@
+import { ProgressConfig, ProgressThickness, ProgressShape } from './types';
+/**
+ * Default configuration for the Progress component
+ */
+export declare const defaultConfig: ProgressConfig;
+/**
+ * Creates the base configuration for the Progress component
+ * with all defaults applied (no complex schema needed for canvas)
+ *
+ * @param config User-provided configuration
+ * @returns Complete configuration with defaults
+ */
+export declare const createBaseConfig: (config?: ProgressConfig) => ProgressConfig;
+/**
+ * Generates element configuration for the Progress container
+ * Canvas will be added by withCanvas feature
+ *
+ * @param {ProgressConfig} config - Progress configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: ProgressConfig) => {
+    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 Progress component
+ */
+export declare const getApiConfig: (comp: any, state: any) => {
+    value: {
+        getValue: () => any;
+        setValue: (value: number) => void;
+        getMax: () => any;
+    };
+    buffer: {
+        getBuffer: () => any;
+        setBuffer: (value: number) => void;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    label: {
+        show: () => void;
+        hide: () => void;
+        format: (formatter: any) => void;
+        formatter: any;
+    };
+    thickness: {
+        getThickness: () => number;
+        setThickness: (thickness: ProgressThickness) => void;
+    };
+    shape: {
+        getShape: () => any;
+        setShape: (shape: ProgressShape) => void;
+    };
+    state: {
+        setIndeterminate: (indeterminate: boolean) => void;
+        isIndeterminate: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;