Add unround and external content options to ChipInput

src/lib/components/search-attribute-filter/list-filter.svelte

@@ -41,6 +41,9 @@
     removeChipButtonLabel={(chip) =>
       translate('workflows.remove-keyword-label', { keyword: chip })}
     placeholder="{translate('common.type-or-paste-in')} {$filter.attribute}"
+    unroundLeft
+    unroundRight
+    external
   />
   <div class="flex h-fit items-center">
     <Button

src/lib/holocene/input/chip-input.stories.svelte

@@ -13,6 +13,7 @@
       placeholder: 'Placeholder...',
       disabled: false,
       required: false,
+      external: false,
       hintText: 'This is the hint text...',
       removeChipButtonLabel: 'Remove',
       labelHidden: false,
@@ -25,6 +26,7 @@
       hintText: { name: 'Hint Text', control: 'text' },
       disabled: { name: 'Disabled', control: 'boolean' },
       required: { name: 'Required', control: 'boolean' },
+      external: { name: 'External Content', control: 'boolean' },
       labelHidden: { name: 'Label Hidden', control: 'boolean' },
       chips: { name: 'Chips', table: { disable: true } },
       validator: { table: { disable: true } },
@@ -47,6 +49,8 @@
 
 <Story name="Default" />
 
+<Story name="External Content" args={{ external: true }} />
+
 <Story name="Disabled" args={{ disabled: true }} />
 
 <Story name="Required" args={{ required: true }} />

src/lib/holocene/input/chip-input.svelte

@@ -18,6 +18,10 @@
   export let hintText = '';
   export let validator: (value: string) => boolean = () => true;
   export let removeChipButtonLabel: string | ((chipValue: string) => string);
+  export let unroundRight = false;
+  export let unroundLeft = false;
+  export let external = false;
+
   const values = writable<string[]>(chips);
   let displayValue = '';
   let shouldScrollToInput = false;
@@ -111,8 +115,10 @@
       disabled && 'cursor-not-allowed opacity-65',
       invalid && 'invalid',
     )}
+    class:unroundLeft
+    class:unroundRight
   >
-    {#if $values.length > 0}
+    {#if $values.length > 0 && !external}
       {#each $values as chip, i (`${chip}-${i}`)}
         {@const valid = validator(chip)}
         <Chip
@@ -149,6 +155,21 @@
       {hintText}
     </span>
   {/if}
+  {#if $values.length > 0 && external}
+    <div class="mt-1 flex flex-row flex-wrap gap-1">
+      {#each $values as chip, i (`${chip}-${i}`)}
+        {@const valid = validator(chip)}
+        <Chip
+          removeButtonLabel={typeof removeChipButtonLabel === 'string'
+            ? removeChipButtonLabel
+            : removeChipButtonLabel(chip)}
+          on:remove={() => removeChip(i)}
+          intent={valid ? 'default' : 'warning'}
+          {disabled}>{chip}</Chip
+        >
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style lang="postcss">
@@ -164,6 +185,14 @@
     @apply surface-primary inline-block w-full focus:outline-none;
   }
 
+  .unroundRight {
+    @apply rounded-br-none rounded-tr-none border-r-0;
+  }
+
+  .unroundLeft {
+    @apply rounded-bl-none rounded-tl-none border-l-0;
+  }
+
   .hint {
     @apply text-xs text-danger;
   }