mtrl 0.3.7 → 0.3.9

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

@@ -0,0 +1,284 @@
+/**
+ * Time picker display type
+ * @enum {string}
+ */
+export declare enum TIME_PICKER_TYPE {
+    /** Clock dial-based time picker */
+    DIAL = "dial",
+    /** Text input-based time picker */
+    INPUT = "input"
+}
+/**
+ * Time picker orientation
+ * @enum {string}
+ */
+export declare enum TIME_PICKER_ORIENTATION {
+    /** Vertical layout (default on mobile) */
+    VERTICAL = "vertical",
+    /** Horizontal layout */
+    HORIZONTAL = "horizontal"
+}
+/**
+ * Time format (12-hour or 24-hour)
+ * @enum {string}
+ */
+export declare enum TIME_FORMAT {
+    /** 12-hour format with AM/PM */
+    AMPM = "12h",
+    /** 24-hour format */
+    MILITARY = "24h"
+}
+/**
+ * Period of day for 12-hour format
+ * @enum {string}
+ */
+export declare enum TIME_PERIOD {
+    /** Morning */
+    AM = "AM",
+    /** Afternoon/Evening */
+    PM = "PM"
+}
+/**
+ * Configuration interface for the TimePicker component
+ * @category Components
+ */
+export interface TimePickerConfig {
+    /**
+     * Initial time value in 24-hour format (HH:MM)
+     * @example '14:30'
+     */
+    value?: string;
+    /**
+     * Type of time picker to display
+     * @default TIME_PICKER_TYPE.DIAL
+     */
+    type?: TIME_PICKER_TYPE;
+    /**
+     * Time format to use (12h or 24h)
+     * @default TIME_FORMAT.AMPM
+     */
+    format?: TIME_FORMAT;
+    /**
+     * Layout orientation for the time picker
+     * @default TIME_PICKER_ORIENTATION.VERTICAL
+     */
+    orientation?: TIME_PICKER_ORIENTATION;
+    /**
+     * Title text for the time picker
+     * @example 'Select departure time'
+     */
+    title?: string;
+    /**
+     * Whether to show seconds selector
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * Additional CSS classes to add to the time picker
+     * @example 'custom-picker dark-theme'
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Whether to close the picker when time is selected
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Minimum selectable time in 24-hour format (HH:MM)
+     * @example '09:00'
+     */
+    minTime?: string;
+    /**
+     * Maximum selectable time in 24-hour format (HH:MM)
+     * @example '18:00'
+     */
+    maxTime?: string;
+    /**
+     * Step interval for minute selection in minutes
+     * @default 1
+     */
+    minuteStep?: number;
+    /**
+     * Step interval for second selection in seconds
+     * @default 1
+     */
+    secondStep?: number;
+    /**
+     * Custom text for cancel button
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * Custom text for confirm button
+     * @default 'OK'
+     */
+    confirmText?: string;
+    /**
+     * Whether the time picker is initially visible (for inline mode)
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * CSS selector or HTMLElement to append the time picker to
+     * @default document.body
+     */
+    container?: string | HTMLElement;
+    /**
+     * Custom icon for the clock button
+     */
+    clockIcon?: string;
+    /**
+     * Custom icon for the keyboard button
+     */
+    keyboardIcon?: string;
+    /**
+     * Callback when time is changed
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Callback when time picker is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when time picker is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when time is confirmed
+     */
+    onConfirm?: (time: string) => void;
+    /**
+     * Callback when time picker is canceled
+     */
+    onCancel?: () => void;
+}
+/**
+ * Time value object
+ * @category Components
+ */
+export interface TimeValue {
+    /** Hours (0-23) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Seconds (0-59), optional */
+    seconds?: number;
+    /** AM/PM for 12-hour format */
+    period?: TIME_PERIOD;
+}
+/**
+ * TimePicker component interface
+ * @category Components
+ */
+export interface TimePickerComponent {
+    /** The time picker's container DOM element */
+    element: HTMLElement;
+    /** Modal container element */
+    modalElement: HTMLElement;
+    /** Dialog container element */
+    dialogElement: HTMLElement;
+    /** Whether the time picker is currently open */
+    isOpen: boolean;
+    /**
+     * Opens the time picker
+     * @returns The time picker component for chaining
+     */
+    open: () => TimePickerComponent;
+    /**
+     * Closes the time picker
+     * @returns The time picker component for chaining
+     */
+    close: () => TimePickerComponent;
+    /**
+     * Toggles the time picker open/closed state
+     * @returns The time picker component for chaining
+     */
+    toggle: () => TimePickerComponent;
+    /**
+     * Gets the current time value
+     * @returns Current time string in 24-hour format (HH:MM or HH:MM:SS)
+     */
+    getValue: () => string;
+    /**
+     * Gets the current time as a TimeValue object
+     * @returns Current time object with hours, minutes, seconds, and period
+     */
+    getTimeObject: () => TimeValue;
+    /**
+     * Sets the time value
+     * @param time - Time string in 24-hour format (HH:MM or HH:MM:SS)
+     * @returns The time picker component for chaining
+     */
+    setValue: (time: string) => TimePickerComponent;
+    /**
+     * Sets the time picker type (dial or input)
+     * @param type - Time picker type
+     * @returns The time picker component for chaining
+     */
+    setType: (type: TIME_PICKER_TYPE) => TimePickerComponent;
+    /**
+     * Gets the current time picker type
+     * @returns Current time picker type
+     */
+    getType: () => TIME_PICKER_TYPE;
+    /**
+     * Sets the time format (12h or 24h)
+     * @param format - Time format
+     * @returns The time picker component for chaining
+     */
+    setFormat: (format: TIME_FORMAT) => TimePickerComponent;
+    /**
+     * Gets the current time format
+     * @returns Current time format
+     */
+    getFormat: () => TIME_FORMAT;
+    /**
+     * Sets the time picker orientation
+     * @param orientation - Time picker orientation
+     * @returns The time picker component for chaining
+     */
+    setOrientation: (orientation: TIME_PICKER_ORIENTATION) => TimePickerComponent;
+    /**
+     * Gets the current time picker orientation
+     * @returns Current time picker orientation
+     */
+    getOrientation: () => TIME_PICKER_ORIENTATION;
+    /**
+     * Sets the time picker title
+     * @param title - Title text
+     * @returns The time picker component for chaining
+     */
+    setTitle: (title: string) => TimePickerComponent;
+    /**
+     * Gets the current time picker title
+     * @returns Current title text
+     */
+    getTitle: () => string;
+    /**
+     * Destroys the time picker component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the time picker
+     * @param event - Event name ('change', 'open', 'close', etc.)
+     * @param handler - Event handler function
+     * @returns The time picker component for chaining
+     */
+    on: (event: string, handler: Function) => TimePickerComponent;
+    /**
+     * Removes an event listener from the time picker
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The time picker component for chaining
+     */
+    off: (event: string, handler: Function) => TimePickerComponent;
+}

package/dist/components/timepicker/utils.d.ts

@@ -0,0 +1,74 @@
+import { TimeValue, TIME_PERIOD, TIME_FORMAT } from './types';
+/**
+ * Pads a number with leading zeros to ensure two-digit format
+ * @param {number} num - Number to pad
+ * @returns {string} Padded number string
+ */
+export declare const padZero: (num: number) => string;
+/**
+ * Converts a time string to a TimeValue object
+ * @param {string} timeString - Time string in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {TIME_FORMAT} format - Time format (12h or 24h)
+ * @returns {TimeValue} Parsed time value
+ */
+export declare const parseTime: (timeString: string, format: TIME_FORMAT) => TimeValue;
+/**
+ * Formats a TimeValue object as a time string
+ * @param {TimeValue} timeValue - Time value to format
+ * @param {boolean} use24HourFormat - Whether to use 24-hour format
+ * @returns {string} Formatted time string
+ */
+export declare const formatTime: (timeValue: TimeValue, use24HourFormat: boolean) => string;
+/**
+ * Converts 12-hour format to 24-hour format
+ * @param {number} hours - Hours in 12-hour format (1-12)
+ * @param {TIME_PERIOD} period - Period (AM or PM)
+ * @returns {number} Hours in 24-hour format (0-23)
+ */
+export declare const convertTo24Hour: (hours: number, period: TIME_PERIOD) => number;
+/**
+ * Converts 24-hour format to 12-hour format
+ * @param {number} hours24 - Hours in 24-hour format (0-23)
+ * @returns {object} Object with hours in 12-hour format and period
+ */
+export declare const convertTo12Hour: (hours24: number) => {
+    hours: number;
+    period: TIME_PERIOD;
+};
+/**
+ * Calculates angle for clock dial based on time value
+ * @param {number} value - Time value (hour 0-23 or minute/second 0-59)
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @returns {number} Angle in degrees
+ */
+export declare const getAngle: (value: number, max: number) => number;
+/**
+ * Calculates coordinates for a point on a circle
+ * @param {number} radius - Circle radius
+ * @param {number} angle - Angle in degrees
+ * @returns {object} Coordinates { x, y }
+ */
+export declare const getCoordinates: (radius: number, angle: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Calculates time value from click position on dial
+ * @param {number} centerX - X coordinate of the dial center
+ * @param {number} centerY - Y coordinate of the dial center
+ * @param {number} clickX - X coordinate of the click position
+ * @param {number} clickY - Y coordinate of the click position
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @param {number} innerRadius - Inner radius for 24-hour clock inner ring
+ * @param {number} outerRadius - Outer radius for dial
+ * @returns {number} Calculated time value
+ */
+export declare const getTimeFromPosition: (centerX: number, centerY: number, clickX: number, clickY: number, max: number, innerRadius?: number, outerRadius?: number) => number;
+/**
+ * Checks if a time is within min/max constraints
+ * @param {TimeValue} time - Time value to check
+ * @param {string} minTime - Minimum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {string} maxTime - Maximum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @returns {boolean} Whether the time is within constraints
+ */
+export declare const isTimeWithinConstraints: (time: TimeValue, minTime?: string, maxTime?: string) => boolean;

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

@@ -0,0 +1,18 @@
+import { TooltipComponent } from './types';
+interface ApiOptions {
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithElements {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+}
+/**
+ * Enhances a tooltip component with API methods
+ * @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 Tooltip component
+ */
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithElements) => TooltipComponent;
+export default withAPI;

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

@@ -0,0 +1,38 @@
+import { TooltipConfig } from './types';
+/**
+ * Default configuration for the Tooltip component
+ */
+export declare const defaultConfig: TooltipConfig;
+/**
+ * Creates the base configuration for Tooltip component
+ * @param {TooltipConfig} config - User provided configuration
+ * @returns {TooltipConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: TooltipConfig) => TooltipConfig;
+/**
+ * Generates element configuration for the Tooltip component
+ * @param {TooltipConfig} config - Tooltip configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: TooltipConfig) => {
+    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 Tooltip component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,108 @@
+/**
+ * Tooltip positions
+ * @category Components
+ */
+export declare const TOOLTIP_POSITIONS: {
+    /** Position above the target element */
+    readonly TOP: "top";
+    /** Position to the right of the target element */
+    readonly RIGHT: "right";
+    /** Position below the target element */
+    readonly BOTTOM: "bottom";
+    /** Position to the left of the target element */
+    readonly LEFT: "left";
+    /** Position above and aligned to the start of the target */
+    readonly TOP_START: "top-start";
+    /** Position above and aligned to the end of the target */
+    readonly TOP_END: "top-end";
+    /** Position to the right and aligned to the start of the target */
+    readonly RIGHT_START: "right-start";
+    /** Position to the right and aligned to the end of the target */
+    readonly RIGHT_END: "right-end";
+    /** Position below and aligned to the start of the target */
+    readonly BOTTOM_START: "bottom-start";
+    /** Position below and aligned to the end of the target */
+    readonly BOTTOM_END: "bottom-end";
+    /** Position to the left and aligned to the start of the target */
+    readonly LEFT_START: "left-start";
+    /** Position to the left and aligned to the end of the target */
+    readonly LEFT_END: "left-end";
+};
+/**
+ * Tooltip visual variants
+ * @category Components
+ */
+export declare const TOOLTIP_VARIANTS: {
+    /** Standard tooltip with background and arrow */
+    readonly DEFAULT: "default";
+    /** Rich tooltip with support for HTML content */
+    readonly RICH: "rich";
+    /** Plain text tooltip with minimal styling */
+    readonly PLAIN: "plain";
+};
+/**
+ * Tooltip events
+ * @category Components
+ */
+export declare const TOOLTIP_EVENTS: {
+    /** Fired when tooltip becomes visible */
+    readonly SHOW: "show";
+    /** Fired when tooltip becomes hidden */
+    readonly HIDE: "hide";
+    /** Fired when mouse enters target element */
+    readonly ENTER: "enter";
+    /** Fired when mouse leaves target element */
+    readonly LEAVE: "leave";
+};
+/**
+ * Default configuration values for tooltip
+ * @category Components
+ */
+export declare const TOOLTIP_DEFAULTS: {
+    /** Default tooltip position */
+    readonly POSITION: "bottom";
+    /** Default visual variant */
+    readonly VARIANT: "default";
+    /** Default visibility state */
+    readonly VISIBLE: false;
+    /** Default show delay in milliseconds */
+    readonly SHOW_DELAY: 300;
+    /** Default hide delay in milliseconds */
+    readonly HIDE_DELAY: 100;
+    /** Default offset from target in pixels */
+    readonly OFFSET: 8;
+    /** Default arrow size in pixels */
+    readonly ARROW_SIZE: 8;
+    /** Whether to show tooltip on focus by default */
+    readonly SHOW_ON_FOCUS: true;
+    /** Whether to show tooltip on hover by default */
+    readonly SHOW_ON_HOVER: true;
+    /** Whether to allow rich HTML content by default */
+    readonly RICH: false;
+};
+/**
+ * CSS class names used by the tooltip component
+ * @category Components
+ */
+export declare const TOOLTIP_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "tooltip";
+    /** Container for the tooltip content */
+    readonly CONTAINER: "tooltip-container";
+    /** Arrow element class */
+    readonly ARROW: "tooltip-arrow";
+    /** Content element class */
+    readonly CONTENT: "tooltip-content";
+    /** Visible state class */
+    readonly VISIBLE: "tooltip--visible";
+    /** Hidden state class */
+    readonly HIDDEN: "tooltip--hidden";
+    /** Default variant class */
+    readonly DEFAULT: "tooltip--default";
+    /** Rich variant class */
+    readonly RICH: "tooltip--rich";
+    /** Plain variant class */
+    readonly PLAIN: "tooltip--plain";
+    /** Position prefix - append position name (e.g. tooltip--top) */
+    readonly POSITION_PREFIX: "tooltip--";
+};

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

@@ -0,0 +1,3 @@
+export { default } from './tooltip';
+export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from './constants';
+export { TooltipConfig, TooltipComponent } from './types';

package/dist/components/tooltip/tooltip.d.ts

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