mtrl 0.2.7 → 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/index.ts

@@ -1,4 +1,3 @@
 // src/components/textfield/index.ts
 export { default } from './textfield'
-export { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants'
 export { TextfieldConfig, TextfieldComponent } from './types'

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

@@ -1,15 +1,29 @@
 // src/components/textfield/types.ts
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
+
+/**
+ * Available Textfield variants
+ */
+export type TextfieldVariant = 'filled' | 'outlined';
+
+/**
+ * Available Textfield states
+ */
+export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+
+/**
+ * Available Textfield types
+ */
+export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
 
 /**
  * Configuration interface for the Textfield component
  */
 export interface TextfieldConfig {
   /** Input type (text, password, email, etc.) */
-  type?: keyof typeof TEXTFIELD_TYPES | string;
+  type?: TextfieldTypes | string;
   
   /** Visual variant (filled, outlined) */
-  variant?: keyof typeof TEXTFIELD_VARIANTS | string;
+  variant?: TextfieldVariant | string;
   
   /** Input name attribute */
   name?: string;
@@ -17,9 +31,6 @@ export interface TextfieldConfig {
   /** Label text */
   label?: string;
   
-  /** Placeholder text */
-  placeholder?: string;
-  
   /** Initial value */
   value?: string;
   
@@ -38,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/api.ts

@@ -9,7 +9,7 @@ import {
   TIME_FORMAT,
   TIME_PERIOD
 } from './types';
-import { EVENTS, SELECTORS } from './constants';
+import { EVENTS, SELECTORS } from './config';
 import { formatTime, padZero } from './utils';
 import { renderTimePicker } from './render';
 import { renderClockDial, getTimeValueFromClick } from './clockdial';

package/src/components/timepicker/clockdial.ts

@@ -1,7 +1,7 @@
 // src/components/timepicker/clockdial.ts
 
 import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE, TIME_PERIOD } from './types';
-import { DIAL_CONSTANTS, TIME_CONSTANTS } from './constants';
+import { DIAL_CONSTANTS, TIME_CONSTANTS } from './config';
 import { padZero } from './utils';
 
 /**
@@ -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/components/timepicker/config.ts

@@ -9,10 +9,108 @@ import { TimePickerConfig } from './types';
 import { 
   TIME_PICKER_TYPE, 
   TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT,
-  DEFAULT_CLOCK_ICON,
-  DEFAULT_KEYBOARD_ICON
-} from './constants';
+  TIME_FORMAT
+} from './types';
+
+export const DIAL_CONSTANTS = {
+  DIAMETER: 256,
+  INNER_RADIUS: 65,
+  OUTER_RADIUS: 110,
+  NUMBER_SIZE: 40,
+  CENTER_SIZE: 8,
+  HAND_SIZE: 36,
+  TRACK_WIDTH: 2,
+};
+
+/**
+ * Time constants used in the time picker.
+ */
+export const TIME_CONSTANTS = {
+  HOURS_12: Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)),
+  HOURS_24: Array.from({ length: 24 }, (_, i) => i),
+  MINUTES: Array.from({ length: 60 }, (_, i) => i),
+  SECONDS: Array.from({ length: 60 }, (_, i) => i),
+};
+
+/**
+ * Custom events fired by the time picker.
+ */
+export const EVENTS = {
+  CHANGE: 'change',
+  OPEN: 'open',
+  CLOSE: 'close',
+  CONFIRM: 'confirm',
+  CANCEL: 'cancel',
+};
+
+/**
+ * Element selectors for time picker components.
+ * Used for DOM manipulation and event delegation.
+ */
+export const SELECTORS = {
+  CONTAINER: '.mtrl-time-picker',
+  MODAL: '.mtrl-time-picker-modal',
+  DIALOG: '.mtrl-time-picker-dialog',
+  TITLE: '.mtrl-time-picker-title',
+  CONTENT: '.mtrl-time-picker-content',
+  DIAL: '.mtrl-time-picker-dial',
+  DIAL_CANVAS: '.mtrl-time-picker-dial-canvas',
+  DIAL_FACE: '.mtrl-time-picker-dial-face',
+  DIAL_HAND: '.mtrl-time-picker-dial-hand',
+  DIAL_CENTER: '.mtrl-time-picker-dial-center',
+  DIAL_NUMBERS: '.mtrl-time-picker-dial-numbers',
+  DIAL_NUMBER: '.mtrl-time-picker-dial-number',
+  INPUT_CONTAINER: '.mtrl-time-picker-input-container',
+  HOURS_INPUT: '.mtrl-time-picker-hours',
+  MINUTES_INPUT: '.mtrl-time-picker-minutes',
+  SECONDS_INPUT: '.mtrl-time-picker-seconds',
+  SEPARATOR: '.mtrl-time-picker-separator',
+  PERIOD_CONTAINER: '.mtrl-time-picker-period',
+  PERIOD_AM: '.mtrl-time-picker-period-am',
+  PERIOD_PM: '.mtrl-time-picker-period-pm',
+  ACTIONS: '.mtrl-time-picker-actions',
+  TOGGLE_TYPE_BUTTON: '.mtrl-time-picker-toggle-type',
+  CANCEL_BUTTON: '.mtrl-time-picker-cancel',
+  CONFIRM_BUTTON: '.mtrl-time-picker-confirm',
+};
+
+/**
+ * Z-index values for different parts of the time picker.
+ */
+export const Z_INDEX = {
+  MODAL: 1050,
+  DIALOG: 1051,
+};
+
+/**
+ * Default clock icon for time picker.
+ * Simple clock SVG.
+ */
+export const DEFAULT_CLOCK_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <polyline points="12 6 12 12 16 14"></polyline>
+</svg>
+`
+
+/**
+ * Default keyboard icon for time picker.
+ * Simple keyboard SVG.
+ */
+export const DEFAULT_KEYBOARD_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+  <line x1="6" y1="8" x2="6" y2="8"></line>
+  <line x1="10" y1="8" x2="10" y2="8"></line>
+  <line x1="14" y1="8" x2="14" y2="8"></line>
+  <line x1="18" y1="8" x2="18" y2="8"></line>
+  <line x1="6" y1="12" x2="6" y2="12"></line>
+  <line x1="10" y1="12" x2="10" y2="12"></line>
+  <line x1="14" y1="12" x2="14" y2="12"></line>
+  <line x1="18" y1="12" x2="18" y2="12"></line>
+  <line x1="6" y1="16" x2="18" y2="16"></line>
+</svg>
+`;
 
 /**
  * Default configuration for the TimePicker component

package/src/components/timepicker/index.ts

@@ -1,8 +1,3 @@
+// src/components/timepicker/index.ts
 export { default } from './timepicker';
-export { 
-  TIME_PICKER_TYPE, 
-  TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT, 
-  TIME_PERIOD 
-} from './constants';
 export type { TimePickerConfig, TimePickerComponent, TimeValue } from './types';

package/src/components/timepicker/render.ts

@@ -7,7 +7,7 @@ import {
   DEFAULT_CLOCK_ICON,
   DEFAULT_KEYBOARD_ICON,
   SELECTORS
-} from './constants';
+} from './config';
 import { padZero, convertTo12Hour } from './utils';
 import { renderClockDial, getTimeValueFromClick } from './clockdial';
 

package/src/components/timepicker/timepicker.ts

@@ -15,7 +15,7 @@ import {
   EVENTS,
   SELECTORS,
   Z_INDEX
-} from './constants';
+} from './config';
 import { createTimePickerAPI } from './api';
 import { renderTimePicker } from './render';
 import { parseTime, formatTime } from './utils';

package/src/components/tooltip/api.ts

@@ -1,6 +1,6 @@
 // src/components/tooltip/api.ts
 import { TooltipComponent } from './types';
-import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './constants';
+import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './config';
 
 interface ApiOptions {
   lifecycle: {

package/src/components/tooltip/config.ts

@@ -4,12 +4,33 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { TooltipConfig } from './types';
-import { 
-  TOOLTIP_POSITIONS, 
-  TOOLTIP_VARIANTS,
-  DEFAULT_SHOW_DELAY,
-  DEFAULT_HIDE_DELAY
-} from './constants';
+
+
+export const TOOLTIP_POSITIONS = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+}
+
+export const TOOLTIP_VARIANTS = {
+  DEFAULT: 'default',
+  RICH: 'rich',
+  PLAIN: 'plain'
+}
+
+export const DEFAULT_SHOW_DELAY = 300
+export const DEFAULT_HIDE_DELAY = 100
+export const DEFAULT_OFFSET = 8
+export const DEFAULT_ARROW_SIZE = 8
 
 /**
  * Default configuration for the Tooltip component

package/src/components/tooltip/index.ts

@@ -1,4 +1,3 @@
 // src/components/tooltip/index.ts
 export { default } from './tooltip';
-export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
 export { TooltipConfig, TooltipComponent } from './types';

package/src/components/tooltip/types.ts

@@ -1,5 +1,15 @@
 // src/components/tooltip/types.ts
-import { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS } from './constants';
+
+/**
+ * Available Textfield variants
+ */
+export type TooltipVariant = 'default' | 'rich' | 'plain';
+
+/**
+ * Available Textfield states
+ */
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
 
 /**
  * Configuration interface for the Tooltip component
@@ -22,13 +32,13 @@ export interface TooltipConfig {
    * Tooltip position relative to the target
    * @default 'bottom'
    */
-  position?: keyof typeof TOOLTIP_POSITIONS | string;
+  position?: TooltipPosition | string;
   
   /** 
    * Tooltip variant that determines visual styling
    * @default 'default'
    */
-  variant?: keyof typeof TOOLTIP_VARIANTS | string;
+  variant?: TooltipVariants | string;
   
   /** 
    * Whether the tooltip is initially visible