mtrl 0.2.8 → 0.3.0

package/src/components/switch/index.ts

@@ -1,3 +1,4 @@
 // src/components/switch/index.ts
 export { default } from './switch'
 export { SwitchConfig, SwitchComponent } from './types'
+export { withSupportingText, SupportingTextComponent } from './features'

package/src/components/switch/switch.ts

@@ -11,11 +11,11 @@ import {
   withCheckable
 } from '../../core/compose/features';
 import { withAPI } from './api';
+import { withSupportingText } from './features';
 import { SwitchConfig, SwitchComponent, BaseComponent } from './types';
 import { 
   createBaseConfig, 
   getElementConfig, 
-  withLabelPosition,
   getApiConfig
 } from './config';
 
@@ -32,10 +32,10 @@ const createSwitch = (config: SwitchConfig = {}): SwitchComponent => {
       createBase,
       withEvents(), // Move events first to ensure system is available
       withElement(getElementConfig(baseConfig)),
+      withTextLabel(baseConfig),
       withInput(baseConfig),
       withTrack(baseConfig),
-      withTextLabel(baseConfig),
-      withLabelPosition(baseConfig),
+      withSupportingText(baseConfig),
       withCheckable(baseConfig),
       withDisabled(baseConfig),
       withLifecycle(),

package/src/components/switch/types.ts

@@ -24,8 +24,11 @@ export interface SwitchConfig {
   /** Label text */
   label?: string;
   
-  /** Label position (start/end) */
-  labelPosition?: SwitchPosition | string;
+  /** Supporting text content */
+  supportingText?: string;
+  
+  /** Whether supporting text indicates an error */
+  error?: boolean;
   
   /** Additional CSS classes */
   class?: string;
@@ -77,6 +80,15 @@ export interface SwitchComponent {
   /** Gets the switch's label text */
   getLabel: () => string;
   
+  /** Supporting text element */
+  supportingTextElement: HTMLElement | null;
+  
+  /** Sets supporting text content */
+  setSupportingText: (text: string, isError?: boolean) => SwitchComponent;
+  
+  /** Removes supporting text */
+  removeSupportingText: () => SwitchComponent;
+  
   /** Adds event listener */
   on: (event: string, handler: Function) => SwitchComponent;
   

package/src/components/textfield/api.ts

@@ -1,6 +1,11 @@
 // src/components/textfield/api.ts
 import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
 
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
 /**
  * Enhances textfield component with API methods
  * @param {ApiOptions} options - API configuration
@@ -43,6 +48,54 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     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);
+      }
+      return this;
+    },
+    
+    removeLeadingIcon(): TextfieldComponent {
+      if (component.removeLeadingIcon) {
+        component.removeLeadingIcon();
+      }
+      return this;
+    },
+    
+    // Trailing icon management (if present)
+    trailingIcon: component.trailingIcon || null,
+    setTrailingIcon(html: string): TextfieldComponent {
+      if (component.setTrailingIcon) {
+        component.setTrailingIcon(html);
+      }
+      return this;
+    },
+    
+    removeTrailingIcon(): TextfieldComponent {
+      if (component.removeTrailingIcon) {
+        component.removeTrailingIcon();
+      }
+      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;
+    },
 
     // Event handling
     on(event: string, handler: Function): TextfieldComponent {

package/src/components/textfield/features.ts

@@ -0,0 +1,322 @@
+// src/components/textfield/features.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;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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 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;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Creates and manages a leading icon for a component
+ * @param config - Configuration object with leading icon settings
+ * @returns Function that enhances a component with leading icon functionality
+ */
+export const withLeadingIcon = <T extends LeadingIconConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & LeadingIconComponent => {
+    if (!config.leadingIcon) {
+      return component as C & LeadingIconComponent;
+    }
+    
+    // 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);
+      };
+    }
+
+    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`);
+          }
+          this.leadingIcon = null;
+        }
+        return this;
+      }
+    };
+  };
+
+/**
+ * Creates and manages a trailing icon for a component
+ * @param config - Configuration object with trailing icon settings
+ * @returns Function that enhances a component with trailing icon functionality
+ */
+export const withTrailingIcon = <T extends TrailingIconConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & TrailingIconComponent => {
+    if (!config.trailingIcon) {
+      return component as C & TrailingIconComponent;
+    }
+    
+    // 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;
+      }
+    };
+  };
+
+/**
+ * Creates and manages supporting text for a component
+ * @param config - Configuration object with supporting text settings
+ * @returns Function that enhances a component with supporting text functionality
+ */
+export const withSupportingText = <T extends SupportingTextConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & SupportingTextComponent => {
+    if (!config.supportingText) {
+      return component as C & SupportingTextComponent;
+    }
+    
+    // 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/textfield.ts

@@ -10,6 +10,11 @@ import {
   withTextLabel
 } from '../../core/compose/features';
 import { withAPI } from './api';
+import { 
+  withLeadingIcon, 
+  withTrailingIcon, 
+  withSupportingText 
+} from './features';
 import { TextfieldConfig, TextfieldComponent } from './types';
 import { 
   createBaseConfig, 
@@ -33,6 +38,9 @@ const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
       withVariant(baseConfig),
       withTextInput(baseConfig),
       withTextLabel(baseConfig),
+      withLeadingIcon(baseConfig),
+      withTrailingIcon(baseConfig),
+      withSupportingText(baseConfig),
       withDisabled(baseConfig),
       withLifecycle(),
       comp => withAPI(getApiConfig(comp))(comp)

package/src/components/textfield/types.ts

@@ -31,9 +31,6 @@ export interface TextfieldConfig {
   /** Label text */
   label?: string;
   
-  /** Placeholder text */
-  placeholder?: string;
-  
   /** Initial value */
   value?: string;
   
@@ -52,6 +49,18 @@ export interface TextfieldConfig {
   /** 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;
+  
   /** Additional CSS classes */
   class?: string;
   

package/src/components/timepicker/clockdial.ts

@@ -48,12 +48,9 @@ const CLOCK_CONSTANTS = {
 function getThemeColors(prefix: string): ThemeColors {
   const root = document.documentElement;
   const styles = getComputedStyle(root);
-  console.log('styles', styles)
+
   // Extract primary color
   const primaryColor = styles.getPropertyValue(`--${prefix}-sys-color-primary`).trim() || '#6750A4';
-  
-
-  console.log('primaryColor', primaryColor)
 
   // Extract on-primary color
   const onPrimaryColor = styles.getPropertyValue(`--${prefix}-sys-color-on-primary`).trim() || '#FFFFFF';

package/src/core/compose/features/textinput.ts

@@ -112,14 +112,14 @@ export interface TextInputComponent extends ElementComponent {
  */
 export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) => 
   <C extends ElementComponent>(component: C): C & TextInputComponent => {
-    const input = document.createElement(config.multiline ? 'textarea' : 'input') as 
+    const isMultiline = config.multiline || config.type === 'multiline';
+    const input = document.createElement(isMultiline ? 'textarea' : 'input') as 
       HTMLInputElement | HTMLTextAreaElement;
     
     input.className = `${component.getClass('textfield')}-input`;
 
     // Set input attributes
     const attributes: Record<string, string | number | boolean | undefined> = {
-      type: config.multiline ? undefined : (config.type || 'text'),
       name: config.name,
       required: config.required,
       disabled: config.disabled,
@@ -129,6 +129,14 @@ export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) =>
       value: config.value || ''
     };
 
+    // Only set type attribute for input elements, not for textarea
+    if (!isMultiline) {
+      attributes.type = config.type || 'text';
+    } else {
+      // For textarea, add a data attribute to identify it as multiline
+      attributes['data-type'] = 'multiline';
+    }
+
     Object.entries(attributes).forEach(([key, value]) => {
       if (value !== null && value !== undefined) {
         if (typeof value === 'boolean') {
@@ -188,6 +196,11 @@ export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) =>
     // Initial state
     updateInputState();
 
+    // Add multiline class to the component if it's a textarea
+    if (isMultiline) {
+      component.element.classList.add(`${component.getClass('textfield')}--multiline`);
+    }
+
     component.element.appendChild(input);
 
     // Cleanup

package/src/core/composition/features/dom.ts

@@ -0,0 +1,45 @@
+// src/core/composition/features/dom.ts
+import createLayout from '../../layout';
+
+/**
+ * Creates DOM elements from component schema using the core createLayout utility
+ * This is a key feature that bridges the gap between declarative schema and actual DOM
+ * 
+ * @returns Component enhancer that creates DOM structure from schema
+ * 
+ * @example
+ * ```ts
+ * // Materialize component schema into DOM
+ * const component = pipe(
+ *   createBase,
+ *   withLayout(config),
+ *   withIcon(config),
+ *   withLabel(config),
+ *   withDom()
+ * )(config);
+ * ```
+ */
+export const withDom = () => component => {
+  // Return unmodified component if no schema
+  if (!component.schema) {
+    return component;
+  }
+  
+  try {
+    // Use the createLayout function to build the DOM from schema
+    const layout = createLayout(component.schema);
+    
+    // Use the layout's utility functions to get components
+    const components = layout.getAll();
+
+    // Return enhanced component with DOM layout
+    return {
+      ...component,
+      element: layout.element, // Root element
+      components               // All component elements
+    };
+  } catch (error) {
+    console.error('Failed to create DOM structure:', error);
+    throw new Error(`Failed to create component DOM: ${error.message}`);
+  }
+};