mtrl 0.2.8 → 0.2.9

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,33 @@
+// src/core/composition/features/dom.ts
+import { createStructure, flattenStructure } from '../../structure';
+
+/**
+ * Creates DOM elements from structure definition using the core createStructure utility
+ * This is a key feature that bridges the gap between declarative structure and actual DOM
+ * 
+ * @returns Component enhancer that creates DOM structure
+ */
+export const withDom = () => component => {
+  // Return unmodified component if no structure definition
+  if (!component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Use the existing createStructure function to build the DOM
+    const structure = createStructure(component.structureDefinition);
+    
+    // Use the existing flattenStructure function to create a flat reference map
+    const components = structure.getAll();
+
+    // Return enhanced component with DOM structure
+    return {
+      ...component,
+      element: structure.element, // Root element
+      components                  // All component elements
+    };
+  } catch (error) {
+    console.error('Failed to create DOM structure:', error);
+    throw new Error(`Failed to create slider DOM: ${error.message}`);
+  }
+};

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

@@ -0,0 +1,131 @@
+// src/core/composition/features/icon.ts
+import { createElement } from '../../dom/create';
+
+/**
+ * Configuration for icon feature
+ */
+export interface IconConfig {
+  /**
+   * Icon HTML content
+   */
+  icon?: string;
+  
+  /**
+   * Position of the icon ('start' or 'end')
+   */
+  iconPosition?: 'start' | 'end';
+  
+  /**
+   * Size variant for the icon
+   */
+  iconSize?: string;
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Enhances structure definition with an icon element
+ * Unlike the traditional withIcon, this modifies the structure definition
+ * without creating actual DOM elements.
+ * 
+ * @param config Configuration containing icon information
+ * @returns Component enhancer that adds icon to structure definition
+ * 
+ * @example
+ * ```ts
+ * // Add icon to a structure definition
+ * const component = pipe(
+ *   createBase,
+ *   withStructure(config),
+ *   withIcon(config)
+ * )(config);
+ * ```
+ */
+export const withIcon = (config: IconConfig) => component => {
+  // If no icon or missing structure definition, return unmodified
+  if (!config.icon || !component.structureDefinition) {
+    return component;
+  }
+  
+  try {
+    // Get component details for class names
+    const prefix = config.prefix || component.config?.prefix || 'mtrl';
+    const componentName = config.componentName || component.componentName || 'component';
+    
+    // Clone the structure definition
+    const structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    
+    // Determine icon position
+    const position = config.iconPosition || 'start';
+    
+    // Add the --icon modifier class to the main element
+    const elementClasses = structureDefinition.element.options.className || [];
+    const iconModifierClass = `${prefix}-${componentName}--icon`;
+    
+    if (Array.isArray(elementClasses)) {
+      if (!elementClasses.includes(iconModifierClass)) {
+        elementClasses.push(iconModifierClass);
+      }
+    } else if (typeof elementClasses === 'string') {
+      if (!elementClasses.includes(iconModifierClass)) {
+        structureDefinition.element.options.className = `${elementClasses} ${iconModifierClass}`.trim();
+      }
+    } else {
+      structureDefinition.element.options.className = [iconModifierClass];
+    }
+    
+    // Create icon element definition with component-specific class
+    const iconDef = {
+      name: 'icon',
+      creator: createElement,
+      options: {
+        tag: 'span',
+        className: [
+          `${prefix}-${componentName}-icon`,
+          `${prefix}-${componentName}-icon--${position}`
+        ],
+        html: config.icon
+      }
+    };
+    
+    // Add size class if specified
+    if (config.iconSize) {
+      const classes = iconDef.options.className;
+      if (Array.isArray(classes)) {
+        classes.push(`${prefix}-${componentName}-icon--${config.iconSize}`);
+      }
+    }
+    
+    // Add icon directly to the main element's children
+    if (position === 'start') {
+      // Create new children object with icon first
+      const existingChildren = { ...structureDefinition.element.children };
+      structureDefinition.element.children = {
+        icon: iconDef,
+        ...existingChildren
+      };
+    } else {
+      // Add icon after existing children
+      structureDefinition.element.children.icon = iconDef;
+    }
+    
+    // Return component with updated structure definition
+    return {
+      ...component,
+      structureDefinition
+    };
+  } catch (error) {
+    console.warn('Error enhancing structure with icon:', error);
+    return component;
+  }
+};

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

@@ -0,0 +1,11 @@
+// src/core/composition/features/index.ts
+
+// Export composition features
+export { withIcon } from './icon';
+export { withLabel } from './label';
+export { withDom } from './dom';
+export { withStructure } from './structure';
+
+// Re-export interface types for better developer experience
+export type { IconConfig } from './icon';
+export type { LabelConfig } from './label';