@widgetic/editor 3.11.4 → 4.0.2

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

@@ -0,0 +1,39 @@
+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 BrowserInputController: $$__sveltets_2_IsomorphicComponent<{
+    header?: {
+        label: string;
+        helpText?: string;
+    } | undefined;
+    label?: string;
+    value?: string | {
+        id: string;
+        file: string;
+        url: string;
+        hash?: string;
+    };
+    onChange?: (newValue: string | {
+        id: string;
+        file: string;
+        url: string;
+        hash?: string;
+    }) => void;
+    portalTarget?: string | HTMLElement;
+    config?: InputControllerConfig;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BrowserInputController = InstanceType<typeof BrowserInputController>;
+export default BrowserInputController;

package/dist/components/ic/CheckboxInputController.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  /**
+   * CheckboxInputController Component
+   * A reusable checkbox group input component that handles multiple selections from a list of options.
+   * Supports custom styling, external state management, and accessibility features.
+   */
+
+  /**
+   * Svelte Lifecycle Imports
+   * Required for component setup and cleanup
+   */
+  import { onMount, onDestroy } from 'svelte';
+  import type { InputControllerConfig } from './index';
+
+  /**
+   * UI Components Imports
+   * Shadcn UI checkbox components for consistent styling and behavior
+   */
+  import { Label, Checkbox } from '@widgetic/design-system/components';
+
+  /**
+   * Component Props
+   * External properties that configure the checkbox group's behavior and appearance
+   */
+  export let value: string[] | { value: string; label: string }[] | string | { value: string; label: string };  // Selected value(s)
+  export let onChange: (newValue: string[]) => void;  // Callback for value changes
+  export let config: InputControllerConfig = {};    // Additional configuration options
+  export let description: string | undefined = undefined;  // Optional help description text
+  export let onFocus: () => void = () => {};  // Focus event handler
+
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks
+   */
+  export let options: { value: string; label: string }[] = config.options || [];  // Available options
+
+  /**
+   * Local state
+   */
+  let selectedValues: string[] = [];
+
+  // Initialize selectedValues based on the input value
+  onMount(() => {
+    if (Array.isArray(value)) {
+      selectedValues = value.map(v => typeof v === 'object' ? v.value : v);
+    } else if (value) {
+      selectedValues = [typeof value === 'object' ? value.value : value];
+    }
+  });
+
+  /**
+   * Handles value changes from the checkbox group
+   * @param optionValue - The value of the clicked checkbox
+   * @param checked - Whether the checkbox is checked or not
+   */
+  function handleValueChange(optionValue: string, checked: boolean) {
+    console.log('CheckboxInputController: handleValueChange', optionValue, checked);
+    
+    if (checked) {
+      // Add value if not already in array
+      if (!selectedValues.includes(optionValue)) {
+        selectedValues = [...selectedValues, optionValue];
+      }
+    } else {
+      // Remove value from array
+      selectedValues = selectedValues.filter(v => v !== optionValue);
+    }
+    
+    onChange(selectedValues);
+  }
+
+  /**
+   * Handles click on the entire row
+   * @param optionValue - The value to toggle
+   */
+  function handleRowClick(optionValue: string) {
+    // Toggle the checkbox
+    const isCurrentlySelected = selectedValues.includes(optionValue);
+    handleValueChange(optionValue, !isCurrentlySelected);
+  }
+
+  /**
+   * Stops event propagation to prevent double-firing of click events
+   * @param event - The mouse event
+   */
+  function stopPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
+  /**
+   * Create proper event handlers for shadcn components
+   */
+  function createHandlers() {
+    return {
+      // Use a function that returns a new object with events
+      // Note that these are not Svelte event directives but rather 
+      // props expected by the shadcn components
+      onclick: stopPropagation
+    };
+  }
+
+  /**
+   * Update local value when external value changes
+   */
+  $: {
+    if (value) {
+      if (Array.isArray(value)) {
+        selectedValues = value.map(v => typeof v === 'object' ? v.value : v);
+      } else {
+        selectedValues = [typeof value === 'object' ? value.value : value];
+      }
+    } else {
+      selectedValues = [];
+    }
+  }
+
+  /**
+   * Helper function to check if a value is selected
+   */
+  function isChecked(optionValue: string): boolean {
+    return selectedValues.includes(optionValue);
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div 
+    class="px-4 py-2 rounded-large border border-grey2 bg-grey1 transition-colors duration-200 hover:border-forest-green"
+    onfocusin={onFocus}
+  >
+    <div class="flex flex-col gap-2 py-2">
+      {#each options as option}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center space-x-2 cursor-pointer" onclick={() => handleRowClick(option.value)}>
+          <Checkbox
+            id={`checkbox-${option.value}`}
+            checked={isChecked(option.value)}
+            onCheckedChange={(checked) => handleValueChange(option.value, checked)}
+            class="checkbox-item border-grey5 data-[state=checked]:border-sage-green data-[state=checked]:bg-sage-green data-[state=checked]:text-white"
+            onclick={stopPropagation}
+          />
+          <Label 
+            for={`checkbox-${option.value}`} 
+            class="subtext text-grey7 cursor-pointer select-none w-full"
+            onclick={stopPropagation}
+          >
+            {option.label}
+          </Label>
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</div>
+
+<style>
+  /* Custom checkbox styling to match design system */
+  :global(.checkbox-item:focus-visible),
+  :global(.checkbox-item:focus-within) {
+    outline: none;
+  }
+
+  /* Update checkbox styles */
+  :global(.checkbox-item) {
+    border-radius: 3px; /* Set rounded corners to 3px */
+    width: 16px; /* Set width to 20px */
+    height: 16px; /* Set height to 20px */
+    border: 2px solid hsl(var(--grey7)); /* Set border to 2px */
+    display: flex; /* Ensure the checkbox is a flex container */
+    align-items: center; /* Center the checkmark vertically */
+    justify-content: center; /* Center the checkmark horizontally */
+  }
+
+  /* Scale the checkmark */
+  :global(.checkbox-item svg) {
+    width: 16px; /* Set width of checkmark to 16px */
+    height: 16px; /* Set height of checkmark to 16px */
+  }
+
+  /* Remove pointer events from labels when disabled */
+  :global(.checkbox-item[disabled] + label) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* Ensure checkmark is white when checked */
+  :global(.checkbox-item[data-state="checked"]) {
+    color: white !important;
+  }
+
+  /* Target the SVG directly for more specificity */
+  :global(.checkbox-item[data-state="checked"] svg) {
+    color: white !important;
+  }
+
+  /* Hide checkmark when unchecked */
+  :global(.checkbox-item[data-state="unchecked"] svg) {
+    display: none;
+  }
+</style> 

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

@@ -0,0 +1,41 @@
+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 CheckboxInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the checkbox group's behavior and appearance
+       */ value: string[] | {
+        value: string;
+        label: string;
+    }[] | string | {
+        value: string;
+        label: string;
+    };
+    onChange: (newValue: string[]) => void;
+    config?: InputControllerConfig;
+    description?: string | undefined;
+    onFocus?: () => void;
+    /**
+       * Configuration Options
+       * Derived from config prop with fallbacks
+       */ options?: {
+        value: string;
+        label: string;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CheckboxInputController = InstanceType<typeof CheckboxInputController>;
+export default CheckboxInputController;