mtrl 0.3.8 → 0.4.0

package/src/components/textfield/api.ts

@@ -1,197 +0,0 @@
-// src/components/textfield/api.ts
-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 const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: BaseComponent & Partial<PlacementComponent>): TextfieldComponent => ({
-    ...component as any,
-    element: component.element,
-    input: component.input as HTMLInputElement | HTMLTextAreaElement,
-
-    // Value management
-    getValue: component.getValue || (() => ''),
-    setValue(value: string): TextfieldComponent {
-      component.setValue?.(value);
-      return this;
-    },
-
-    // Attributes API
-    setAttribute(name: string, value: string): TextfieldComponent {
-      component.setAttribute?.(name, value);
-      return this;
-    },
-    
-    getAttribute(name: string): string | null {
-      return component.getAttribute?.(name) || null;
-    },
-    
-    removeAttribute(name: string): TextfieldComponent {
-      component.removeAttribute?.(name);
-      return this;
-    },
-
-    // Label management
-    setLabel(text: string): TextfieldComponent {
-      component.label?.setText(text);
-      // Update positions after changing label
-      if (component.updateElementPositions) {
-        setTimeout(() => component.updateElementPositions(), 10);
-      }
-      return this;
-    },
-    
-    getLabel(): string {
-      return component.label?.getText() || '';
-    },
-    
-    // Leading icon management (if present)
-    leadingIcon: component.leadingIcon || null,
-    setLeadingIcon(html: string): TextfieldComponent {
-      if (component.setLeadingIcon) {
-        component.setLeadingIcon(html);
-        // Update positions after changing icon
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    removeLeadingIcon(): TextfieldComponent {
-      if (component.removeLeadingIcon) {
-        component.removeLeadingIcon();
-        // Update positions after removing icon
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    // Trailing icon management (if present)
-    trailingIcon: component.trailingIcon || null,
-    setTrailingIcon(html: string): TextfieldComponent {
-      if (component.setTrailingIcon) {
-        component.setTrailingIcon(html);
-        // Update positions after changing icon
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    removeTrailingIcon(): TextfieldComponent {
-      if (component.removeTrailingIcon) {
-        component.removeTrailingIcon();
-        // Update positions after removing icon
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    // Supporting text management (if present)
-    supportingTextElement: component.supportingTextElement || null,
-    setSupportingText(text: string, isError?: boolean): TextfieldComponent {
-      if (component.setSupportingText) {
-        component.setSupportingText(text, isError);
-      }
-      return this;
-    },
-    
-    removeSupportingText(): TextfieldComponent {
-      if (component.removeSupportingText) {
-        component.removeSupportingText();
-      }
-      return this;
-    },
-    
-    // Prefix text management (if present)
-    prefixTextElement: component.prefixTextElement || null,
-    setPrefixText(text: string): TextfieldComponent {
-      if (component.setPrefixText) {
-        component.setPrefixText(text);
-        // Update positions after changing prefix
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    removePrefixText(): TextfieldComponent {
-      if (component.removePrefixText) {
-        component.removePrefixText();
-        // Update positions after removing prefix
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    // Suffix text management (if present)
-    suffixTextElement: component.suffixTextElement || null,
-    setSuffixText(text: string): TextfieldComponent {
-      if (component.setSuffixText) {
-        component.setSuffixText(text);
-        // Update positions after changing suffix
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-    
-    removeSuffixText(): TextfieldComponent {
-      if (component.removeSuffixText) {
-        component.removeSuffixText();
-        // Update positions after removing suffix
-        if (component.updateElementPositions) {
-          setTimeout(() => component.updateElementPositions(), 10);
-        }
-      }
-      return this;
-    },
-
-    // Update positioning manually (useful after DOM updates)
-    updatePositions(): TextfieldComponent {
-      if (component.updateElementPositions) {
-        component.updateElementPositions();
-      }
-      return this;
-    },
-
-    // Event handling
-    on(event: string, handler: Function): TextfieldComponent {
-      component.on?.(event, handler);
-      return this;
-    },
-    
-    off(event: string, handler: Function): TextfieldComponent {
-      component.off?.(event, handler);
-      return this;
-    },
-
-    // State management
-    enable(): TextfieldComponent {
-      disabled.enable();
-      return this;
-    },
-    
-    disable(): TextfieldComponent {
-      disabled.disable();
-      return this;
-    },
-    
-    destroy(): void {
-      lifecycle.destroy();
-    }
-  });

package/src/components/textfield/config.ts

@@ -1,52 +0,0 @@
-// src/components/textfield/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
-
-/**
- * Default configuration for the Textfield component
- */
-export const defaultConfig: TextfieldConfig = {
-  type: 'text',
-  variant: 'filled'
-};
-
-/**
- * Creates the base configuration for Textfield component
- * @param {TextfieldConfig} config - User provided configuration
- * @returns {TextfieldConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: TextfieldConfig = {}): TextfieldConfig => 
-  createComponentConfig(defaultConfig, config, 'textfield') as TextfieldConfig;
-
-/**
- * Generates element configuration for the Textfield component
- * @param {TextfieldConfig} config - Textfield configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: TextfieldConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    componentName: 'textfield',
-    className: config.class
-  });
-
-/**
- * Creates API configuration for the Textfield component
- * @param {BaseComponent} comp - Component with disabled and lifecycle features
- * @returns {ApiOptions} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
-  disabled: {
-    enable: comp.disabled?.enable,
-    disable: comp.disabled?.disable
-  },
-  lifecycle: {
-    destroy: comp.lifecycle?.destroy
-  }
-});
-
-export default defaultConfig;

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

@@ -1,127 +0,0 @@
-// src/components/textfield/features/leading-icon.ts
-
-import { BaseComponent, ElementComponent } from '../../../core/compose/component';
-
-/**
- * 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 const withLeadingIcon = <T extends LeadingIconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & LeadingIconComponent => {
-    if (!config.leadingIcon) {
-      return component as any;
-    }
-    
-    // Create icon element
-    const PREFIX = config.prefix || 'mtrl';
-    const iconElement = document.createElement('span');
-    iconElement.className = `${PREFIX}-${config.componentName || 'textfield'}-leading-icon`;
-    iconElement.innerHTML = config.leadingIcon;
-    
-    // Add leading icon to the component
-    component.element.appendChild(iconElement);
-    
-    // Add leading-icon class to the component
-    component.element.classList.add(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-    
-    // When there's a leading icon, adjust input padding
-    if (component.input) {
-      component.input.classList.add(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-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);
-      };
-    }
-    
-    // Update label position based on icon
-    setTimeout(() => {
-      const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
-      if (labelEl) {
-        if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
-          (labelEl as HTMLElement).style.left = '44px';
-        }
-      }
-    }, 10);
-
-    return {
-      ...component,
-      leadingIcon: iconElement,
-      
-      setLeadingIcon(html: string) {
-        iconElement.innerHTML = html;
-        return this;
-      },
-      
-      removeLeadingIcon() {
-        if (iconElement.parentNode) {
-          iconElement.remove();
-          component.element.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}--with-leading-icon`);
-          if (component.input) {
-            component.input.classList.remove(`${PREFIX}-${config.componentName || 'textfield'}-input--with-leading-icon`);
-          }
-          
-          // Reset label position if no prefix
-          if (!component.element.classList.contains(`${PREFIX}-${config.componentName || 'textfield'}--with-prefix`)) {
-            const labelEl = component.element.querySelector(`.${PREFIX}-${config.componentName || 'textfield'}-label`);
-            if (labelEl) {
-              (labelEl as HTMLElement).style.left = '';
-            }
-          }
-          
-          this.leadingIcon = null;
-        }
-        return this;
-      }
-    };
-  };

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

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

@@ -1,107 +0,0 @@
-// 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;
-      }
-    };
-  };