@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/SwitchInputController.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  // Svelte imports
+  import { onMount } from 'svelte';
+
+  // Shadcn UI Components
+  import { Switch } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+
+  // Component props
+  export let label: string;
+  export let value: boolean;
+  export let onChange: (newValue: boolean) => void;
+  export let description: string | undefined = undefined;
+  export let onFocus: () => void = () => {};
+
+  function toggle(newValue?: boolean) {
+    value = typeof newValue === 'boolean' ? newValue : !value;
+    console.log('[SwitchIC] Toggled:', { label, value });
+    onChange(value);
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} />
+    </div>
+    
+    <div class="absolute right-0">
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div 
+        class="switch-main-container rounded-large flex items-center justify-between cursor-default transition-colors duration-200"
+        style="height: 48px; width: 185px; border: 1px solid hsl(var(--grey2)); background: hsl(var(--grey1)); padding: 0 12px;"
+        onfocusin={onFocus}
+        onclick={(e) => { if (e.target === e.currentTarget) toggle(); }}
+      >
+        <!-- Off text -->
+        <span class="subtext select-none pointer-events-none" style="color: hsl(var({!value ? '--grey7' : '--grey3'}));">Off</span>
+        
+        <!-- Switch -->
+        <div class="flex items-center justify-center pointer-events-none widgetic-colors">
+          <Switch 
+            id="switch" 
+            checked={value} 
+            onCheckedChange={toggle}
+            class="!border-0 pointer-events-auto switch-override"
+            style="background-color: hsl(var({value ? '--sage-green' : '--grey3'})) !important"
+          />
+        </div>
+        
+        <!-- On text -->
+        <span class="subtext select-none pointer-events-none" style="color: hsl(var({value ? '--grey7' : '--grey3'}));">On</span>
+      </div>
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext" style="color: hsl(var(--grey5));">{description}</p>
+  {/if}
+</div>
+
+<style>
+  .switch-main-container:hover {
+    border-color: hsl(var(--forest-green));
+  }
+
+  /* Switch track */
+  :global(.switch-override) {
+    width: 44px !important;
+    height: 25px !important;
+    min-width: 44px !important;
+    border: none !important;
+    padding: 2px !important;
+    overflow: hidden !important;
+    transition: background-color 0.2s ease-in-out !important;
+  }
+
+  :global(.switch-override:focus-visible),
+  :global(.switch-override:focus-within) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Switch thumb — reset translate (Tailwind 4 uses CSS translate property) and use transform */
+  :global(.switch-override > *) {
+    width: 20px !important;
+    height: 20px !important;
+    min-width: 20px !important;
+    background-color: white !important;
+    border-radius: 9999px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
+    transition: transform 0.2s ease-in-out !important;
+    display: block !important;
+    translate: none !important;
+  }
+
+  :global(.switch-override > *[data-state="unchecked"]) {
+    transform: translateX(0) !important;
+    border: 1px solid hsl(var(--grey3)) !important;
+  }
+
+  :global(.switch-override > *[data-state="checked"]) {
+    transform: translateX(20px) !important;
+    border: 1px solid hsl(var(--grey6)) !important;
+  }
+</style>

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

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

package/dist/components/ic/TagsInputController.svelte

@@ -0,0 +1,125 @@
+<!-- 
+ * TagsInputController
+ * 
+ * A component for adding and removing tags, similar to email tag inputs.
+ * 
+ * Features:
+ * - Add tags with Enter or comma key
+ * - Remove tags by clicking on the × button
+ * - Click anywhere in the container to focus the input
+ * - Customizable placeholder text
+ * - Prevents duplicate tags
+ -->
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import InputControllerHeader from './InputControllerHeader.svelte';
+  import type { InputControllerConfig } from './index';
+  import { IconX } from '@widgetic/design-system/icons';
+
+  // Required props
+  export let label: string;
+  export let value: string[] = [];
+  export let onChange: (newValue: string[]) => 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 };
+
+  // Use config values with fallbacks
+  const placeholder = config.placeholder || 'Add tag...';
+  
+  // Component state
+  let inputElement: HTMLInputElement;
+  let tagInputContainer: HTMLDivElement;
+
+  function handleTagRemove(tagToRemove: string) {
+    const newTags = value.filter(tag => tag !== tagToRemove);
+    onChange(newTags);
+  }
+
+  function handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === ',' || e.key === 'Enter') {
+      e.preventDefault();
+      const input = e.target as HTMLInputElement;
+      const tagValue = input.value.trim();
+      
+      if (tagValue) {
+        // Check if tag already exists to prevent duplicates
+        if (!value.includes(tagValue)) {
+          const newTags = [...value, tagValue];
+          onChange(newTags);
+        }
+        input.value = '';
+      }
+    }
+  }
+
+  function handleContainerClick(e: MouseEvent) {
+    // If the click is not on the input itself, focus the input
+    const target = e.target as HTMLElement;
+    if (inputElement && target !== inputElement) {
+      inputElement.focus();
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors {className}">
+  <div class="flex items-center w-full">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} {helpText} />
+    </div>
+    
+    <div class="w-[185px]">
+      <!-- Tag container styled to match TextInputController -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div 
+        bind:this={tagInputContainer}
+        class="tags-container border border-grey2 rounded-large bg-grey1 focus-within:border-forest-green hover:border-forest-green flex flex-col min-h-[48px] transition-colors duration-200 cursor-text p-0"
+        on:click={handleContainerClick}
+        on:focusin={onFocus}
+      >
+        <!-- Input field with specific padding -->
+        <div class="pt-[12px] pl-[16px] pr-[16px]">
+          <input
+            bind:this={inputElement}
+            type="text"
+            autocomplete="off" 
+            class="w-full outline-none border-none bg-transparent subtext text-grey7 placeholder:text-grey3 placeholder:subtext"
+            placeholder={placeholder}
+            on:keydown={handleInputKeydown}
+          />
+        </div>
+        
+        <!-- Tags with specific padding -->
+        {#if value && value.length > 0}
+          <div class="flex flex-wrap gap-1 pl-[16px] pr-[16px] pb-[16px] pt-[8px]">
+            {#each value as tag}
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div 
+                class="tag-element bg-sage-green text-white border-none hover:bg-deep-forest-green cursor-pointer transition-colors flex items-center gap-1"
+                on:click|stopPropagation={() => handleTagRemove(tag)}
+              >
+                <span class="tag uppercase truncate max-w-[115px]">{tag}</span>
+                <IconX class="w-4 h-4 text-white flex-shrink-0" />
+              </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Allow container to expand vertically */
+  .tags-container {
+    width: 100%;
+    min-height: 48px; 
+    box-sizing: border-box;
+  }
+</style> 

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

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