mtrl 0.3.7 → 0.3.9

package/src/components/textfield/features/suffix-text.ts

@@ -1,100 +0,0 @@
-// src/components/textfield/features/suffix-text.ts
-
-import { BaseComponent, ElementComponent } from '../../../core/compose/component';
-
-/**
- * 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 const withSuffixText = <T extends SuffixTextConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & SuffixTextComponent => {
-    if (!config.suffixText) {
-      return component as any;
-    }
-    
-    // Create suffix text element
-    const PREFIX = config.prefix || 'mtrl';
-    const suffixElement = document.createElement('span');
-    suffixElement.className = `${PREFIX}-${config.componentName || 'textfield'}-suffix`;
-    suffixElement.textContent = config.suffixText;
-    
-    // Add suffix text to the component
-    component.element.appendChild(suffixElement);
-    
-    // Add suffix class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-suffix`);
-    
-    // Add lifecycle integration
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        suffixElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      suffixTextElement: suffixElement,
-      
-      setSuffixText(text: string) {
-        suffixElement.textContent = text;
-        return this;
-      },
-      
-      removeSuffixText() {
-        if (suffixElement.parentNode) {
-          suffixElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-suffix`);
-          this.suffixTextElement = null;
-        }
-        return this;
-      }
-    };
-  };

package/src/components/textfield/features/supporting-text.ts

@@ -1,113 +0,0 @@
-// src/components/textfield/features/supporting-text.ts
-
-import { BaseComponent, ElementComponent } from '../../../core/compose/component';
-
-/**
- * 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 const withSupportingText = <T extends SupportingTextConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & SupportingTextComponent => {
-    if (!config.supportingText) {
-      return component as any;
-    }
-    
-    // Create supporting text element
-    const PREFIX = config.prefix || 'mtrl';
-    const supportingElement = document.createElement('div');
-    supportingElement.className = `${PREFIX}-${config.componentName || 'textfield'}-helper`;
-    supportingElement.textContent = config.supportingText;
-    
-    if (config.error) {
-      supportingElement.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`);
-      component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-    }
-    
-    // Add supporting text to the component
-    component.element.appendChild(supportingElement);
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        supportingElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      supportingTextElement: supportingElement,
-      
-      setSupportingText(text: string, isError = false) {
-        supportingElement.textContent = text;
-        
-        // Handle error state
-        supportingElement.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}-helper--error`, isError);
-        component.element.classList.toggle(`${PREFIX}-${config.componentName || 'textfield'}--error`, isError);
-        
-        return this;
-      },
-      
-      removeSupportingText() {
-        if (supportingElement.parentNode) {
-          supportingElement.remove();
-          this.supportingTextElement = null;
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--error`);
-        }
-        return this;
-      }
-    };
-  };

package/src/components/textfield/features/trailing-icon.ts

@@ -1,108 +0,0 @@
-// src/components/textfield/features/trailing-icon.ts
-
-import { BaseComponent, ElementComponent } from '../../../core/compose/component';
-
-/**
- * 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 const withTrailingIcon = <T extends TrailingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & TrailingIconComponent => {
-    if (!config.trailingIcon) {
-      return component as any;
-    }
-    
-    // Create icon element
-    const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-trailing-icon`;
-    iconElement.innerHTML = config.trailingIcon;
-    
-    // Add trailing icon to the component
-    component.element.appendChild(iconElement);
-    
-    // Add trailing-icon class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-    
-    // When there's a trailing icon, adjust input padding
-    if (component.input) {
-      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-    }
-    
-    // Add lifecycle integration if available
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        iconElement.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      trailingIcon: iconElement,
-      
-      setTrailingIcon(html: string) {
-        iconElement.innerHTML = html;
-        return this;
-      },
-      
-      removeTrailingIcon() {
-        if (iconElement.parentNode) {
-          iconElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-trailing-icon`);
-          if (component.input) {
-            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-trailing-icon`);
-          }
-          this.trailingIcon = null;
-        }
-        return this;
-      }
-    };
-  };

package/src/components/textfield/index.ts

@@ -1,9 +0,0 @@
-// src/components/textfield/index.ts
-export { default } from './textfield'
-export { 
-  TextfieldConfig, 
-  TextfieldComponent,
-  TEXTFIELD_VARIANTS,
-  TEXTFIELD_SIZES,
-  TEXTFIELD_TYPES
-} from './types'

package/src/components/textfield/textfield.ts

@@ -1,92 +0,0 @@
-// src/components/textfield/textfield.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withDisabled,
-  withLifecycle,
-  withVariant,
-  withTextInput,
-  withTextLabel
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { 
-  withLeadingIcon, 
-  withTrailingIcon, 
-  withSupportingText,
-  withPrefixText,
-  withSuffixText,
-  withPlacement
-} from './features';
-import { TextfieldConfig, TextfieldComponent } from './types';
-import { 
-  createBaseConfig, 
-  getElementConfig,
-  getApiConfig
-} from './config';
-
-/**
- * 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);
- * });
- */
-const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Build textfield through functional composition
-    // Each function in the pipe adds specific capabilities
-    const textfield = pipe(
-      createBase,                       // Base component structure
-      withEvents(),                     // Event handling system
-      withElement(getElementConfig(baseConfig)), // Create DOM element
-      withVariant(baseConfig),          // Apply variant styling (filled/outlined)
-      withTextInput(baseConfig),        // Add input element
-      withTextLabel(baseConfig),        // Add text label
-      withLeadingIcon(baseConfig),      // Add leading icon (if specified)
-      withTrailingIcon(baseConfig),     // Add trailing icon (if specified)
-      withPrefixText(baseConfig),       // Add prefix text (if specified) 
-      withSuffixText(baseConfig),       // Add suffix text (if specified)
-      withSupportingText(baseConfig),   // Add supporting/helper text (if specified)
-      withDisabled(baseConfig),         // Add disabled state management
-      withLifecycle(),                  // Add lifecycle management
-      withPlacement(),                  // Add dynamic positioning for elements
-      comp => withAPI(getApiConfig(comp))(comp) // Add public API
-    )(baseConfig);
-
-    return textfield as TextfieldComponent;
-  } catch (error) {
-    console.error('Textfield creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create textfield: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createTextfield;

package/src/components/textfield/types.ts

@@ -1,265 +0,0 @@
-// src/components/textfield/types.ts
-
-/**
- * Available Textfield variants
- */
-export type TextfieldVariant = 'filled' | 'outlined';
-
-/**
- * Textfield variant constants
- */
-export const TEXTFIELD_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-
-/**
- * Available Textfield sizes
- */
-export type TextfieldSize = 'small' | 'medium' | 'large';
-
-/**
- * Textfield size constants
- */
-export const TEXTFIELD_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-} as const;
-
-/**
- * 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 const TEXTFIELD_TYPES = {
-  TEXT: 'text',
-  PASSWORD: 'password',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  TEL: 'tel',
-  URL: 'url',
-  SEARCH: 'search',
-  MULTILINE: 'multiline'
-} as const;
-
-/**
- * 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;
-  
-  /** 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 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;
-  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;
-}