@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.21
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/dist/api.js.map +1 -1
- package/dist/custom-elements.json +1219 -1078
- package/dist/index.d.ts +194 -173
- 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 +1 -1
- 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/attention/attention.react.stories.d.ts +15 -0
- package/dist/packages/attention/attention.react.stories.js +92 -0
- package/dist/packages/attention/attention.stories.js +17 -32
- 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/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.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/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/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 +2 -2
- 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/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 +1 -1
- 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/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 +90 -85
- package/dist/web-types.json +147 -139
- package/package.json +22 -21
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Slider } from './react';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("@lit/react").ReactWebComponent<import("./slider").WarpSlider, {}>;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
export type Story = StoryObj<typeof Slider>;
|
|
9
|
+
export declare const Single: Story;
|
|
10
|
+
export declare const Range: Story;
|
|
11
|
+
export declare const SuffixSquareMeters: Story;
|
|
12
|
+
export declare const SuffixCurrency: Story;
|
|
13
|
+
export declare const SuffixKilometers: Story;
|
|
14
|
+
export declare const Marks: Story;
|
|
15
|
+
export declare const Step: Story;
|
|
16
|
+
export declare const OverUnder: Story;
|
|
17
|
+
export declare const SingleError: Story;
|
|
18
|
+
export declare const RangeError: Story;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Slider, SliderThumb } from './react';
|
|
3
|
+
const locale = 'nb';
|
|
4
|
+
const getNumberFormatter = (locale, opts = {}) => {
|
|
5
|
+
return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
|
|
6
|
+
};
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Forms/Slider and Range Slider',
|
|
9
|
+
component: Slider,
|
|
10
|
+
};
|
|
11
|
+
export const Single = {
|
|
12
|
+
render() {
|
|
13
|
+
return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
|
|
14
|
+
React.createElement(SliderThumb, { name: "value" })));
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
export const Range = {
|
|
18
|
+
render() {
|
|
19
|
+
return (React.createElement(Slider, { label: "Range", min: "0", max: "100" },
|
|
20
|
+
React.createElement(SliderThumb, { name: "from", slot: "from", "aria-label": "From value" }),
|
|
21
|
+
React.createElement(SliderThumb, { name: "to", slot: "to", "aria-label": "To value" })));
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
// Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
|
|
25
|
+
export const SuffixSquareMeters = {
|
|
26
|
+
args: {
|
|
27
|
+
suffix: 'm²',
|
|
28
|
+
},
|
|
29
|
+
render({ suffix }) {
|
|
30
|
+
return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
31
|
+
React.createElement(SliderThumb, { slot: "from", "aria-label": "From size", name: "from" }),
|
|
32
|
+
React.createElement(SliderThumb, { slot: "to", "aria-label": "To size", name: "to" })));
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
export const SuffixCurrency = {
|
|
36
|
+
args: {
|
|
37
|
+
suffix: 'kr',
|
|
38
|
+
},
|
|
39
|
+
render({ suffix }) {
|
|
40
|
+
return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
41
|
+
React.createElement(SliderThumb, { slot: "from", "aria-label": "From price", name: "from" }),
|
|
42
|
+
React.createElement(SliderThumb, { slot: "to", "aria-label": "To price", name: "to" })));
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
export const SuffixKilometers = {
|
|
46
|
+
args: {
|
|
47
|
+
suffix: 'km',
|
|
48
|
+
},
|
|
49
|
+
render({ suffix }) {
|
|
50
|
+
return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
51
|
+
React.createElement(SliderThumb, { slot: "from", "aria-label": "From distance", name: "from" }),
|
|
52
|
+
React.createElement(SliderThumb, { slot: "to", "aria-label": "To distance", name: "to" })));
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
export const Marks = {
|
|
56
|
+
args: {
|
|
57
|
+
suffix: 'km',
|
|
58
|
+
},
|
|
59
|
+
render({ suffix }) {
|
|
60
|
+
return (React.createElement(React.Fragment, null,
|
|
61
|
+
React.createElement(Slider, { label: "Distance", markers: 25000, step: 25000, min: "0", max: "250000", suffix: suffix, "data-testid": "markers" },
|
|
62
|
+
React.createElement(SliderThumb, { slot: "from", "aria-label": "From distance", name: "from" }),
|
|
63
|
+
React.createElement(SliderThumb, { slot: "to", "aria-label": "To distance", name: "to" }))));
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
export const Step = {
|
|
67
|
+
args: {
|
|
68
|
+
step: 5,
|
|
69
|
+
},
|
|
70
|
+
render({ step }) {
|
|
71
|
+
return (React.createElement(Slider, { label: "Single", step: step, min: "0", max: "100" },
|
|
72
|
+
React.createElement(SliderThumb, { name: "value" })));
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
export const OverUnder = {
|
|
76
|
+
render() {
|
|
77
|
+
const [overUnderFrom, setOverUnderFrom] = useState('');
|
|
78
|
+
const [overUnderTo, setOverUnderTo] = useState('');
|
|
79
|
+
return (React.createElement(React.Fragment, null,
|
|
80
|
+
React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
|
|
81
|
+
const formData = new FormData(val.currentTarget);
|
|
82
|
+
setOverUnderFrom(formData.get('from'));
|
|
83
|
+
setOverUnderTo(formData.get('to'));
|
|
84
|
+
} },
|
|
85
|
+
React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
|
|
86
|
+
if (value === '1950') {
|
|
87
|
+
return 'Før 1950';
|
|
88
|
+
}
|
|
89
|
+
if (value === '2025') {
|
|
90
|
+
return 'Etter 2025';
|
|
91
|
+
}
|
|
92
|
+
return value;
|
|
93
|
+
} },
|
|
94
|
+
React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra \u00E5r", "aria-description": "1950 inkluderer kj\u00F8ret\u00F8y produsert fram til 1950", name: "from" }),
|
|
95
|
+
React.createElement(SliderThumb, { slot: "to", "aria-label": "Til \u00E5r", "aria-description": "2025 inkluderer kj\u00F8ret\u00F8y produsert etter 2025", name: "to" }))),
|
|
96
|
+
React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
|
|
97
|
+
React.createElement("output", null,
|
|
98
|
+
React.createElement("dl", null,
|
|
99
|
+
React.createElement("dt", null, "From:"),
|
|
100
|
+
React.createElement("dd", { id: "overunder-from" }, overUnderFrom),
|
|
101
|
+
React.createElement("dt", null, "To:"),
|
|
102
|
+
React.createElement("dd", { id: "overunder-to" }, overUnderTo)))));
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
export const SingleError = {
|
|
106
|
+
render() {
|
|
107
|
+
return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
|
|
108
|
+
React.createElement("p", { slot: "description" }, "Try typing a value over 100"),
|
|
109
|
+
React.createElement(SliderThumb, null)));
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
export const RangeError = {
|
|
113
|
+
render() {
|
|
114
|
+
return (React.createElement(Slider, { label: "Production year", min: "1950", max: "2025" },
|
|
115
|
+
React.createElement("p", { slot: "description" }, "Try typing a from value higher than a to value"),
|
|
116
|
+
React.createElement(SliderThumb, { slot: "from", name: "from" }),
|
|
117
|
+
React.createElement(SliderThumb, { slot: "to", name: "to" })));
|
|
118
|
+
},
|
|
119
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
1
|
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
|
|
2
|
+
import { html } from 'lit';
|
|
3
3
|
import '../affix/index.js';
|
|
4
4
|
import '../textfield/index.js';
|
|
5
5
|
import './index.js';
|
|
6
|
-
const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes } = getStorybookHelpers('w-slider');
|
|
6
|
+
const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
|
|
7
7
|
const meta = {
|
|
8
8
|
title: 'Forms/Slider and Range Slider',
|
|
9
9
|
args: sliderArgs,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var fe=Object.create;var A=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var we=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var Q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var ye=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of we(e))!ke.call(r,a)&&a!==o&&A(r,a,{get:()=>e[a],enumerable:!(t=K(e,a))||t.enumerable});return r};var _e=(r,e,o)=>(o=r!=null?fe(xe(r)):{},ye(e||!r||!r.__esModule?A(o,"default",{value:r,enumerable:!0}):o,r));var k=(r,e,o,t)=>{for(var a=t>1?void 0:t?K(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&A(e,o,a),a};var W=Q(f=>{"use strict";Object.defineProperty(f,"__esModule",{value:!0});f.errorMessages=f.ErrorType=void 0;var y;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(y=f.ErrorType||(f.ErrorType={}));f.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var oe=Q(u=>{"use strict";Object.defineProperty(u,"__esModule",{value:!0});u.unraw=u.errorMessages=u.ErrorType=void 0;var d=W();Object.defineProperty(u,"ErrorType",{enumerable:!0,get:function(){return d.ErrorType}});Object.defineProperty(u,"errorMessages",{enumerable:!0,get:function(){return d.errorMessages}});function ze(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function M(r,e,o){let t=ze(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(d.errorMessages.get(e));return t}function Ce(r){let e=M(r,d.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function ee(r,e){let o=M(r,d.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=M(e,d.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function Me(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function Le(r){if(!Me(r))throw new SyntaxError(d.errorMessages.get(d.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=M(e,d.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(d.errorMessages.get(d.ErrorType.CodePointLimit)):t}}function Ee(r,e=!1){if(e)throw new SyntaxError(d.errorMessages.get(d.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var Se=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Oe(r){return Se.get(r)||r}var Ne=/\\(?:(\\)|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 re(r,e=!1){return r.replace(Ne,function(o,t,a,s,i,n,l,p,g){if(t!==void 0)return"\\";if(a!==void 0)return Ce(a);if(s!==void 0)return Le(s);if(i!==void 0)return ee(i,n);if(l!==void 0)return ee(l);if(p==="0")return"\0";if(p!==void 0)return Ee(p,!e);if(g!==void 0)return Oe(g);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}u.unraw=re;u.default=re});
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Oe(r){return Se.get(r)||r}var Ne=/\\(?:(\\)|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 re(r,e=!1){return r.replace(Ne,function(o,t,a,s,i,n,l,p,g){if(t!==void 0)return"\\";if(a!==void 0)return Ce(a);if(s!==void 0)return Le(s);if(i!==void 0)return ee(i,n);if(l!==void 0)return ee(l);if(p==="0")return"\0";if(p!==void 0)return Ee(p,!e);if(g!==void 0)return Oe(g);throw new SyntaxError(d.errorMessages.get(d.ErrorType.EndOfString))})}u.unraw=re;u.default=re});var m=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?m.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var ie=_e(oe(),1);var h=r=>typeof r=="string",je=r=>typeof r=="function",te=new Map,ne="en";function F(r){return[...Array.isArray(r)?r:[r],ne]}function Y(r,e,o){let t=F(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return L(()=>E("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(h(e)?new Date(e):e)}function Ae(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return Y(r,e,t)}function T(r,e,o){let t=F(r);return L(()=>E("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ae(r,e,o,{offset:t=0,...a}){var n,l;let s=F(r),i=e?L(()=>E("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):L(()=>E("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return(l=(n=a[o])!=null?n:a[i.select(o-t)])!=null?l:a.other}function L(r,e){let o=r(),t=te.get(o);return t||(t=e(),te.set(o,t)),t}function E(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var se=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,le="%__lingui_octothorpe__%",Te=(r,e,o={})=>{let t=e||r,a=i=>typeof i=="object"?i:o[i],s=(i,n)=>{let l=Object.keys(o).length?a("number"):void 0,p=T(t,i,l);return n.replace(new RegExp(le,"g"),p)};return{plural:(i,n)=>{let{offset:l=0}=n,p=ae(t,!1,i,n);return s(i-l,p)},selectordinal:(i,n)=>{let{offset:l=0}=n,p=ae(t,!0,i,n);return s(i-l,p)},select:Ie,number:(i,n)=>T(t,i,a(n)||{style:n}),date:(i,n)=>Y(t,i,a(n)||n),time:(i,n)=>Ae(t,i,a(n)||n)}},Ie=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function De(r,e,o){return(t={},a)=>{let s=Te(e,o,a),i=(l,p=!1)=>Array.isArray(l)?l.reduce((g,z)=>{if(z==="#"&&p)return g+le;if(h(z))return g+z;let[V,v,G]=z,N={};v==="plural"||v==="selectordinal"||v==="select"?Object.entries(G).forEach(([j,ve])=>{N[j]=i(ve,v==="plural"||v==="selectordinal")}):N=G;let C;if(v){let j=s[v];C=j(t[V],N)}else C=t[V];return C==null?g:g+C},""):l,n=i(r);return h(n)&&se.test(n)?(0,ie.unraw)(n):h(n)?n:n?String(n):""}}var Fe=Object.defineProperty,Ye=(r,e,o)=>e in r?Fe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,Pe=(r,e,o)=>(Ye(r,typeof e!="symbol"?e+"":e,o),o),I=class{constructor(){Pe(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},$e=Object.defineProperty,He=(r,e,o)=>e in r?$e(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,w=(r,e,o)=>(He(r,typeof e!="symbol"?e+"":e,o),o),D=class extends I{constructor(e){var o;super(),w(this,"_locale",""),w(this,"_locales"),w(this,"_localeData",{}),w(this,"_messages",{}),w(this,"_missing"),w(this,"_messageCompiler"),w(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:ne,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){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=t==null?void 0:t.message;e||(e=""),h(e)||(o=e.values||o,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return je(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return h(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
|
-
`)),h(l)&&se.test(l)?JSON.parse(`"${l}"`):h(l)?l:De(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return Y(this._locales||this._locale,e,o)}number(e,o){return T(this._locales||this._locale,e,o)}};function Re(r={}){return new D(r)}var b=Re();import{property as O,state as nr}from"lit/decorators.js";import{LitElement as Ue}from"lit";import{unsafeStatic as Xe,html as Be}from"lit/static-html.js";var Ze=JSON.parse('{"icon.title.check":["Sjekkmerke"]}'),Je=JSON.parse('{"icon.title.check":["Checkmark"]}'),qe=JSON.parse('{"icon.title.check":["Valintamerkki"]}'),Ve=JSON.parse('{"icon.title.check":["Flueben"]}'),Ge=JSON.parse('{"icon.title.check":["Bock"]}'),ce=["en","nb","fi","da","sv"],de="en",Ke=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},pe=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":de},P=r=>ce.find(e=>r===e||r.toLowerCase().includes(e))||pe();function Qe(){var r;if(typeof window=="undefined"){let e=Ke();return P(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=pe();return ce.includes(e)?P(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),P(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),de}}var We=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,er=(r,e,o,t,a)=>{let s=Qe(),i=We(s,r,e,o,t,a);b.load(s,i),b.activate(s)};er(Je,Ze,qe,Ve,Ge);var rr=class extends Ue{render(){let r=b.t({message:"Checkmark",id:"icon.title.check",comment:"Title for check icon"});return Be`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-check-16-part">${Xe(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.83 7.667 7.163 11l5.334-6"></path></svg>`}};customElements.get("w-icon-check-16")||customElements.define("w-icon-check-16",rr);var or=["en","nb","fi","da","sv"],ge="en",be=r=>or.find(e=>r===e||r.toLowerCase().includes(e))||ge;function tr(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return be(r)}try{let r=document.documentElement.lang;return be(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ge}}var ar=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,$=(r,e,o,t,a)=>{let s=tr(),i=ar(s,r,e,o,t,a);b.load(s,i),b.activate(s)};import{css as ue}from"lit";var H=ue`
|
|
10
|
+
`)),h(l)&&se.test(l)?JSON.parse(`"${l}"`):h(l)?l:De(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return Y(this._locales||this._locale,e,o)}number(e,o){return T(this._locales||this._locale,e,o)}};function Re(r={}){return new D(r)}var b=Re();import{html as S,LitElement as he}from"lit";import{property as O,state as nr}from"lit/decorators.js";import{LitElement as Ue}from"lit";import{unsafeStatic as Xe,html as Be}from"lit/static-html.js";var Ze=JSON.parse('{"icon.title.check":["Sjekkmerke"]}'),Je=JSON.parse('{"icon.title.check":["Checkmark"]}'),qe=JSON.parse('{"icon.title.check":["Valintamerkki"]}'),Ve=JSON.parse('{"icon.title.check":["Flueben"]}'),Ge=JSON.parse('{"icon.title.check":["Bock"]}'),ce=["en","nb","fi","da","sv"],de="en",Ke=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},pe=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":de},P=r=>ce.find(e=>r===e||r.toLowerCase().includes(e))||pe();function Qe(){var r;if(typeof window=="undefined"){let e=Ke();return P(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=pe();return ce.includes(e)?P(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),P(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),de}}var We=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,er=(r,e,o,t,a)=>{let s=Qe(),i=We(s,r,e,o,t,a);b.load(s,i),b.activate(s)};er(Je,Ze,qe,Ve,Ge);var rr=class extends Ue{render(){let r=b.t({message:"Checkmark",id:"icon.title.check",comment:"Title for check icon"});return Be`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-check-16-part">${Xe(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.83 7.667 7.163 11l5.334-6"></path></svg>`}};customElements.get("w-icon-check-16")||customElements.define("w-icon-check-16",rr);var or=["en","nb","fi","da","sv"],ge="en",be=r=>or.find(e=>r===e||r.toLowerCase().includes(e))||ge;function tr(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return be(r)}try{let r=document.documentElement.lang;return be(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ge}}var ar=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,$=(r,e,o,t,a)=>{let s=tr(),i=ar(s,r,e,o,t,a);b.load(s,i),b.activate(s)};import{css as ue}from"lit";var H=ue`
|
|
11
11
|
*,
|
|
12
12
|
:before,
|
|
13
13
|
:after {
|