mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,390 @@
+import type { BadgeComponent } from '../badge';
+import { TabIndicator } from './indicator';
+/**
+ * Available tabs variants
+ */
+export type TabsVariant = 'primary' | 'secondary';
+/**
+ * Available tabs states
+ */
+export type TabStates = 'active' | 'inactive' | 'disabled';
+/**
+ * Configuration for the tab indicator
+ * @category Components
+ */
+export interface IndicatorConfig {
+    /** Height of the indicator in pixels */
+    height?: number;
+    /**
+     * Width strategy for the indicator
+     * - 'fixed': Uses a fixed width defined by fixedWidth
+     * - 'dynamic': Uses half the tab width
+     * - 'content': Uses the text content width
+     * - 'auto': Adapts based on variant (primary: text width, secondary: full tab width)
+     */
+    widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
+    /** Fixed width in pixels (when using fixed strategy) */
+    fixedWidth?: number;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation timing function */
+    animationTiming?: string;
+    /** Custom color for the indicator */
+    color?: string;
+    /** Tab variant (primary or secondary) */
+    variant?: string;
+}
+/**
+ * Tab change event data interface
+ * @category Events
+ */
+export interface TabChangeEventData {
+    /**
+     * The tab component that was activated
+     */
+    tab: TabComponent;
+    /**
+     * The value of the activated tab
+     */
+    value: string;
+}
+/**
+ * Configuration interface for a single Tab
+ * @category Components
+ */
+export interface TabConfig {
+    /**
+     * Tab state that determines if it's the active destination
+     * @default 'inactive'
+     */
+    state?: TabStates | string;
+    /**
+     * Whether the tab is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Initial tab text content (label)
+     * @example 'Home'
+     */
+    text?: string;
+    /**
+     * Initial tab icon HTML content
+     * @example '<svg>...</svg>'
+     */
+    icon?: string;
+    /**
+     * Badge text or value to display (if applicable)
+     * @example '5'
+     */
+    badge?: string | number;
+    /**
+     * Badge configuration object
+     * Pass additional options for the badge component
+     */
+    badgeConfig?: {
+        variant?: string;
+        color?: string;
+        size?: string;
+        position?: string;
+        max?: number;
+    };
+    /**
+     * Icon size in pixels or other CSS units
+     * @default '24px'
+     */
+    iconSize?: string;
+    /**
+     * Additional CSS classes to add to the tab
+     * @example 'home-tab main-navigation'
+     */
+    class?: string;
+    /**
+     * Tab value attribute for identifying the selected tab
+     */
+    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];
+    };
+    /**
+     * Variant of the tab
+     */
+    variant?: string;
+}
+/**
+ * Configuration interface for the Tabs component
+ * @category Components
+ */
+export interface TabsConfig {
+    /**
+     * Tabs variant (primary or secondary)
+     * @default 'primary'
+     */
+    variant?: TabsVariant | string;
+    /**
+     * Initial tabs to create
+     */
+    tabs?: TabConfig[];
+    /**
+     * Whether to show the divider
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * Whether to enable horizontal scrolling
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Event handlers configuration
+     */
+    on?: {
+        /**
+         * Tab change event handler
+         */
+        change?: (event: TabChangeEventData) => void;
+        /**
+         * Event handlers for other events
+         */
+        [key: string]: Function | undefined;
+    };
+    /**
+     * Tab indicator configuration
+     */
+    indicator?: IndicatorConfig;
+    /**
+     * Tab indicator height in pixels
+     * @deprecated Use indicator.height instead
+     */
+    indicatorHeight?: number;
+    /**
+     * Tab indicator width strategy
+     * @deprecated Use indicator.widthStrategy instead
+     */
+    indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
+}
+/**
+ * Icon API interface for managing tab icons
+ * @category Components
+ */
+export interface IconAPI {
+    /**
+     * Sets the icon HTML content
+     * @param html - HTML string for the icon
+     * @returns The icon API for chaining
+     */
+    setIcon: (html: string) => IconAPI;
+    /**
+     * Gets the current icon HTML content
+     * @returns HTML string for the icon
+     */
+    getIcon: () => string;
+    /**
+     * Gets the icon DOM element
+     * @returns The icon element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Text API interface for managing tab text
+ * @category Components
+ */
+export interface TextAPI {
+    /**
+     * Sets the text content
+     * @param content - Text content
+     * @returns The text API for chaining
+     */
+    setText: (content: string) => TextAPI;
+    /**
+     * Gets the current text content
+     * @returns Tab text content
+     */
+    getText: () => string;
+    /**
+     * Gets the text DOM element
+     * @returns The text element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Tab component interface
+ * @category Components
+ */
+export interface TabComponent {
+    /** The tab's DOM element */
+    element: HTMLElement;
+    /** The tab's badge component (if any) */
+    badge?: BadgeComponent;
+    /** Gets a class name with the component's prefix */
+    getClass: (name: string) => string;
+    /** Gets the tab's value attribute */
+    getValue: () => string;
+    /** Sets the tab's value attribute */
+    setValue: (value: string) => TabComponent;
+    /** Activates the tab (sets active state) */
+    activate: () => TabComponent;
+    /** Deactivates the tab (sets inactive state) */
+    deactivate: () => TabComponent;
+    /** Checks if the tab is active */
+    isActive: () => boolean;
+    /** Enables the tab (removes disabled attribute) */
+    enable: () => TabComponent;
+    /** Disables the tab (adds disabled attribute) */
+    disable: () => TabComponent;
+    /** Sets the tab's text content */
+    setText: (content: string) => TabComponent;
+    /** Gets the tab's text content */
+    getText: () => string;
+    /** Sets the tab's icon */
+    setIcon: (icon: string) => TabComponent;
+    /** Gets the tab's icon HTML content */
+    getIcon: () => string;
+    /** Sets the tab's badge */
+    setBadge: (content: string | number) => TabComponent;
+    /** Gets the tab's badge content */
+    getBadge: () => string;
+    /** Shows the tab's badge */
+    showBadge: () => TabComponent;
+    /** Hides the tab's badge */
+    hideBadge: () => TabComponent;
+    /** Gets the badge component instance */
+    getBadgeComponent: () => BadgeComponent | undefined;
+    /** Updates the tab's layout style based on content */
+    updateLayoutStyle: () => void;
+    /** Adds an event listener to the tab */
+    on: (event: string, handler: Function) => TabComponent;
+    /** Removes an event listener from the tab */
+    off: (event: string, handler: Function) => TabComponent;
+    /** Destroys the tab component and cleans up resources */
+    destroy: () => void;
+    /** API for managing disabled state */
+    disabled?: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    /** API for managing component lifecycle */
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Tabs component interface
+ * @category Components
+ */
+export interface TabsComponent {
+    /**
+     * Container element
+     */
+    element: HTMLElement;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Creates and adds a new tab to the tabs component
+     * @param config - Tab configuration
+     * @returns The created tab component
+     */
+    addTab: (config: TabConfig) => TabComponent;
+    /**
+     * Adds a pre-created tab to the tabs component
+     * @param tab - Tab component to add
+     * @returns Tabs component for chaining
+     */
+    add: (tab: TabComponent) => TabsComponent;
+    /**
+     * Gets all tabs in the container
+     * @returns Array of tab components
+     */
+    getTabs: () => TabComponent[];
+    /**
+     * Gets the active tab
+     * @returns Active tab or null if none
+     */
+    getActiveTab: () => TabComponent | null;
+    /**
+     * Gets the indicator component
+     * @returns Tab indicator component
+     */
+    getIndicator?: () => TabIndicator;
+    /**
+     * Sets a tab as active
+     * @param tabOrValue - Tab component or tab value
+     * @returns Tabs component for chaining
+     */
+    setActiveTab: (tabOrValue: TabComponent | string) => TabsComponent;
+    /**
+     * Removes a tab from the container
+     * @param tabOrValue - Tab component or tab value
+     * @returns Tabs component for chaining
+     */
+    removeTab: (tabOrValue: TabComponent | string) => TabsComponent;
+    /**
+     * Adds an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Tabs component for chaining
+     */
+    on: (event: string, handler: Function) => TabsComponent;
+    /**
+     * Removes an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Tabs component for chaining
+     */
+    off: (event: string, handler: Function) => TabsComponent;
+    /**
+     * Emit an event
+     * @param event - Event name
+     * @param data - Event data
+     * @returns Tabs component for chaining
+     */
+    emit?: (event: string, data: any) => TabsComponent;
+    /**
+     * Destroys the tabs component and all tabs
+     */
+    destroy: () => void;
+    /**
+     * Tab click event handler
+     */
+    handleTabClick: (event: any, tab: TabComponent) => void;
+    /**
+     * Scroll container for scrollable tabs
+     */
+    scrollContainer?: HTMLElement;
+}

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

@@ -0,0 +1,17 @@
+import { TabComponent } from './types';
+/**
+ * Gets the active tab from a component
+ * @param component - Component with tabs
+ * @returns Active tab or null
+ */
+export declare function getActiveTab(component: any): TabComponent | null;
+/**
+ * Updates tab panels based on active tab
+ * @param component - Component with tabs
+ */
+export declare function updateTabPanels(component: any): void;
+/**
+ * Sets up keyboard navigation for tabs
+ * @param component - Tabs component
+ */
+export declare function setupKeyboardNavigation(component: any): void;

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

@@ -0,0 +1,8 @@
+import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
+import { PlacementComponent } from './features/placement';
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: BaseComponent & Partial<PlacementComponent>) => TextfieldComponent;

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

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

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

@@ -0,0 +1,148 @@
+/**
+ * Textfield variant constants
+ * @category Components
+ */
+export declare const TEXTFIELD_VARIANTS: {
+    /** Filled variant with background and animated label */
+    readonly FILLED: "filled";
+    /** Outlined variant with border and animated label */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Textfield size constants
+ * @category Components
+ */
+export declare const TEXTFIELD_SIZES: {
+    /** Small textfield */
+    readonly SMALL: "small";
+    /** Medium textfield (default) */
+    readonly MEDIUM: "medium";
+    /** Large textfield */
+    readonly LARGE: "large";
+};
+/**
+ * Textfield state constants
+ * @category Components
+ */
+export declare const TEXTFIELD_STATES: {
+    /** Textfield is active (focused) */
+    readonly ACTIVE: "active";
+    /** Textfield is inactive (not focused) */
+    readonly INACTIVE: "inactive";
+    /** Textfield is disabled */
+    readonly DISABLED: "disabled";
+};
+/**
+ * Textfield type constants
+ * @category Components
+ */
+export declare const TEXTFIELD_TYPES: {
+    /** Standard text input */
+    readonly TEXT: "text";
+    /** Password input with obscured characters */
+    readonly PASSWORD: "password";
+    /** Email input with email validation */
+    readonly EMAIL: "email";
+    /** Numeric input */
+    readonly NUMBER: "number";
+    /** Telephone number input */
+    readonly TEL: "tel";
+    /** URL input with URL validation */
+    readonly URL: "url";
+    /** Search input */
+    readonly SEARCH: "search";
+    /** Multiline text input (textarea) */
+    readonly MULTILINE: "multiline";
+};
+/**
+ * Textfield event constants
+ * @category Components
+ */
+export declare const TEXTFIELD_EVENTS: {
+    /** Fired when textfield value changes */
+    readonly CHANGE: "change";
+    /** Fired during input */
+    readonly INPUT: "input";
+    /** Fired when textfield receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when textfield loses focus */
+    readonly BLUR: "blur";
+    /** Fired when enter key is pressed */
+    readonly ENTER: "enter";
+    /** Fired when a key is pressed down */
+    readonly KEYDOWN: "keydown";
+    /** Fired when a key is released */
+    readonly KEYUP: "keyup";
+};
+/**
+ * Default textfield configuration values
+ * @category Components
+ */
+export declare const TEXTFIELD_DEFAULTS: {
+    /** Default input type */
+    readonly TYPE: "text";
+    /** Default visual variant */
+    readonly VARIANT: "filled";
+    /** Default textfield size */
+    readonly SIZE: "medium";
+    /** Default disabled state */
+    readonly DISABLED: false;
+    /** Default required state */
+    readonly REQUIRED: false;
+    /** Default error state */
+    readonly ERROR: false;
+    /** Default label floating behavior (always floats on focus) */
+    readonly FLOAT_LABEL: true;
+    /** Default animation duration in milliseconds */
+    readonly ANIMATION_DURATION: 150;
+};
+/**
+ * CSS class names used by the textfield component
+ * @category Components
+ */
+export declare const TEXTFIELD_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "textfield";
+    /** Input element class */
+    readonly INPUT: "textfield-input";
+    /** Label element class */
+    readonly LABEL: "textfield-label";
+    /** Container element class */
+    readonly CONTAINER: "textfield-container";
+    /** Filled variant class */
+    readonly FILLED: "textfield--filled";
+    /** Outlined variant class */
+    readonly OUTLINED: "textfield--outlined";
+    /** Small size class */
+    readonly SMALL: "textfield--small";
+    /** Medium size class */
+    readonly MEDIUM: "textfield--medium";
+    /** Large size class */
+    readonly LARGE: "textfield--large";
+    /** Focused state class */
+    readonly FOCUSED: "textfield--focused";
+    /** Disabled state class */
+    readonly DISABLED: "textfield--disabled";
+    /** Error state class */
+    readonly ERROR: "textfield--error";
+    /** Required indicator class */
+    readonly REQUIRED: "textfield--required";
+    /** Floating label class */
+    readonly LABEL_FLOATING: "textfield-label--floating";
+    /** Supporting text class */
+    readonly SUPPORTING_TEXT: "textfield-supporting-text";
+    /** Supporting text error class */
+    readonly SUPPORTING_TEXT_ERROR: "textfield-supporting-text--error";
+    /** Leading icon class */
+    readonly LEADING_ICON: "textfield-leading-icon";
+    /** Trailing icon class */
+    readonly TRAILING_ICON: "textfield-trailing-icon";
+    /** Prefix text class */
+    readonly PREFIX_TEXT: "textfield-prefix-text";
+    /** Suffix text class */
+    readonly SUFFIX_TEXT: "textfield-suffix-text";
+    /** Outline element class (for outlined variant) */
+    readonly OUTLINE: "textfield-outline";
+    /** Multiline class */
+    readonly MULTILINE: "textfield--multiline";
+};

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

@@ -1,17 +1,12 @@
-// src/components/textfield/features/index.ts
-
-// Export features
 export { withLeadingIcon } from './leading-icon';
 export { withTrailingIcon } from './trailing-icon';
 export { withPrefixText } from './prefix-text';
 export { withSuffixText } from './suffix-text';
 export { withSupportingText } from './supporting-text';
 export { withPlacement } from './placement';
-
-// Export interfaces
 export type { LeadingIconComponent, LeadingIconConfig } from './leading-icon';
 export type { TrailingIconComponent, TrailingIconConfig } from './trailing-icon';
 export type { PrefixTextComponent, PrefixTextConfig } from './prefix-text';
 export type { SuffixTextComponent, SuffixTextConfig } from './suffix-text';
 export type { SupportingTextComponent, SupportingTextConfig } from './supporting-text';
-export type { PlacementComponent } from './placement';
+export type { PlacementComponent } from './placement';

package/dist/components/textfield/features/leading-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 leading icon feature
+ */
+export interface LeadingIconConfig {
+    /**
+     * Leading icon HTML content
+     */
+    leadingIcon?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with leading icon capabilities
+ */
+export interface LeadingIconComponent extends BaseComponent {
+    /**
+     * Leading icon element
+     */
+    leadingIcon: HTMLElement | null;
+    /**
+     * Sets leading icon content
+     * @param html - HTML content for the icon
+     * @returns Component instance for chaining
+     */
+    setLeadingIcon: (html: string) => LeadingIconComponent;
+    /**
+     * Removes leading icon
+     * @returns Component instance for chaining
+     */
+    removeLeadingIcon: () => LeadingIconComponent;
+}
+/**
+ * Adds leading icon to a textfield component
+ * @param config - Configuration with leading icon settings
+ * @returns Function that enhances a component with leading icon
+ */
+export declare const withLeadingIcon: <T extends LeadingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & LeadingIconComponent;
+export {};

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

@@ -0,0 +1,28 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with input field
+ */
+interface InputElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Component with placement management capabilities
+ */
+export interface PlacementComponent extends BaseComponent {
+    /**
+     * Updates positions of all elements in the textfield
+     * @returns The component instance for chaining
+     */
+    updateElementPositions: () => PlacementComponent;
+}
+/**
+ * Handles dynamic positioning of textfield elements (label, prefix, suffix)
+ * This feature should be added last in the pipe to ensure all elements exist
+ *
+ * @returns Function that enhances a component with dynamic positioning
+ */
+export declare const withPlacement: () => <C extends InputElementComponent>(component: C) => C & PlacementComponent;
+export {};