@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/TimeInputController.svelte

@@ -0,0 +1,434 @@
+<!-- 
+ * TimeInputController
+ * 
+ * Provides a visual clock interface for time selection.
+ * Features a clock face with hour and minute hands.
+ * 
+ * Features:
+ * - Visual time selection via clock face with two hands
+ * - 24-hour time selection via dropdown
+ * - Touch and mouse support
+ * - 30-minute interval selection
+ -->
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Button } from '@widgetic/design-system/components';
+  import { Portal } from '@widgetic/design-system/components';
+  import InputControllerHeader from './InputControllerHeader.svelte';
+  import type { InputControllerConfig } from './index';
+
+  export let label: string;
+  export let value: string = "00:00";
+  export let onChange: (newValue: string) => void;
+  // export let config: InputControllerConfig = {};
+  export let helpText: string | undefined = undefined;
+  export let onFocus: () => void = () => {};
+  
+  let className = '';
+  export { className as class };
+
+  // Time state
+  let hours = 0;
+  let minutes = 0;
+  let isDropdownOpen = false;
+  let isDropdownPositioned = false;
+  
+  // Clock interaction state
+  let isDragging = false;
+  let isDraggingHours = false;
+  let clockContainer: HTMLDivElement;
+  let dropdownContainer: HTMLDivElement;
+  let startAngle = 0;
+  let startValue = 0;
+  
+  // Add button ref
+  let timeButton: HTMLButtonElement;
+  
+  // Generate time options in 30-minute intervals (24h format)
+  const timeOptions = Array.from({ length: 48 }, (_, i) => {
+    const hour = Math.floor(i / 2);
+    const minute = (i % 2) * 30;
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  });
+  
+  // Parse time from string (handles both 12h and 24h formats)
+  function parseTimeFromValue(timeString: string) {
+    if (!timeString) {
+      hours = 0;
+      minutes = 0;
+      return;
+    }
+
+    // Try 24h format first (HH:mm)
+    const [h, m] = timeString.split(':').map(Number);
+    
+    if (!isNaN(h) && !isNaN(m)) {
+      hours = h;
+      minutes = m;
+      return;
+    }
+
+    // Try 12h format (hh:mm am/pm)
+    const match = timeString.toLowerCase().match(/(\d+):(\d+)\s*(am|pm)/);
+    if (match) {
+      let h12 = parseInt(match[1]);
+      const m12 = parseInt(match[2]);
+      const period = match[3];
+
+      // Convert to 24h format
+      if (period === 'pm' && h12 < 12) {
+        h12 += 12;
+      } else if (period === 'am' && h12 === 12) {
+        h12 = 0;
+      }
+
+      hours = h12;
+      minutes = m12;
+      return;
+    }
+
+    // If all parsing fails, default to 00:00
+    hours = 0;
+    minutes = 0;
+  }
+  
+  // Format time to string (24h format)
+  function formatTimeToString(h: number, m: number): string {
+    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+  }
+  
+  // Update the value when time components change
+  function updateValue() {
+    const newValue = formatTimeToString(hours, minutes);
+    if (newValue !== value) {
+      value = newValue;
+      onChange(newValue);
+    }
+  }
+  
+  // Calculate clock hand angles based on current time
+  $: hourAngle = ((hours % 12) / 12) * 360 + (minutes / 60) * 30;
+  $: minuteAngle = (minutes / 60) * 360;
+  
+  /**
+   * Calculates the angle between two points relative to a center point
+   */
+  function calculateAngle(x: number, y: number, centerX: number, centerY: number): number {
+    const angle = Math.atan2(x - centerX, -(y - centerY)) * (180 / Math.PI);
+    return (angle + 360) % 360;
+  }
+  
+  /**
+   * Updates time based on mouse/touch position
+   */
+  function updateTimeFromAngle(clientX: number, clientY: number, isHourHand: boolean, shouldSnapToPosition: boolean = false) {
+    if (!clockContainer || (!isDragging && !shouldSnapToPosition)) return;
+
+    const rect = clockContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const currentAngle = calculateAngle(clientX, clientY, centerX, centerY);
+    
+    if (isHourHand) {
+      // Convert angle to hour (30 degrees per hour)
+      let newHour = Math.round(currentAngle / 30) % 12;
+      // Preserve 24h format
+      if (hours >= 12) newHour += 12;
+      if (newHour !== hours) {
+        hours = newHour;
+        updateValue();
+      }
+    } else {
+      // Convert angle to minutes (6 degrees per minute), round to nearest 5
+      let newMinute = Math.round(Math.round(currentAngle / 6) / 5) * 5;
+      if (newMinute === 60) newMinute = 0;
+      if (newMinute !== minutes) {
+        minutes = newMinute;
+        updateValue();
+      }
+    }
+  }
+  
+  // Mouse event handlers
+  function handleClockFaceMouseDown(event: MouseEvent) {
+    if (!clockContainer) return;
+    
+    const rect = clockContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const distance = Math.sqrt(
+      Math.pow(event.clientX - centerX, 2) + Math.pow(event.clientY - centerY, 2)
+    );
+    
+    isDraggingHours = distance < rect.width / 4;
+    updateTimeFromAngle(event.clientX, event.clientY, isDraggingHours, true);
+    
+    isDragging = true;
+    onFocus();
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }
+  
+  function handleMouseMove(event: MouseEvent) {
+    if (!isDragging) return;
+    event.preventDefault();
+    updateTimeFromAngle(event.clientX, event.clientY, isDraggingHours);
+  }
+  
+  function handleMouseUp() {
+    isDragging = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+  
+  // Touch event handlers
+  function handleTouchStart(event: TouchEvent) {
+    if (!clockContainer) return;
+    
+    const touch = event.touches[0];
+    const rect = clockContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const distance = Math.sqrt(
+      Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
+    );
+    
+    isDraggingHours = distance < rect.width / 4;
+    updateTimeFromAngle(touch.clientX, touch.clientY, isDraggingHours, true);
+    
+    isDragging = true;
+    onFocus();
+    event.preventDefault();
+  }
+  
+  function handleTouchMove(event: TouchEvent) {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    updateTimeFromAngle(touch.clientX, touch.clientY, isDraggingHours);
+  }
+  
+  function handleTouchEnd(event: TouchEvent) {
+    event.preventDefault();
+    isDragging = false;
+  }
+  
+  // Dropdown handlers
+  function toggleDropdown() {
+    if (!isDropdownOpen) {
+      isDropdownOpen = true;
+      isDropdownPositioned = false;
+      onFocus();
+      
+      // Use requestAnimationFrame to ensure DOM is updated
+      requestAnimationFrame(() => {
+        if (dropdownContainer && timeButton) {
+          const rect = timeButton.getBoundingClientRect();
+          dropdownContainer.style.top = `${rect.bottom + 4}px`;
+          dropdownContainer.style.left = `${rect.left}px`;
+          isDropdownPositioned = true;
+        }
+        document.addEventListener('click', handleClickOutside);
+      });
+    } else {
+      closeDropdown();
+    }
+  }
+  
+  function closeDropdown() {
+    isDropdownOpen = false;
+    isDropdownPositioned = false;
+    document.removeEventListener('click', handleClickOutside);
+  }
+  
+  function handleClickOutside(event: MouseEvent) {
+    if (dropdownContainer && !dropdownContainer.contains(event.target as Node)) {
+      closeDropdown();
+    }
+  }
+  
+  function selectTime(timeOption: string) {
+    parseTimeFromValue(timeOption);
+    updateValue();
+    closeDropdown();
+  }
+  
+  // Update scroll handler function
+  function handleScroll(event: Event) {
+    // Ensure target is an HTMLElement
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+    
+    const target = event.target;
+    
+    // Check if scroll happened inside our dropdown
+    const isInsideDropdown = target.closest('.time-dropdown-content');
+    
+    // If scrolling is inside our dropdown, don't close
+    if (isInsideDropdown) {
+      return;
+    }
+
+    // If scrolling outside our dropdown, close it
+    if (isDropdownOpen) {
+      closeDropdown();
+    }
+  }
+
+  // Update onMount to add scroll listener with capture phase
+  onMount(() => {
+    parseTimeFromValue(value);
+    updateValue();
+    window.addEventListener('scroll', handleScroll, { capture: true });
+  });
+  
+  // Update onDestroy to remove scroll listener
+  onDestroy(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.removeEventListener('click', handleClickOutside);
+    window.removeEventListener('scroll', handleScroll, true);
+  });
+
+  // Watch for external value changes
+  $: if (value) {
+    const formattedTime = formatTimeToString(hours, minutes);
+    if (value !== formattedTime) {
+      parseTimeFromValue(value);
+    }
+  }
+
+  // Mouse event handlers
+  function handleHourHandMouseDown(event: MouseEvent) {
+    event.stopPropagation();
+    isDraggingHours = true;
+    handleClockFaceMouseDown(event);
+  }
+
+  function handleMinuteHandMouseDown(event: MouseEvent) {
+    event.stopPropagation();
+    isDraggingHours = false;
+    handleClockFaceMouseDown(event);
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors {className}">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} {helpText} />
+    </div>
+    
+    <div class="absolute right-0 h-[48px] flex items-center">
+      <div class="flex items-center justify-end gap-2">
+        <!-- Clock Face -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div 
+          bind:this={clockContainer}
+          class="relative w-[48px] h-[48px] rounded-full bg-grey1 border border-grey2 cursor-grab active:cursor-grabbing flex items-center justify-center transition-colors duration-200 hover:border-forest-green group"
+          on:mousedown={handleClockFaceMouseDown}
+          on:touchstart={handleTouchStart}
+          on:touchmove={handleTouchMove}
+          on:touchend={handleTouchEnd}
+        >
+          <!-- Hour markers -->
+          <div class="absolute inset-0 w-full h-full pointer-events-none">
+            {#each Array(12) as _, i}
+              <div 
+                class="absolute w-[1px] h-[4px] transition-colors duration-200"
+                class:bg-forest-green={!isDragging}
+                class:bg-grey3={isDragging}
+                class:group-hover:bg-grey3={!isDragging}
+                style="left: 50%; top: 2px; transform-origin: 50% 21px; transform: translateX(-50%) rotate({i * 30}deg);"
+              ></div>
+            {/each}
+          </div>
+          
+          <!-- Hour Hand -->
+          <!-- svelte-ignore element_invalid_self_closing_tag -->
+          <div 
+            class="absolute top-1/2 left-1/2 w-[2px] h-[14px] origin-bottom -translate-x-1/2 cursor-pointer transition-colors duration-200"
+            class:bg-grey5={!isDragging || !isDraggingHours}
+            class:bg-grey7={isDragging && isDraggingHours}
+            class:group-hover:bg-grey7={!isDragging}
+            style="transform: translate(-50%, -100%) rotate({hourAngle}deg)"
+            on:mousedown|stopPropagation={handleHourHandMouseDown}
+          />
+          
+          <!-- Minute Hand -->
+          <!-- svelte-ignore element_invalid_self_closing_tag -->
+          <div 
+            class="absolute top-1/2 left-1/2 w-[1.5px] h-[18px] origin-bottom -translate-x-1/2 cursor-pointer transition-colors duration-200"
+            class:bg-grey5={!isDragging || isDraggingHours}
+            class:bg-grey7={isDragging && !isDraggingHours}
+            class:group-hover:bg-grey7={!isDragging}
+            style="transform: translate(-50%, -100%) rotate({minuteAngle}deg)"
+            on:mousedown|stopPropagation={handleMinuteHandMouseDown}
+          />
+        </div>
+
+        <!-- Time Dropdown -->
+        <div class="relative w-[129px]">
+          <button
+            bind:this={timeButton}
+            class="flex items-center justify-center h-[48px] w-full bg-grey1 border border-grey2 rounded-large hover:border-forest-green transition-colors duration-200"
+            on:click={toggleDropdown}
+          >
+            <span class="subtext text-grey7">{value}</span>
+          </button>
+          
+          {#if isDropdownOpen}
+            <Portal target="time-input-dropdown">
+              <div 
+                bind:this={dropdownContainer}
+                class="w-[129px] max-h-[300px] overflow-y-auto bg-white border border-grey3 rounded-[4px] shadow-lg transition-opacity duration-150 time-dropdown-content"
+                class:opacity-0={!isDropdownPositioned}
+                class:opacity-100={isDropdownPositioned}
+                style="position: fixed; z-index: 99999999;"
+              >
+                {#each timeOptions as timeOption}
+                  <button 
+                    class="w-full px-3 py-2 subtext text-grey7 hover:bg-grey1 transition-colors duration-150 widgetic-colors {timeOption === value ? 'bg-grey1' : ''}"
+                    on:click={() => selectTime(timeOption)}
+                  >
+                    {timeOption}
+                  </button>
+                {/each}
+              </div>
+            </Portal>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Prevent text selection during dragging */
+  .cursor-grab {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+  
+  /* Scrollbar styling for dropdown */
+  div::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  div::-webkit-scrollbar-track {
+    background: hsl(var(--grey1));
+  }
+  
+  div::-webkit-scrollbar-thumb {
+    background: hsl(var(--grey3));
+    border-radius: 3px;
+  }
+  
+  div::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--grey4));
+  }
+</style> 

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

@@ -0,0 +1,25 @@
+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 TimeInputController: $$__sveltets_2_IsomorphicComponent<{
+    label: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    helpText?: string | undefined;
+    onFocus?: () => void;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimeInputController = InstanceType<typeof TimeInputController>;
+export default TimeInputController;