@widgetic/editor 3.11.4 → 4.0.2

package/dist/components/ic/RoundedCornersInputController.svelte

@@ -0,0 +1,469 @@
+<!-- 
+ * RoundedCornersInputController
+ * 
+ * A specialized input controller for setting border radius values on all four corners 
+ * of a rectangle, with the ability to lock/unlock synchronized editing across corners.
+ * 
+ * Features:
+ * - Visual representation of corners as a grid
+ * - Individual number inputs for each corner radius
+ * - Lock toggle to synchronize all corner values
+ * - Hover and focus states consistent with other input controllers
+ * - Accepts only positive integer values
+ -->
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Lock from '../icons/locked.svelte';
+  import Unlock from '../icons/unlocked.svelte';
+  import type { InputControllerConfig } from './index';
+
+  // Constants
+  const MIN_RADIUS = 0;
+  const MAX_RADIUS = 120;
+
+  // Required props
+  export let label: string;
+  export let value: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: number };
+  export let onChange: (newValue: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: 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 };
+
+  // Internal state
+  let isLocked = true;
+  let focusedCorner: keyof typeof value | null = null;
+  let isEditing = false;
+  let isHovering = false;
+
+  // Reference to the input elements
+  let inputRefs: { [key in keyof typeof value]?: HTMLInputElement } = {};
+
+  // Helper function to update value while respecting lock state
+  function updateCorner(corner: keyof typeof value, newValue: number) {
+    // Ensure value is a non-negative integer within bounds
+    newValue = Math.max(MIN_RADIUS, Math.min(MAX_RADIUS, Math.floor(newValue)));
+    
+    if (isLocked) {
+      // When locked, update all corners to the same value
+      onChange({
+        topLeft: newValue,
+        topRight: newValue,
+        bottomRight: newValue,
+        bottomLeft: newValue
+      });
+    } else {
+      // When unlocked, update only the specified corner
+      onChange({
+        ...value,
+        [corner]: newValue
+      });
+    }
+  }
+
+  // Handler for input changes
+  function handleInputChange(corner: keyof typeof value, e: Event) {
+    const target = e.target as HTMLInputElement;
+    const newValue = parseInt(target.value) || 0;
+    updateCorner(corner, newValue);
+  }
+
+  // Handler for input
+  function handleInput(corner: keyof typeof value, e: Event) {
+    const input = e.target as HTMLInputElement;
+    const inputValue = input.value;
+    
+    // Handle empty input
+    if (inputValue === '') {
+      isEditing = true;
+      return;
+    }
+
+    // Prevent multiple minus signs or any minus sign (we only want positive integers)
+    if (inputValue.includes('-')) {
+      input.value = inputValue.replace(/-/g, '');
+      return;
+    }
+
+    // Validate numeric input - only allow digits
+    if (!/^\d*$/.test(inputValue)) {
+      input.value = inputValue.replace(/[^\d]/g, '');
+      return;
+    }
+
+    // Handle leading zeros - normalize the input value
+    if (inputValue.length > 1 && inputValue.startsWith('0')) {
+      // Convert to number and back to string to remove leading zeros
+      const normalizedValue = String(parseInt(inputValue, 10));
+      if (normalizedValue !== inputValue) {
+        input.value = normalizedValue;
+        return;
+      }
+    }
+
+    // Check if the value exceeds MAX_RADIUS during typing
+    const numValue = parseInt(inputValue);
+    if (!isNaN(numValue) && numValue > MAX_RADIUS) {
+      input.value = MAX_RADIUS.toString();
+      return;
+    }
+
+    if (!isNaN(numValue)) {
+      // We're ok with temporarily having any positive integer during editing
+      if (corner === focusedCorner) {
+        isEditing = true;
+      }
+    }
+  }
+
+  // Handler for input focus
+  function handleInputFocus(corner: keyof typeof value) {
+    focusedCorner = corner;
+    isEditing = true;
+    onFocus();
+  }
+
+  // Handler for input blur
+  function handleInputBlur(corner: keyof typeof value) {
+    const input = inputRefs[corner];
+    isEditing = false;
+    
+    // Handle empty or invalid input
+    if (!input || input.value === '') {
+      const currentValue = value[corner];
+      input!.value = String(currentValue);
+      return;
+    }
+
+    // Validate and apply final value (ensure within bounds)
+    // This also normalizes the value (removing leading zeros)
+    const numValue = parseInt(input.value) || 0;
+    const finalValue = Math.max(MIN_RADIUS, Math.min(MAX_RADIUS, numValue));
+    
+    // Always update the input with the normalized value (handles leading zeros)
+    input.value = finalValue.toString();
+    
+    // Only trigger onChange if the value actually changed
+    if (value[corner] !== finalValue) {
+      updateCorner(corner, finalValue);
+    }
+    
+    // Reset focused corner if we're not focusing another input immediately
+    setTimeout(() => {
+      if (!document.activeElement || 
+          !(document.activeElement instanceof HTMLInputElement) || 
+          !Object.values(inputRefs).includes(document.activeElement)) {
+        focusedCorner = null;
+      }
+    }, 0);
+  }
+
+  // Toggle the lock state
+  function toggleLock() {
+    isLocked = !isLocked;
+    
+    // If locking, normalize all values to the first focused corner or top-left
+    if (isLocked && focusedCorner) {
+      const referenceValue = value[focusedCorner];
+      onChange({
+        topLeft: referenceValue,
+        topRight: referenceValue,
+        bottomRight: referenceValue,
+        bottomLeft: referenceValue
+      });
+    }
+  }
+
+  // Get corner-specific CSS classes
+  function getCornerClasses(corner: keyof typeof value) {
+    const isTopLeft = corner === 'topLeft';
+    const isTopRight = corner === 'topRight';
+    const isBottomLeft = corner === 'bottomLeft';
+    const isBottomRight = corner === 'bottomRight';
+    
+    return {
+      container: `
+        relative 
+        ${isTopLeft ? 'rounded-tl-[15px]' : ''} 
+        ${isTopRight ? 'rounded-tr-[15px]' : ''} 
+        ${isBottomLeft ? 'rounded-bl-[15px]' : ''} 
+        ${isBottomRight ? 'rounded-br-[15px]' : ''}
+        ${focusedCorner === corner ? 'bg-sage-green' : 'bg-grey1'}
+        hover:bg-[${focusedCorner === corner ? 'hsl(var(--sage-green))' : 'hsl(var(--grey2))'}]
+        transition-colors
+      `,
+      input: `
+        w-full 
+        h-full 
+        bg-transparent 
+        text-center 
+        focus:outline-none
+        subtext
+        ${focusedCorner === corner ? 'text-white' : 'text-grey7'}
+        hover:text-[${focusedCorner === corner ? 'white' : 'hsl(var(--grey7))'}]
+      `
+    };
+  }
+
+  // Keyboard event handler
+  function handleKeyDown(corner: keyof typeof value, e: KeyboardEvent) {
+    const input = e.target as HTMLInputElement;
+    
+    // Allow selection shortcuts
+    if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+      isEditing = true;
+      return;
+    }
+
+    // Allow navigation keys
+    if (e.key === 'Backspace' || e.key === 'Delete' || 
+        e.key === 'ArrowLeft' || e.key === 'ArrowRight' || 
+        e.key === 'Tab') {
+      isEditing = true;
+      return;
+    }
+    
+    // Allow copy/paste operations
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
+
+    // Prevent leading zeros
+    if (e.key === '0') {
+      // If input is empty or the entire content is selected, just set to "0"
+      if (input.value === '' || 
+         (input.selectionStart === 0 && input.selectionEnd === input.value.length)) {
+        // Only set value if entering just a single 0
+        input.value = '0';
+        e.preventDefault();
+        return;
+      }
+      
+      // If cursor is at the start and there's already a digit, prevent additional leading zeros
+      if (input.selectionStart === 0 && /^\d/.test(input.value)) {
+        e.preventDefault();
+        return;
+      }
+    }
+
+    // Prevent non-numeric inputs (except for navigation and editing keys)
+    if (!/^\d$/.test(e.key) && 
+        !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'].includes(e.key) &&
+        !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+    }
+  }
+
+  // Mouse hover handlers for the controller
+  function handleMouseEnter() {
+    isHovering = true;
+  }
+
+  function handleMouseLeave() {
+    isHovering = false;
+  }
+</script>
+
+<!-- Main corner radius grid component -->
+<div class="corners-container {className}" 
+  on:mouseenter={handleMouseEnter}
+  on:mouseleave={handleMouseLeave}
+  on:focusin={onFocus}>
+  
+  <!-- Corner radius grid -->
+  <div class="corners-grid">
+    <!-- Top Left -->
+    <div class={getCornerClasses('topLeft').container}>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        bind:this={inputRefs['topLeft']}
+        value={value.topLeft}
+        on:input={(e) => handleInput('topLeft', e)}
+        on:change={(e) => handleInputChange('topLeft', e)}
+        on:focus={() => handleInputFocus('topLeft')}
+        on:blur={() => handleInputBlur('topLeft')}
+        on:keydown={(e) => handleKeyDown('topLeft', e)}
+        class={getCornerClasses('topLeft').input}
+        aria-label="Top left corner radius"
+        maxlength="3"
+      />
+    </div>
+    
+    <!-- Top Right -->
+    <div class={getCornerClasses('topRight').container}>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        bind:this={inputRefs['topRight']}
+        value={value.topRight}
+        on:input={(e) => handleInput('topRight', e)}
+        on:change={(e) => handleInputChange('topRight', e)}
+        on:focus={() => handleInputFocus('topRight')}
+        on:blur={() => handleInputBlur('topRight')}
+        on:keydown={(e) => handleKeyDown('topRight', e)}
+        class={getCornerClasses('topRight').input}
+        aria-label="Top right corner radius"
+        maxlength="3"
+      />
+    </div>
+    
+    <!-- Bottom Left -->
+    <div class={getCornerClasses('bottomLeft').container}>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        bind:this={inputRefs['bottomLeft']}
+        value={value.bottomLeft}
+        on:input={(e) => handleInput('bottomLeft', e)}
+        on:change={(e) => handleInputChange('bottomLeft', e)}
+        on:focus={() => handleInputFocus('bottomLeft')}
+        on:blur={() => handleInputBlur('bottomLeft')}
+        on:keydown={(e) => handleKeyDown('bottomLeft', e)}
+        class={getCornerClasses('bottomLeft').input}
+        aria-label="Bottom left corner radius"
+        maxlength="3"
+      />
+    </div>
+    
+    <!-- Bottom Right -->
+    <div class={getCornerClasses('bottomRight').container}>
+      <input
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        bind:this={inputRefs['bottomRight']}
+        value={value.bottomRight}
+        on:input={(e) => handleInput('bottomRight', e)}
+        on:change={(e) => handleInputChange('bottomRight', e)}
+        on:focus={() => handleInputFocus('bottomRight')}
+        on:blur={() => handleInputBlur('bottomRight')}
+        on:keydown={(e) => handleKeyDown('bottomRight', e)}
+        class={getCornerClasses('bottomRight').input}
+        aria-label="Bottom right corner radius"
+        maxlength="3"
+      />
+    </div>
+    
+    <!-- Centered lock button -->
+    <button
+      class="lock-button"
+      on:click={toggleLock}
+      aria-label={isLocked ? "Unlock corner radius values" : "Lock corner radius values"}
+      aria-pressed={isLocked}
+    >
+      <div class="flex items-center justify-center w-full h-full {isLocked ? 'text-sage-green' : 'text-grey7'}">
+        <svelte:component 
+          this={isLocked ? Lock : Unlock} 
+          class="w-5 h-5" 
+        />
+      </div>
+    </button>
+  </div>
+  
+  <!-- Border overlay -->
+  <div 
+    class="border-overlay {isHovering ? 'hovered' : ''}"
+    aria-hidden="true"
+  />
+</div>
+
+<style>
+  /* Hide number input spinners */
+  /* svelte-ignore css_unused_selector */
+  input[type="number"]::-webkit-inner-spin-button,
+  /* svelte-ignore css_unused_selector */
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  input {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    padding: 8px 4px;
+    font-size: 16px;
+  }
+  
+  /* Base corner container styles */
+  .corners-grid > div {
+    min-width: 60px;
+    min-height: 40px;
+  }
+  
+  /* Focus states */
+  input:focus {
+    outline: none !important;
+  }
+
+  /* Main container */
+  .corners-container {
+    position: relative;
+    width: 185px;
+    height: 111px;
+  }
+
+  /* Grid styling */
+  .corners-grid {
+    position: relative;
+    width: 185px;
+    height: 111px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 1px;
+    background-color: white;
+    border-radius: var(--radius-large);
+  }
+
+  /* Lock button styling */
+  .lock-button {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    outline: none !important;
+  }
+
+  .lock-button:focus-visible {
+    box-shadow: 0 0 0 2px hsl(var(--primary));
+  }
+
+  /* Border overlay */
+  .border-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: 15px;
+    border: 1px solid hsl(var(--grey2));
+    transition: border-color 0.2s ease;
+    z-index: 5;
+  }
+
+  .border-overlay.hovered {
+    border-color: hsl(var(--forest-green));
+  }
+
+  :global(.subtext) {
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+</style> 

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

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