mtrl 0.3.8 → 0.4.0

package/dist/components/chips/features/chip-items.d.ts

@@ -0,0 +1,8 @@
+import { ChipsConfig } from '../types';
+/**
+ * Adds chip item management to chips component
+ *
+ * @param config Chips configuration
+ * @returns Component enhancer that adds chip items functionality
+ */
+export declare const withChipItems: (config: ChipsConfig) => (component: any) => any;

package/dist/components/chips/features/container.d.ts

@@ -0,0 +1,8 @@
+import { ChipsConfig } from '../types';
+/**
+ * Adds container layout features to chips component
+ *
+ * @param config Chips configuration
+ * @returns Component enhancer that adds container layout functionality
+ */
+export declare const withContainer: (config: ChipsConfig) => (component: any) => any;

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

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

package/{src/components/chips/features/index.ts → dist/components/chips/features/index.d.ts}

@@ -1,5 +1,4 @@
-// src/components/chips/features/index.ts
 export { withContainer } from './container';
 export { withChipItems } from './chip-items';
 export { withController } from './controller';
-export { withLabel } from './label';
+export { withChipsLabel } from './label';

package/dist/components/chips/features/label.d.ts

@@ -0,0 +1,8 @@
+import { ChipsConfig } from '../types';
+/**
+ * Adds label functionality to chips component
+ *
+ * @param config Chips configuration
+ * @returns Component enhancer that adds label functionality
+ */
+export declare const withChipsLabel: (config: ChipsConfig) => (component: any) => any;

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

@@ -0,0 +1,4 @@
+export { default as createChip } from './chip';
+export { default as createChips } from './chips';
+export * from './constants';
+export type { ChipConfig, ChipComponent, ChipVariant, ChipsConfig, ChipsComponent } from './types';

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

@@ -0,0 +1,34 @@
+import { ChipsConfig } from './types';
+/**
+ * Creates the base chips structure definition
+ *
+ * @param component Component for class name generation
+ * @param config Chips configuration
+ * @returns Structure schema object
+ */
+export declare function createChipsSchema(component: any, config: ChipsConfig): {
+    element: {
+        options: {
+            className: any[];
+            attributes: {
+                tabindex: string;
+                role: string;
+                'aria-multiselectable': string;
+            };
+        };
+        children: {
+            chipContainer: {
+                options: {
+                    className: any;
+                };
+            };
+            label?: {
+                options: {
+                    tag: string;
+                    className: any;
+                    text: string;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,398 @@
+/**
+ * Chip variant types
+ * @category Components
+ */
+export type ChipVariant = 'filled' | 'outlined' | 'elevated' | 'assist' | 'filter' | 'input' | 'suggestion';
+/**
+ * Available chip event types
+ */
+export declare const CHIP_EVENTS: {
+    readonly CHANGE: "change";
+    readonly SELECT: "select";
+    readonly DESELECT: "deselect";
+    readonly REMOVE: "remove";
+};
+/**
+ * Available chips event types
+ */
+export declare const CHIPS_EVENTS: {
+    readonly CHANGE: "change";
+    readonly ADD: "add";
+    readonly REMOVE: "remove";
+};
+/**
+ * Configuration interface for the Chip component
+ * @category Components
+ */
+export interface ChipConfig {
+    /**
+     * Chip variant that determines visual styling
+     * @default 'filled'
+     */
+    variant?: ChipVariant | string;
+    /**
+     * Whether the chip is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the chip is initially selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Initial chip text content
+     * @example 'Category'
+     */
+    text?: string;
+    /**
+     * Initial chip icon HTML content (alias for leadingIcon)
+     * @example '<svg>...</svg>'
+     */
+    icon?: string;
+    /**
+     * Leading icon HTML content
+     * @example '<svg>...</svg>'
+     */
+    leadingIcon?: string;
+    /**
+     * Trailing icon HTML content
+     * @example '<svg>...</svg>'
+     */
+    trailingIcon?: string;
+    /**
+     * Additional CSS classes to add to the chip
+     * @example 'filter-tag category-item'
+     */
+    class?: string;
+    /**
+     * Chip value attribute for identification
+     */
+    value?: string;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Ripple effect configuration
+     */
+    rippleConfig?: {
+        /** Duration of the ripple animation in milliseconds */
+        duration?: number;
+        /** Timing function for the ripple animation */
+        timing?: string;
+        /** Opacity values for ripple start and end [start, end] */
+        opacity?: [string, string];
+    };
+    /**
+     * Flag to make any chip variant selectable
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Function called when the trailing icon is clicked
+     */
+    onTrailingIconClick?: (chip: ChipComponent) => void;
+    /**
+     * Function called when the chip is selected
+     */
+    onSelect?: (chip: ChipComponent) => void;
+    /**
+     * Function called when the chip selection changes
+     * @param {boolean} selected - Whether the chip is selected
+     * @param {ChipComponent} chip - The chip component
+     */
+    onChange?: (selected: boolean, chip: ChipComponent) => void;
+}
+/**
+ * Configuration interface for the Chips component
+ * @category Components
+ */
+export interface ChipsConfig {
+    /**
+     * Array of chip configurations to initialize
+     * @default []
+     */
+    chips?: ChipConfig[];
+    /**
+     * Whether the chip set is horizontally scrollable
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Whether the chip set is vertically stacked
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * CSS selector for filtering behavior
+     */
+    selector?: string | null;
+    /**
+     * Whether multiple chips can be selected simultaneously
+     * @default false
+     */
+    multiSelect?: boolean;
+    /**
+     * Callback function when chip selection changes
+     */
+    onChange?: (selectedValues: (string | null)[], changedValue: string | null) => void;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Label text for the chips container
+     */
+    label?: string;
+    /**
+     * Position of the label (start or end)
+     * @default 'start'
+     */
+    labelPosition?: 'start' | 'end';
+    /**
+     * Schema definition for the component structure
+     * @internal
+     */
+    schema?: any;
+    /**
+     * Event handlers for component events
+     */
+    on?: {
+        [key: string]: Function;
+    };
+}
+/**
+ * Chip component interface
+ * @category Components
+ */
+export interface ChipComponent {
+    /** The chip's DOM element */
+    element: HTMLElement;
+    /**
+     * Gets the chip's value attribute
+     * @returns Chip value
+     */
+    getValue: () => string | null;
+    /**
+     * Sets the chip's value attribute
+     * @param value - New value
+     * @returns The chip component for chaining
+     */
+    setValue: (value: string) => ChipComponent;
+    /**
+     * Enables the chip (removes disabled attribute)
+     * @returns The chip component for chaining
+     */
+    enable: () => ChipComponent;
+    /**
+     * Disables the chip (adds disabled attribute)
+     * @returns The chip component for chaining
+     */
+    disable: () => ChipComponent;
+    /**
+     * Checks if the chip is disabled
+     * @returns True if the chip is disabled
+     */
+    isDisabled: () => boolean;
+    /**
+     * Sets the chip's text content
+     * @param content - Text content
+     * @returns The chip component for chaining
+     */
+    setText: (content: string) => ChipComponent;
+    /**
+     * Gets the chip's text content
+     * @returns Chip text content
+     */
+    getText: () => string;
+    /**
+     * Sets the chip's icon (alias for setLeadingIcon)
+     * @param icon - Icon HTML content
+     * @returns The chip component for chaining
+     */
+    setIcon: (icon: string) => ChipComponent;
+    /**
+     * Gets the chip's icon HTML content
+     * @returns Icon HTML
+     */
+    getIcon: () => string;
+    /**
+     * Sets the chip's leading icon
+     * @param icon - Icon HTML content
+     * @returns The chip component for chaining
+     */
+    setLeadingIcon: (icon: string) => ChipComponent;
+    /**
+     * Sets the chip's trailing icon
+     * @param icon - Icon HTML content
+     * @param onClick - Optional click handler for the trailing icon
+     * @returns The chip component for chaining
+     */
+    setTrailingIcon: (icon: string, onClick?: (chip: ChipComponent) => void) => ChipComponent;
+    /**
+     * Checks if the chip is selected
+     * @returns True if the chip is selected
+     */
+    isSelected: () => boolean;
+    /**
+     * Sets the chip's selected state
+     * @param selected - Whether the chip should be selected
+     * @returns The chip component for chaining
+     */
+    setSelected: (selected: boolean) => ChipComponent;
+    /**
+     * Toggles the chip's selected state
+     * @returns The chip component for chaining
+     */
+    toggleSelected: () => ChipComponent;
+    /**
+     * Destroys the chip component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the chip
+     * @param event - Event name ('click', 'focus', etc.)
+     * @param handler - Event handler function
+     * @returns The chip component for chaining
+     */
+    on: (event: string, handler: Function) => ChipComponent;
+    /**
+     * Removes an event listener from the chip
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The chip component for chaining
+     */
+    off: (event: string, handler: Function) => ChipComponent;
+    /**
+     * Adds CSS classes to the chip element
+     * @param classes - One or more class names to add
+     * @returns The chip component for chaining
+     */
+    addClass: (...classes: string[]) => ChipComponent;
+}
+/**
+ * Chips component interface
+ * @category Components
+ */
+export interface ChipsComponent {
+    /** The chips container's DOM element */
+    element: HTMLElement;
+    /**
+     * Adds a new chip to the chips container
+     * @param chipConfig - Configuration for the chip
+     * @returns The chips instance for chaining
+     */
+    addChip: (chipConfig: ChipConfig) => ChipsComponent;
+    /**
+     * Removes a chip from the chips container
+     * @param chipOrIndex - Chip instance or index to remove
+     * @returns The chips instance for chaining
+     */
+    removeChip: (chipOrIndex: ChipComponent | number) => ChipsComponent;
+    /**
+     * Gets all chip instances in the set
+     * @returns Array of chip instances
+     */
+    getChips: () => ChipComponent[];
+    /**
+     * Gets currently selected chips
+     * @returns Array of selected chip instances
+     */
+    getSelectedChips: () => ChipComponent[];
+    /**
+     * Gets the values of selected chips
+     * @returns Array of selected chip values
+     */
+    getSelectedValues: () => (string | null)[];
+    /**
+     * Selects chips by their values
+     * @param values - Value or array of values to select
+     * @param triggerEvent - Whether to trigger change event (default: true)
+     * @returns The chips instance for chaining
+     */
+    selectByValue: (values: string | string[], triggerEvent?: boolean) => ChipsComponent;
+    /**
+     * Clears all selections
+     * @returns The chips instance for chaining
+     */
+    clearSelection: () => ChipsComponent;
+    /**
+     * Sets the scrollable state of the chips container
+     * @param isScrollable - Whether the chips container should be scrollable
+     * @returns The chips instance for chaining
+     */
+    setScrollable: (isScrollable: boolean) => ChipsComponent;
+    /**
+     * Sets the vertical layout state
+     * @param isVertical - Whether the chips container should be vertically stacked
+     * @returns The chips instance for chaining
+     */
+    setVertical: (isVertical: boolean) => ChipsComponent;
+    /**
+     * Sets the label text
+     * @param text - Label text
+     * @returns The chips instance for chaining
+     */
+    setLabel: (text: string) => ChipsComponent;
+    /**
+     * Gets the label text
+     * @returns Label text
+     */
+    getLabel: () => string;
+    /**
+     * Sets the label position
+     * @param position - Label position ('start' or 'end')
+     * @returns The chips instance for chaining
+     */
+    setLabelPosition: (position: 'start' | 'end') => ChipsComponent;
+    /**
+     * Gets the label position
+     * @returns Label position
+     */
+    getLabelPosition: () => string;
+    /**
+     * Scrolls to a specific chip
+     * @param chipOrIndex - Chip instance or index to scroll to
+     * @returns The chips instance for chaining
+     */
+    scrollToChip: (chipOrIndex: ChipComponent | number) => ChipsComponent;
+    /**
+     * Enables keyboard navigation between chips in the set
+     * @returns The chips instance for chaining
+     */
+    enableKeyboardNavigation: () => ChipsComponent;
+    /**
+     * Destroys the chips container and all contained chips
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the chips container
+     * @param event - Event name ('change', etc.)
+     * @param handler - Event handler function
+     * @returns The chips instance for chaining
+     */
+    on: (event: string, handler: Function) => ChipsComponent;
+    /**
+     * Removes an event listener from the chips container
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The chips instance for chaining
+     */
+    off: (event: string, handler: Function) => ChipsComponent;
+}

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

@@ -0,0 +1,9 @@
+import { DatePickerComponent, ApiOptions } from './types';
+/**
+ * Enhances a datepicker component with API methods
+ * @param {object} state - Current state of the datepicker
+ * @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 DatePicker component
+ */
+export declare const withAPI: (state: any, { disabled, lifecycle, events }: ApiOptions) => (component: any) => DatePickerComponent;

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

@@ -0,0 +1,79 @@
+import { DatePickerConfig } from './types';
+/**
+ * Default configuration for the DatePicker component
+ */
+export declare const defaultConfig: DatePickerConfig;
+/**
+ * Creates the base configuration for DatePicker component
+ * @param {DatePickerConfig} config - User provided configuration
+ * @returns {DatePickerConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: DatePickerConfig) => DatePickerConfig;
+/**
+ * Generates element configuration for the DatePicker container
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getContainerConfig: (config: DatePickerConfig) => {
+    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;
+};
+/**
+ * Generates element configuration for the input field
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for input field
+ */
+export declare const getInputConfig: (config: DatePickerConfig) => {
+    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;
+};
+/**
+ * Generates element configuration for the calendar container
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for calendar container
+ */
+export declare const getCalendarConfig: (config: DatePickerConfig) => {
+    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 DatePicker component
+ * @param {Object} comp - Component with features like disabled and lifecycle
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+    events: {
+        on: any;
+        off: any;
+        emit: any;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,97 @@
+/**
+ * DatePicker variants
+ */
+export declare const DATEPICKER_VARIANTS: {
+    /** Docked datepicker appears inline on the page */
+    readonly DOCKED: "docked";
+    /** Modal datepicker appears in a dialog overlay */
+    readonly MODAL: "modal";
+    /** Modal with input field for entering dates */
+    readonly MODAL_INPUT: "modal-input";
+};
+/**
+ * DatePicker views
+ */
+export declare const DATEPICKER_VIEWS: {
+    /** Daily calendar grid view */
+    readonly DAY: "day";
+    /** Month selection view */
+    readonly MONTH: "month";
+    /** Year selection view */
+    readonly YEAR: "year";
+};
+/**
+ * DatePicker selection modes
+ */
+export declare const DATEPICKER_SELECTION_MODES: {
+    /** Select a single date */
+    readonly SINGLE: "single";
+    /** Select a date range */
+    readonly RANGE: "range";
+};
+/**
+ * Day names for the calendar
+ */
+export declare const DAY_NAMES: string[];
+/**
+ * Month names for the calendar
+ */
+export declare const MONTH_NAMES: string[];
+/**
+ * Month names abbreviated
+ */
+export declare const MONTH_NAMES_SHORT: string[];
+/**
+ * Default format for displaying dates
+ */
+export declare const DEFAULT_DATE_FORMAT = "MM/DD/YYYY";
+/**
+ * DatePicker CSS class names
+ */
+export declare const DATEPICKER_CLASSES: {
+    /** Root container class */
+    readonly ROOT: "datepicker";
+    /** Class for the input field */
+    readonly INPUT: "datepicker-input";
+    /** Class for the calendar container */
+    readonly CALENDAR: "datepicker-calendar";
+    /** Class for the header section */
+    readonly HEADER: "datepicker-header";
+    /** Class for the month/year navigation */
+    readonly NAVIGATION: "datepicker-navigation";
+    /** Class for the day names row */
+    readonly WEEKDAYS: "datepicker-weekdays";
+    /** Class for the days grid */
+    readonly DAYS: "datepicker-days";
+    /** Class for individual day cells */
+    readonly DAY: "datepicker-day";
+    /** Class for today's date */
+    readonly TODAY: "today";
+    /** Class for selected date */
+    readonly SELECTED: "selected";
+    /** Class for disabled dates */
+    readonly DISABLED: "disabled";
+    /** Class for dates outside the current month */
+    readonly OUTSIDE_MONTH: "outside-month";
+    /** Class for first date in a range */
+    readonly RANGE_START: "range-start";
+    /** Class for last date in a range */
+    readonly RANGE_END: "range-end";
+    /** Class for dates between start and end in a range */
+    readonly RANGE_MIDDLE: "range-middle";
+};
+/**
+ * DatePicker events
+ */
+export declare const DATEPICKER_EVENTS: {
+    /** Fired when the selected date changes */
+    readonly CHANGE: "change";
+    /** Fired when the datepicker opens */
+    readonly OPEN: "open";
+    /** Fired when the datepicker closes */
+    readonly CLOSE: "close";
+    /** Fired when a day is clicked/focused */
+    readonly SELECT: "select";
+    /** Fired when the view changes (day/month/year) */
+    readonly VIEW_CHANGE: "viewChange";
+};

package/dist/components/datepicker/datepicker.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default } from './datepicker';
+export type { DatePickerConfig, DatePickerComponent, DatePickerVariant, DatePickerView, DatePickerSelectionMode } from './types';
+export { DEFAULT_DATE_FORMAT } from './types';