@widgetic/editor 3.11.4 → 4.0.1

package/dist/components/ic/SliderInputController.svelte

@@ -0,0 +1,411 @@
+<script lang="ts">
+  /**
+   * SliderInputController Component
+   * A customizable slider input with numeric input field and extended range controls.
+   * Features include:
+   * - Draggable slider with min/max extensions
+   * - Numeric input field for precise values
+   * - Focus management and keyboard navigation
+   * - Value clamping and validation
+   * - Smart click positioning: center thumb at clicked position on track
+   */
+
+  // Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+
+  /**
+   * Shadcn UI components from Widgetic design-system package
+   */
+  import { Slider, type SliderProps } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+  
+  // Component config
+  import type { InputControllerConfig } from './index';
+
+  /**
+   * Component Props
+   * External properties that configure the slider's behavior
+   */
+  let className = '';
+  export { className as class };
+  export let height = 48; // pixels
+  export let elementsGap = 8; // pixels
+  export let thumbSize = 24; // pixels
+  export let sliderType: SliderProps['type'] = "single";
+  export let barHeight = 8; // pixels
+  export let label: string = '';                         // Display label
+  export let value: number | number[];  // Current slider value
+  export let onChange: (newValue: number | number[]) => void;   // Value change callback
+  export let config: InputControllerConfig = {};     // Additional configuration
+  export let helpText: string | undefined = undefined; // Help text for the input
+  
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks
+   */
+  export let min: number = config.min || 0;         // Minimum allowed value
+  export let max: number = config.max || 100;       // Maximum allowed value
+  export let step: number = config.step || 1;       // Step increment
+  export let onFocus: () => void = () => {};        // Focus callback
+  export let autofocus: boolean = false;            // Auto-focus on mount
+
+  /**
+   * Internal State
+   * Tracks component state for focus and value management
+   */
+  let sliderContainer: HTMLDivElement;              // Reference to container element
+  let sliderTrack: HTMLDivElement;                  // Reference to slider track element
+  let lastValue = value;                            // Previous value for change detection
+  let isCurrentlyFocused = false;                   // Current focus state
+  let isClickHandled = false;                       // Prevents double handling of clicks
+
+  /**
+   * Layout Constants
+   * Define dimensions for slider components
+   */
+  const valueDisplayWidth = 26; // pixels
+
+  
+  /**
+   * Component Initialization
+   * Sets up focus handling and event listeners
+   */
+  onMount(() => {
+    // console.log('SliderIC sliderType:', sliderType, sliderValue);
+    // Handle autofocus if enabled
+    if (autofocus && sliderContainer) {
+      const thumbElement = sliderContainer.querySelector('[role="slider"]');
+      if (thumbElement instanceof HTMLElement) {
+        thumbElement.focus();
+        handleFocus();
+      }
+    }
+
+    // Add mousedown handler to the slider component for track click positioning
+    const sliderElement = sliderContainer.querySelector('.slider-component');
+    if (sliderElement) {
+      sliderElement.addEventListener('mousedown', handleSliderMouseDown);
+    }
+
+    /**
+     * Blur Event Handler
+     * Resets focus state when focus leaves the component
+     */
+    const handleBlur = (e: FocusEvent) => {
+      if (!sliderContainer.contains(e.relatedTarget as Node)) {
+        isCurrentlyFocused = false;
+      }
+    };
+
+    sliderContainer.addEventListener('blur', handleBlur, true);
+    
+    // Add global mouse up handler to reset click state
+    const handleGlobalMouseUp = () => {
+      isClickHandled = false;
+    };
+    
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    
+    return () => {
+      sliderContainer.removeEventListener('blur', handleBlur, true);
+      document.removeEventListener('mouseup', handleGlobalMouseUp);
+      
+      // Clean up slider mousedown listener
+      if (sliderElement) {
+        sliderElement.removeEventListener('mousedown', handleSliderMouseDown);
+      }
+    };
+  });
+
+  onDestroy(() => {
+    isClickHandled = false;
+  });
+
+  /**
+   * Value Change Handler
+   * Updates value and manages focus state
+   * @param newValue - New slider value(s)
+   */
+  function handleChange(newValue: number | number[]) {
+    // Only trigger focus if value actually changed and we're not already focused
+    if ((newValue !== lastValue) && !isCurrentlyFocused) {
+      handleFocus();
+      isCurrentlyFocused = true;
+    }
+
+    // call the onChange callback
+    onChange(newValue);
+
+    // update the lastValue
+    lastValue = newValue;
+  }
+
+  /**
+   * Custom Track Click Handler
+   * Positions the thumb so that the clicked point becomes the center of the thumb
+   * @param event - Mouse event (cast to MouseEvent internally)
+   */
+  function handleSliderMouseDown(event: Event) {
+    if (isClickHandled) return;
+    
+    // Cast event to MouseEvent
+    const mouseEvent = event as MouseEvent;
+    
+    // Check if click was on the thumb itself
+    const target = mouseEvent.target as HTMLElement;
+    if (target.getAttribute('role') === 'slider') {
+      // Click was on thumb, let it handle normally
+      return;
+    }
+
+    // This was a click on the track, so we'll position the thumb
+    const sliderElement = sliderContainer.querySelector('.slider-component');
+    if (!sliderElement) return;
+
+    const rect = sliderElement.getBoundingClientRect();
+    const clickX = mouseEvent.clientX - rect.left;
+    const trackWidth = rect.width;
+
+    // Calculate the percentage position of the click
+    let percentage = (clickX / trackWidth) * 100;
+    
+    // Clamp to valid range
+    percentage = Math.max(0, Math.min(100, percentage));
+    
+    // Convert percentage to value
+    const rawValue = min + (percentage / 100) * (max - min);
+    
+    // Round to nearest step
+    const steppedValue = Math.round((rawValue - min) / step) * step + min;
+    
+    // Ensure value is within bounds
+    const clampedValue = Math.max(min, Math.min(max, steppedValue));
+
+    // Handle different slider types
+    if (sliderType === 'single') {
+      handleChange(clampedValue);
+    } else if (sliderType === 'multiple' && Array.isArray(value)) {
+      // For range sliders, determine which thumb to move based on proximity
+      const currentValue = value as [number, number];
+      const distanceToStart = Math.abs(clampedValue - currentValue[0]);
+      const distanceToEnd = Math.abs(clampedValue - currentValue[1]);
+      
+      if (distanceToStart < distanceToEnd) {
+        // Move start thumb
+        handleChange([clampedValue, currentValue[1]]);
+      } else {
+        // Move end thumb
+        handleChange([currentValue[0], clampedValue]);
+      }
+    }
+
+    // Mark click as handled
+    isClickHandled = true;
+    
+    // Focus the slider
+    handleFocus();
+
+    // Allow the event to continue to the slider component for drag handling
+    // Don't prevent default or stop propagation
+  }
+
+  /**
+   * Value Formatting
+   * Formats numeric values for display
+   * @param val - Number to format
+   * @returns Formatted string representation
+   */
+  function formatValue(val: number | undefined): string {
+    if (val === undefined) return '';
+    return val % 1 === 0 ? val.toFixed(0) : val.toFixed(1);
+  }
+
+  /**
+   * Focus Handler
+   * Manages focus state and triggers focus callback
+   */
+  function handleFocus() {
+    if (!isCurrentlyFocused) {
+      // console.log('Slider focused through interaction, value:', lastValue);
+      onFocus();
+      isCurrentlyFocused = true;
+    }
+  }
+
+  // Reactive slider value derived from prop or min value
+  $: sliderValue = sliderType === 'single' 
+    ? (typeof value === 'number' ? value : min)
+    : (Array.isArray(value) ? value : [min, max]);
+
+  // Helper function to safely get array value
+  function getArrayValue(arr: number | number[], index: number): number {
+    if (Array.isArray(arr)) {
+      return arr[index] ?? min;
+    }
+    return arr;
+  }
+
+  // Update lastValue when prop changes
+  $: if (value !== undefined) {
+    lastValue = value;
+  }
+
+  /**
+   * Input Field Handlers
+   * Manage direct numeric input
+   */
+  function handleInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    let newValue = parseFloat(input.value);
+    
+    // Validate input
+    if (input.value === '' || isNaN(newValue)) {
+      return;
+    }
+
+    // Clamp value within bounds
+    newValue = Math.min(Math.max(newValue, min), max);
+    
+    // update the input value
+    input.value = newValue.toString();
+
+    // call the onChange callback
+    handleChange(newValue);
+  }
+
+  /**
+   * Input Blur Handler
+   * Validates and normalizes input on blur
+   */
+  function handleInputBlur(event: Event) {
+    const input = event.target as HTMLInputElement;
+    
+    if (input.value === '') {
+      input.value = value?.toString() || min.toString();
+      return;
+    }
+
+    let newValue = parseFloat(input.value);
+    if (isNaN(newValue)) {
+      input.value = value?.toString() || min.toString();
+    } else {
+      newValue = Math.min(Math.max(newValue, min), max);
+      input.value = newValue.toString();
+
+      // call the handleChange function
+      handleChange(newValue);
+    }
+  }
+</script>
+
+<!-- Slider Input Controller -->
+<div class="slider-input-controller{className ? className + ' ' : ''} w-full flex flex-col widgetic-colors" style="gap: {elementsGap}px;">
+    <!-- Header -->
+    {#if label}
+      <InputControllerHeader class="flex-1 min-w-0" style="height: {height}px;" {label} helpText={helpText} />
+    {/if}
+    
+    <!-- Main Container with subcomponents -->
+    <div 
+      class="slider-main-container flex items-center justify-between rounded-large transition-colors duration-200"
+      style="height: {height}px; padding-left: 16px; padding-right: 16px; gap: {elementsGap}px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1));"
+      onfocusin={onFocus}
+      bind:this={sliderContainer}
+    >
+      <!-- Min Value Display -->
+      {#if sliderType === 'multiple'}
+        <span style="width: {valueDisplayWidth}px; color: hsl(var(--grey7));" class="value-display flex-none subtext text-center">
+          {formatValue(getArrayValue(sliderValue, 0))}
+        </span>
+      {/if}
+
+      <!-- Slider Container with Extensions -->
+      <div 
+        class="slider-container relative h-full flex items-center" 
+        style="width: calc(100% - {(sliderType === 'multiple' ? 2 : 1) * (valueDisplayWidth + elementsGap)}px);"
+        bind:this={sliderTrack}
+      >
+        <!-- Slider Component -->
+        <svelte:component 
+          this={Slider}
+          {...{
+            type: sliderType,
+            value: sliderValue,
+            onValueChange: handleChange,
+            min,
+            max,
+            step,
+            class: "slider-component relative",
+            style: `--thumb-size: ${thumbSize}px; --bar-height: ${barHeight}px; z-index: 3;`,
+            tabindex: -1,
+          } as SliderProps}
+        />
+      </div>
+
+      <!-- Max Value Display -->
+      <span style="width: {valueDisplayWidth}px; color: hsl(var(--grey7));" class="value-display flex-none subtext text-center">
+        {formatValue(getArrayValue(sliderValue, sliderType === 'multiple' ? 1 : 0))}
+      </span>
+
+    </div>
+</div>
+
+<style>
+  .slider-main-container:hover {
+    border-color: hsl(var(--forest-green));
+  }
+
+  .value-display {
+    user-select: none;
+  }
+
+  /* THUMB Styles */
+  :global(.slider-component [role="slider"]) {
+    outline: none !important;
+    cursor: grab;
+    width: var(--thumb-size) !important;
+    height: var(--thumb-size) !important;
+    background-color: white !important;
+    border: 2px solid hsl(var(--grey5)) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    pointer-events: auto !important;
+  }
+
+  :global(.slider-component [role="slider"]:active) {
+    cursor: grabbing;
+  }
+
+  :global(.slider-component [role="slider"]:hover) {
+    border-color: hsl(var(--grey7)) !important;
+  }
+
+  /* Remove focus outline while maintaining accessibility */
+  :global(.slider-component [role="slider"]:focus),
+  :global(.slider-component [role="slider"]:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* TRACK BAR Styles */
+  :global(.slider-component .bg-secondary) {
+    background-color: hsl(var(--grey5)) !important;
+    height: var(--bar-height) !important;
+    border-radius: var(--bar-height) !important; /* rounded ends */
+    cursor: pointer !important;
+  }
+
+  /* PROGRESS BAR Styles */
+  :global(.slider-component [data-slider-range]) {
+    background-color: hsl(var(--grey7)) !important;
+    cursor: pointer !important;
+  }
+
+  /* Thumb should override track cursor when hovering */
+  :global(.slider-component [role="slider"]:hover) {
+    cursor: grab !important;
+  }
+
+  :global(.slider-component [role="slider"]:active) {
+    cursor: grabbing !important;
+  }
+</style>

package/dist/components/ic/SliderInputController.svelte.d.ts

@@ -0,0 +1,46 @@
+/**
+   * Shadcn UI components from Widgetic design-system package
+   */
+import { type SliderProps } from '@widgetic/design-system/components';
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SliderInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the slider's behavior
+       */ class?: string;
+    height?: number;
+    elementsGap?: number;
+    thumbSize?: number;
+    sliderType?: SliderProps["type"];
+    barHeight?: number;
+    label?: string;
+    value: number | number[];
+    onChange: (newValue: number | number[]) => void;
+    config?: InputControllerConfig;
+    helpText?: string | undefined;
+    /**
+       * Configuration Options
+       * Derived from config prop with fallbacks
+       */ min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: () => void;
+    autofocus?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SliderInputController = InstanceType<typeof SliderInputController>;
+export default SliderInputController;

package/dist/components/ic/SliderRangeInputController.svelte

@@ -0,0 +1,155 @@
+<!-- 
+ * SliderRangeInputController
+ * 
+ * A dual-thumb slider component for selecting numeric ranges with precise input controls.
+ * Combines visual slider interaction with direct numeric input capabilities.
+ * 
+ * Key Features:
+ * - Dual thumb range selection
+ * - Direct numeric input with validation
+ * - Extension tracks for quick min/max selection
+ * - Focus state management
+ * 
+ * Edge Cases:
+ * - Maintains value constraints between thumbs
+ * - Handles invalid numeric inputs
+ * - Preserves precision based on step value
+ * - Manages focus states across multiple inputs
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, tick } from 'svelte';
+
+  // local components imports
+  import SliderInputController from './SliderInputController.svelte';
+
+  // Component config
+  import type { InputControllerConfig } from './index';
+
+  // Component props
+  let className = '';
+  export { className as class };
+  export let label: string;
+  export let value: [number, number] = [0, 100];
+  export let onChange: (newValue: [number, number]) => void;
+  export let config: InputControllerConfig = {};
+  export let helpText: string | undefined = undefined;
+  
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks
+   */
+  export let min: number = config.min || 0;
+  export let max: number = config.max || 100;
+  export let step: number = config.step || 1;
+  export let onFocus: () => void = () => {};
+  // export let autofocus: boolean = false;
+
+  // Store initial scroll position
+  let initialScrollPos = { x: 0, y: 0 };
+
+  /**
+   * Validate and adjust values against min/max constraints
+   * @param val - Input array of two numbers
+   * @returns Validated and adjusted array of two numbers
+   */
+  function validateAndAdjustValue(val: [number, number]): [number, number] {
+    // Ensure values are numbers and within bounds
+    const validStart = Math.max(min, Math.min(max, Number(val[0]) || min));
+    const validEnd = Math.max(min, Math.min(max, Number(val[1]) || max));
+    
+    // Round to nearest step
+    const roundedStart = Math.round((validStart - min) / step) * step + min;
+    const roundedEnd = Math.round((validEnd - min) / step) * step + min;
+    
+    // Ensure start is not greater than end
+    return roundedStart <= roundedEnd 
+      ? [roundedStart, roundedEnd] 
+      : [roundedEnd, roundedStart];
+  }
+
+  /**
+   * Component Initialization
+   */
+  onMount(async () => {
+    try {
+      // Store initial scroll position
+      initialScrollPos = {
+        x: window.scrollX,
+        y: window.scrollY
+      };
+
+      // Validate and adjust initial value
+      const adjustedValue = validateAndAdjustValue(value);
+      
+      if (adjustedValue[0] !== value[0] || adjustedValue[1] !== value[1]) {
+        console.log('Adjusting initial range values to match constraints:', { original: value, adjusted: adjustedValue });
+        value = adjustedValue;
+        
+        // Wait for next tick to prevent scroll jump
+        await tick();
+        onChange(adjustedValue);
+        
+        // Restore scroll position
+        window.scrollTo(initialScrollPos.x, initialScrollPos.y);
+      }
+    } catch (error) {
+      console.error('Error in SliderRangeInputController.onMount:', error);
+      // Set a safe default value
+      const safeValue: [number, number] = [min, max];
+      value = safeValue;
+      onChange(safeValue);
+    }
+  });
+
+  /**
+   * Handle value changes
+   */
+  async function handleChange(newValue: number | number[]) {
+    try {
+      // Store current scroll position
+      const scrollPos = {
+        x: window.scrollX,
+        y: window.scrollY
+      };
+
+      // Always validate and adjust the value
+      // For single number, convert to array format
+      const valueToValidate: [number, number] = Array.isArray(newValue) 
+        ? newValue as [number, number]
+        : [newValue, max];
+        
+      const adjustedValue = validateAndAdjustValue(valueToValidate);
+      
+      // Wait for next tick to prevent scroll jump
+      await tick();
+      onChange(adjustedValue);
+      
+      // Restore scroll position
+      window.scrollTo(scrollPos.x, scrollPos.y);
+    } catch (error) {
+      console.error('Error in SliderRangeInputController.handleChange:', error);
+      // Fallback to a safe default value
+      const safeValue: [number, number] = [min, max];
+      onChange(safeValue);
+    }
+  }
+</script>
+
+<!-- Range Slider Container -->
+<SliderInputController
+  class={className}
+  label={label}
+  sliderType="multiple"
+  value={value}
+  min={min}
+  max={max}
+  step={step}
+  onChange={handleChange}
+  onFocus={onFocus}
+  config={config}
+  helpText={helpText}
+  autofocus={false}
+ />
+

package/dist/components/ic/SliderRangeInputController.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SliderRangeInputController: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    label: string;
+    value?: [number, number];
+    onChange: (newValue: [number, number]) => void;
+    config?: InputControllerConfig;
+    helpText?: string | undefined;
+    /**
+       * Configuration Options
+       * Derived from config prop with fallbacks
+       */ min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SliderRangeInputController = InstanceType<typeof SliderRangeInputController>;
+export default SliderRangeInputController;