mtrl 0.3.6 → 0.3.7

package/src/components/textfield/features/placement.ts

@@ -0,0 +1,149 @@
+// src/components/textfield/features/placement.ts
+
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+
+/**
+ * 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 const withPlacement = () => 
+  <C extends ElementComponent>(component: C): C & PlacementComponent => {
+    const PREFIX = component.config.prefix || 'mtrl';
+    const COMPONENT = component.config.componentName || 'textfield';
+    
+    /**
+     * Updates positions of labels and adjusts input padding
+     * to accommodate prefix/suffix elements
+     */
+    const updateElementPositions = () => {
+      if (!component.element || !component.element.isConnected) return component;
+      
+      // Get necessary elements
+      const labelEl = component.element.querySelector(`.${PREFIX}-${COMPONENT}-label`) as HTMLElement;
+      const prefixEl = component.element.querySelector(`.${PREFIX}-${COMPONENT}-prefix`);
+      const suffixEl = component.element.querySelector(`.${PREFIX}-${COMPONENT}-suffix`);
+      
+      // Get component states
+      const isOutlined = component.element.classList.contains(`${PREFIX}-${COMPONENT}--outlined`);
+      const isFilled = component.element.classList.contains(`${PREFIX}-${COMPONENT}--filled`);
+      const isFocused = component.element.classList.contains(`${PREFIX}-${COMPONENT}--focused`);
+      const isEmpty = component.element.classList.contains(`${PREFIX}-${COMPONENT}--empty`);
+      const hasLeadingIcon = component.element.classList.contains(`${PREFIX}-${COMPONENT}--with-leading-icon`);
+      
+      // Handle prefix positioning and input padding
+      if (prefixEl && component.input) {
+        const prefixWidth = prefixEl.getBoundingClientRect().width + 4; // 4px spacing
+        const inputPadding = prefixWidth + 12; // 12px additional padding
+        
+        // Update input left padding
+        component.input.style.paddingLeft = `${inputPadding}px`;
+        
+        // Update label position if present
+        if (labelEl) {
+          let labelPosition = inputPadding;
+          
+          // Account for leading icon if present
+          if (hasLeadingIcon) {
+            labelPosition = Math.max(labelPosition, 44);
+          }
+          
+          // Different positioning strategy based on variant and state
+          if (!isFocused && isEmpty) {
+            // When unfocused and empty, align with prefix/input
+            labelEl.style.left = `${labelPosition}px`;
+          } else {
+            // When focused or filled, move to default position
+            labelEl.style.left = '12px';
+          }
+          
+        }
+      } else if (hasLeadingIcon && labelEl) {
+        // Handle case with leading icon but no prefix
+        if (isOutlined) {
+          if (!isFocused && isEmpty) {
+            // When unfocused and empty, align with icon
+            labelEl.style.left = '44px';
+          } else {
+            // When focused or filled, move to default position
+            labelEl.style.left = '12px';
+          }
+        }
+        // For filled variant, the CSS handles this
+      }
+      
+      // Handle suffix positioning and input padding
+      if (suffixEl && component.input) {
+        const suffixWidth = suffixEl.getBoundingClientRect().width + 4; // 4px spacing
+        const inputPadding = suffixWidth + 12; // 12px additional padding
+        
+        // Update input right padding
+        component.input.style.paddingRight = `${inputPadding}px`;
+      }
+      
+      return component;
+    };
+    
+    // Set up event listeners for dynamic positioning
+    const setupEventListeners = () => {
+      if (component.input) {
+        // Update positions when focus state changes
+        component.input.addEventListener('focus', () => {
+          component.element.classList.add(`${PREFIX}-${COMPONENT}--focused`);
+          setTimeout(updateElementPositions, 10);
+        });
+        
+        component.input.addEventListener('blur', () => {
+          component.element.classList.remove(`${PREFIX}-${COMPONENT}--focused`);
+          setTimeout(updateElementPositions, 10);
+        });
+        
+        // Update positions when empty state changes
+        component.input.addEventListener('input', () => {
+          const isEmpty = !component.input.value;
+          component.element.classList.toggle(`${PREFIX}-${COMPONENT}--empty`, isEmpty);
+          setTimeout(updateElementPositions, 10);
+        });
+        
+        // Set initial empty state
+        if (!component.input.value) {
+          component.element.classList.add(`${PREFIX}-${COMPONENT}--empty`);
+        }
+      }
+      
+      // Update positions on window resize
+      window.addEventListener('resize', updateElementPositions);
+    };
+    
+    // Perform initial setup
+    setTimeout(() => {
+      setupEventListeners();
+      updateElementPositions();
+    }, 0);
+    
+    // Add lifecycle integration
+    if ('lifecycle' in component && component.lifecycle?.destroy) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        window.removeEventListener('resize', updateElementPositions);
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+    
+    return {
+      ...component,
+      updateElementPositions
+    };
+  };

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

@@ -0,0 +1,107 @@
+// src/components/textfield/features/prefix-text.ts
+
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+
+/**
+ * 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 const withPrefixText = <T extends PrefixTextConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & PrefixTextComponent => {
+    if (!config.prefixText) {
+      return component as any;
+    }
+    
+    // Create prefix text element
+    const PREFIX = config.prefix || 'mtrl';
+    const prefixElement = document.createElement('span');
+    prefixElement.className = `${PREFIX}-${config.componentName || 'textfield'}-prefix`;
+    prefixElement.textContent = config.prefixText;
+    
+    // Add prefix text to the component
+    component.element.appendChild(prefixElement);
+    
+    // Add prefix class to the component
+    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`);
+    
+    // Add lifecycle integration
+    if ('lifecycle' in component && component.lifecycle?.destroy) {
+      const originalDestroy = component.lifecycle.destroy;
+      component.lifecycle.destroy = () => {
+        prefixElement.remove();
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+
+    return {
+      ...component,
+      prefixTextElement: prefixElement,
+      
+      setPrefixText(text: string) {
+        prefixElement.textContent = text;
+        return this;
+      },
+      
+      removePrefixText() {
+        if (prefixElement.parentNode) {
+          prefixElement.remove();
+          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`);
+          
+          // Reset label position if no prefix
+          const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
+          if (labelEl) {
+            (labelEl as HTMLElement).style.left = '';
+          }
+          
+          this.prefixTextElement = null;
+        }
+        return this;
+      }
+    };
+  };

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

@@ -0,0 +1,100 @@
+// 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

@@ -0,0 +1,113 @@
+// 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

@@ -0,0 +1,108 @@
+// 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/textfield.ts

@@ -13,7 +13,10 @@ import { withAPI } from './api';
 import { 
   withLeadingIcon, 
   withTrailingIcon, 
-  withSupportingText 
+  withSupportingText,
+  withPrefixText,
+  withSuffixText,
+  withPlacement
 } from './features';
 import { TextfieldConfig, TextfieldComponent } from './types';
 import { 
@@ -24,26 +27,59 @@ import {
 
 /**
  * Creates a new Textfield component
- * @param {TextfieldConfig} config - Textfield configuration
- * @returns {TextfieldComponent} Textfield component instance
+ * 
+ * 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,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withTextInput(baseConfig),
-      withTextLabel(baseConfig),
-      withLeadingIcon(baseConfig),
-      withTrailingIcon(baseConfig),
-      withSupportingText(baseConfig),
-      withDisabled(baseConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
+      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;