dees-catalog/readme.plan.md

Input Component Unification Plan

Command to reread guidelines: cat /home/philkunz/.claude/CLAUDE.md

Problem Summary

The dees-input components have inconsistent margin behavior causing vertical alignment issues in horizontal flexbox layouts:

• dees-input-text: 8px top, 24px bottom margin
• dees-input-dropdown: 0px top, 24px bottom margin
• dees-input-checkbox/radio: 20px top, 20px bottom margin
• Different components use different label implementations (some use dees-label, others have built-in labels)

Proposed Solution

1. Standardize Margin System

Create a unified margin approach for all input components:

/* Default vertical stacking mode (for forms) */
:host {
  margin: 0;
  margin-bottom: 16px; /* Reduced from 24px for better density */
}

/* Last child in container should have no bottom margin */
:host(:last-child) {
  margin-bottom: 0;
}

/* Horizontal layout mode - activated by parent context or attribute */
:host([horizontal-layout]) {
  margin: 0;
  margin-right: 16px;
  margin-bottom: 0;
}

:host([horizontal-layout]:last-child) {
  margin-right: 0;
}

2. Unified Label Architecture

All input components should use the dees-label component for consistency:

• Move label rendering from built-in implementations to dees-label usage
• Add a labelPosition property to all inputs: 'top' | 'left' | 'right' | 'none'
• Default to 'top' for text/dropdown, 'right' for checkbox/radio

3. Layout Mode Support

Add a layoutMode property to all input components:

@property({ type: String })
public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';

• vertical: Traditional form layout (label on top)
• horizontal: Inline layout (label position configurable)
• auto: Detect from parent context

4. Implementation Steps

1. Create base input class (DeesInputBase):

   • Common margin styles
   • Layout mode detection
   • Label position handling
   • Shared properties (key, required, disabled, value)

2. Update dees-input-text:

   • Extend from DeesInputBase
   • Remove hardcoded margins
   • Keep using dees-label component

3. Update dees-input-dropdown:

   • Extend from DeesInputBase
   • Remove hardcoded margins
   • Switch from built-in label to dees-label

4. Update dees-input-checkbox:

   • Extend from DeesInputBase
   • Remove hardcoded margins
   • Add support for label position (keep default as 'right')
   • Switch to dees-label component

5. Update dees-input-radio:

   • Same as checkbox

6. Update dees-form:

   • Add property to control child input layout mode
   • Ensure proper spacing context

5. CSS Variable System

Introduce CSS variables for consistent spacing:

:host {
  --dees-input-spacing-unit: 8px;
  --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
  --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
  --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
}

6. Backward Compatibility

• Keep existing properties and methods
• Add deprecation notices for properties that will be removed
• Provide migration guide in documentation

7. Testing Requirements

• Test all inputs in vertical form layouts
• Test all inputs in horizontal flexbox containers
• Test mixed input types in same container
• Test with and without labels
• Test theme switching (light/dark)
• Test responsive behavior

Expected Outcome

• All input components will align properly in horizontal layouts
• Consistent spacing in vertical forms
• Unified label handling across all inputs
• Better developer experience with predictable behavior
• Maintained backward compatibility

Timeline

1. Phase 1: Create DeesInputBase class and update dees-input-text ✅
2. Phase 2: Update remaining input components ✅
3. Phase 3: Update documentation and examples ✅
4. Phase 4: Testing and refinement ✅

Implementation Status

Completed:

1. Created DeesInputBase class (dees-input-base.ts):

   • Generic base class with unified margin system
   • Layout mode support (vertical/horizontal/auto)
   • Label position control
   • Common properties and methods
   • CSS variables for consistent spacing

2. Updated all input components:

   • dees-input-text: Now extends DeesInputBase, margins removed
   • dees-input-dropdown: Now extends DeesInputBase, uses dees-label
   • dees-input-checkbox: Now extends DeesInputBase, uses dees-label (default label position: right)
   • dees-input-radio: Now extends DeesInputBase, uses dees-label (default label position: right)
   • dees-input-phone: Now extends DeesInputBase with phone formatting functionality
   • dees-input-iban: Now extends DeesInputBase with IBAN validation
   • dees-input-quantityselector: Now extends DeesInputBase
   • dees-input-multitoggle: Now extends DeesInputBase with value property for forms
   • dees-input-typelist: Now extends DeesInputBase
   • dees-input-fileupload: Now extends DeesInputBase, uses dees-label

3. Updated dees-form:

   • Added horizontal-layout property
   • Auto-detection of layout mode for child inputs
   • Added dropdown to form input types

4. Fixed TypeScript errors:

   • Added value property to dropdown for form compatibility
   • Fixed changeSubject typing
   • Updated form value type to include dropdown options
   • Fixed firstUpdated method signatures (phone, iban, fileupload)
   • Fixed CSS-in-JS errors in quantityselector (removed dynamic references)
   • Added value property to multitoggle for form compatibility
   • Removed duplicate properties in fileupload (label, key, disabled, required)

Result:

All input components now have:

• Unified 16px bottom margin in vertical layouts
• 16px right margin in horizontal layouts
• No margin on last child
• Consistent label handling via dees-label
• Flexible layout modes
• Better alignment in flexbox containers

Demo Improvements

Created external demo files:

1. dees-input-text.demo.ts: Comprehensive demos showing:

   • Basic text inputs with descriptions
   • Horizontal layout examples
   • Label position variations
   • Validation states
   • Password input features

2. dees-input-checkbox.demo.ts: Interactive demos featuring:

   • Basic checkbox usage
   • Horizontal layout groups
   • Feature selection with batch operations
   • Real-world examples

3. dees-input-radio.demo.ts: Radio button demos including:

   • Radio groups with proper behavior
   • Horizontal yes/no questions
   • Survey-style layouts
   • Settings examples

Updated existing demos:

1. dees-input-dropdown.demo.ts: Enhanced with dees-demowrapper and comprehensive examples
2. dees-form.demo.ts: Added horizontal form layout examples and advanced form features
3. dees-simple-appdash.demo.ts: Enhanced settings view with horizontal forms and radio groups

All demos now use the dees-demowrapper component for consistency and include proper styling for light/dark themes.