mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

AutoComplete component

Browse source
This commit is contained in:
davideraccagni 2022-04-20 20:36:38 +02:00
commit 2f406f0328
23 changed files with 23879 additions and 2327 deletions
Download patch file Download diff file Expand all files Collapse all files

82
COMPONENT_INDEX.md
View file

@ -8,6 +8,8 @@
- [`AccordionItem`](#accordionitem) - [`AccordionItem`](#accordionitem)
- [`AccordionSkeleton`](#accordionskeleton) - [`AccordionSkeleton`](#accordionskeleton)
- [`AspectRatio`](#aspectratio) - [`AspectRatio`](#aspectratio)
- [`AutoComplete`](#autocomplete)
- [`AutoCompleteSkeleton`](#autocompleteskeleton)
- [`Breadcrumb`](#breadcrumb) - [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem) - [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton) - [`BreadcrumbSkeleton`](#breadcrumbskeleton)
@ -269,6 +271,86 @@ None.
None. None.
## `AutoComplete`
### Types
```ts
export type AutoCompleteItemId = any;
export type AutoCompleteItemText = string;
export interface AutoCompleteItem {
id: AutoCompleteItemId;
text: AutoCompleteItemText;
}
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| inline | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | <code>let</code> | Yes | <code>AutoCompleteItemId</code> | <code>undefined</code> | Specify the selected item id |
| filteredItems | <code>let</code> | Yes | <code>[]</code> | <code>[]</code> | -- |
| items | <code>let</code> | No | <code>AutoCompleteItem[]</code> | <code>[]</code> | Set the dropdown items |
| itemToString | <code>let</code> | No | <code>(item: AutoCompleteItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the list box |
| placeholder | <code>let</code> | No | -- | <code>null</code> | Specify the placeholder text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------- | :-------------------------------- |
| -- | Yes | <code>{ item: AutoCompleteItem; index: number; } </code> | <code>{itemToString(item)}</code> |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------------------------------------------ |
| select | dispatched | <code>{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }</code> |
| change | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| input | forwarded | -- |
| clear | dispatched | -- |
## `AutoCompleteSkeleton`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
### Slots
None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Breadcrumb` ## `Breadcrumb`
### Props ### Props

17
CONTRIBUTING.md
View file

@ -19,7 +19,7 @@ cd carbon-components-svelte
Set the original repository as the upstream: Set the original repository as the upstream:
```sh ```sh
git remote add upstream git@github.com:IBM/carbon-components-svelte.git git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
# verify that the upstream is added # verify that the upstream is added
git remote -v git remote -v
``` ```
@ -121,6 +121,21 @@ export {
} from "./ComposedModal"; } from "./ComposedModal";
``` ```
Then fork [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte).
```sh
cd carbon-preprocess-svelte
```
Link `"carbon-components-svelte"`:
```sh
yarn link "carbon-components-svelte"
yarn install
```
Add it to `src/carbon-components-svelte.js`
### Run `yarn build:docs` ### Run `yarn build:docs`
Run the following command to re-generate TypeScript definitions and documentation. Run the following command to re-generate TypeScript definitions and documentation.

3602
docs/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

321
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{ {
"total": 165, "total": 167,
"components": [ "components": [
{ {
"moduleName": "Accordion", "moduleName": "Accordion",
@ -231,6 +231,325 @@
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{
"moduleName": "AutoComplete",
"filePath": "src/AutoComplete/AutoComplete.svelte",
"props": [
{
"name": "items",
"kind": "let",
"description": "Set full list of items",
"type": "AutoCompleteItem[]",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "itemToString",
"kind": "let",
"description": "Override the display of a dropdown item",
"type": "(item: AutoCompleteItem) => string",
"value": "(item) => item.text || item.id",
"isFunction": true,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "selectedId",
"kind": "let",
"description": "Specify the selected item id",
"type": "AutoCompleteItemId",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "selectedItem",
"kind": "let",
"description": "Specify the selected item",
"type": "AutoCompleteItem",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "type",
"kind": "let",
"description": "Specify the type of dropdown",
"type": "\"default\" | \"inline\"",
"value": "\"default\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "direction",
"kind": "let",
"description": "Specify the direction of the dropdown menu",
"type": "\"bottom\" | \"top\"",
"value": "\"bottom\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "open",
"kind": "let",
"description": "Set to `true` to open the dropdown",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "inline",
"kind": "let",
"description": "Set to `true` to use the inline variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the dropdown",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "titleText",
"kind": "let",
"description": "Specify the title text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "translateWithId",
"kind": "let",
"description": "Override the default translation ids",
"type": "(id: any) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "invalid",
"kind": "let",
"description": "Set to `true` to indicate an invalid state",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "invalidText",
"kind": "let",
"description": "Specify the invalid state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
"description": "Specify the helper text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the list box component",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the list box",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the button HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [
{
"name": "__default__",
"default": true,
"fallback": "{itemToString(item)}",
"slot_props": "{ item: AutoCompleteItem; index: number; }"
}
],
"events": [
{
"type": "dispatched",
"name": "select",
"detail": "{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }"
},
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "dispatched", "name": "clear" }
],
"typedefs": [
{
"type": "any",
"name": "AutoCompleteItemId",
"ts": "type AutoCompleteItemId = any"
},
{
"type": "string",
"name": "AutoCompleteItemText",
"ts": "type AutoCompleteItemText = string"
},
{
"type": "{ id: AutoCompleteItemId; text: AutoCompleteItemText; }",
"name": "AutoCompleteItem",
"ts": "interface AutoCompleteItem { id: AutoCompleteItemId; text: AutoCompleteItemText; }"
}
],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "AutoCompleteSkeleton",
"filePath": "src/AutoComplete/AutoCompleteSkeleton.svelte",
"props": [
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{ {
"moduleName": "Breadcrumb", "moduleName": "Breadcrumb",
"filePath": "src/Breadcrumb/Breadcrumb.svelte", "filePath": "src/Breadcrumb/Breadcrumb.svelte",

101
docs/src/pages/components/AutoComplete.svx Normal file
View file

@ -0,0 +1,101 @@
---
components: ["AutoComplete", "AutoCompleteSkeleton"]
---
<script>
import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
`AutoComplete` is keyed for performance reasons.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
</InlineNotification>
### Default
<AutoComplete titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "11", text: "Email1"},
{id: "12", text: "Email2"},
{id: "2", text: "Fax"}]}" />
### Custom slot
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
<FileSource src="/framed/AutoComplete/AutoCompleteSlot" />
### Hidden label
<AutoComplete hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Format item display text
Use the `itemToString` prop to format the display of individual items.
<AutoComplete itemToString={item => {
return item.text + ' (' + item.id +')'
}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Multiple dropdowns
<FileSource src="/framed/AutoComplete/MultipleAutoComplete" />
### Top direction
Set `direction` to `"top"` for the dropdown menu to appear above the input.
<AutoComplete direction="top" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Light variant
<AutoComplete light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Inline variant
<AutoComplete type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Extra-large size
<AutoComplete size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Small size
<AutoComplete size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Invalid state
<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Warning state
<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state
<AutoComplete disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Skeleton
<AutoCompleteSkeleton />

29
docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { AutoComplete } from "carbon-components-svelte";
</script>
<AutoComplete
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
let:item
let:index
>
<div>
<strong>{item.text}</strong>
</div>
<div>
id: {item.id} - index:
{index}
</div>
</AutoComplete>
<style>
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto;
}
</style>

42
docs/src/pages/framed/AutoComplete/MultipleAutoComplete.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import { AutoComplete } from "carbon-components-svelte";
const items = [
{ id: "0", text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
];
let auto_complete1_selectedId = "0";
let auto_complete2_selectedId = "1";
const formatSelected = (id) =>
items.find((item) => item.id === id)?.text ?? "N/A";
$: primary = formatSelected(auto_complete1_selectedId);
$: secondary = formatSelected(auto_complete2_selectedId);
</script>
<AutoComplete
titleText="Primary contact"
bind:selectedId="{auto_complete1_selectedId}"
items="{items}"
/>
<div>Primary: {primary}</div>
<AutoComplete
invalid="{auto_complete1_selectedId === auto_complete2_selectedId}"
invalidText="Secondary contact method must be different from the primary contact"
titleText="Secondary contact"
bind:selectedId="{auto_complete2_selectedId}"
items="{items}"
/>
<div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

9698
examples/sapper/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

13
examples/sapper/src/routes/index.svelte
View file

@ -1,5 +1,16 @@
<script> <script>
import { Button } from "carbon-components-svelte"; import { AutoComplete, Button } from "carbon-components-svelte";
</script> </script>
<AutoComplete
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '11', text: 'Email1' },
{ id: '12', text: 'Email2' },
{ id: '2', text: 'Fax' },
]}"
/>
<Button>Primary button</Button> <Button>Primary button</Button>

2098
examples/sapper/yarn.lock
View file

File diff suppressed because it is too large Load diff

5194
examples/sveltekit/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

20
examples/sveltekit/src/routes/index.svelte
View file

@ -1,6 +1,11 @@
<script> <script>
import { Button, truncate, breakpoints } from "carbon-components-svelte"; import { Button, truncate, breakpoints } from "carbon-components-svelte";
import { Airplane } from "carbon-pictograms-svelte"; import { Airplane } from "carbon-pictograms-svelte";
import { AutoComplete } from "carbon-components-svelte";
let selectedId = 0;
let selectedItem = undefined;
</script> </script>
<Button>Primary button</Button> <Button>Primary button</Button>
@ -10,3 +15,18 @@
<div use:truncate>Text...</div> <div use:truncate>Text...</div>
{JSON.stringify(breakpoints)} {JSON.stringify(breakpoints)}
<AutoComplete
titleText="Contact"
bind:selectedId
bind:selectedItem
placeholder="Placeholder"
items="{[
{ id: '0', text: 'Slack' },
{ id: '11', text: 'Email1' },
{ id: '12', text: 'Email2' },
{ id: '2', text: 'Fax' },
]}"
/>
Selected: {selectedItem?.text} ({selectedId})

527
examples/sveltekit/yarn.lock
View file

@ -3,12 +3,12 @@
"@rollup/pluginutils@^4.2.0": "@rollup/pluginutils@^4.2.0":
version "4.2.0" "integrity" "sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA=="
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08" "resolved" "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.0.tgz"
integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA== "version" "4.2.0"
dependencies: dependencies:
estree-walker "^2.0.1" "estree-walker" "^2.0.1"
picomatch "^2.2.2" "picomatch" "^2.2.2"
"@sveltejs/kit@1.0.0-next.314": "@sveltejs/kit@1.0.0-next.314":
version "1.0.0-next.314" version "1.0.0-next.314"
@ -20,57 +20,57 @@
vite "^2.9.0" vite "^2.9.0"
"@sveltejs/vite-plugin-svelte@^1.0.0-next.32": "@sveltejs/vite-plugin-svelte@^1.0.0-next.32":
version "1.0.0-next.40" "integrity" "sha512-DtXF01fYGEJkbC7GntU/7jaq9M1SwyyNCkbDA+cfQSXRpm3H7zbu0M80wSQBSpntdd+hgSdxKCxv4GgX6/zI6w=="
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.40.tgz#8f39cd5fa5400697bef1cefe112e77f08b90c23e" "resolved" "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.40.tgz"
integrity sha512-DtXF01fYGEJkbC7GntU/7jaq9M1SwyyNCkbDA+cfQSXRpm3H7zbu0M80wSQBSpntdd+hgSdxKCxv4GgX6/zI6w== "version" "1.0.0-next.40"
dependencies: dependencies:
"@rollup/pluginutils" "^4.2.0" "@rollup/pluginutils" "^4.2.0"
debug "^4.3.3" "debug" "^4.3.3"
kleur "^4.1.4" "kleur" "^4.1.4"
magic-string "^0.26.1" "magic-string" "^0.26.1"
svelte-hmr "^0.14.11" "svelte-hmr" "^0.14.11"
"@types/node@*": "@types/node@*":
version "17.0.23" "integrity" "sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g=="
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da" "resolved" "https://registry.npmjs.org/@types/node/-/node-17.0.24.tgz"
integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw== "version" "17.0.24"
"@types/pug@^2.0.4": "@types/pug@^2.0.4":
version "2.0.6" "integrity" "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg=="
resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.6.tgz#f830323c88172e66826d0bde413498b61054b5a6" "resolved" "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz"
integrity sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg== "version" "2.0.6"
"@types/sass@^1.16.0": "@types/sass@^1.16.0":
version "1.43.1" "integrity" "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g=="
resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.43.1.tgz#86bb0168e9e881d7dade6eba16c9ed6d25dc2f68" "resolved" "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz"
integrity sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g== "version" "1.43.1"
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
balanced-match@^1.0.0: "balanced-match@^1.0.0":
version "1.0.2" "integrity" "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" "resolved" "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== "version" "1.0.2"
brace-expansion@^1.1.7: "brace-expansion@^1.1.7":
version "1.1.11" "integrity" "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" "resolved" "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== "version" "1.1.11"
dependencies: dependencies:
balanced-match "^1.0.0" "balanced-match" "^1.0.0"
concat-map "0.0.1" "concat-map" "0.0.1"
buffer-crc32@^0.2.5: "buffer-crc32@^0.2.5":
version "0.2.13" "integrity" "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" "resolved" "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI= "version" "0.2.13"
carbon-components-svelte@^0.63.0: carbon-components-svelte@^0.63.0:
version "0.63.0" version "0.63.0"
resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad" resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A== integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
dependencies: dependencies:
flatpickr "4.6.9" "flatpickr" "4.6.9"
carbon-pictograms-svelte@^12.0.2: carbon-pictograms-svelte@^12.0.2:
version "12.0.2" version "12.0.2"
@ -86,37 +86,37 @@ carbon-preprocess-svelte@^0.9.0:
svelte-preprocess "^4.10.5" svelte-preprocess "^4.10.5"
typescript "^4.6.3" typescript "^4.6.3"
commander@^8.0.0: "commander@^8.0.0":
version "8.3.0" "integrity" "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" "resolved" "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== "version" "8.3.0"
concat-map@0.0.1: "concat-map@0.0.1":
version "0.0.1" "integrity" "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= "version" "0.0.1"
cssesc@^3.0.0: "cssesc@^3.0.0":
version "3.0.0" "integrity" "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" "resolved" "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== "version" "3.0.0"
debug@^4.3.3: "debug@^4.3.3":
version "4.3.4" "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" "resolved" "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== "version" "4.3.4"
dependencies: dependencies:
ms "2.1.2" "ms" "2.1.2"
detect-indent@^6.0.0: "detect-indent@^6.0.0":
version "6.1.0" "integrity" "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA=="
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6" "resolved" "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz"
integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA== "version" "6.1.0"
es6-promise@^3.1.2: "es6-promise@^3.1.2":
version "3.3.1" "integrity" "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM="
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613" "resolved" "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz"
integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM= "version" "3.3.1"
esbuild-android-64@0.14.36: esbuild-android-64@0.14.36:
version "0.14.36" version "0.14.36"
@ -244,263 +244,258 @@ esbuild@^0.14.27:
esbuild-windows-64 "0.14.36" esbuild-windows-64 "0.14.36"
esbuild-windows-arm64 "0.14.36" esbuild-windows-arm64 "0.14.36"
estree-walker@^2.0.1: "estree-walker@^2.0.1":
version "2.0.2" "integrity" "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" "resolved" "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== "version" "2.0.2"
flatpickr@4.6.9: "fs.realpath@^1.0.0":
version "4.6.9" "integrity" "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499" "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw== "version" "1.0.0"
fs.realpath@^1.0.0: "fsevents@~2.3.2":
version "1.0.0" "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= "version" "2.3.2"
fsevents@~2.3.2: "function-bind@^1.1.1":
version "2.3.2" "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== "version" "1.1.1"
function-bind@^1.1.1: "glob@^7.1.3", "glob@^7.1.7":
version "1.1.1" "integrity" "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q=="
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" "resolved" "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== "version" "7.2.0"
glob@^7.1.3, glob@^7.1.7:
version "7.2.0"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
dependencies: dependencies:
fs.realpath "^1.0.0" "fs.realpath" "^1.0.0"
inflight "^1.0.4" "inflight" "^1.0.4"
inherits "2" "inherits" "2"
minimatch "^3.0.4" "minimatch" "^3.0.4"
once "^1.3.0" "once" "^1.3.0"
path-is-absolute "^1.0.0" "path-is-absolute" "^1.0.0"
graceful-fs@^4.1.3: "graceful-fs@^4.1.3":
version "4.2.9" "integrity" "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96" "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ== "version" "4.2.10"
has@^1.0.3: "has@^1.0.3":
version "1.0.3" "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw=="
resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" "resolved" "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== "version" "1.0.3"
dependencies: dependencies:
function-bind "^1.1.1" "function-bind" "^1.1.1"
inflight@^1.0.4: "inflight@^1.0.4":
version "1.0.6" "integrity" "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk="
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" "resolved" "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= "version" "1.0.6"
dependencies: dependencies:
once "^1.3.0" "once" "^1.3.0"
wrappy "1" "wrappy" "1"
inherits@2: "inherits@2":
version "2.0.4" "integrity" "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" "resolved" "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== "version" "2.0.4"
is-core-module@^2.8.1: "is-core-module@^2.8.1":
version "2.8.1" "integrity" "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA=="
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" "resolved" "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== "version" "2.8.1"
dependencies: dependencies:
has "^1.0.3" "has" "^1.0.3"
kleur@^4.1.4: "kleur@^4.1.4":
version "4.1.4" "integrity" "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA=="
resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d" "resolved" "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz"
integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA== "version" "4.1.4"
magic-string@^0.25.7: "magic-string@^0.25.7":
version "0.25.9" "integrity" "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ== "version" "0.25.9"
dependencies: dependencies:
sourcemap-codec "^1.4.8" "sourcemap-codec" "^1.4.8"
magic-string@^0.26.1: "magic-string@^0.26.1":
version "0.26.1" "integrity" "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg=="
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.1.tgz#ba9b651354fa9512474199acecf9c6dbe93f97fd" "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.26.1.tgz"
integrity sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg== "version" "0.26.1"
dependencies: dependencies:
sourcemap-codec "^1.4.8" "sourcemap-codec" "^1.4.8"
min-indent@^1.0.0: "min-indent@^1.0.0":
version "1.0.1" "integrity" "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" "resolved" "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== "version" "1.0.1"
minimatch@^3.0.4: "minimatch@^3.0.4":
version "3.1.2" "integrity" "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" "resolved" "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== "version" "3.1.2"
dependencies: dependencies:
brace-expansion "^1.1.7" "brace-expansion" "^1.1.7"
minimist@^1.2.0, minimist@^1.2.6: "minimist@^1.2.0", "minimist@^1.2.6":
version "1.2.6" "integrity" "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" "resolved" "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== "version" "1.2.6"
mkdirp@^0.5.1: "mkdirp@^0.5.1":
version "0.5.6" "integrity" "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6" "resolved" "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw== "version" "0.5.6"
dependencies: dependencies:
minimist "^1.2.6" "minimist" "^1.2.6"
mri@^1.1.0: "mri@^1.1.0":
version "1.2.0" "integrity" "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" "resolved" "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz"
integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== "version" "1.2.0"
ms@2.1.2: "ms@2.1.2":
version "2.1.2" "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== "version" "2.1.2"
nanoid@^3.3.1: "nanoid@^3.3.1":
version "3.3.1" "integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== "version" "3.3.1"
once@^1.3.0: "once@^1.3.0":
version "1.4.0" "integrity" "sha1-WDsap3WWHUsROsF9nFC6753Xa9E="
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" "resolved" "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= "version" "1.4.0"
dependencies: dependencies:
wrappy "1" "wrappy" "1"
path-is-absolute@^1.0.0: "path-is-absolute@^1.0.0":
version "1.0.1" "integrity" "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" "resolved" "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= "version" "1.0.1"
path-parse@^1.0.7: "path-parse@^1.0.7":
version "1.0.7" "integrity" "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" "resolved" "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== "version" "1.0.7"
picocolors@^1.0.0: "picocolors@^1.0.0":
version "1.0.0" "integrity" "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" "resolved" "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== "version" "1.0.0"
picomatch@^2.2.2: "picomatch@^2.2.2":
version "2.3.1" "integrity" "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" "resolved" "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== "version" "2.3.1"
postcss-selector-parser@^6.0.6: "postcss-selector-parser@^6.0.6":
version "6.0.9" "integrity" "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ=="
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f" "resolved" "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz"
integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ== "version" "6.0.9"
dependencies: dependencies:
cssesc "^3.0.0" "cssesc" "^3.0.0"
util-deprecate "^1.0.2" "util-deprecate" "^1.0.2"
postcss@^8.3.5, postcss@^8.4.12: postcss@^8.3.5, postcss@^8.4.12:
version "8.4.12" version "8.4.12"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
dependencies: dependencies:
nanoid "^3.3.1" "nanoid" "^3.3.1"
picocolors "^1.0.0" "picocolors" "^1.0.0"
source-map-js "^1.0.2" "source-map-js" "^1.0.2"
purgecss@^4.1.3: purgecss@^4.1.3:
version "4.1.3" version "4.1.3"
resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7" resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw== integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
dependencies: dependencies:
commander "^8.0.0" "commander" "^8.0.0"
glob "^7.1.7" "glob" "^7.1.7"
postcss "^8.3.5" "postcss" "^8.3.5"
postcss-selector-parser "^6.0.6" "postcss-selector-parser" "^6.0.6"
resolve@^1.22.0: "resolve@^1.22.0":
version "1.22.0" "integrity" "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw=="
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" "resolved" "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== "version" "1.22.0"
dependencies: dependencies:
is-core-module "^2.8.1" "is-core-module" "^2.8.1"
path-parse "^1.0.7" "path-parse" "^1.0.7"
supports-preserve-symlinks-flag "^1.0.0" "supports-preserve-symlinks-flag" "^1.0.0"
rimraf@^2.5.2: "rimraf@^2.5.2":
version "2.7.1" "integrity" "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" "resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== "version" "2.7.1"
dependencies: dependencies:
glob "^7.1.3" "glob" "^7.1.3"
rollup@^2.59.0: "rollup@^2.59.0":
version "2.70.1" "integrity" "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA=="
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e" "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.70.1.tgz"
integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA== "version" "2.70.1"
optionalDependencies: optionalDependencies:
fsevents "~2.3.2" "fsevents" "~2.3.2"
sade@^1.7.4: "sade@^1.7.4":
version "1.8.1" "integrity" "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="
resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701" "resolved" "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A== "version" "1.8.1"
dependencies: dependencies:
mri "^1.1.0" "mri" "^1.1.0"
sander@^0.5.0: "sander@^0.5.0":
version "0.5.1" "integrity" "sha1-dB4kXiMfB8r7b98PEzrfohalAq0="
resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad" "resolved" "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz"
integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0= "version" "0.5.1"
dependencies: dependencies:
es6-promise "^3.1.2" "es6-promise" "^3.1.2"
graceful-fs "^4.1.3" "graceful-fs" "^4.1.3"
mkdirp "^0.5.1" "mkdirp" "^0.5.1"
rimraf "^2.5.2" "rimraf" "^2.5.2"
sorcery@^0.10.0: "sorcery@^0.10.0":
version "0.10.0" "integrity" "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc="
resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7" "resolved" "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz"
integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc= "version" "0.10.0"
dependencies: dependencies:
buffer-crc32 "^0.2.5" "buffer-crc32" "^0.2.5"
minimist "^1.2.0" "minimist" "^1.2.0"
sander "^0.5.0" "sander" "^0.5.0"
sourcemap-codec "^1.3.0" "sourcemap-codec" "^1.3.0"
source-map-js@^1.0.2: "source-map-js@^1.0.2":
version "1.0.2" "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== "version" "1.0.2"
sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.8: "sourcemap-codec@^1.3.0", "sourcemap-codec@^1.4.8":
version "1.4.8" "integrity" "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== "version" "1.4.8"
strip-indent@^3.0.0: "strip-indent@^3.0.0":
version "3.0.0" "integrity" "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" "resolved" "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz"
integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== "version" "3.0.0"
dependencies: dependencies:
min-indent "^1.0.0" "min-indent" "^1.0.0"
supports-preserve-symlinks-flag@^1.0.0: "supports-preserve-symlinks-flag@^1.0.0":
version "1.0.0" "integrity" "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" "resolved" "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== "version" "1.0.0"
svelte-hmr@^0.14.11: "svelte-hmr@^0.14.11":
version "0.14.11" "integrity" "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ=="
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.11.tgz#63d532dc9c2c849ab708592f034765fa2502e568" "resolved" "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.11.tgz"
integrity sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ== "version" "0.14.11"
svelte-preprocess@^4.10.5: svelte-preprocess@^4.10.5:
version "4.10.6" version "4.10.6"
@ -509,10 +504,10 @@ svelte-preprocess@^4.10.5:
dependencies: dependencies:
"@types/pug" "^2.0.4" "@types/pug" "^2.0.4"
"@types/sass" "^1.16.0" "@types/sass" "^1.16.0"
detect-indent "^6.0.0" "detect-indent" "^6.0.0"
magic-string "^0.25.7" "magic-string" "^0.25.7"
sorcery "^0.10.0" "sorcery" "^0.10.0"
strip-indent "^3.0.0" "strip-indent" "^3.0.0"
svelte@^3.47.0: svelte@^3.47.0:
version "3.47.0" version "3.47.0"
@ -524,10 +519,10 @@ typescript@^4.6.3:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw== integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
util-deprecate@^1.0.2: "util-deprecate@^1.0.2":
version "1.0.2" "integrity" "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" "resolved" "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= "version" "1.0.2"
vite@^2.9.0: vite@^2.9.0:
version "2.9.5" version "2.9.5"
@ -539,9 +534,9 @@ vite@^2.9.0:
resolve "^1.22.0" resolve "^1.22.0"
rollup "^2.59.0" rollup "^2.59.0"
optionalDependencies: optionalDependencies:
fsevents "~2.3.2" "fsevents" "~2.3.2"
wrappy@1: "wrappy@1":
version "1.0.2" "integrity" "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" "resolved" "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= "version" "1.0.2"

1772
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

340
src/AutoComplete/AutoComplete.svelte Normal file
View file

@ -0,0 +1,340 @@
<script>
/**
* @typedef {any} AutoCompleteItemId
* @typedef {string} AutoCompleteItemText
* @typedef {{ id: AutoCompleteItemId; text: AutoCompleteItemText; }} AutoCompleteItem
* @event {{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }} select
* @slot {{ item: AutoCompleteItem; index: number; }}
*/
/**
* Set the dropdown items
* @type {AutoCompleteItem[]}
*/
export let items = [];
export let filteredItems = [];
/**
* Override the display of a dropdown item
* @type {(item: AutoCompleteItem) => string}
*/
export let itemToString = (item) => item.text || item.id;
/**
* Specify the selected item id
* @type {AutoCompleteItemId}
*/
export let selectedId = undefined;
/**
* Specify the selected item
* @type {AutoCompleteItem}
*/
export let selectedItem = undefined;
/**
* Specify the type of dropdown
* @type {"default" | "inline"}
*/
export let type = "default";
/**
* Specify the direction of the dropdown menu
* @type {"bottom" | "top"}
*/
export let direction = "bottom";
/**
* Specify the size of the dropdown field
* @type {"sm" | "lg" | "xl"}
*/
export let size = undefined;
/** Set to `true` to open the dropdown */
export let open = false;
/** Set to `true` to use the inline variant */
export let inline = false;
/** Set to `true` to enable the light variant */
export let light = false;
/** Set to `true` to disable the dropdown */
export let disabled = false;
/** Specify the title text */
export let titleText = "";
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Specify the invalid state text */
export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Specify the helper text */
export let helperText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Override the default translation ids
* @type {(id: any) => string}
*/
export let translateWithId = undefined;
/** Set an id for the list box component */
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the list box
* @type {string}
*/
export let name = undefined;
/** Obtain a reference to the button HTML element */
export let ref = null;
/** Specify the placeholder text */
export let placeholder = null;
import { createEventDispatcher } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import { ListBox, ListBoxMenu, ListBoxMenuItem } from "../ListBox";
const dispatch = createEventDispatcher();
let highlightedIndex = -1;
let innerValue = undefined;
function change(dir) {
let index = highlightedIndex + dir;
if (index < 0) {
index = filteredItems.length - 1;
} else if (index >= filteredItems.length) {
index = 0;
}
highlightedIndex = index;
}
function onKeydown(event) {
let key = event.key;
if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
event.preventDefault();
}
if (key === "Enter") {
open = !open;
if (
highlightedIndex > -1 &&
filteredItems[highlightedIndex].id !== selectedId
) {
selectedItem = filteredItems[highlightedIndex];
selectedId = selectedItem.id;
innerValue = selectedItem.text;
open = false;
}
} else if (key === "Backspace") {
selectedItem = undefined;
selectedId = undefined;
open = innerValue.length > 0 && filteredItems.length > 0;
} else if (key === "Tab") {
open = false;
ref.blur();
} else if (key === "ArrowDown") {
change(1);
} else if (key === "ArrowUp") {
change(-1);
} else if (key === "Escape") {
innerValue = "";
dispatch("clear");
open = false;
} else {
if (!open) open = filteredItems.length > 0;
}
}
$: if (selectedId !== undefined) {
dispatch("select", { selectedId, selectedItem });
}
$: filteredItems = items.filter(
(item) => innerValue?.length > 0 && item.text.startsWith(innerValue)
);
$: inline = type === "inline";
$: if (!open) {
highlightedIndex = -1;
}
</script>
<svelte:window
on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) {
open = false;
}
}}"
/>
<div {...$$restProps}>
{#if titleText}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
{titleText}
</label>
{/if}
<ListBox
type="{type}"
size="{size}"
id="{id}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
'bx--dropdown--invalid'} {!invalid &&
warn &&
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}"
on:click="{({ target }) => {
if (disabled) return;
open = ref.contains(target) ? !open : false;
}}"
disabled="{disabled}"
open="{open}"
invalid="{invalid}"
invalidText="{invalidText}"
light="{light}"
warn="{warn}"
warnText="{warnText}"
>
{#if invalid}
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
{/if}
<input
bind:this="{ref}"
bind:value="{innerValue}"
type="text"
role="searchbox"
class="
auto-complete__input
{size === 'sm' && 'auto-complete__input--sm'}
{size === 'xl' && 'auto-complete__input--xl'}
"
autocomplete="false"
disabled="{disabled}"
id="{id}"
name="{name}"
placeholder="{placeholder}"
translateWithId="{translateWithId}"
{...$$restProps}
on:change
on:focus
on:blur
on:input
on:keydown="{onKeydown}"
/>
{#if open}
<ListBoxMenu aria-labelledby="{id}" id="{id}">
{#each filteredItems as item, i (item.id)}
<ListBoxMenuItem
id="{item.id}"
active="{selectedId === item.id}"
highlighted="{highlightedIndex === i || selectedId === item.id}"
on:click="{() => {
selectedItem = item;
selectedId = item.id;
innerValue = item.text;
ref.focus();
}}"
on:mouseenter="{() => {
highlightedIndex = i;
}}"
>
<slot item="{item}" index="{i}">
{itemToString(item)}
</slot>
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
{/if}
</ListBox>
{#if !inline && !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}
</div>
<style>
.auto-complete__input {
font-size: var(--cds-body-short-01-font-size, 0.875rem);
font-weight: var(--cds-body-short-01-font-weight, 400);
line-height: var(--cds-body-short-01-line-height, 1.28572);
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
width: 100%;
height: 2.5rem;
padding: 0 1rem;
border: none;
border-bottom-color: currentcolor;
border-bottom-style: none;
border-bottom-width: medium;
border-bottom: 1px solid var(--cds-ui-04, #8d8d8d);
background-color: var(--cds-field-01, #f4f4f4);
color: var(--cds-text-01, #161616);
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.auto-complete__input:focus {
outline: 2px solid var(--cds-focus, #0f62fe);
outline-offset: -2px;
}
.auto-complete__input--sm {
height: 2rem;
}
.auto-complete__input--xl,
.auto-complete__input--lg {
height: 3rem;
}
.auto-complete__input:disabled {
outline: 2px solid transparent;
outline-offset: -2px;
border-bottom: 1px solid transparent;
background-color: var(--cds-field, #f4f4f4);
color: var(--cds-text-disabled, #c6c6c6);
cursor: not-allowed;
-webkit-text-fill-color: var(--cds-disabled-02, #c6c6c6);
}
</style>

19
src/AutoComplete/AutoCompleteSkeleton.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
/** Set to `true` to hide the label text */
export let hideLabel = false;
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div
class:bx--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
{/if}
<div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
</div>

2
src/AutoComplete/index.js Normal file
View file

@ -0,0 +1,2 @@
export { default as AutoComplete } from "./AutoComplete.svelte";
export { default as AutoCompleteSkeleton } from "./AutoCompleteSkeleton.svelte";

1
src/index.js
View file

@ -1,5 +1,6 @@
export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion"; export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
export { AspectRatio } from "./AspectRatio"; export { AspectRatio } from "./AspectRatio";
export { AutoComplete, AutoCompleteSkeleton } from "./AutoComplete";
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb"; export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
export { Breakpoint } from "./Breakpoint"; export { Breakpoint } from "./Breakpoint";
export { default as breakpointObserver } from "./Breakpoint/breakpointObserver"; export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";

92
tests/AutoComplete.svelte Normal file
View file

@ -0,0 +1,92 @@
<script lang="ts">
import { AutoComplete, AutoCompleteSkeleton } from "../types";
</script>
<AutoComplete
direction="top"
titleText="Contact"
selectedId="0"
items="{[
{ id: 0, text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
on:select="{(e) => {
console.log(e.detail.selectedId);
}}"
let:item
let:index
>
{item.id}
{index}
</AutoComplete>
<AutoComplete
itemToString="{(item) => {
return item.text + ' (' + item.id + ')';
}}"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
light
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
type="inline"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
size="xl"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
size="sm"
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoComplete
disabled
titleText="Contact"
selectedId="0"
items="{[
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/>
<AutoCompleteSkeleton />

161
types/AutoComplete/AutoComplete.svelte.d.ts vendored Normal file
View file

@ -0,0 +1,161 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export type AutoCompleteItemId = any;
export type AutoCompleteItemText = string;
export interface AutoCompleteItem {
id: AutoCompleteItemId;
text: AutoCompleteItemText;
}
export interface AutoCompleteProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the dropdown items
* @default []
*/
items?: AutoCompleteItem[];
/**
* @default []
*/
filteredItems?: [];
/**
* Override the display of a dropdown item
* @default (item) => item.text || item.id
*/
itemToString?: (item: AutoCompleteItem) => string;
/**
* Specify the selected item id
* @default undefined
*/
selectedId?: AutoCompleteItemId;
/**
* Specify the type of dropdown
* @default "default"
*/
type?: "default" | "inline";
/**
* Specify the direction of the dropdown menu
* @default "bottom"
*/
direction?: "bottom" | "top";
/**
* Specify the size of the dropdown field
* @default undefined
*/
size?: "sm" | "lg" | "xl";
/**
* Set to `true` to open the dropdown
* @default false
*/
open?: boolean;
/**
* Set to `true` to use the inline variant
* @default false
*/
inline?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set to `true` to disable the dropdown
* @default false
*/
disabled?: boolean;
/**
* Specify the title text
* @default ""
*/
titleText?: string;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set an id for the list box component
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify a name attribute for the list box
* @default undefined
*/
name?: string;
/**
* Obtain a reference to the button HTML element
* @default null
*/
ref?: null | HTMLInputElement;
/**
* Specify the placeholder text
* @default null
*/
placeholder?: undefined;
}
export default class AutoComplete extends SvelteComponentTyped<
AutoCompleteProps,
{
select: CustomEvent<{
selectedId: AutoCompleteItemId;
selectedItem: AutoCompleteItem;
}>;
change: WindowEventMap["change"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
input: WindowEventMap["input"];
clear: CustomEvent<any>;
},
{ default: { item: AutoCompleteItem; index: number } }
> {}

22
types/AutoComplete/AutoCompleteSkeleton.svelte.d.ts vendored Normal file
View file

@ -0,0 +1,22 @@
/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";
export interface AutoCompleteSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to hide the label text
* @default false
*/
hideLabel?: boolean;
}
export default class AutoCompleteSkeleton extends SvelteComponentTyped<
AutoCompleteSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{}
> {}

2
types/index.d.ts vendored
View file

@ -2,6 +2,8 @@ export { default as Accordion } from "./Accordion/Accordion.svelte";
export { default as AccordionItem } from "./Accordion/AccordionItem.svelte"; export { default as AccordionItem } from "./Accordion/AccordionItem.svelte";
export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton.svelte"; export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton.svelte";
export { default as AspectRatio } from "./AspectRatio/AspectRatio.svelte"; export { default as AspectRatio } from "./AspectRatio/AspectRatio.svelte";
export { default as AutoComplete } from "./AutoComplete/AutoComplete.svelte";
export { default as AutoCompleteSkeleton } from "./AutoComplete/AutoCompleteSkeleton.svelte";
export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte"; export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte";
export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte"; export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";
export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte"; export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte";

2051
yarn.lock
View file

File diff suppressed because it is too large Load diff