@widgetic/editor 3.11.4 → 4.0.2

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

@@ -0,0 +1,50 @@
+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 ColorPickerInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the color picker's behavior
+       */ label?: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    controllerId?: string;
+    id?: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    config?: InputControllerConfig;
+    helpText?: string | undefined;
+    saveRecentColors?: boolean;
+    showOpacityControls?: boolean;
+    autofocus?: boolean;
+    portalTarget?: string;
+    pickerSize?: number;
+    sliderWidth?: number;
+    opacity?: number;
+    showRing?: boolean;
+    onFocus?: () => void;
+    focus?: () => void;
+    onOpacityChange?: (opacity: number) => void;
+}, {
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    colorselectmodalclose: CustomEvent<any>;
+    colorselectmodalopen: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, string>;
+type ColorPickerInputController = InstanceType<typeof ColorPickerInputController>;
+export default ColorPickerInputController;

package/dist/components/ic/DateFieldInputController.svelte

@@ -0,0 +1,453 @@
+<!-- 
+ * DateFieldInputController
+ * 
+ * A specialized input controller for date fields allowing continuous typing across day, month, year fields.
+ * 
+ * Features:
+ * - Customizable field order (day-month-year, month-day-year, year-month-day)
+ * - Automatic field progression when typing
+ * - Focus management and keyboard navigation
+ * - Field validation for valid date values
+ * - Visual feedback consistent with other input controllers
+ -->
+
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import InputControllerHeader from './InputControllerHeader.svelte';
+  import type { InputControllerConfig } from './index';
+
+  // Constants
+  const MIN_DAY = 1;
+  const MAX_DAY = 31;
+  const MIN_MONTH = 1;
+  const MAX_MONTH = 12;
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+
+  // Required props
+  export let label: string;
+  export let value: { day: number; month: number; year: number };
+  export let onChange: (newValue: { day: number; month: number; year: number }) => void;
+  export let config: InputControllerConfig = {};
+  export let helpText: string | undefined = undefined;
+  export let onFocus: () => void = () => {};
+  
+  // Optional: Class prop for external styling
+  let className = '';
+  export { className as class };
+
+  // Configure field order - default to day-month-year, can be overridden in config
+  const FORMAT_DMY = 'day-month-year';
+  const FORMAT_MDY = 'month-day-year';
+  const FORMAT_YMD = 'year-month-day';
+  
+  let format = config.format || FORMAT_DMY;
+  let fieldOrder = getFieldOrder(format);
+
+  // Internal state
+  let day = value?.day || '';
+  let month = value?.month || '';
+  let year = value?.year || '';
+  let focusedField: 'day' | 'month' | 'year' | null = null;
+  let hasInitialValues = false;
+
+  // Reference to the input elements
+  let inputRefs: { day?: HTMLInputElement; month?: HTMLInputElement; year?: HTMLInputElement } = {};
+
+  // Get field order based on format
+  function getFieldOrder(format: string): ('day' | 'month' | 'year')[] {
+    switch (format) {
+      case FORMAT_DMY:
+        return ['day', 'month', 'year'];
+      case FORMAT_MDY:
+        return ['month', 'day', 'year'];
+      case FORMAT_YMD:
+        return ['year', 'month', 'day'];
+      default:
+        return ['day', 'month', 'year'];
+    }
+  }
+
+  // Set initial values from prop
+  onMount(() => {
+    if (value) {
+      day = value.day || '';
+      month = value.month || '';
+      year = value.year || '';
+      hasInitialValues = true;
+    }
+  });
+
+  // Get field configuration
+  function getFieldConfig(field: 'day' | 'month' | 'year') {
+    const configs = {
+      day: {
+        min: MIN_DAY,
+        max: MAX_DAY,
+        placeholder: 'DD',
+        width: '40px',
+        maxLength: 2
+      },
+      month: {
+        min: MIN_MONTH,
+        max: MAX_MONTH,
+        placeholder: 'MM',
+        width: '40px',
+        maxLength: 2
+      },
+      year: {
+        min: MIN_YEAR,
+        max: MAX_YEAR,
+        placeholder: 'YYYY',
+        width: '60px',
+        maxLength: 4
+      }
+    };
+    return configs[field];
+  }
+
+  // Helper function to focus on next field
+  async function focusNextField(currentField: 'day' | 'month' | 'year') {
+    const currentIndex = fieldOrder.indexOf(currentField);
+    if (currentIndex < fieldOrder.length - 1) {
+      const nextField = fieldOrder[currentIndex + 1];
+      await tick();
+      inputRefs[nextField]?.focus();
+    }
+  }
+
+  // Helper function to focus on previous field
+  async function focusPreviousField(currentField: 'day' | 'month' | 'year') {
+    const currentIndex = fieldOrder.indexOf(currentField);
+    if (currentIndex > 0) {
+      const prevField = fieldOrder[currentIndex - 1];
+      await tick();
+      inputRefs[prevField]?.focus();
+    }
+  }
+
+  // Validate and set day value
+  function handleDayInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    let inputValue = input.value;
+    
+    // Handle empty input
+    if (inputValue === '') {
+      return;
+    }
+
+    // Remove non-numeric characters
+    inputValue = inputValue.replace(/[^\d]/g, '');
+    
+    // Handle leading zeros - normalize to single 0
+    if (inputValue.length > 1 && inputValue.startsWith('0')) {
+      inputValue = inputValue.substring(1);
+    }
+    
+    // Parse as number
+    const numValue = parseInt(inputValue);
+    
+    // If value is too large, cap at max (31)
+    if (numValue > MAX_DAY) {
+      inputValue = MAX_DAY.toString();
+      input.value = inputValue;
+    } else {
+      input.value = inputValue;
+    }
+    
+    day = inputValue === '' ? '' : parseInt(inputValue);
+    
+    // Auto-advance to next field when 2 digits are entered
+    if (inputValue.length >= 2 && parseInt(inputValue) > 0) {
+      focusNextField('day');
+    }
+  }
+
+  // Validate and set month value
+  function handleMonthInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    let inputValue = input.value;
+    
+    // Handle empty input
+    if (inputValue === '') {
+      return;
+    }
+    
+    // Remove non-numeric characters
+    inputValue = inputValue.replace(/[^\d]/g, '');
+    
+    // Handle leading zeros - normalize to single 0
+    if (inputValue.length > 1 && inputValue.startsWith('0')) {
+      inputValue = inputValue.substring(1);
+    }
+    
+    // Parse as number
+    const numValue = parseInt(inputValue);
+    
+    // If value is too large, cap at max (12)
+    if (numValue > MAX_MONTH) {
+      inputValue = MAX_MONTH.toString();
+      input.value = inputValue;
+    } else {
+      input.value = inputValue;
+    }
+    
+    month = inputValue === '' ? '' : parseInt(inputValue);
+    
+    // Auto-advance to next field when 2 digits are entered
+    if (inputValue.length >= 2 && parseInt(inputValue) > 0) {
+      focusNextField('month');
+    }
+  }
+
+  // Validate and set year value
+  function handleYearInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    let inputValue = input.value;
+    
+    // Handle empty input
+    if (inputValue === '') {
+      return;
+    }
+    
+    // Remove non-numeric characters
+    inputValue = inputValue.replace(/[^\d]/g, '');
+    
+    // Handle leading zeros
+    if (inputValue.length > 1 && inputValue.startsWith('0')) {
+      inputValue = inputValue.substring(1);
+    }
+    
+    // Enforce max length of 4
+    if (inputValue.length > 4) {
+      inputValue = inputValue.substring(0, 4);
+    }
+    
+    const numValue = parseInt(inputValue);
+    
+    // If value is too large, cap at max
+    if (numValue > MAX_YEAR) {
+      inputValue = MAX_YEAR.toString();
+    }
+    
+    input.value = inputValue;
+    year = inputValue === '' ? '' : parseInt(inputValue);
+  }
+
+  // Handle input changes
+  function handleChange() {
+    // Only update if we have valid values for all fields
+    if (
+      day !== '' && month !== '' && year !== '' &&
+      !isNaN(Number(day)) && !isNaN(Number(month)) && !isNaN(Number(year))
+    ) {
+      onChange({
+        day: Number(day),
+        month: Number(month),
+        year: Number(year)
+      });
+    }
+  }
+
+  // Handle focus
+  function handleFocus(field: 'day' | 'month' | 'year') {
+    focusedField = field;
+    onFocus();
+  }
+
+  // Handle blur
+  function handleBlur(field: 'day' | 'month' | 'year') {
+    const input = inputRefs[field];
+    
+    if (!input) return;
+    
+    // If empty, display as empty
+    if (input.value === '') {
+      if (field === 'day') day = '';
+      if (field === 'month') month = '';
+      if (field === 'year') year = '';
+      return;
+    }
+    
+    // Otherwise, ensure we have a valid number
+    let min: number, max: number;
+    
+    if (field === 'day') {
+      min = MIN_DAY;
+      max = MAX_DAY;
+      const numDay = parseInt(input.value);
+      day = Math.max(min, Math.min(max, numDay));
+      input.value = day.toString();
+    } else if (field === 'month') {
+      min = MIN_MONTH;
+      max = MAX_MONTH;
+      const numMonth = parseInt(input.value);
+      month = Math.max(min, Math.min(max, numMonth));
+      input.value = month.toString();
+    } else if (field === 'year') {
+      min = MIN_YEAR;
+      max = MAX_YEAR;
+      const numYear = parseInt(input.value);
+      year = Math.max(min, Math.min(max, numYear));
+      input.value = year.toString();
+    }
+    
+    // Trigger change if we have all values
+    handleChange();
+    
+    // Reset focused field after a short delay to allow for focus changes
+    setTimeout(() => {
+      if (!document.activeElement || 
+          !(document.activeElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(document.activeElement)) {
+        focusedField = null;
+      }
+    }, 100);
+  }
+
+  // Handle keydown events
+  function handleKeyDown(field: 'day' | 'month' | 'year', e: KeyboardEvent) {
+    const input = e.target as HTMLInputElement;
+    
+    // Allow selection shortcuts (Ctrl+A)
+    if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+      return;
+    }
+    
+    // Allow editing keys (Backspace, Delete)
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      return;
+    }
+    
+    // Handle arrow navigation
+    if (e.key === 'ArrowRight') {
+      if (input.selectionStart === input.value.length) {
+        e.preventDefault();
+        focusNextField(field);
+      }
+      return;
+    }
+    
+    if (e.key === 'ArrowLeft') {
+      if (input.selectionStart === 0) {
+        e.preventDefault();
+        focusPreviousField(field);
+      }
+      return;
+    }
+    
+    // Handle Tab navigation
+    if (e.key === 'Tab') {
+      return;
+    }
+    
+    // Prevent non-numeric inputs except navigation and editing keys
+    if (!/^\d$/.test(e.key) && 
+        !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'].includes(e.key) &&
+        !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      return;
+    }
+    
+    // Prevent leading zeros
+    if (e.key === '0' && input.value === '') {
+      e.preventDefault();
+      return;
+    }
+  }
+
+  // Get field-specific CSS classes
+  function getFieldClasses(field: 'day' | 'month' | 'year') {
+    return {
+      container: `
+        relative
+        ${focusedField === field ? 'bg-sage-green' : 'bg-grey1'}
+        transition-colors
+        rounded-small
+      `,
+      input: `
+        w-full 
+        h-full 
+        bg-transparent 
+        text-center 
+        focus:outline-none
+        subtext
+        ${focusedField === field ? 'text-white' : 'text-grey7'}
+        placeholder:text-grey3
+      `
+    };
+  }
+</script>
+
+<div class="date-field-container widgetic-colors {className}" on:focusin={onFocus}>
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} {helpText} />
+    </div>
+    
+    <div class="absolute right-0">
+      <div class="h-[48px] w-[185px] rounded-large border border-grey2 bg-grey1 flex items-center transition-colors duration-200 hover:border-forest-green">
+        <div class="flex items-center justify-between px-4 w-full">
+          {#each fieldOrder as field}
+            {@const config = getFieldConfig(field)}
+            
+            <div class={getFieldClasses(field).container} style="width: {config.width}; min-height: 34px;">
+              <input
+                type="text"
+                inputmode="numeric"
+                pattern="[0-9]*"
+                bind:this={inputRefs[field]}
+                value={field === 'day' ? day : field === 'month' ? month : year}
+                placeholder={config.placeholder}
+                on:input={field === 'day' ? handleDayInput : field === 'month' ? handleMonthInput : handleYearInput}
+                on:change={handleChange}
+                on:focus={() => handleFocus(field)}
+                on:blur={() => handleBlur(field)}
+                on:keydown={(e) => handleKeyDown(field, e)}
+                class={getFieldClasses(field).input}
+                aria-label={`${field} input`}
+                maxlength={config.maxLength}
+              />
+            </div>
+            
+            {#if field !== fieldOrder[fieldOrder.length - 1]}
+              <span class="date-separator subtext text-grey3">/</span>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  input {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    padding: 8px 4px;
+    font-size: 16px;
+  }
+  
+  /* Focus states */
+  input:focus {
+    outline: none !important;
+  }
+
+  /* Date field container */
+  .date-field-container {
+    position: relative;
+  }
+  
+  /* Separator style */
+  .date-separator {
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+  
+  :global(.subtext) {
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+</style> 

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

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