@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -37
- package/dist/api.js.map +1 -1
- package/dist/custom-elements.json +1118 -977
- package/dist/index.d.ts +183 -162
- package/dist/packages/affix/affix.react.stories.d.ts +9 -0
- package/dist/packages/affix/affix.react.stories.js +10 -0
- package/dist/packages/affix/affix.stories.js +1 -1
- package/dist/packages/affix/index.js +1 -1
- package/dist/packages/affix/index.js.map +4 -4
- package/dist/packages/affix/react.d.ts +1 -1
- package/dist/packages/affix/react.js +10 -3
- package/dist/packages/alert/alert.react.stories.d.ts +13 -0
- package/dist/packages/alert/alert.react.stories.js +44 -0
- package/dist/packages/alert/alert.stories.js +1 -1
- package/dist/packages/alert/alert.test.js +3 -1
- package/dist/packages/alert/index.d.ts +1 -1
- package/dist/packages/alert/index.js +2 -2
- package/dist/packages/alert/index.js.map +4 -4
- package/dist/packages/alert/react.d.ts +1 -1
- package/dist/packages/alert/react.js +6 -3
- package/dist/packages/alert/styles.js +1 -1
- package/dist/packages/attention/attention.react.stories.d.ts +15 -0
- package/dist/packages/attention/attention.react.stories.js +92 -0
- package/dist/packages/attention/attention.stories.d.ts +1 -0
- package/dist/packages/attention/attention.stories.js +31 -39
- package/dist/packages/attention/attention.test.js +1 -1
- package/dist/packages/attention/index.d.ts +3 -2
- package/dist/packages/attention/index.js +238 -17
- package/dist/packages/attention/index.js.map +4 -4
- package/dist/packages/attention/react.d.ts +15 -1
- package/dist/packages/attention/react.js +13 -5
- package/dist/packages/attention/styles.js +1 -1
- package/dist/packages/badge/badge.react.stories.d.ts +18 -0
- package/dist/packages/badge/badge.react.stories.js +60 -0
- package/dist/packages/badge/badge.stories.js +1 -1
- package/dist/packages/badge/index.js +1 -1
- package/dist/packages/badge/index.js.map +4 -4
- package/dist/packages/badge/react.d.ts +1 -1
- package/dist/packages/badge/react.js +6 -3
- package/dist/packages/box/box.react.stories.d.ts +15 -0
- package/dist/packages/box/box.react.stories.js +45 -0
- package/dist/packages/box/box.stories.js +1 -1
- package/dist/packages/box/index.js +3 -3
- package/dist/packages/box/index.js.map +4 -4
- package/dist/packages/box/react.d.ts +1 -1
- package/dist/packages/box/react.js +6 -3
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +13 -0
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +40 -0
- package/dist/packages/breadcrumbs/breadcrumbs.stories.js +1 -1
- package/dist/packages/breadcrumbs/index.js +6 -6
- package/dist/packages/breadcrumbs/index.js.map +4 -4
- package/dist/packages/breadcrumbs/react.d.ts +1 -1
- package/dist/packages/breadcrumbs/react.js +6 -3
- package/dist/packages/button/button.react.stories.d.ts +22 -0
- package/dist/packages/button/button.react.stories.js +102 -0
- package/dist/packages/button/button.stories.js +1 -1
- package/dist/packages/button/index.js +2 -2
- package/dist/packages/button/index.js.map +4 -4
- package/dist/packages/button/react.d.ts +1 -1
- package/dist/packages/button/react.js +6 -3
- package/dist/packages/card/card.react.stories.d.ts +16 -0
- package/dist/packages/card/card.react.stories.js +63 -0
- package/dist/packages/card/card.stories.js +2 -2
- package/dist/packages/card/index.d.ts +1 -1
- package/dist/packages/card/index.js +2 -2
- package/dist/packages/card/index.js.map +4 -4
- package/dist/packages/card/react.d.ts +1 -1
- package/dist/packages/card/react.js +6 -3
- package/dist/packages/combobox/combobox.react.stories.d.ts +28 -0
- package/dist/packages/combobox/combobox.react.stories.js +90 -0
- package/dist/packages/combobox/combobox.stories.d.ts +5 -1
- package/dist/packages/combobox/combobox.stories.js +47 -25
- package/dist/packages/combobox/index.d.ts +1 -1
- package/dist/packages/combobox/index.js +4 -4
- package/dist/packages/combobox/index.js.map +4 -4
- package/dist/packages/combobox/react.d.ts +7 -0
- package/dist/packages/combobox/react.js +17 -0
- package/dist/packages/datepicker/DatePicker.test.d.ts +1 -0
- package/dist/packages/datepicker/DatePicker.test.js +3 -2
- package/dist/packages/datepicker/datepicker.d.ts +1 -1
- package/dist/packages/datepicker/datepicker.js +105 -105
- package/dist/packages/datepicker/datepicker.js.map +4 -4
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +18 -0
- package/dist/packages/datepicker/datepicker.react.stories.js +26 -0
- package/dist/packages/datepicker/datepicker.stories.js +1 -1
- package/dist/packages/datepicker/datepicker.test.js +1 -1
- package/dist/packages/datepicker/index.js +105 -105
- package/dist/packages/datepicker/index.js.map +4 -4
- package/dist/packages/datepicker/react.d.ts +5 -2
- package/dist/packages/datepicker/react.js +10 -3
- package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts +15 -0
- package/dist/packages/dead-toggle/dead-toggle.react.stories.js +34 -0
- package/dist/packages/dead-toggle/dead-toggle.stories.d.ts +5 -1
- package/dist/packages/dead-toggle/dead-toggle.stories.js +25 -3
- package/dist/packages/dead-toggle/index.js +1 -1
- package/dist/packages/dead-toggle/index.js.map +2 -2
- package/dist/packages/dead-toggle/react.d.ts +1 -1
- package/dist/packages/dead-toggle/react.js +6 -3
- package/dist/packages/expandable/expandable.react.stories.d.ts +18 -0
- package/dist/packages/expandable/expandable.react.stories.js +103 -0
- package/dist/packages/expandable/expandable.stories.js +1 -1
- package/dist/packages/expandable/index.js +2 -2
- package/dist/packages/expandable/index.js.map +4 -4
- package/dist/packages/expandable/react.d.ts +1 -1
- package/dist/packages/expandable/react.js +6 -3
- package/dist/packages/i18n.js +2 -1
- package/dist/packages/link/index.js +1 -1
- package/dist/packages/link/index.js.map +4 -4
- package/dist/packages/link/link.react.stories.d.ts +21 -0
- package/dist/packages/link/link.react.stories.js +96 -0
- package/dist/packages/link/link.stories.js +1 -12
- package/dist/packages/link/link.test.js +1 -1
- package/dist/packages/link/react.d.ts +1 -1
- package/dist/packages/link/react.js +6 -3
- package/dist/packages/modal/index.js +8 -8
- package/dist/packages/modal/index.js.map +4 -4
- package/dist/packages/modal/modal-footer.js +3 -3
- package/dist/packages/modal/modal-footer.js.map +3 -3
- package/dist/packages/modal/modal-header.js +4 -4
- package/dist/packages/modal/modal-header.js.map +4 -4
- package/dist/packages/modal/modal-main.js.map +1 -1
- package/dist/packages/modal/modal.react.stories.d.ts +14 -0
- package/dist/packages/modal/modal.react.stories.js +27 -0
- package/dist/packages/modal/modal.stories.d.ts +1 -1
- package/dist/packages/modal/modal.stories.js +1 -1
- package/dist/packages/modal/react.d.ts +11 -3
- package/dist/packages/modal/react.js +19 -6
- package/dist/packages/pageindicator/pageindicator.react.stories.d.ts +19 -0
- package/dist/packages/pageindicator/pageindicator.react.stories.js +20 -0
- package/dist/packages/pageindicator/pageindicator.stories.d.ts +1 -1
- package/dist/packages/pageindicator/pageindicator.stories.js +1 -1
- package/dist/packages/pageindicator/react.d.ts +1 -1
- package/dist/packages/pageindicator/react.js +6 -3
- package/dist/packages/pagination/index.js +9 -3
- package/dist/packages/pagination/index.js.map +3 -3
- package/dist/packages/pagination/pagination.react.stories.d.ts +21 -0
- package/dist/packages/pagination/pagination.react.stories.js +45 -0
- package/dist/packages/pagination/pagination.stories.js +6 -6
- package/dist/packages/pagination/pagination.test.js +1 -1
- package/dist/packages/pagination/react.d.ts +5 -2
- package/dist/packages/pagination/react.js +10 -3
- package/dist/packages/pill/index.js +1 -1
- package/dist/packages/pill/index.js.map +2 -2
- package/dist/packages/pill/pill.react.stories.d.ts +23 -0
- package/dist/packages/pill/pill.react.stories.js +22 -0
- package/dist/packages/pill/pill.stories.js +1 -1
- package/dist/packages/pill/pill.test.js +3 -1
- package/dist/packages/pill/react.d.ts +7 -0
- package/dist/packages/pill/react.js +17 -0
- package/dist/packages/pill/styles.js +1 -1
- package/dist/packages/rip-and-tear-checkbox/checkbox.js +5 -5
- package/dist/packages/rip-and-tear-checkbox/checkbox.js.map +3 -3
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.d.ts +8 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.js +11 -0
- package/dist/packages/rip-and-tear-checkbox/index.js +5 -5
- package/dist/packages/rip-and-tear-checkbox/index.js.map +3 -3
- package/dist/packages/rip-and-tear-checkbox/react.d.ts +5 -0
- package/dist/packages/rip-and-tear-checkbox/react.js +15 -0
- package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.d.ts +12 -0
- package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.js +10 -0
- package/dist/packages/rip-and-tear-radio/index.js +8 -8
- package/dist/packages/rip-and-tear-radio/index.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/radio-group.js +8 -8
- package/dist/packages/rip-and-tear-radio/radio-group.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/radio.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.stories.js +9 -9
- package/dist/packages/rip-and-tear-radio/radio.stories.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/react.d.ts +9 -0
- package/dist/packages/rip-and-tear-radio/react.js +22 -0
- package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.d.ts +9 -0
- package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.js +10 -0
- package/dist/packages/rip-and-tear-radio/slot.js +3 -3
- package/dist/packages/select/index.d.ts +4 -4
- package/dist/packages/select/index.js +12 -12
- package/dist/packages/select/index.js.map +3 -3
- package/dist/packages/select/react.d.ts +6 -2
- package/dist/packages/select/react.js +15 -3
- package/dist/packages/select/select.react.stories.d.ts +18 -0
- package/dist/packages/select/select.react.stories.js +28 -0
- package/dist/packages/select/select.stories.js +2 -2
- package/dist/packages/select/select.test.js +1 -1
- package/dist/packages/select/styles.js +1 -1
- package/dist/packages/slider/Slider.js +1 -1
- package/dist/packages/slider/SliderThumb.js +1 -1
- package/dist/packages/slider/index.js +6 -6
- package/dist/packages/slider/index.js.map +4 -4
- package/dist/packages/slider/react.d.ts +8 -0
- package/dist/packages/slider/react.js +20 -0
- package/dist/packages/slider/slider-thumb.js +3 -3
- package/dist/packages/slider/slider-thumb.js.map +4 -4
- package/dist/packages/slider/slider.js +2 -2
- package/dist/packages/slider/slider.js.map +4 -4
- package/dist/packages/slider/slider.react.stories.d.ts +18 -0
- package/dist/packages/slider/slider.react.stories.js +119 -0
- package/dist/packages/slider/slider.stories.js +2 -2
- package/dist/packages/slider/slider.test.js +1 -1
- package/dist/packages/slider/styles.js +1 -1
- package/dist/packages/steps/index.js +2 -2
- package/dist/packages/steps/index.js.map +4 -4
- package/dist/packages/steps/react.d.ts +1 -1
- package/dist/packages/steps/react.js +7 -4
- package/dist/packages/steps/steps.react.stories.d.ts +15 -0
- package/dist/packages/steps/steps.react.stories.js +112 -0
- package/dist/packages/switch/index.js +1 -1
- package/dist/packages/switch/index.js.map +4 -4
- package/dist/packages/switch/react.d.ts +5 -2
- package/dist/packages/switch/react.js +10 -3
- package/dist/packages/switch/switch.react.stories.d.ts +15 -0
- package/dist/packages/switch/switch.react.stories.js +29 -0
- package/dist/packages/tabs/index.d.ts +1 -1
- package/dist/packages/tabs/index.js +12 -12
- package/dist/packages/tabs/index.js.map +4 -4
- package/dist/packages/tabs/react.d.ts +11 -3
- package/dist/packages/tabs/react.js +18 -5
- package/dist/packages/tabs/tab-panel.js.map +2 -2
- package/dist/packages/tabs/tab.js +1 -1
- package/dist/packages/tabs/tab.js.map +4 -4
- package/dist/packages/tabs/tabs.d.ts +2 -0
- package/dist/packages/tabs/tabs.js +4 -4
- package/dist/packages/tabs/tabs.js.map +4 -4
- package/dist/packages/tabs/tabs.react.stories.d.ts +15 -0
- package/dist/packages/tabs/tabs.react.stories.js +51 -0
- package/dist/packages/tabs/tabs.stories.js +12 -12
- package/dist/packages/tabs/tabs.stories.js.map +4 -4
- package/dist/packages/textfield/index.js +2 -2
- package/dist/packages/textfield/index.js.map +4 -4
- package/dist/packages/textfield/react.d.ts +11 -2
- package/dist/packages/textfield/react.js +16 -3
- package/dist/packages/textfield/styles.js +1 -1
- package/dist/packages/textfield/textfield.react.stories.d.ts +37 -0
- package/dist/packages/textfield/textfield.react.stories.js +88 -0
- package/dist/packages/textfield/textfield.stories.js +1 -1
- package/dist/packages/textfield/textfield.test.js +1 -1
- package/dist/packages/toast/api.d.ts +1 -1
- package/dist/packages/toast/index.d.ts +1 -1
- package/dist/packages/toast/index.js +14 -14
- package/dist/packages/toast/index.js.map +4 -4
- package/dist/packages/toast/toast-container.d.ts +1 -1
- package/dist/packages/toast/toast-container.js +2454 -149
- package/dist/packages/toast/toast-container.js.map +7 -0
- package/dist/packages/toast/toast.js +2459 -193
- package/dist/packages/toast/toast.js.map +7 -0
- package/dist/packages/toast/toast.stories.js +1 -1
- package/dist/packages/utils/expand-transition.js +1 -1
- package/dist/vscode.html-custom-data.json +83 -78
- package/dist/web-types.json +135 -127
- package/package.json +22 -21
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { WarpCard } from '
|
|
1
|
+
import { WarpCard } from '.';
|
|
2
2
|
export declare const Card: import("@lit/react").ReactWebComponent<WarpCard, {}>;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
2
|
import { createComponent } from '@lit/react';
|
|
3
|
-
import
|
|
3
|
+
import React from 'react';
|
|
4
|
+
// decouple from CDN by providing a dummy class
|
|
5
|
+
class Component extends LitElement {
|
|
6
|
+
}
|
|
4
7
|
export const Card = createComponent({
|
|
5
8
|
tagName: 'w-card',
|
|
6
|
-
elementClass:
|
|
9
|
+
elementClass: Component,
|
|
7
10
|
react: React,
|
|
8
11
|
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StoryObj } from '@storybook/react';
|
|
3
|
+
import { Combobox } from './react';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: import("@lit/react").ReactWebComponent<import(".").WarpCombobox, {
|
|
7
|
+
onSelect: string;
|
|
8
|
+
onselect: string;
|
|
9
|
+
onChange: string;
|
|
10
|
+
onchange: string;
|
|
11
|
+
}>;
|
|
12
|
+
render(args: Omit<React.HTMLAttributes<import(".").WarpCombobox>, "label" | "onchange" | "onselect" | "onChange" | "onSelect" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "name" | "value" | "invalid" | "options" | "placeholder" | "openOnFocus" | "selectOnBlur" | "matchTextSegments" | "disableStaticFiltering" | "helpText" | "required" | "optional" | "containerClassName" | "listClassName"> & {
|
|
13
|
+
onSelect?: (e: Event) => void;
|
|
14
|
+
onselect?: (e: Event) => void;
|
|
15
|
+
onChange?: (e: Event) => void;
|
|
16
|
+
onchange?: (e: Event) => void;
|
|
17
|
+
} & Partial<Omit<import(".").WarpCombobox, keyof HTMLElement>> & React.RefAttributes<import(".").WarpCombobox>): React.JSX.Element;
|
|
18
|
+
};
|
|
19
|
+
export default _default;
|
|
20
|
+
export type Story = StoryObj<typeof Combobox>;
|
|
21
|
+
export declare const Default: Story;
|
|
22
|
+
export declare const WithValue: Story;
|
|
23
|
+
export declare const OpenOnFocus: Story;
|
|
24
|
+
export declare const WithTextMatching: Story;
|
|
25
|
+
export declare const Invalid: Story;
|
|
26
|
+
export declare const Disabled: Story;
|
|
27
|
+
export declare const Optional: Story;
|
|
28
|
+
export declare const DisableStaticFiltering: Story;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Combobox } from './react';
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Forms/Combobox',
|
|
5
|
+
component: Combobox,
|
|
6
|
+
render(args) {
|
|
7
|
+
return React.createElement(Combobox, { ...args, options: sampleOptions });
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
const sampleOptions = [
|
|
11
|
+
{ value: 'Apple', label: 'Apple' },
|
|
12
|
+
{ value: 'Banana', label: 'Banana' },
|
|
13
|
+
{ value: 'Orange', label: 'Orange' },
|
|
14
|
+
{ value: 'Grape', label: 'Grape' },
|
|
15
|
+
{ value: 'Strawberry', label: 'Strawberry' },
|
|
16
|
+
{ value: 'Pineapple', label: 'Pineapple' },
|
|
17
|
+
{ value: 'Mango', label: 'Mango' },
|
|
18
|
+
];
|
|
19
|
+
export const Default = {
|
|
20
|
+
args: {
|
|
21
|
+
options: sampleOptions,
|
|
22
|
+
label: 'Select a fruit',
|
|
23
|
+
placeholder: 'Type to search...',
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
export const WithValue = {
|
|
27
|
+
args: {
|
|
28
|
+
options: sampleOptions,
|
|
29
|
+
label: 'Select a fruit',
|
|
30
|
+
placeholder: 'Type to search...',
|
|
31
|
+
value: 'Apple',
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
export const OpenOnFocus = {
|
|
35
|
+
args: {
|
|
36
|
+
options: sampleOptions,
|
|
37
|
+
label: 'Select a fruit',
|
|
38
|
+
placeholder: 'Type to search...',
|
|
39
|
+
openOnFocus: true,
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
export const WithTextMatching = {
|
|
43
|
+
args: {
|
|
44
|
+
options: sampleOptions,
|
|
45
|
+
label: 'Select a fruit',
|
|
46
|
+
placeholder: 'Type to search...',
|
|
47
|
+
matchTextSegments: true,
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
export const Invalid = {
|
|
51
|
+
args: {
|
|
52
|
+
options: sampleOptions,
|
|
53
|
+
label: 'Select a fruit',
|
|
54
|
+
placeholder: 'Type to search...',
|
|
55
|
+
value: 'Invalid fruit',
|
|
56
|
+
helpText: 'Please select a valid fruit from the list',
|
|
57
|
+
invalid: true,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
export const Disabled = {
|
|
61
|
+
args: {
|
|
62
|
+
options: sampleOptions,
|
|
63
|
+
label: 'Select a fruit',
|
|
64
|
+
placeholder: 'Type to search...',
|
|
65
|
+
value: 'Apple',
|
|
66
|
+
disabled: true,
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
export const Optional = {
|
|
70
|
+
args: {
|
|
71
|
+
options: sampleOptions,
|
|
72
|
+
label: 'Select a fruit',
|
|
73
|
+
placeholder: 'Type to search...',
|
|
74
|
+
optional: true,
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
export const DisableStaticFiltering = {
|
|
78
|
+
render: () => {
|
|
79
|
+
const [options, setOptions] = React.useState(sampleOptions);
|
|
80
|
+
const [val, setVal] = React.useState('');
|
|
81
|
+
return (React.createElement(Combobox, { id: "combobox-dynamic", label: "Select a fruit (dynamic)", placeholder: "Type to search...", disableStaticFiltering: true, value: val, options: options, onChange: (e) => {
|
|
82
|
+
setVal(e.detail.value);
|
|
83
|
+
// Simulate dynamic filtering
|
|
84
|
+
const filteredOptions = sampleOptions.filter((option) => option.value.toLowerCase().includes(e.detail.value.toLowerCase()));
|
|
85
|
+
setOptions(filteredOptions);
|
|
86
|
+
}, onSelect: (e) => {
|
|
87
|
+
setVal(e.detail.value);
|
|
88
|
+
} }));
|
|
89
|
+
},
|
|
90
|
+
};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
2
|
import './index.js';
|
|
3
|
+
import '../textfield/index.js';
|
|
3
4
|
import type { WarpCombobox } from './index.js';
|
|
4
|
-
declare const
|
|
5
|
+
declare const args: Partial<WarpCombobox> & {
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
};
|
|
8
|
+
declare const meta: Meta<typeof args>;
|
|
5
9
|
export default meta;
|
|
6
10
|
type Story = StoryObj<WarpCombobox>;
|
|
7
11
|
export declare const Default: Story;
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread } from '@open-wc/lit-helpers';
|
|
2
2
|
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
import { prespread } from '../../.storybook/utilities.js';
|
|
3
5
|
import './index.js';
|
|
6
|
+
import '../textfield/index.js';
|
|
4
7
|
const { events, args, argTypes } = getStorybookHelpers('w-combobox');
|
|
5
8
|
const meta = {
|
|
6
9
|
title: 'Forms/Combobox',
|
|
7
10
|
component: 'w-combobox',
|
|
11
|
+
render(args) {
|
|
12
|
+
return html ` <w-combobox ${spread(prespread(args))} .options="${sampleOptions}"></w-combobox> `;
|
|
13
|
+
},
|
|
8
14
|
parameters: {
|
|
9
15
|
docs: {
|
|
10
16
|
description: {
|
|
@@ -29,43 +35,59 @@ const sampleOptions = [
|
|
|
29
35
|
{ value: 'Mango', label: 'Mango' },
|
|
30
36
|
];
|
|
31
37
|
export const Default = {
|
|
38
|
+
args: {},
|
|
32
39
|
render: () => html ` <w-combobox label="Select a fruit" placeholder="Type to search..." .options="${sampleOptions}"></w-combobox> `,
|
|
33
40
|
};
|
|
34
41
|
export const WithValue = {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
args: {
|
|
43
|
+
options: sampleOptions,
|
|
44
|
+
label: 'Select a fruit',
|
|
45
|
+
placeholder: 'Type to search...',
|
|
46
|
+
value: 'Apple',
|
|
47
|
+
},
|
|
38
48
|
};
|
|
39
49
|
export const OpenOnFocus = {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
50
|
+
args: {
|
|
51
|
+
options: sampleOptions,
|
|
52
|
+
label: 'Select a fruit',
|
|
53
|
+
placeholder: 'Type to search...',
|
|
54
|
+
openOnFocus: true,
|
|
55
|
+
},
|
|
43
56
|
};
|
|
44
57
|
export const WithTextMatching = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
58
|
+
args: {
|
|
59
|
+
options: sampleOptions,
|
|
60
|
+
label: 'Select a fruit',
|
|
61
|
+
placeholder: 'Type to search...',
|
|
62
|
+
matchTextSegments: true,
|
|
63
|
+
},
|
|
48
64
|
};
|
|
49
65
|
export const Invalid = {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
`,
|
|
66
|
+
args: {
|
|
67
|
+
options: sampleOptions,
|
|
68
|
+
label: 'Select a fruit',
|
|
69
|
+
placeholder: 'Type to search...',
|
|
70
|
+
value: 'Invalid fruit',
|
|
71
|
+
helpText: 'Please select a valid fruit from the list',
|
|
72
|
+
invalid: true,
|
|
73
|
+
},
|
|
59
74
|
};
|
|
60
75
|
export const Disabled = {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
76
|
+
args: {
|
|
77
|
+
options: sampleOptions,
|
|
78
|
+
label: 'Select a fruit',
|
|
79
|
+
placeholder: 'Type to search...',
|
|
80
|
+
value: 'Apple',
|
|
81
|
+
disabled: true,
|
|
82
|
+
},
|
|
64
83
|
};
|
|
65
84
|
export const Optional = {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
85
|
+
args: {
|
|
86
|
+
options: sampleOptions,
|
|
87
|
+
label: 'Select a fruit',
|
|
88
|
+
placeholder: 'Type to search...',
|
|
89
|
+
optional: true,
|
|
90
|
+
},
|
|
69
91
|
};
|
|
70
92
|
export const DisableStaticFiltering = {
|
|
71
93
|
render: () => html `
|
|
@@ -90,6 +90,6 @@ export declare class WarpCombobox extends LitElement {
|
|
|
90
90
|
private _handleContainerBlur;
|
|
91
91
|
/** Render highlighted text match */
|
|
92
92
|
private _renderTextMatch;
|
|
93
|
-
protected
|
|
93
|
+
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
94
94
|
render(): import("lit").TemplateResult<1>;
|
|
95
95
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var ue=Object.create;var $=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var U=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports);var ge=(t,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of pe(r))!he.call(t,a)&&a!==e&&$(t,a,{get:()=>r[a],enumerable:!(o=P(r,a))||o.enumerable});return t};var ve=(t,r,e)=>(e=t!=null?ue(be(t)):{},ge(r||!t||!t.__esModule?$(e,"default",{value:t,enumerable:!0}):e,t));var d=(t,r,e,o)=>{for(var a=o>1?void 0:o?P(r,e):r,i=t.length-1,s;i>=0;i--)(s=t[i])&&(a=(o?s(r,e,a):s(a))||a);return o&&a&&$(r,e,a),a};var B=U(w=>{"use strict";Object.defineProperty(w,"__esModule",{value:!0});w.errorMessages=w.ErrorType=void 0;var k;(function(t){t.MalformedUnicode="MALFORMED_UNICODE",t.MalformedHexadecimal="MALFORMED_HEXADECIMAL",t.CodePointLimit="CODE_POINT_LIMIT",t.OctalDeprecation="OCTAL_DEPRECATION",t.EndOfString="END_OF_STRING"})(k=w.ErrorType||(w.ErrorType={}));w.errorMessages=new Map([[k.MalformedUnicode,"malformed Unicode character escape sequence"],[k.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[k.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[k.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[k.EndOfString,"malformed escape sequence at end of string"]])});var V=U(h=>{"use strict";Object.defineProperty(h,"__esModule",{value:!0});h.unraw=h.errorMessages=h.ErrorType=void 0;var p=B();Object.defineProperty(h,"ErrorType",{enumerable:!0,get:function(){return p.ErrorType}});Object.defineProperty(h,"errorMessages",{enumerable:!0,get:function(){return p.errorMessages}});function me(t){return!t.match(/[^a-f0-9]/i)?parseInt(t,16):NaN}function M(t,r,e){let o=me(t);if(Number.isNaN(o)||e!==void 0&&e!==t.length)throw new SyntaxError(p.errorMessages.get(r));return o}function fe(t){let r=M(t,p.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(r)}function q(t,r){let e=M(t,p.ErrorType.MalformedUnicode,4);if(r!==void 0){let o=M(r,p.ErrorType.MalformedUnicode,4);return String.fromCharCode(e,o)}return String.fromCharCode(e)}function we(t){return t.charAt(0)==="{"&&t.charAt(t.length-1)==="}"}function xe(t){if(!we(t))throw new SyntaxError(p.errorMessages.get(p.ErrorType.MalformedUnicode));let r=t.slice(1,-1),e=M(r,p.ErrorType.MalformedUnicode);try{return String.fromCodePoint(e)}catch(o){throw o instanceof RangeError?new SyntaxError(p.errorMessages.get(p.ErrorType.CodePointLimit)):o}}function ke(t,r=!1){if(r)throw new SyntaxError(p.errorMessages.get(p.ErrorType.OctalDeprecation));let e=parseInt(t,8);return String.fromCharCode(e)}var ye=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function _e(t){return ye.get(t)||t}var Oe=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function X(t,r=!1){return t.replace(Oe,function(e,o,a,i,s,n,l,b,m){if(o!==void 0)return"\\";if(a!==void 0)return fe(a);if(i!==void 0)return xe(i);if(s!==void 0)return q(s,n);if(l!==void 0)return q(l);if(b==="0")return"\0";if(b!==void 0)return ke(b,!r);if(m!==void 0)return _e(m);throw new SyntaxError(p.errorMessages.get(p.ErrorType.EndOfString))})}h.unraw=X;h.default=X});
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function _e(t){return ye.get(t)||t}var Oe=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function X(t,r=!1){return t.replace(Oe,function(e,o,a,i,s,n,l,b,m){if(o!==void 0)return"\\";if(a!==void 0)return fe(a);if(i!==void 0)return xe(i);if(s!==void 0)return q(s,n);if(l!==void 0)return q(l);if(b==="0")return"\0";if(b!==void 0)return ke(b,!r);if(m!==void 0)return _e(m);throw new SyntaxError(p.errorMessages.get(p.ErrorType.EndOfString))})}h.unraw=X;h.default=X});var _=function(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];return t.reduce(function(e,o){return e.concat(typeof o=="string"?o:Array.isArray(o)?_.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var K=ve(V(),1);var g=t=>typeof t=="string",ze=t=>typeof t=="function",H=new Map,J="en";function R(t){return[...Array.isArray(t)?t:[t],J]}function D(t,r,e){let o=R(t);e||(e="default");let a;if(typeof e=="string")switch(a={day:"numeric",month:"short",year:"numeric"},e){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=e;return E(()=>C("date",o,e),()=>new Intl.DateTimeFormat(o,a)).format(g(r)?new Date(r):r)}function Me(t,r,e){let o;if(e||(e="default"),typeof e=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},e){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=e;return D(t,r,o)}function L(t,r,e){let o=R(t);return E(()=>C("number",o,e),()=>new Intl.NumberFormat(o,e)).format(r)}function Z(t,r,e,{offset:o=0,...a}){var n,l;let i=R(t),s=r?E(()=>C("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):E(()=>C("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(n=a[e])!=null?n:a[s.select(e-o)])!=null?l:a.other}function E(t,r){let e=t(),o=H.get(e);return o||(o=r(),H.set(e,o)),o}function C(t,r,e){let o=r.join("-");return`${t}-${o}-${JSON.stringify(e)}`}var G=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,Q="%__lingui_octothorpe__%",Ee=(t,r,e={})=>{let o=r||t,a=s=>typeof s=="object"?s:e[s],i=(s,n)=>{let l=Object.keys(e).length?a("number"):void 0,b=L(o,s,l);return n.replace(new RegExp(Q,"g"),b)};return{plural:(s,n)=>{let{offset:l=0}=n,b=Z(o,!1,s,n);return i(s-l,b)},selectordinal:(s,n)=>{let{offset:l=0}=n,b=Z(o,!0,s,n);return i(s-l,b)},select:Ce,number:(s,n)=>L(o,s,a(n)||{style:n}),date:(s,n)=>D(o,s,a(n)||n),time:(s,n)=>Me(o,s,a(n)||n)}},Ce=(t,r)=>{var e;return(e=r[t])!=null?e:r.other};function Se(t,r,e){return(o={},a)=>{let i=Ee(r,e,a),s=(l,b=!1)=>Array.isArray(l)?l.reduce((m,O)=>{if(O==="#"&&b)return m+Q;if(g(O))return m+O;let[j,f,Y]=O,I={};f==="plural"||f==="selectordinal"||f==="select"?Object.entries(Y).forEach(([A,de])=>{I[A]=s(de,f==="plural"||f==="selectordinal")}):I=Y;let z;if(f){let A=i[f];z=A(o[j],I)}else z=o[j];return z==null?m:m+z},""):l,n=s(t);return g(n)&&G.test(n)?(0,K.unraw)(n):g(n)?n:n?String(n):""}}var Ie=Object.defineProperty,Ae=(t,r,e)=>r in t?Ie(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,$e=(t,r,e)=>(Ae(t,typeof r!="symbol"?r+"":r,e),e),T=class{constructor(){$e(this,"_events",{})}on(r,e){var a;var o;return(a=(o=this._events)[r])!=null||(o[r]=[]),this._events[r].push(e),()=>this.removeListener(r,e)}removeListener(r,e){let o=this._getListeners(r);if(!o)return;let a=o.indexOf(e);~a&&o.splice(a,1)}emit(r,...e){let o=this._getListeners(r);o&&o.map(a=>a.apply(this,e))}_getListeners(r){let e=this._events[r];return Array.isArray(e)?e:!1}},Le=Object.defineProperty,Te=(t,r,e)=>r in t?Le(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,x=(t,r,e)=>(Te(t,typeof r!="symbol"?r+"":r,e),e),N=class extends T{constructor(r){var e;super(),x(this,"_locale",""),x(this,"_locales"),x(this,"_localeData",{}),x(this,"_messages",{}),x(this,"_missing"),x(this,"_messageCompiler"),x(this,"t",this._.bind(this)),r.missing!=null&&(this._missing=r.missing),r.messages!=null&&this.load(r.messages),r.localeData!=null&&this.loadLocaleData(r.localeData),(typeof r.locale=="string"||r.locales)&&this.activate((e=r.locale)!=null?e:J,r.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var r;return(r=this._messages[this._locale])!=null?r:{}}get localeData(){var r;return(r=this._localeData[this._locale])!=null?r:{}}_loadLocaleData(r,e){let o=this._localeData[r];o?Object.assign(o,e):this._localeData[r]=e}setMessagesCompiler(r){return this._messageCompiler=r,this}loadLocaleData(r,e){typeof r=="string"?this._loadLocaleData(r,e):Object.keys(r).forEach(o=>this._loadLocaleData(o,r[o])),this.emit("change")}_load(r,e){let o=this._messages[r];o?Object.assign(o,e):this._messages[r]=e}load(r,e){typeof r=="string"&&typeof e=="object"?this._load(r,e):Object.entries(r).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:r,locales:e,messages:o}){this._locale=r,this._locales=e||void 0,this._messages[this._locale]=o,this.emit("change")}activate(r,e){this._locale=r,this._locales=e,this.emit("change")}_(r,e,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o==null?void 0:o.message;r||(r=""),g(r)||(e=r.values||e,a=r.message,r=r.id);let i=this.messages[r],s=i===void 0,n=this._missing;if(n&&s)return ze(n)?n(this._locale,r):n;s&&this.emit("missing",{id:r,locale:this._locale});let l=i||a||r;return g(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
|
|
3
3
|
|
|
4
4
|
> ${l}
|
|
5
5
|
|
|
@@ -7,7 +7,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
|
|
|
7
7
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
8
8
|
|
|
9
9
|
Please compile your catalog first.
|
|
10
|
-
`)),g(l)&&G.test(l)?JSON.parse(`"${l}"`):g(l)?l:Se(l,this._locale,this._locales)(e,o==null?void 0:o.formats)}date(r,e){return D(this._locales||this._locale,r,e)}number(r,e){return L(this._locales||this._locale,r,e)}};function Ne(t={}){return new N(t)}var y=Ne();import{property as u,state as S}from"lit/decorators.js";import{repeat as Pe}from"lit/directives/repeat.js";var Re=["en","nb","fi","da","sv"],ee="en",W=t=>Re.find(r=>t===r||t.toLowerCase().includes(r))||ee;function De(){if(typeof window=="undefined"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return W(t)}try{let t=document.documentElement.lang;return W(t)}catch(t){return console.warn("could not detect locale, falling back to source locale",t),ee}}var Fe=(t,r,e,o,a,i)=>t==="nb"?e:t==="fi"?o:t==="da"?a:t==="sv"?i:r,re=(t,r,e,o,a)=>{let i=De(),s=Fe(i,t,r,e,o,a);y.load(i,s),y.activate(i)};import{css as oe}from"lit";var te=oe`
|
|
10
|
+
`)),g(l)&&G.test(l)?JSON.parse(`"${l}"`):g(l)?l:Se(l,this._locale,this._locales)(e,o==null?void 0:o.formats)}date(r,e){return D(this._locales||this._locale,r,e)}number(r,e){return L(this._locales||this._locale,r,e)}};function Ne(t={}){return new N(t)}var y=Ne();import{html as F,LitElement as Ye}from"lit";import{property as u,state as S}from"lit/decorators.js";import{repeat as Pe}from"lit/directives/repeat.js";var Re=["en","nb","fi","da","sv"],ee="en",W=t=>Re.find(r=>t===r||t.toLowerCase().includes(r))||ee;function De(){if(typeof window=="undefined"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return W(t)}try{let t=document.documentElement.lang;return W(t)}catch(t){return console.warn("could not detect locale, falling back to source locale",t),ee}}var Fe=(t,r,e,o,a,i)=>t==="nb"?e:t==="fi"?o:t==="da"?a:t==="sv"?i:r,re=(t,r,e,o,a)=>{let i=De(),s=Fe(i,t,r,e,o,a);y.load(i,s),y.activate(i)};import{css as oe}from"lit";var te=oe`
|
|
11
11
|
*,
|
|
12
12
|
:before,
|
|
13
13
|
:after {
|
|
@@ -2446,8 +2446,8 @@ Please compile your catalog first.
|
|
|
2446
2446
|
display: none
|
|
2447
2447
|
}
|
|
2448
2448
|
}
|
|
2449
|
-
`;var ae=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var ie=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," result"],"other":["#"," results"]}]],"combobox.aria.noResults":["No results"]}');var ne=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," tulos"],"other":["#"," tulosta"]}]],"combobox.aria.noResults":["Ei tuloksia"]}');var se=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var le=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultat"]}]],"combobox.aria.noResults":["Inga resultat"]}');import{css as je}from"lit";var ce=je`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none}`;var v={wrapper:"relative",base:"absolute left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m",listbox:"m-0 p-0 select-none list-none",option:"block cursor-pointer p-8",optionUnselected:"hover:s-bg-hover",optionSelected:"s-bg-selected hover:s-bg-selected-hover",textMatch:"font-bold",a11y:"sr-only"},c=class extends Ye{constructor(){super();this.options=[];this.value="";this.openOnFocus=!1;this.selectOnBlur=!0;this.matchTextSegments=!1;this.disableStaticFiltering=!1;this.invalid=!1;this.disabled=!1;this.required=!1;this.optional=!1;this._isOpen=!1;this._navigationOption=null;this._currentOptions=[];this._optionIdCounter=0;re(ie,se,ne,ae,le)}get _listboxId(){return`${this._id}-listbox`}get _id(){return"combobox"}get _helpId(){return this.helpText?`${this._id}__hint`:void 0}get _navigationValueOrInputValue(){var e;return((e=this._navigationOption)==null?void 0:e.value)||this.value}_createOptionsWithIdAndMatch(e,o){return e.map((a,i)=>({...a,id:`${this._id}-option-${this._optionIdCounter+i}`,key:a.key||a.value,currentInputValue:o}))}_getAriaText(e,o){if(!e||!o)return"";let a=e.filter(n=>n.value.toLowerCase().includes(o.toLowerCase())),i=y._({id:"combobox.aria.pluralResults",message:"{numResults, plural, one {# result} other {# results}}",comment:"Aria text for combobox when one or more results",values:{numResults:a.length}}),s=y._({id:"combobox.aria.noResults",message:"No results",comment:"Aria text for combobox when no results"});return a.length?i:s}_getOptionClasses(e){var o;return _(v.option,((o=this._navigationOption)==null?void 0:o.id)===(e==null?void 0:e.id)?v.optionSelected:v.optionUnselected)}_handleKeyDown(e){let o=["ArrowDown","ArrowUp","PageUp","PageDown","Home","End"].includes(e.key),a=["ArrowDown","ArrowLeft","ArrowUp","ArrowRight"];if(o&&!this._isOpen){this._isOpen=!0;return}
|
|
2450
|
-
>${e.substring(i)}`}return e}
|
|
2449
|
+
`;var ae=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var ie=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," result"],"other":["#"," results"]}]],"combobox.aria.noResults":["No results"]}');var ne=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," tulos"],"other":["#"," tulosta"]}]],"combobox.aria.noResults":["Ei tuloksia"]}');var se=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var le=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultat"]}]],"combobox.aria.noResults":["Inga resultat"]}');import{css as je}from"lit";var ce=je`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.select-none{-webkit-user-select:none;user-select:none}`;var v={wrapper:"relative",base:"absolute left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m",listbox:"m-0 p-0 select-none list-none",option:"block cursor-pointer p-8",optionUnselected:"hover:s-bg-hover",optionSelected:"s-bg-selected hover:s-bg-selected-hover",textMatch:"font-bold",a11y:"sr-only"},c=class extends Ye{constructor(){super();this.options=[];this.value="";this.openOnFocus=!1;this.selectOnBlur=!0;this.matchTextSegments=!1;this.disableStaticFiltering=!1;this.invalid=!1;this.disabled=!1;this.required=!1;this.optional=!1;this._isOpen=!1;this._navigationOption=null;this._currentOptions=[];this._optionIdCounter=0;re(ie,se,ne,ae,le)}get _listboxId(){return`${this._id}-listbox`}get _id(){return"combobox"}get _helpId(){return this.helpText?`${this._id}__hint`:void 0}get _navigationValueOrInputValue(){var e;return((e=this._navigationOption)==null?void 0:e.value)||this.value}_createOptionsWithIdAndMatch(e,o){return e.map((a,i)=>({...a,id:`${this._id}-option-${this._optionIdCounter+i}`,key:a.key||a.value,currentInputValue:o}))}_getAriaText(e,o){if(!e||!o)return"";let a=e.filter(n=>n.value.toLowerCase().includes(o.toLowerCase())),i=y._({id:"combobox.aria.pluralResults",message:"{numResults, plural, one {# result} other {# results}}",comment:"Aria text for combobox when one or more results",values:{numResults:a.length}}),s=y._({id:"combobox.aria.noResults",message:"No results",comment:"Aria text for combobox when no results"});return a.length?i:s}_getOptionClasses(e){var o;return _(v.option,((o=this._navigationOption)==null?void 0:o.id)===(e==null?void 0:e.id)?v.optionSelected:v.optionUnselected)}_handleKeyDown(e){let o=["ArrowDown","ArrowUp","PageUp","PageDown","Home","End"].includes(e.key),a=["ArrowDown","ArrowLeft","ArrowUp","ArrowRight"];if(o&&!this._isOpen){this._isOpen=!0;return}if(o&&this._isOpen){this._findAndSetActiveOption(e);return}if(!(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey))switch(e.key){case"Enter":this._navigationOption&&(e.preventDefault(),this._handleSelect(this._navigationOption),requestAnimationFrame(()=>{var n,l;let i=(n=this.shadowRoot)==null?void 0:n.querySelector("w-textfield"),s=(l=i==null?void 0:i.shadowRoot)==null?void 0:l.querySelector("input");s&&(s.value=this.value)})),this._isOpen=!1;break;case"Tab":case"Delete":this._isOpen=!1;break;case"Escape":this._isOpen?this._isOpen=!1:this._handleChange(""),this._navigationOption=null;break;case"Backspace":this._handleChange(this._navigationValueOrInputValue),this._navigationOption=null,this._isOpen=!0;break;default:if(a.includes(e.key))break;this._isOpen=!0,this._navigationOption?(this._handleChange(this._navigationOption.value),this._navigationOption=null):this._handleChange(this.value);break}}_findAndSetActiveOption(e){e.preventDefault();let o=this._currentOptions.findIndex(s=>{var n;return s.id===((n=this._navigationOption)==null?void 0:n.id)}),a=o+1,i=o-1;switch(e.key){case"ArrowDown":this._navigationOption=a>this._currentOptions.length-1?null:this._currentOptions[a];break;case"ArrowUp":this._navigationOption=i===-2?this._currentOptions[this._currentOptions.length-1]:i<0?null:this._currentOptions[i];break;case"PageUp":this._navigationOption=o-10<0?this._currentOptions[0]:this._currentOptions[o-10];break;case"PageDown":this._navigationOption=o+10>this._currentOptions.length-1?this._currentOptions[this._currentOptions.length-1]:this._currentOptions[o+10];break;case"Home":this._navigationOption=this._currentOptions[0];break;case"End":this._navigationOption=this._currentOptions[this._currentOptions.length-1];break}}_handleSelect(e){this.value=e.value;let o=new CustomEvent("select",{detail:{value:e.value},bubbles:!0,composed:!0});this.dispatchEvent(o),this._isOpen=!1,this._navigationOption=null,this.disableStaticFiltering&&(this._currentOptions=[])}_handleChange(e){if(e===void 0)return;this.value=e;let o=new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0});this.dispatchEvent(o)}_handleFocus(){if(!this.openOnFocus)return;let e=new CustomEvent("focus",{bubbles:!0,composed:!0});this.dispatchEvent(e),this._isOpen=!0}_handleBlur(e){var i,s;let o=e.relatedTarget;if(o&&((i=this.shadowRoot)!=null&&i.contains(o)))return;if(this._isOpen=!1,this.selectOnBlur&&(this._navigationOption||!this._navigationOption&&this._currentOptions.findIndex(n=>n.value===this.value)!==-1)){let n=((s=this._navigationOption)==null?void 0:s.value)||this.value;this.value=n;let l=new CustomEvent("select",{detail:{value:n},bubbles:!0,composed:!0});this.dispatchEvent(l)}this._navigationOption=null;let a=new CustomEvent("blur",{detail:{value:this._navigationValueOrInputValue},bubbles:!0,composed:!0});this.dispatchEvent(a)}_handleOptionClick(e,o){this._handleSelect(o),requestAnimationFrame(()=>{var s,n;let a=(s=this.shadowRoot)==null?void 0:s.querySelector("w-textfield"),i=(n=a==null?void 0:a.shadowRoot)==null?void 0:n.querySelector("input");i&&(i.value=o.value)})}_handleContainerBlur(e){(!e.currentTarget||!e.currentTarget.contains(e.relatedTarget))&&(this._isOpen=!1)}_renderTextMatch(e,o){if(!this.matchTextSegments)return e;let a=e.toLowerCase().indexOf(o.currentInputValue.toLowerCase());if(a!==-1){let i=a+o.currentInputValue.length;return F`${e.substring(0,a)}<span class="${v.textMatch}">${e.substring(a,i)}</span
|
|
2450
|
+
>${e.substring(i)}`}return e}willUpdate(e){(e.has("options")||e.has("value")||e.has("disableStaticFiltering"))&&(this._optionIdCounter+=this.options.length,this._currentOptions=this._createOptionsWithIdAndMatch(this.options,this.value).filter(o=>this.disableStaticFiltering?!0:o.value.toLowerCase().includes(this.value.toLowerCase()))),this.disableStaticFiltering&&this._currentOptions.length&&this._currentOptions.length===1&&!this._currentOptions.some(o=>o.value===this.value)&&!this._isOpen&&(this._isOpen=!0)}render(){var e;return F`
|
|
2451
2451
|
<div class=${_(v.wrapper,this.containerClassName)} @blur=${this._handleContainerBlur}>
|
|
2452
2452
|
<w-textfield
|
|
2453
2453
|
class="w-combobox-textfield"
|