juxscript 1.1.3 → 1.1.5

package/lib/components/switch.ts

@@ -1,246 +0,0 @@
-import { FormInput, FormInputState } from './base/FormInput.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change'] as const;
-
-export interface SwitchOptions {
-    checked?: boolean;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (checked: boolean) => boolean | string;
-}
-
-interface SwitchState extends FormInputState {
-    checked: boolean;
-    value: string;
-}
-
-export class Switch extends FormInput<SwitchState> {
-    constructor(id: string, options: SwitchOptions = {}) {
-        super(id, {
-            checked: options.checked ?? false,
-            value: options.value ?? 'on',
-            label: options.label ?? '',
-            required: options.required ?? false,
-            disabled: options.disabled ?? false,
-            name: options.name ?? id,
-            style: options.style ?? '',
-            class: options.class ?? '',
-            errorMessage: undefined
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from FormInput/BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
-    checked(value: boolean): this {
-        return this.setValue(value);
-    }
-
-    value(value: string): this {
-        this.state.value = value;
-        return this;
-    }
-
-    toggle(): this {
-        return this.setValue(!this.state.checked);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): boolean {
-        return this.state.checked;
-    }
-
-    setValue(value: boolean): this {
-        this.state.checked = value;
-        if (this._inputElement) {
-            (this._inputElement as HTMLInputElement).checked = value;
-        }
-        return this;
-    }
-
-    protected _validateValue(checked: boolean): boolean | string {
-        const { required } = this.state;
-
-        if (required && !checked) {
-            return 'This field must be enabled';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(checked);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        const { checked, value, required, disabled, name } = this.state;
-
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = 'jux-switch-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.value = value;
-        input.checked = checked;
-        input.required = required;
-        input.disabled = disabled;
-
-        return input;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { style, class: className } = this.state;
-
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-switch';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Switch container
-        const switchContainer = document.createElement('label');
-        switchContainer.className = 'jux-switch-container';
-        switchContainer.htmlFor = `${this._id}-input`;
-
-        // Input element
-        const inputEl = this._buildInputElement() as HTMLInputElement;
-        this._inputElement = inputEl;
-        switchContainer.appendChild(inputEl);
-
-        // Toggle slider
-        const slider = document.createElement('span');
-        slider.className = 'jux-switch-slider';
-        switchContainer.appendChild(slider);
-
-        // Label text
-        if (this.state.label) {
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-switch-label-text';
-            labelText.textContent = this.state.label;
-            if (this.state.required) {
-                const requiredSpan = document.createElement('span');
-                requiredSpan.className = 'jux-input-required';
-                requiredSpan.textContent = ' *';
-                labelText.appendChild(requiredSpan);
-            }
-            switchContainer.appendChild(labelText);
-        }
-
-        wrapper.appendChild(switchContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-
-        // Wire switch-specific sync (maps 'checked' to 'value' property for consistency)
-        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
-
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-
-            const transformToState = toState || ((v: boolean) => v);
-            const transformToComponent = toComponent || ((v: any) => Boolean(v));
-
-            let isUpdating = false;
-
-            // State → Component
-            stateObj.subscribe((val: any) => {
-                if (isUpdating) return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-
-            // Component → State
-            inputEl.addEventListener('change', () => {
-                if (isUpdating) return;
-                isUpdating = true;
-
-                const checked = inputEl.checked;
-                this.state.checked = checked;
-                this._clearError();
-
-                const transformed = transformToState(checked);
-                stateObj.set(transformed);
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked);
-
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        } else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', () => {
-                this.state.checked = inputEl.checked;
-                this._clearError();
-
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked);
-            });
-        }
-
-        // Always add blur validation
-        inputEl.addEventListener('blur', () => {
-            this.validate();
-        });
-
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v: any) => String(v));
-            labelSync.stateObj.subscribe((val: any) => {
-                this.label(transform(val));
-            });
-        }
-
-        container.appendChild(wrapper);
-
-        return this;
-    }
-}
-
-export function switchComponent(id: string, options: SwitchOptions = {}): Switch {
-    return new Switch(id, options);
-}
-