@reshape-biotech/design-system 1.2.5 → 1.2.7

package/dist/components/select/Select.svelte

@@ -1,139 +1,139 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot overwrite a zero-length range – use appendLeft or prependRight instead -->
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { backgroundColor, borderColor, textColor } from '../../tokens';
-	import { Icon } from '../icons';
-	import { createEventDispatcher } from 'svelte';
-	let className = '';
-	export { className as class };
-	import SvelteSelect from 'svelte-select';
-	import type { SelectItemProps } from '.';
+  import { backgroundColor, borderColor, textColor } from '../../tokens';
+  import { Icon } from '../icons';
+  import { createEventDispatcher } from 'svelte';
+  let className = '';
+  export { className as class };
+  import SvelteSelect from 'svelte-select';
+  import type { SelectItemProps } from '.';
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let items: SelectItemProps[] = [];
-	export let id: string | undefined = undefined;
-	export let value: SelectItemProps | SelectItemProps[] | null = null;
-	export let searchable = false;
-	export let listOpen = false;
-	export let placeholder: string | undefined = undefined;
-	export let disabled = false;
-	export let hasError = false;
-	export let withGroup = false;
-	export let multiple = false;
-	export let clearable = true;
-	export let required = false;
-	export let onChange: (value: SelectItemProps | SelectItemProps[]) => void = () => {};
+  export let items: SelectItemProps[] = [];
+  export let id: string | undefined = undefined;
+  export let value: SelectItemProps | SelectItemProps[] | null = null;
+  export let searchable = false;
+  export let listOpen = false;
+  export let placeholder: string | undefined = undefined;
+  export let disabled = false;
+  export let hasError = false;
+  export let withGroup = false;
+  export let multiple = false;
+  export let clearable = true;
+  export let required = false;
+  export let onChange: (value: SelectItemProps | SelectItemProps[]) => void = () => {};
 
-	const groupBy = withGroup ? (item: SelectItemProps) => item.group : undefined;
+  const groupBy = withGroup ? (item: SelectItemProps) => item.group : undefined;
 </script>
 
 <SvelteSelect
-	{items}
-	{searchable}
-	{placeholder}
-	{disabled}
-	{id}
-	{hasError}
-	{multiple}
-	{clearable}
-	{groupBy}
-	on:select={(e) => dispatch('change', e.detail)}
-	on:input={(e) => dispatch('input', e.detail)}
-	on:change={(e) => {
-		dispatch('change', e.detail);
-		onChange(e.detail);
-	}}
-	class={`select ${className} h-10`}
-	{required}
-	bind:value
-	bind:listOpen
-	showChevron={true}
-	floatingConfig={{
-		placement: 'bottom'
-	}}
-	createGroupHeaderItem={(groupValue) => {
-		return {
-			value: groupValue,
-			label: groupValue
-		};
-	}}
-	--group-title-border-style="1px solid black"
-	--group-item-padding-left="1rem"
-	--item-height="100%"
-	--group-title-color={textColor['secondary']}
-	--group-title-font-size="0.75rem"
-	--group-title-font-weight="400"
-	--group-title-text-transform="none"
-	--placeholder-color={textColor['secondary']}
-	--item-is-active-bg={backgroundColor['accent']}
-	--item-is-active-color={textColor['primary']}
-	--item-hover-bg={backgroundColor['neutral']}
-	--border="1px solid {borderColor['input']}"
-	--border-hover="1px solid {borderColor['hover']}"
-	--border-focused="1px solid {borderColor['focus']}"
-	--border-radius="8px"
-	--font-size="text-sm"
+  {items}
+  {searchable}
+  {placeholder}
+  {disabled}
+  {id}
+  {hasError}
+  {multiple}
+  {clearable}
+  {groupBy}
+  on:select={(e) => dispatch('change', e.detail)}
+  on:input={(e) => dispatch('input', e.detail)}
+  on:change={(e) => {
+    dispatch('change', e.detail);
+    onChange(e.detail);
+  }}
+  class={`select ${className} h-10`}
+  {required}
+  bind:value
+  bind:listOpen
+  showChevron={true}
+  floatingConfig={{
+    placement: 'bottom',
+  }}
+  createGroupHeaderItem={(groupValue) => {
+    return {
+      value: groupValue,
+      label: groupValue,
+    };
+  }}
+  --group-title-border-style="1px solid black"
+  --group-item-padding-left="1rem"
+  --item-height="100%"
+  --group-title-color={textColor['secondary']}
+  --group-title-font-size="0.75rem"
+  --group-title-font-weight="400"
+  --group-title-text-transform="none"
+  --placeholder-color={textColor['secondary']}
+  --item-is-active-bg={backgroundColor['accent']}
+  --item-is-active-color={textColor['primary']}
+  --item-hover-bg={backgroundColor['neutral']}
+  --border="1px solid {borderColor['input']}"
+  --border-hover="1px solid {borderColor['hover']}"
+  --border-focused="1px solid {borderColor['focus']}"
+  --border-radius="8px"
+  --font-size="text-sm"
 >
-	<div slot="chevron-icon" class="">
-		<Icon iconName="CaretDown" color="icon-secondary" />
-	</div>
+  <div slot="chevron-icon" class="">
+    <Icon iconName="CaretDown" color="icon-secondary" />
+  </div>
 
-	<div slot="selection" let:selection>
-		{#if $$slots['custom-selection']}
-			<slot name="custom-selection" {selection} />
-		{:else}
-			{selection.label}
-		{/if}
-	</div>
+  <div slot="selection" let:selection>
+    {#if $$slots['custom-selection']}
+      <slot name="custom-selection" {selection} />
+    {:else}
+      {selection.label}
+    {/if}
+  </div>
 
-	<div slot="clear-icon">
-		<Icon iconName="X" />
-	</div>
+  <div slot="clear-icon">
+    <Icon iconName="X" />
+  </div>
 
-	<div slot="item" let:item let:index class="flex">
-		<div class="relative flex flex-1 justify-between">
-			{#if $$slots['custom-item']}
-				<slot name="custom-item" {item} {index} />
-			{:else}
-				<div class="flex h-full flex-1 items-center text-ellipsis whitespace-nowrap">
-					<p>{item.label}</p>
-				</div>
-			{/if}
-		</div>
-		<slot />
-	</div>
+  <div slot="item" let:item let:index class="flex">
+    <div class="relative flex flex-1 justify-between">
+      {#if $$slots['custom-item']}
+        <slot name="custom-item" {item} {index} />
+      {:else}
+        <div class="flex h-full flex-1 items-center text-ellipsis whitespace-nowrap">
+          <p>{item.label}</p>
+        </div>
+      {/if}
+    </div>
+    <slot />
+  </div>
 </SvelteSelect>
 
 <style>
-	:global(.svelte-select.focused) {
-		outline: 1px solid var(--colors-gray-1) !important;
-	}
+  :global(.svelte-select.focused) {
+    outline: 1px solid var(--colors-gray-1) !important;
+  }
 
-	:global(.svelte-select) {
-		width: 100%;
-		--tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
-		--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  :global(.svelte-select) {
+    width: 100%;
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-	:global(.svelte-select .item.active) {
-		background-color: #5750ee1A;
+  :global(.svelte-select .item.active) {
+    background-color: #5750ee1A;
 }
 
-	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title) {
-		padding-top: 0.5rem;
+  :global(.svelte-select .list-item:not(:first-of-type) > .list-group-title) {
+    padding-top: 0.5rem;
 }
 
-	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title)::before {
-		position: relative;
-		bottom: 0px;
-		left: 0px;
-		clear: both;
-		display: block;
-		border-top-width: 1px;
-		border-color: #12192A26;
-		--tw-content: '';
-		content: var(--tw-content);
+  :global(.svelte-select .list-item:not(:first-of-type) > .list-group-title)::before {
+    position: relative;
+    bottom: 0px;
+    left: 0px;
+    clear: both;
+    display: block;
+    border-top-width: 1px;
+    border-color: #12192A26;
+    --tw-content: '';
+    content: var(--tw-content);
 }
 </style>