@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/FixedPositionInputController.svelte

@@ -0,0 +1,353 @@
+<!-- 
+ * FixedPositionInputController
+ * 
+ * A visual position selector component that allows users to choose from nine predefined positions
+ * in a 3x3 grid layout. Each position represents a specific alignment combination (top/center/bottom
+ * and left/center/right).
+ * 
+ * Key Features:
+ * - Visual position selection with SVG icons
+ * - Dynamic background states for selected/deselected positions
+ * - Keyboard accessibility support
+ * - Memory efficient SVG handling
+ * 
+ * Edge Cases:
+ * - Handles SVG resource cleanup
+ * - Prevents unnecessary re-renders
+ * - Manages dynamic SVG creation and disposal
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onDestroy } from 'svelte';
+
+  // Import icons from Tabler
+  import { 
+    IconArrowUpLeft,
+    IconArrowUp,
+    IconArrowUpRight,
+    IconArrowLeft,
+    IconCircle,
+    IconArrowRight,
+    IconArrowDownLeft,
+    IconArrowDown,
+    IconArrowDownRight
+  }
+  from '@widgetic/design-system/icons';
+
+  // Fixed-position background & icon SVGs (imported with ?url to avoid absolute /icons/ paths)
+  import bgDeselected from '../../assets/icons/ic-fixed-position/background-deselected.svg?url';
+  import bgSelected from '../../assets/icons/ic-fixed-position/background-selected.svg?url';
+  import blBgDeselected from '../../assets/icons/ic-fixed-position/bottom-left-background-deselected.svg?url';
+  import blBgSelected from '../../assets/icons/ic-fixed-position/bottom-left-background-selected.svg?url';
+  import blIcon from '../../assets/icons/ic-fixed-position/bottom-left-icon.svg?url';
+  import brBgDeselected from '../../assets/icons/ic-fixed-position/bottom-right-background-deselected.svg?url';
+  import brBgSelected from '../../assets/icons/ic-fixed-position/bottom-right-background-selected.svg?url';
+  import brIcon from '../../assets/icons/ic-fixed-position/bottom-right-icon.svg?url';
+  import centerBottomIcon from '../../assets/icons/ic-fixed-position/center-bottom-icon.svg?url';
+  import centerCenterIcon from '../../assets/icons/ic-fixed-position/center-center-icon.svg?url';
+  import centerLeftIcon from '../../assets/icons/ic-fixed-position/center-left-icon.svg?url';
+  import centerRightIcon from '../../assets/icons/ic-fixed-position/center-right-icon.svg?url';
+  import centerTopIcon from '../../assets/icons/ic-fixed-position/center-top-icon.svg?url';
+  import tlBgDeselected from '../../assets/icons/ic-fixed-position/top-left-background-deselected.svg?url';
+  import tlBgSelected from '../../assets/icons/ic-fixed-position/top-left-background-selected.svg?url';
+  import tlIcon from '../../assets/icons/ic-fixed-position/top-left-icon.svg?url';
+  import trBgDeselected from '../../assets/icons/ic-fixed-position/top-right-background-deselected.svg?url';
+  import trBgSelected from '../../assets/icons/ic-fixed-position/top-right-background-selected.svg?url';
+  import trIcon from '../../assets/icons/ic-fixed-position/top-right-icon.svg?url';
+
+  const fixedPositionIcons: Record<string, string> = {
+    'background-deselected': bgDeselected,
+    'background-selected': bgSelected,
+    'bottom-left-background-deselected': blBgDeselected,
+    'bottom-left-background-selected': blBgSelected,
+    'bottom-left-icon': blIcon,
+    'bottom-right-background-deselected': brBgDeselected,
+    'bottom-right-background-selected': brBgSelected,
+    'bottom-right-icon': brIcon,
+    'center-bottom-icon': centerBottomIcon,
+    'center-center-icon': centerCenterIcon,
+    'center-left-icon': centerLeftIcon,
+    'center-right-icon': centerRightIcon,
+    'center-top-icon': centerTopIcon,
+    'top-left-background-deselected': tlBgDeselected,
+    'top-left-background-selected': tlBgSelected,
+    'top-left-icon': tlIcon,
+    'top-right-background-deselected': trBgDeselected,
+    'top-right-background-selected': trBgSelected,
+    'top-right-icon': trIcon,
+  };
+
+  // Component props
+  export let value: Position = 'bottom-right';  // Update type to Position
+  export let onChange: (newValue: Position) => void;
+  export let onFocus: () => void = () => {};
+  export let id: string | undefined = undefined;
+
+  /**
+   * Defines all valid position combinations in a 3x3 grid
+   * Order matters for visual layout and keyboard navigation
+ */
+  const positions = [
+    'top-left', 'top-center', 'top-right',
+    'center-left', 'center-center', 'center-right',
+    'bottom-left', 'bottom-center', 'bottom-right'
+  ] as const;
+
+  type Position = typeof positions[number];
+
+  // Map positions to their corresponding icons
+  const positionIcons = {
+    'top-left': IconArrowUpLeft,
+    'top-center': IconArrowUp,
+    'top-right': IconArrowUpRight,
+    'center-left': IconArrowLeft,
+    'center-center': IconCircle,
+    'center-right': IconArrowRight,
+    'bottom-left': IconArrowDownLeft,
+    'bottom-center': IconArrowDown,
+    'bottom-right': IconArrowDownRight
+  } as const;
+
+  /**
+   * Updates position state and triggers change event
+   * Prevents unnecessary updates when selecting current position
+   * @param position - The new position to set
+   */
+  function handlePositionClick(position: Position) {
+    if (position !== value) {
+      value = position;
+      onChange(position);
+    }
+  }
+
+  /**
+   * Determines the appropriate background SVG path based on position and state
+   * Uses simplified backgrounds for center positions to reduce complexity
+   * @param position - The position to get background for
+   * @param isSelected - Whether the position is currently selected
+   * @returns Path to the appropriate background SVG
+   */
+  function getBackgroundPath(position: Position, isSelected: boolean) {
+    const state = isSelected ? 'selected' : 'deselected';
+
+    // Use simple background for center positions and center column
+    if (position === 'center-left' || 
+        position === 'center-center' || 
+        position === 'center-right' ||
+        position === 'top-center' ||
+        position === 'bottom-center') {
+      return fixedPositionIcons[`background-${state}`];
+    }
+
+    // Use position-specific backgrounds for corners
+    return fixedPositionIcons[`${position}-background-${state}`];
+  }
+
+  /**
+   * Generates a complete SVG icon dynamically
+   * Creates a Blob URL for memory-efficient SVG handling
+   * @param position - The position to get icon for
+   * @returns Path to the appropriate icon SVG
+   */
+  function getIconPath(position: Position) {
+    // Create white version of icons by adding stroke="white" to the SVG paths
+    const iconSvg = `
+      <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        ${getIconPaths(position)}
+      </svg>
+    `;
+    
+    const blob = new Blob([iconSvg], { type: 'image/svg+xml' });
+    return URL.createObjectURL(blob);
+  }
+
+  /**
+   * Generates SVG paths dynamically
+   * Uses the current selected position to determine the color of the paths
+   * @param position - The position to get paths for
+   * @returns SVG paths for the appropriate icon
+   */
+  function getIconPaths(position: Position) {
+    const color = value === position ? 'white' : '#2E2E2E';
+    
+    switch (position) {
+      case 'top-left':
+        return `
+          <path d="M7.49487 7L17.4949 17" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M16.4949 7H7.49487V16" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'top-center':
+        return `
+          <path d="M12.4949 5V19" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M18.4949 11L12.4949 5" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M6.49487 11L12.4949 5" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'top-right':
+        return `
+          <path d="M17.4949 7L7.49487 17" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M8.49487 7H17.4949V16" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'center-left':
+        return `
+          <path d="M5.49487 12H19.4949" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M11.4949 18L5.49487 12" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M11.4949 6L5.49487 12" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'center-center':
+        return `
+          <path d="M5.49487 12C5.49487 12.9193 5.67593 13.8295 6.02772 14.6788C6.3795 15.5281 6.89512 16.2997 7.54513 16.9497C8.19514 17.5998 8.96681 18.1154 9.81609 18.4672C10.6654 18.8189 11.5756 19 12.4949 19C13.4141 19 14.3244 18.8189 15.1737 18.4672C16.0229 18.1154 16.7946 17.5998 17.4446 16.9497C18.0946 16.2997 18.6102 15.5281 18.962 14.6788C19.3138 13.8295 19.4949 12.9193 19.4949 12C19.4949 11.0807 19.3138 10.1705 18.962 9.32122C18.6102 8.47194 18.0946 7.70026 17.4446 7.05025C16.7946 6.40024 16.0229 5.88463 15.1737 5.53284C14.3244 5.18106 13.4141 5 12.4949 5C11.5756 5 10.6654 5.18106 9.81609 5.53284C8.96681 5.88463 8.19514 6.40024 7.54513 7.05025C6.89512 7.70026 6.3795 8.47194 6.02772 9.32122C5.67593 10.1705 5.49487 11.0807 5.49487 12Z" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'center-right':
+        return `
+          <path d="M19.4949 12H5.49487" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M13.4949 6L19.4949 12" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M13.4949 18L19.4949 12" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'bottom-left':
+        return `
+          <path d="M7.49487 17L17.4949 7" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M16.4949 17H7.49487V8" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'bottom-center':
+        return `
+          <path d="M12.4949 19V5" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M18.4949 13L12.4949 19" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M6.49487 13L12.4949 19" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+      case 'bottom-right':
+        return `
+          <path d="M17.4949 17L7.49487 7" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M8.49487 17H17.4949V8" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        `;
+    }
+  }
+
+  /**
+   * Splits the combined position value into vertical and horizontal components
+   * @param position - Combined position value (e.g., "bottom-right")
+   * @returns Object with separate vertical and horizontal values
+   */
+  function splitPosition(position: Position) {
+    const [vertical, horizontal] = position.split('-');
+    return { vertical, horizontal };
+  }
+
+  // Reactive values for position components
+  $: ({ vertical, horizontal } = splitPosition(value as Position));
+
+  // Cleanup object URLs when component is destroyed
+  onDestroy(() => {
+    positions.forEach(position => {
+      URL.revokeObjectURL(getIconPath(position));
+    });
+  });
+
+  function getCornerRounding(pos: Position): string {
+    switch (pos) {
+      case 'top-left': return 'rounded-tl-[15px]';
+      case 'top-right': return 'rounded-tr-[15px]';
+      case 'bottom-left': return 'rounded-bl-[15px]';
+      case 'bottom-right': return 'rounded-br-[15px]';
+      default: return '';
+    }
+  }
+</script>
+
+<!-- Container with relative positioning for overlay -->
+<div class="relative widgetic-colors">
+  <!-- Grid component -->
+  <div 
+    class="fixed-position-grid grid grid-cols-3 gap-[1px] w-fit bg-white rounded-large relative"
+    {id}
+  >
+    {#each positions as position}
+      <button
+        class="w-[61px] h-[36px] flex items-center justify-center relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-colors group/button {getCornerRounding(position)} {
+          position === value 
+            ? 'bg-sage-green hover:bg-sage-green z-[100]' 
+            : 'bg-grey1 data-[state=open]:bg-grey2 hover:bg-grey2 z-10'
+        }"
+        on:click={() => handlePositionClick(position)}
+        on:focus={onFocus}
+        aria-label={`Set position to ${position}`}
+        aria-pressed={position === value}
+      >
+        <svelte:component 
+          this={positionIcons[position]} 
+          class="w-6 h-6 pointer-events-none {
+            position === value 
+              ? '[&>*]:stroke-white [&>*]:group-hover/button:[&>*]:stroke-white' 
+              : '[&>*]:stroke-[hsl(var(--grey5))] group-hover/button:[&>*]:stroke-[hsl(var(--grey7))]'
+          }"
+          stroke="currentColor"
+        />
+      </button>
+    {/each}
+  </div>
+
+  <!-- Border overlay with hover effect -->
+  <!-- svelte-ignore element_invalid_self_closing_tag -->
+  <div 
+    class="absolute inset-0 pointer-events-none rounded-large border border-grey2 transition-colors duration-200 hover:border-forest-green z-50"
+    aria-hidden="true"
+  />
+</div>
+
+<style>
+  /* Base button styles */
+  button {
+    outline: none !important;
+    border: none !important;
+  }
+
+  /* Icon styles */
+  :global(.fixed-position-grid button svg) {
+    stroke-width: 2;
+    pointer-events: none;
+  }
+
+  /* Focus states */
+  :global(.fixed-position-grid button:focus-visible),
+  :global(.fixed-position-grid button:focus-within) {
+    outline: none !important;
+  }
+
+  :global(.fixed-position-grid:focus-within) {
+    outline: none !important;
+  }
+
+  /* Selected state */
+  :global(.fixed-position-grid button[aria-pressed="true"]) {
+    background-color: hsl(var(--sage-green)) !important;
+  }
+
+  :global(.fixed-position-grid button[aria-pressed="true"]:hover) {
+    background-color: hsl(var(--sage-green)) !important;
+  }
+
+  /* Unselected state */
+  :global(.fixed-position-grid button:not([aria-pressed="true"]):hover) {
+    background-color: hsl(var(--grey2)) !important;
+  }
+
+  /* Icon colors */
+  :global(.fixed-position-grid button[aria-pressed="true"] svg *) {
+    stroke: white !important;
+    fill: none !important;
+  }
+
+  :global(.fixed-position-grid button[aria-pressed="true"]:hover svg *) {
+    stroke: white !important;
+    fill: none !important;
+  }
+
+  :global(.fixed-position-grid button:not([aria-pressed="true"]):hover svg *) {
+    stroke: hsl(var(--grey7)) !important;
+  }
+
+  /* Container hover state */
+  .relative:hover .absolute {
+    border-color: hsl(var(--forest-green)) !important;
+  }
+</style> 

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

@@ -0,0 +1,23 @@
+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 FixedPositionInputController: $$__sveltets_2_IsomorphicComponent<{
+    value?: "top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    onChange: (newValue: "top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right") => void;
+    onFocus?: () => void;
+    id?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FixedPositionInputController = InstanceType<typeof FixedPositionInputController>;
+export default FixedPositionInputController;