mtrl 0.3.8 → 0.3.9

package/dist/components/sheet/types.d.ts

@@ -0,0 +1,250 @@
+/**
+ * Sheet variants
+ */
+export declare const SHEET_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly MODAL: "modal";
+    readonly EXPANDED: "expanded";
+};
+/**
+ * Sheet positions
+ */
+export declare const SHEET_POSITIONS: {
+    readonly BOTTOM: "bottom";
+    readonly TOP: "top";
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+/**
+ * Sheet events
+ */
+export declare const SHEET_EVENTS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+    readonly DRAG_START: "dragstart";
+    readonly DRAG_END: "dragend";
+};
+/**
+ * Configuration interface for the Sheet component
+ * @category Components
+ */
+export interface SheetConfig {
+    /**
+     * Sheet variant that determines visual styling
+     * @default 'standard'
+     */
+    variant?: keyof typeof SHEET_VARIANTS | string;
+    /**
+     * Sheet position on the screen
+     * @default 'bottom'
+     */
+    position?: keyof typeof SHEET_POSITIONS | string;
+    /**
+     * Whether the sheet is initially open
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether the sheet can be dismissed by clicking the scrim
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Whether to show a drag handle
+     * @default true
+     */
+    dragHandle?: boolean;
+    /**
+     * Content for the sheet
+     * @example '<div>Sheet content</div>'
+     */
+    content?: string;
+    /**
+     * Title for the sheet
+     * @example 'Sheet Title'
+     */
+    title?: string;
+    /**
+     * Additional CSS classes to add to the sheet
+     * @example 'custom-sheet settings-panel'
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Elevation level for the sheet (1-5)
+     * @default 3
+     */
+    elevation?: number;
+    /**
+     * Maximum height of the sheet (CSS value)
+     * @example '80%'
+     */
+    maxHeight?: string;
+    /**
+     * Whether to enable gesture-based interactions
+     * @default true
+     */
+    enableGestures?: boolean;
+    /**
+     * Callback when sheet is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when sheet is closed
+     */
+    onClose?: () => void;
+}
+/**
+ * Content API interface for managing sheet content
+ * @category Components
+ */
+export interface ContentAPI {
+    /**
+     * Sets the content HTML
+     * @param html - HTML string for the content
+     * @returns The content API for chaining
+     */
+    setContent: (html: string) => ContentAPI;
+    /**
+     * Gets the current content HTML
+     * @returns HTML string for the content
+     */
+    getContent: () => string;
+    /**
+     * Gets the content DOM element
+     * @returns The content element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Title API interface for managing sheet title
+ * @category Components
+ */
+export interface TitleAPI {
+    /**
+     * Sets the title content
+     * @param text - Title text
+     * @returns The title API for chaining
+     */
+    setTitle: (text: string) => TitleAPI;
+    /**
+     * Gets the current title text
+     * @returns Sheet title text
+     */
+    getTitle: () => string;
+    /**
+     * Gets the title DOM element
+     * @returns The title element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Sheet component interface
+ * @category Components
+ */
+export interface SheetComponent {
+    /** The sheet's root DOM element */
+    element: HTMLElement;
+    /** The sheet's container DOM element */
+    container: HTMLElement;
+    /** API for managing sheet content */
+    content: ContentAPI;
+    /** API for managing sheet title */
+    title: TitleAPI;
+    /** API for managing sheet state */
+    state: {
+        /** Opens the sheet */
+        open: () => void;
+        /** Closes the sheet */
+        close: () => void;
+        /** Checks if the sheet is open */
+        isOpen: () => boolean;
+    };
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Opens the sheet
+     * @returns The sheet component for chaining
+     */
+    open: () => SheetComponent;
+    /**
+     * Closes the sheet
+     * @returns The sheet component for chaining
+     */
+    close: () => SheetComponent;
+    /**
+     * Sets the sheet content
+     * @param html - Content HTML
+     * @returns The sheet component for chaining
+     */
+    setContent: (html: string) => SheetComponent;
+    /**
+     * Gets the sheet content HTML
+     * @returns Content HTML
+     */
+    getContent: () => string;
+    /**
+     * Sets the sheet title
+     * @param text - Title text
+     * @returns The sheet component for chaining
+     */
+    setTitle: (text: string) => SheetComponent;
+    /**
+     * Gets the sheet title text
+     * @returns Title text
+     */
+    getTitle: () => string;
+    /**
+     * Enables or disables the drag handle
+     * @param enabled - Whether to show the drag handle
+     * @returns The sheet component for chaining
+     */
+    setDragHandle: (enabled: boolean) => SheetComponent;
+    /**
+     * Sets the maximum height of the sheet
+     * @param height - CSS value for max height
+     * @returns The sheet component for chaining
+     */
+    setMaxHeight: (height: string) => SheetComponent;
+    /**
+     * Destroys the sheet component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the sheet
+     * @param event - Event name ('open', 'close', etc.)
+     * @param handler - Event handler function
+     * @returns The sheet component for chaining
+     */
+    on: (event: string, handler: Function) => SheetComponent;
+    /**
+     * Removes an event listener from the sheet
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The sheet component for chaining
+     */
+    off: (event: string, handler: Function) => SheetComponent;
+    /**
+     * Adds CSS classes to the sheet element
+     * @param classes - One or more class names to add
+     * @returns The sheet component for chaining
+     */
+    addClass: (...classes: string[]) => SheetComponent;
+}

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

@@ -0,0 +1,57 @@
+import { SliderComponent } from './types';
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+    slider: {
+        setValue: (value: number, triggerEvent?: boolean) => any;
+        getValue: () => number;
+        setSecondValue: (value: number, triggerEvent?: boolean) => any;
+        getSecondValue: () => number | null;
+        setMin: (min: number) => any;
+        getMin: () => number;
+        setMax: (max: number) => any;
+        getMax: () => number;
+        setStep: (step: number) => any;
+        getStep: () => number;
+        regenerateTicks: () => any;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    appearance: {
+        setColor: (color: string) => void;
+        getColor: () => string;
+        setSize: (size: string) => void;
+        getSize: () => string;
+        showTicks: (show: boolean) => void;
+        showCurrentValue: (show: boolean) => void;
+    };
+    text: {
+        setText: (text: string) => void;
+        getText: () => string;
+    };
+    icon: {
+        setIcon: (html: string) => void;
+        getIcon: () => string;
+    };
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a slider component with a streamlined API
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Slider component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: {
+    element: HTMLElement;
+}) => SliderComponent;
+export {};

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

@@ -0,0 +1,75 @@
+import { SliderConfig } from './types';
+/**
+ * Default configuration for the Slider component
+ */
+export declare const defaultConfig: SliderConfig;
+/**
+ * Creates the base configuration for Slider component
+ * @param {SliderConfig} config - User provided configuration
+ * @returns {SliderConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SliderConfig) => SliderConfig;
+/**
+ * Generates element configuration for the Slider component
+ * @param {SliderConfig} config - Slider configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SliderConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: 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 Slider component
+ * @param {Object} comp - Component with slider features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    slider: {
+        setValue: (v: any, t: any) => any;
+        getValue: () => any;
+        setSecondValue: (v: any, t: any) => any;
+        getSecondValue: () => any;
+        setMin: (m: any) => any;
+        getMin: () => any;
+        setMax: (m: any) => any;
+        getMax: () => any;
+        setStep: (s: any) => any;
+        getStep: () => any;
+        regenerateTicks: () => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    appearance: {
+        setColor: (c: any) => any;
+        getColor: () => any;
+        setSize: (s: any) => any;
+        getSize: () => any;
+        showTicks: (s: any) => any;
+        showCurrentValue: (s: any) => any;
+    };
+    text: {
+        setText: (t: any) => any;
+        getText: () => any;
+    };
+    icon: {
+        setIcon: (h: any) => any;
+        getIcon: () => any;
+    };
+    events: {
+        on: (e: any, h: any) => any;
+        off: (e: any, h: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};

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

@@ -0,0 +1,138 @@
+/**
+ * Available slider color variants
+ * @category Components
+ */
+export declare const SLIDER_COLORS: {
+    /** Primary color variant */
+    readonly PRIMARY: "primary";
+    /** Secondary color variant */
+    readonly SECONDARY: "secondary";
+    /** Tertiary color variant */
+    readonly TERTIARY: "tertiary";
+    /** Error color variant */
+    readonly ERROR: "error";
+};
+/**
+ * Available slider size variants
+ * @category Components
+ */
+export declare const SLIDER_SIZES: {
+    /** Small size slider */
+    readonly SMALL: "small";
+    /** Medium size slider */
+    readonly MEDIUM: "medium";
+    /** Large size slider */
+    readonly LARGE: "large";
+};
+/**
+ * Available slider events
+ * @category Components
+ */
+export declare const SLIDER_EVENTS: {
+    /** Fired when slider value changes and interaction completes */
+    readonly CHANGE: "change";
+    /** Fired during dragging as value changes */
+    readonly INPUT: "input";
+    /** Fired when slider receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when slider loses focus */
+    readonly BLUR: "blur";
+    /** Fired when interaction starts */
+    readonly START: "start";
+    /** Fired when interaction ends */
+    readonly END: "end";
+};
+/**
+ * Position options for slider label and icon
+ * @category Components
+ */
+export declare const SLIDER_POSITIONS: {
+    /** Position at the start */
+    readonly START: "start";
+    /** Position at the end */
+    readonly END: "end";
+};
+/**
+ * Default slider configuration values
+ * @category Components
+ */
+export declare const SLIDER_DEFAULTS: {
+    /** Minimum value */
+    readonly MIN: 0;
+    /** Maximum value */
+    readonly MAX: 100;
+    /** Starting value */
+    readonly VALUE: 0;
+    /** Step increment size */
+    readonly STEP: 1;
+    /** Whether slider is disabled */
+    readonly DISABLED: false;
+    /** Default color variant */
+    readonly COLOR: "primary";
+    /** Default size variant */
+    readonly SIZE: "medium";
+    /** Whether to show tick marks */
+    readonly TICKS: false;
+    /** Whether to show value while dragging */
+    readonly SHOW_VALUE: true;
+    /** Whether to snap to steps during dragging */
+    readonly SNAP_TO_STEPS: true;
+    /** Whether slider is a range slider (two handles) */
+    readonly RANGE: false;
+    /** Default icon position */
+    readonly ICON_POSITION: "start";
+    /** Default label position */
+    readonly LABEL_POSITION: "start";
+};
+/**
+ * CSS class names used by the slider component
+ * @category Components
+ */
+export declare const SLIDER_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "slider";
+    /** Container for slider track and handles */
+    readonly CONTAINER: "slider__container";
+    /** Track element class */
+    readonly TRACK: "slider__track";
+    /** Filled track portion class */
+    readonly FILL: "slider__fill";
+    /** Handle element class */
+    readonly HANDLE: "slider__handle";
+    /** Second handle element class (for range slider) */
+    readonly HANDLE_SECOND: "slider__handle--second";
+    /** Tick marks container class */
+    readonly TICKS: "slider__ticks";
+    /** Individual tick mark class */
+    readonly TICK: "slider__tick";
+    /** Active/selected tick mark class */
+    readonly TICK_ACTIVE: "slider__tick--active";
+    /** Label element class */
+    readonly LABEL: "slider__label";
+    /** Value display class */
+    readonly VALUE: "slider__value";
+    /** Icon container class */
+    readonly ICON: "slider__icon";
+    /** Disabled state class */
+    readonly DISABLED: "slider--disabled";
+    /** Focused state class */
+    readonly FOCUSED: "slider--focused";
+    /** Dragging state class */
+    readonly DRAGGING: "slider--dragging";
+    /** Range slider variant class */
+    readonly RANGE: "slider--range";
+    /** Small size variant class */
+    readonly SMALL: "slider--small";
+    /** Medium size variant class */
+    readonly MEDIUM: "slider--medium";
+    /** Large size variant class */
+    readonly LARGE: "slider--large";
+    /** Primary color variant class */
+    readonly PRIMARY: "slider--primary";
+    /** Secondary color variant class */
+    readonly SECONDARY: "slider--secondary";
+    /** Tertiary color variant class */
+    readonly TERTIARY: "slider--tertiary";
+    /** Error color variant class */
+    readonly ERROR: "slider--error";
+};

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

@@ -0,0 +1,9 @@
+import { SliderConfig } from '../types';
+/**
+ * Add controller functionality to slider component
+ * Manages state, events, user interactions, and UI rendering
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer with slider controller functionality
+ */
+export declare const withController: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/features/handlers.d.ts

@@ -0,0 +1,25 @@
+import { SliderConfig } from '../types';
+/**
+ * Create consolidated event handlers for slider component (mouse, touch, keyboard)
+ *
+ * @param config Slider configuration
+ * @param state Slider state object
+ * @param uiRenderer UI renderer interface from controller
+ * @param eventHelpers Event helper methods
+ * @returns Event handlers for all slider interactions
+ */
+export declare const createHandlers: (config: SliderConfig, state: any, uiRenderer: any, eventHelpers: any) => {
+    handleHandleMouseDown: (e: any, isSecondHandle?: boolean) => void;
+    handleTrackMouseDown: (e: any) => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    handleKeyDown: (e: any, isSecondHandle?: boolean) => void;
+    handleFocus: (e: any, isSecondHandle?: boolean) => void;
+    handleBlur: (e: any, isSecondHandle?: boolean) => void;
+    setupEventListeners: () => void;
+    cleanupEventListeners: () => void;
+    showActiveBubble: (bubble: any) => void;
+    hideActiveBubble: (bubble: any, delay?: number) => void;
+    hideAllBubbles: () => void;
+    clearKeyboardFocus: () => void;
+};

package/dist/components/slider/features/index.d.ts

@@ -0,0 +1,3 @@
+export { withRange } from './range';
+export { withStates } from './states';
+export { withController } from './controller';

package/dist/components/slider/features/range.d.ts

@@ -0,0 +1,8 @@
+import { SliderConfig } from '../types';
+/**
+ * Enhances structure definition with range slider elements
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer that adds range slider to structure
+ */
+export declare const withRange: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/features/states.d.ts

@@ -0,0 +1,9 @@
+import { SliderConfig } from '../types';
+/**
+ * Add state management features to slider component
+ * Combines appearance and disabled functionality into a single feature
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer with state management features
+ */
+export declare const withStates: (config: SliderConfig) => (component: any) => any;

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

@@ -0,0 +1,3 @@
+export { default } from './slider';
+export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from './constants';
+export { type SliderConfig, type SliderComponent, type SliderEvent } from './types';

package/dist/components/slider/schema.d.ts

@@ -0,0 +1,108 @@
+import { SliderConfig } from './types';
+/**
+ * Creates the base slider structure definition
+ *
+ * @param component Component for class name generation
+ * @param config Slider configuration
+ * @returns Structure schema object
+ */
+export declare function createSliderSchema(component: any, config: SliderConfig): {
+    element: {
+        options: {
+            className: any[];
+            attrs: {
+                tabindex: string;
+                role: string;
+                'aria-disabled': string;
+            };
+        };
+        children: {
+            container: {
+                options: {
+                    className: any;
+                };
+                children: {
+                    track: {
+                        options: {
+                            className: any;
+                        };
+                        children: {
+                            activeTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        width: string;
+                                    };
+                                };
+                            };
+                            startTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        display: string;
+                                        width: string;
+                                    };
+                                };
+                            };
+                            remainingTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        width: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                    ticksContainer: {
+                        options: {
+                            className: any;
+                        };
+                    };
+                    startDot: {
+                        options: {
+                            className: any[];
+                        };
+                    };
+                    endDot: {
+                        options: {
+                            className: any[];
+                        };
+                    };
+                    handle: {
+                        options: {
+                            className: any;
+                            attrs: {
+                                role: string;
+                                'aria-valuemin': string;
+                                'aria-valuemax': string;
+                                'aria-valuenow': string;
+                                'aria-orientation': string;
+                                tabindex: string;
+                                'aria-disabled': string;
+                                'data-value': string;
+                                'data-handle-index': string;
+                            };
+                            style: {
+                                left: string;
+                            };
+                        };
+                    };
+                    valueBubble: {
+                        options: {
+                            className: any;
+                            attrs: {
+                                'aria-hidden': string;
+                                'data-handle-index': string;
+                            };
+                            text: string;
+                            style: {
+                                left: string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+};