mtrl 0.3.8 → 0.4.0

package/dist/components/textfield/features/prefix-text.d.ts

@@ -0,0 +1,54 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for prefix text feature
+ */
+export interface PrefixTextConfig {
+    /**
+     * Prefix text content to display before the input
+     */
+    prefixText?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with prefix text capabilities
+ */
+export interface PrefixTextComponent extends BaseComponent {
+    /**
+     * Prefix text element
+     */
+    prefixTextElement: HTMLElement | null;
+    /**
+     * Sets prefix text content
+     * @param text - Text content to display before the input
+     * @returns Component instance for chaining
+     */
+    setPrefixText: (text: string) => PrefixTextComponent;
+    /**
+     * Removes prefix text
+     * @returns Component instance for chaining
+     */
+    removePrefixText: () => PrefixTextComponent;
+}
+/**
+ * Adds prefix text to a textfield component
+ * @param config - Configuration with prefix text settings
+ * @returns Function that enhances a component with prefix text
+ */
+export declare const withPrefixText: <T extends PrefixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & PrefixTextComponent;
+export {};

package/dist/components/textfield/features/suffix-text.d.ts

@@ -0,0 +1,54 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for suffix text feature
+ */
+export interface SuffixTextConfig {
+    /**
+     * Suffix text content to display after the input
+     */
+    suffixText?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with suffix text capabilities
+ */
+export interface SuffixTextComponent extends BaseComponent {
+    /**
+     * Suffix text element
+     */
+    suffixTextElement: HTMLElement | null;
+    /**
+     * Sets suffix text content
+     * @param text - Text content to display after the input
+     * @returns Component instance for chaining
+     */
+    setSuffixText: (text: string) => SuffixTextComponent;
+    /**
+     * Removes suffix text
+     * @returns Component instance for chaining
+     */
+    removeSuffixText: () => SuffixTextComponent;
+}
+/**
+ * Adds suffix text to a textfield component
+ * @param config - Configuration with suffix text settings
+ * @returns Function that enhances a component with suffix text
+ */
+export declare const withSuffixText: <T extends SuffixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SuffixTextComponent;
+export {};

package/dist/components/textfield/features/supporting-text.d.ts

@@ -0,0 +1,59 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for supporting text feature
+ */
+export interface SupportingTextConfig {
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with supporting text capabilities
+ */
+export interface SupportingTextComponent extends BaseComponent {
+    /**
+     * Supporting text element
+     */
+    supportingTextElement: HTMLElement | null;
+    /**
+     * Sets supporting text content
+     * @param text - Text content
+     * @param isError - Whether text represents an error
+     * @returns Component instance for chaining
+     */
+    setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
+    /**
+     * Removes supporting text
+     * @returns Component instance for chaining
+     */
+    removeSupportingText: () => SupportingTextComponent;
+}
+/**
+ * Adds supporting text to a textfield component
+ * @param config - Configuration with supporting text settings
+ * @returns Function that enhances a component with supporting text
+ */
+export declare const withSupportingText: <T extends SupportingTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SupportingTextComponent;
+export {};

package/dist/components/textfield/features/trailing-icon.d.ts

@@ -0,0 +1,55 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with input field
+ */
+interface InputElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for trailing icon feature
+ */
+export interface TrailingIconConfig {
+    /**
+     * Trailing icon HTML content
+     */
+    trailingIcon?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with trailing icon capabilities
+ */
+export interface TrailingIconComponent extends BaseComponent {
+    /**
+     * Trailing icon element
+     */
+    trailingIcon: HTMLElement | null;
+    /**
+     * Sets trailing icon content
+     * @param html - HTML content for the icon
+     * @returns Component instance for chaining
+     */
+    setTrailingIcon: (html: string) => TrailingIconComponent;
+    /**
+     * Removes trailing icon
+     * @returns Component instance for chaining
+     */
+    removeTrailingIcon: () => TrailingIconComponent;
+}
+/**
+ * Adds trailing icon to a textfield component
+ * @param config - Configuration with trailing icon settings
+ * @returns Function that enhances a component with trailing icon
+ */
+export declare const withTrailingIcon: <T extends TrailingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & TrailingIconComponent;
+export {};

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

@@ -0,0 +1,3 @@
+export { default } from './textfield';
+export { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES } from './constants';
+export { TextfieldConfig, TextfieldComponent } from './types';

package/dist/components/textfield/textfield.d.ts

@@ -0,0 +1,36 @@
+import { TextfieldConfig, TextfieldComponent } from './types';
+/**
+ * Creates a new Textfield component
+ *
+ * Textfields allow users to enter text into a UI. They typically appear in forms and dialogs.
+ * This implementation follows Material Design 3 guidelines for accessible, customizable textfields.
+ *
+ * @param {TextfieldConfig} config - Textfield configuration options
+ * @returns {TextfieldComponent} A fully configured textfield component instance
+ * @throws {Error} Throws an error if textfield creation fails
+ *
+ * @example
+ * // Create a basic text field
+ * const textfield = createTextfield({
+ *   label: 'Username',
+ *   name: 'username'
+ * });
+ *
+ * document.querySelector('.form').appendChild(textfield.element);
+ *
+ * @example
+ * // Create a text field with prefix and suffix
+ * const currencyField = createTextfield({
+ *   label: 'Amount',
+ *   type: 'number',
+ *   prefixText: '$',
+ *   suffixText: 'USD'
+ * });
+ *
+ * // Add event listener
+ * currencyField.on('input', (e) => {
+ *   console.log('Amount entered:', e.target.value);
+ * });
+ */
+declare const createTextfield: (config?: TextfieldConfig) => TextfieldComponent;
+export default createTextfield;

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

@@ -0,0 +1,217 @@
+/**
+ * Available Textfield variants
+ */
+export type TextfieldVariant = 'filled' | 'outlined';
+/**
+ * Textfield variant constants
+ */
+export declare const TEXTFIELD_VARIANTS: {
+    readonly FILLED: "filled";
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Available Textfield sizes
+ */
+export type TextfieldSize = 'small' | 'medium' | 'large';
+/**
+ * Textfield size constants
+ */
+export declare const TEXTFIELD_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+/**
+ * Available Textfield states
+ */
+export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+/**
+ * Available Textfield types
+ */
+export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
+/**
+ * Textfield type constants
+ */
+export declare const TEXTFIELD_TYPES: {
+    readonly TEXT: "text";
+    readonly PASSWORD: "password";
+    readonly EMAIL: "email";
+    readonly NUMBER: "number";
+    readonly TEL: "tel";
+    readonly URL: "url";
+    readonly SEARCH: "search";
+    readonly MULTILINE: "multiline";
+};
+/**
+ * Configuration interface for the Textfield component
+ */
+export interface TextfieldConfig {
+    /** Input type (text, password, email, etc.) */
+    type?: TextfieldTypes | string;
+    /** Visual variant (filled, outlined) */
+    variant?: TextfieldVariant | string;
+    /** Input name attribute */
+    name?: string;
+    /** Label text */
+    label?: string;
+    /** Initial value */
+    value?: string;
+    /** Whether input is required */
+    required?: boolean;
+    /** Whether textfield is disabled */
+    disabled?: boolean;
+    /** Whether textfield is readonly */
+    readonly?: boolean;
+    /** Maximum input length */
+    maxLength?: number;
+    /** Input pattern for validation */
+    pattern?: string;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Leading icon HTML content */
+    leadingIcon?: string;
+    /** Trailing icon HTML content */
+    trailingIcon?: string;
+    /** Supporting text content */
+    supportingText?: string;
+    /** Whether supporting text indicates an error */
+    error?: boolean;
+    /** Prefix text to display before the input */
+    prefixText?: string;
+    /** Suffix text to display after the input */
+    suffixText?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Prefix for class names */
+    prefix?: string;
+    /** Component name */
+    componentName?: string;
+}
+/**
+ * Textfield component interface
+ */
+export interface TextfieldComponent {
+    /** The root element of the textfield */
+    element: HTMLElement;
+    /** The input element */
+    input: HTMLInputElement | HTMLTextAreaElement;
+    /** Gets the textfield's value */
+    getValue: () => string;
+    /** Sets the textfield's value */
+    setValue: (value: string) => TextfieldComponent;
+    /** Sets an attribute on the input element */
+    setAttribute: (name: string, value: string) => TextfieldComponent;
+    /** Gets an attribute from the input element */
+    getAttribute: (name: string) => string | null;
+    /** Removes an attribute from the input element */
+    removeAttribute: (name: string) => TextfieldComponent;
+    /** Sets the textfield's variant (filled or outlined) */
+    setVariant: (variant: TextfieldVariant) => TextfieldComponent;
+    /** Gets the textfield's current variant */
+    getVariant: () => TextfieldVariant;
+    /** Sets the textfield's label text */
+    setLabel: (text: string) => TextfieldComponent;
+    /** Gets the textfield's label text */
+    getLabel: () => string;
+    /** Leading icon element (if present) */
+    leadingIcon: HTMLElement | null;
+    /** Sets the leading icon HTML content */
+    setLeadingIcon: (html: string) => TextfieldComponent;
+    /** Removes the leading icon */
+    removeLeadingIcon: () => TextfieldComponent;
+    /** Trailing icon element (if present) */
+    trailingIcon: HTMLElement | null;
+    /** Sets the trailing icon HTML content */
+    setTrailingIcon: (html: string) => TextfieldComponent;
+    /** Removes the trailing icon */
+    removeTrailingIcon: () => TextfieldComponent;
+    /** Supporting text element (if present) */
+    supportingTextElement: HTMLElement | null;
+    /** Sets the supporting text content */
+    setSupportingText: (text: string, isError?: boolean) => TextfieldComponent;
+    /** Removes the supporting text */
+    removeSupportingText: () => TextfieldComponent;
+    /** Prefix text element (if present) */
+    prefixTextElement: HTMLElement | null;
+    /** Sets the prefix text content */
+    setPrefixText: (text: string) => TextfieldComponent;
+    /** Removes the prefix text */
+    removePrefixText: () => TextfieldComponent;
+    /** Suffix text element (if present) */
+    suffixTextElement: HTMLElement | null;
+    /** Sets the suffix text content */
+    setSuffixText: (text: string) => TextfieldComponent;
+    /** Removes the suffix text */
+    removeSuffixText: () => TextfieldComponent;
+    /** Manually update element positions (useful after DOM changes) */
+    updatePositions: () => TextfieldComponent;
+    /** Adds event listener */
+    on: (event: string, handler: Function) => TextfieldComponent;
+    /** Removes event listener */
+    off: (event: string, handler: Function) => TextfieldComponent;
+    /** Enables the textfield */
+    enable: () => TextfieldComponent;
+    /** Disables the textfield */
+    disable: () => TextfieldComponent;
+    /** Destroys the textfield component and cleans up resources */
+    destroy: () => void;
+}
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    config?: {
+        prefix?: string;
+        componentName?: string;
+        [key: string]: any;
+    };
+    getValue?: () => string;
+    setValue?: (value: string) => any;
+    setAttribute?: (name: string, value: string) => any;
+    getAttribute?: (name: string) => string | null;
+    removeAttribute?: (name: string) => any;
+    label?: {
+        setText: (content: string) => any;
+        getText: () => string;
+    };
+    leadingIcon?: HTMLElement | null;
+    setLeadingIcon?: (html: string) => any;
+    removeLeadingIcon?: () => any;
+    trailingIcon?: HTMLElement | null;
+    setTrailingIcon?: (html: string) => any;
+    removeTrailingIcon?: () => any;
+    supportingTextElement?: HTMLElement | null;
+    setSupportingText?: (text: string, isError?: boolean) => any;
+    removeSupportingText?: () => any;
+    prefixTextElement?: HTMLElement | null;
+    setPrefixText?: (text: string) => any;
+    removePrefixText?: () => any;
+    suffixTextElement?: HTMLElement | null;
+    setSuffixText?: (text: string) => any;
+    removeSuffixText?: () => any;
+    updateElementPositions?: () => any;
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    [key: string]: any;
+}

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

@@ -0,0 +1,24 @@
+import { TimePickerComponent, TimePickerConfig, TimeValue } from './types';
+interface ApiOptions {
+    events: {
+        on: (event: string, handler: Function) => any;
+        off: (event: string, handler: Function) => any;
+        emit: (event: string, data?: any) => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Creates the API for TimePicker component
+ *
+ * @param baseComponent - Base component with element and events
+ * @param modalElement - Modal overlay element
+ * @param dialogElement - Dialog content element
+ * @param timeValue - Current time value
+ * @param config - Component configuration
+ * @param options - API options with events and lifecycle methods
+ * @returns TimePicker component API
+ */
+export declare const createTimePickerAPI: (baseComponent: any, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions) => TimePickerComponent;
+export {};

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

@@ -0,0 +1,34 @@
+import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE } from './types';
+/**
+ * Interface for Clock Dial rendering options
+ */
+export interface ClockDialOptions {
+    type: TIME_PICKER_TYPE;
+    format: TIME_FORMAT;
+    showSeconds: boolean;
+    prefix: string;
+    activeSelector: 'hour' | 'minute' | 'second';
+}
+/**
+ * Renders a clock dial on canvas with improved visual design
+ * @param {HTMLCanvasElement} canvas - Canvas element to render on
+ * @param {TimeValue} timeValue - Current time value
+ * @param {ClockDialOptions} options - Rendering options
+ */
+export declare const renderClockDial: (canvas: HTMLCanvasElement, timeValue: TimeValue, options: ClockDialOptions) => void;
+/**
+ * Get time value from click coordinates on the canvas
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @param {number} x - Click X coordinate relative to canvas
+ * @param {number} y - Click Y coordinate relative to canvas
+ * @param {ClockDialOptions} options - Clock dial options
+ * @returns {number | null} Selected value or null if not valid
+ */
+export declare const getTimeValueFromClick: (canvas: HTMLCanvasElement, x: number, y: number, options: ClockDialOptions) => number | null;
+/**
+ * Update the clock dial when theme changes (to be called by external code)
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @param {TimeValue} timeValue - Current time value
+ * @param {ClockDialOptions} options - Rendering options
+ */
+export declare const updateClockDialTheme: (canvas: HTMLCanvasElement, timeValue: TimeValue, options: ClockDialOptions) => void;

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

@@ -0,0 +1,75 @@
+import { TimePickerConfig } from './types';
+/**
+ * Default configuration for the TimePicker component
+ */
+export declare const defaultConfig: TimePickerConfig;
+/**
+ * Creates the base configuration for TimePicker component
+ * @param {TimePickerConfig} config - User provided configuration
+ * @returns {TimePickerConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: TimePickerConfig) => TimePickerConfig;
+/**
+ * Generates element configuration for the TimePicker container
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getContainerConfig: (config: TimePickerConfig) => {
+    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 TimePicker modal
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getModalConfig: (config: TimePickerConfig) => {
+    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 TimePicker dialog
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getDialogConfig: (config: TimePickerConfig) => {
+    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 TimePicker component
+ * @param {Object} comp - Component with events and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    events: {
+        on: (event: string, handler: Function) => any;
+        off: (event: string, handler: Function) => any;
+        emit: (event: string, data?: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;