@warp-ds/elements 2.3.0-next.19 → 2.3.0-next.20
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/custom-elements.json +86 -2
- package/dist/index.d.ts +17 -1
- package/dist/packages/slider/slider-thumb.js +65 -47
- package/dist/packages/slider/slider-thumb.js.map +4 -4
- package/dist/packages/slider/slider.d.ts +5 -0
- package/dist/packages/slider/slider.js +83 -39
- package/dist/packages/slider/slider.js.map +3 -3
- package/dist/packages/slider/slider.react.stories.d.ts +2 -2
- package/dist/packages/slider/slider.react.stories.js +20 -20
- package/dist/packages/slider/slider.stories.d.ts +7 -5
- package/dist/packages/slider/slider.stories.js +59 -18
- package/dist/packages/slider/styles/w-slider-thumb.styles.js +24 -16
- package/dist/packages/slider/styles/w-slider.styles.js +65 -18
- package/dist/packages/textfield/index.d.ts +1 -0
- package/dist/packages/textfield/index.js +15 -14
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
- package/dist/web-types.json +17 -6
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { StoryObj } from
|
|
2
|
-
import { Slider } from
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Slider } from './react';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: import("@lit/react").ReactWebComponent<import("./slider").WarpSlider, {}>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import { Slider, SliderThumb } from
|
|
3
|
-
const locale =
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Slider, SliderThumb } from './react';
|
|
3
|
+
const locale = 'nb';
|
|
4
4
|
const getNumberFormatter = (locale, opts = {}) => {
|
|
5
5
|
return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
|
|
6
6
|
};
|
|
7
7
|
export default {
|
|
8
|
-
title:
|
|
8
|
+
title: 'Forms/Slider and Range Slider',
|
|
9
9
|
component: Slider,
|
|
10
10
|
};
|
|
11
11
|
export const Single = {
|
|
@@ -24,7 +24,7 @@ export const Range = {
|
|
|
24
24
|
// Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
|
|
25
25
|
export const SuffixSquareMeters = {
|
|
26
26
|
args: {
|
|
27
|
-
suffix:
|
|
27
|
+
suffix: 'm²',
|
|
28
28
|
},
|
|
29
29
|
render({ suffix }) {
|
|
30
30
|
return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
@@ -34,7 +34,7 @@ export const SuffixSquareMeters = {
|
|
|
34
34
|
};
|
|
35
35
|
export const SuffixCurrency = {
|
|
36
36
|
args: {
|
|
37
|
-
suffix:
|
|
37
|
+
suffix: 'kr',
|
|
38
38
|
},
|
|
39
39
|
render({ suffix }) {
|
|
40
40
|
return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
@@ -44,7 +44,7 @@ export const SuffixCurrency = {
|
|
|
44
44
|
};
|
|
45
45
|
export const SuffixKilometers = {
|
|
46
46
|
args: {
|
|
47
|
-
suffix:
|
|
47
|
+
suffix: 'km',
|
|
48
48
|
},
|
|
49
49
|
render({ suffix }) {
|
|
50
50
|
return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
|
|
@@ -54,7 +54,7 @@ export const SuffixKilometers = {
|
|
|
54
54
|
};
|
|
55
55
|
export const Marks = {
|
|
56
56
|
args: {
|
|
57
|
-
suffix:
|
|
57
|
+
suffix: 'km',
|
|
58
58
|
},
|
|
59
59
|
render({ suffix }) {
|
|
60
60
|
return (React.createElement(React.Fragment, null,
|
|
@@ -73,20 +73,20 @@ export const Step = {
|
|
|
73
73
|
};
|
|
74
74
|
export const OverUnder = {
|
|
75
75
|
render() {
|
|
76
|
-
const [overUnderFrom, setOverUnderFrom] = useState(
|
|
77
|
-
const [overUnderTo, setOverUnderTo] = useState(
|
|
76
|
+
const [overUnderFrom, setOverUnderFrom] = useState('');
|
|
77
|
+
const [overUnderTo, setOverUnderTo] = useState('');
|
|
78
78
|
return (React.createElement(React.Fragment, null,
|
|
79
79
|
React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
|
|
80
80
|
const formData = new FormData(val.currentTarget);
|
|
81
|
-
setOverUnderFrom(formData.get(
|
|
82
|
-
setOverUnderTo(formData.get(
|
|
81
|
+
setOverUnderFrom(formData.get('from'));
|
|
82
|
+
setOverUnderTo(formData.get('to'));
|
|
83
83
|
} },
|
|
84
84
|
React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
|
|
85
|
-
if (value ===
|
|
86
|
-
return
|
|
85
|
+
if (value === '1950') {
|
|
86
|
+
return 'Før 1950';
|
|
87
87
|
}
|
|
88
|
-
if (value ===
|
|
89
|
-
return
|
|
88
|
+
if (value === '2025') {
|
|
89
|
+
return 'Etter 2025';
|
|
90
90
|
}
|
|
91
91
|
return value;
|
|
92
92
|
} },
|
|
@@ -118,13 +118,13 @@ export const RangeError = {
|
|
|
118
118
|
};
|
|
119
119
|
export const TestCase = {
|
|
120
120
|
render() {
|
|
121
|
-
const [fromValue, setFromValue] = useState(
|
|
122
|
-
const [toValue, setToValue] = useState(
|
|
121
|
+
const [fromValue, setFromValue] = useState('0');
|
|
122
|
+
const [toValue, setToValue] = useState('150000');
|
|
123
123
|
return (React.createElement(React.Fragment, null,
|
|
124
124
|
React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
|
|
125
125
|
const formData = new FormData(val.currentTarget);
|
|
126
|
-
setFromValue(formData.get(
|
|
127
|
-
setToValue(formData.get(
|
|
126
|
+
setFromValue(formData.get('from'));
|
|
127
|
+
setToValue(formData.get('to'));
|
|
128
128
|
} },
|
|
129
129
|
React.createElement(Slider, { label: "Pris", min: "0", max: "700000" },
|
|
130
130
|
React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra pris", name: "from", value: fromValue }),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
+
import '../affix/index.js';
|
|
3
|
+
import '../attention/index.js';
|
|
4
|
+
import '../textfield/index.js';
|
|
5
|
+
import './index.js';
|
|
6
6
|
declare const meta: Meta;
|
|
7
7
|
export default meta;
|
|
8
8
|
type Story = StoryObj;
|
|
@@ -17,3 +17,5 @@ export declare const OverUnder: Story;
|
|
|
17
17
|
export declare const SingleError: Story;
|
|
18
18
|
export declare const RangeError: Story;
|
|
19
19
|
export declare const TestCase: Story;
|
|
20
|
+
export declare const CustomError: Story;
|
|
21
|
+
export declare const Description: Story;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { getStorybookHelpers } from
|
|
2
|
-
import { html } from
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers(
|
|
1
|
+
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import '../affix/index.js';
|
|
4
|
+
import '../attention/index.js';
|
|
5
|
+
import '../textfield/index.js';
|
|
6
|
+
import './index.js';
|
|
7
|
+
const { events: sliderEvents, args: sliderArgs, argTypes: sliderArgTypes, } = getStorybookHelpers('w-slider');
|
|
8
8
|
const meta = {
|
|
9
|
-
title:
|
|
9
|
+
title: 'Forms/Slider and Range Slider',
|
|
10
10
|
args: sliderArgs,
|
|
11
11
|
argTypes: sliderArgTypes,
|
|
12
12
|
parameters: {
|
|
@@ -46,8 +46,8 @@ export const Range = {
|
|
|
46
46
|
// Take a suffix attribute on `<w-slider>` I think, have `<w-slider-thumb>` get from that.
|
|
47
47
|
export const SuffixSquareMeters = {
|
|
48
48
|
args: {
|
|
49
|
-
locale:
|
|
50
|
-
suffix:
|
|
49
|
+
locale: 'nb',
|
|
50
|
+
suffix: 'm²',
|
|
51
51
|
},
|
|
52
52
|
render({ locale, suffix }) {
|
|
53
53
|
return html `
|
|
@@ -78,8 +78,8 @@ export const SuffixSquareMeters = {
|
|
|
78
78
|
};
|
|
79
79
|
export const SuffixCurrency = {
|
|
80
80
|
args: {
|
|
81
|
-
locale:
|
|
82
|
-
suffix:
|
|
81
|
+
locale: 'nb',
|
|
82
|
+
suffix: 'kr',
|
|
83
83
|
},
|
|
84
84
|
render({ locale, suffix }) {
|
|
85
85
|
return html `
|
|
@@ -114,8 +114,8 @@ export const SuffixCurrency = {
|
|
|
114
114
|
};
|
|
115
115
|
export const SuffixKilometers = {
|
|
116
116
|
args: {
|
|
117
|
-
locale:
|
|
118
|
-
suffix:
|
|
117
|
+
locale: 'nb',
|
|
118
|
+
suffix: 'km',
|
|
119
119
|
},
|
|
120
120
|
render({ locale, suffix }) {
|
|
121
121
|
return html `
|
|
@@ -146,9 +146,9 @@ export const SuffixKilometers = {
|
|
|
146
146
|
};
|
|
147
147
|
export const Marks = {
|
|
148
148
|
args: {
|
|
149
|
-
locale:
|
|
150
|
-
step:
|
|
151
|
-
markers:
|
|
149
|
+
locale: 'nb',
|
|
150
|
+
step: '5',
|
|
151
|
+
markers: '5',
|
|
152
152
|
},
|
|
153
153
|
render({ markers, step }) {
|
|
154
154
|
return html `
|
|
@@ -243,7 +243,7 @@ export const OverUnder = {
|
|
|
243
243
|
};
|
|
244
244
|
export const SingleError = {
|
|
245
245
|
args: {
|
|
246
|
-
locale:
|
|
246
|
+
locale: 'nb',
|
|
247
247
|
},
|
|
248
248
|
render() {
|
|
249
249
|
return html `
|
|
@@ -361,3 +361,44 @@ export const TestCase = {
|
|
|
361
361
|
`;
|
|
362
362
|
},
|
|
363
363
|
};
|
|
364
|
+
export const CustomError = {
|
|
365
|
+
args: {
|
|
366
|
+
locale: 'nb',
|
|
367
|
+
},
|
|
368
|
+
render() {
|
|
369
|
+
return html `
|
|
370
|
+
<w-slider
|
|
371
|
+
label="Production year"
|
|
372
|
+
min="1950"
|
|
373
|
+
max="2025"
|
|
374
|
+
over
|
|
375
|
+
under
|
|
376
|
+
error="I'm an external error telling you something is wrong"
|
|
377
|
+
invalid
|
|
378
|
+
>
|
|
379
|
+
<w-slider-thumb slot="from" name="from"></w-slider-thumb>
|
|
380
|
+
<w-slider-thumb slot="to" name="to"></w-slider-thumb>
|
|
381
|
+
</w-slider>
|
|
382
|
+
`;
|
|
383
|
+
},
|
|
384
|
+
};
|
|
385
|
+
export const Description = {
|
|
386
|
+
args: {
|
|
387
|
+
locale: 'nb',
|
|
388
|
+
},
|
|
389
|
+
render() {
|
|
390
|
+
return html `
|
|
391
|
+
<w-slider
|
|
392
|
+
label="Production year"
|
|
393
|
+
min="1950"
|
|
394
|
+
max="2025"
|
|
395
|
+
over
|
|
396
|
+
under
|
|
397
|
+
help-text="Production year of the car"
|
|
398
|
+
>
|
|
399
|
+
<w-slider-thumb slot="from" name="from"></w-slider-thumb>
|
|
400
|
+
<w-slider-thumb slot="to" name="to"></w-slider-thumb>
|
|
401
|
+
</w-slider>
|
|
402
|
+
`;
|
|
403
|
+
},
|
|
404
|
+
};
|
|
@@ -6,9 +6,9 @@ export const wSliderThumbStyles = css `
|
|
|
6
6
|
display: grid;
|
|
7
7
|
pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
|
|
8
8
|
grid-template-areas:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
"slider slider slider"
|
|
10
|
+
"frommarker . tomarker"
|
|
11
|
+
"fromtextfield . totextfield";
|
|
12
12
|
grid-template-columns: 1fr 24px 1fr;
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -39,7 +39,11 @@ export const wSliderThumbStyles = css `
|
|
|
39
39
|
background: var(--w-s-color-background-primary);
|
|
40
40
|
border-radius: 50%;
|
|
41
41
|
height: var(--w-slider-thumb-size);
|
|
42
|
-
margin-top: calc(
|
|
42
|
+
margin-top: calc(
|
|
43
|
+
-1 * calc(var(--w-slider-thumb-offset) - calc(
|
|
44
|
+
var(--w-slider-track-height) / 2
|
|
45
|
+
))
|
|
46
|
+
);
|
|
43
47
|
pointer-events: initial;
|
|
44
48
|
width: var(--w-slider-thumb-size);
|
|
45
49
|
z-index: 1;
|
|
@@ -54,7 +58,11 @@ export const wSliderThumbStyles = css `
|
|
|
54
58
|
border-radius: 50%;
|
|
55
59
|
border-color: transparent;
|
|
56
60
|
height: var(--w-slider-thumb-size);
|
|
57
|
-
margin-top: calc(
|
|
61
|
+
margin-top: calc(
|
|
62
|
+
-1 * calc(var(--w-slider-thumb-offset) - calc(
|
|
63
|
+
var(--w-slider-track-height) / 2
|
|
64
|
+
))
|
|
65
|
+
);
|
|
58
66
|
pointer-events: initial;
|
|
59
67
|
width: var(--w-slider-thumb-size);
|
|
60
68
|
z-index: 1;
|
|
@@ -124,44 +132,44 @@ export const wSliderThumbStyles = css `
|
|
|
124
132
|
}
|
|
125
133
|
|
|
126
134
|
.w-slider-thumb__textfield {
|
|
127
|
-
margin-top:
|
|
135
|
+
margin-top: 12px;
|
|
128
136
|
pointer-events: auto;
|
|
129
137
|
grid-row: 3 / 4;
|
|
130
138
|
grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
|
|
131
139
|
}
|
|
132
140
|
|
|
133
|
-
:host([name=
|
|
141
|
+
:host([name="from"]) .w-slider-thumb__textfield {
|
|
134
142
|
grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
|
|
135
143
|
}
|
|
136
144
|
|
|
137
|
-
:host([name=
|
|
145
|
+
:host([name="from"]) .w-slider-thumb__range {
|
|
138
146
|
margin-left: var(--w-slider-thumb-size);
|
|
139
147
|
}
|
|
140
148
|
|
|
141
|
-
:host([name=
|
|
149
|
+
:host([name="to"]) .w-slider-thumb__range {
|
|
142
150
|
margin-right: var(--w-slider-thumb-size);
|
|
143
151
|
}
|
|
144
152
|
|
|
145
|
-
:host([name=
|
|
146
|
-
:host([name=
|
|
153
|
+
:host([name="from"]) .w-slider-thumb__range::-webkit-slider-thumb,
|
|
154
|
+
:host([name="from"]) .w-slider-thumb__tooltip-target {
|
|
147
155
|
transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
|
|
148
156
|
}
|
|
149
157
|
|
|
150
|
-
:host([name=
|
|
158
|
+
:host([name="from"]) .w-slider-thumb__range::-moz-range-thumb {
|
|
151
159
|
transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
|
|
152
160
|
}
|
|
153
161
|
|
|
154
|
-
:host([name=
|
|
162
|
+
:host([name="to"]) .w-slider-thumb__textfield {
|
|
155
163
|
grid-row: 3 / 4;
|
|
156
164
|
grid-column: 3 / 4;
|
|
157
165
|
}
|
|
158
166
|
|
|
159
|
-
:host([name=
|
|
160
|
-
:host([name=
|
|
167
|
+
:host([name="to"]) .w-slider-thumb__tooltip-target,
|
|
168
|
+
:host([name="to"]) .w-slider-thumb__range::-webkit-slider-thumb {
|
|
161
169
|
transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
|
|
162
170
|
}
|
|
163
171
|
|
|
164
|
-
:host([name=
|
|
172
|
+
:host([name="to"]) .w-slider-thumb__range::-moz-range-thumb {
|
|
165
173
|
transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
|
|
166
174
|
}
|
|
167
175
|
`;
|
|
@@ -8,9 +8,10 @@ export const wSliderStyles = css `
|
|
|
8
8
|
display: grid;
|
|
9
9
|
width: 100%;
|
|
10
10
|
grid-template-areas:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
"label"
|
|
12
|
+
"description"
|
|
13
|
+
"slider"
|
|
14
|
+
"error";
|
|
14
15
|
grid-template-columns: 1fr;
|
|
15
16
|
|
|
16
17
|
--w-slider-track-background: var(--w-s-color-background-disabled-subtle);
|
|
@@ -18,7 +19,9 @@ export const wSliderStyles = css `
|
|
|
18
19
|
--w-slider-track-height: 4px;
|
|
19
20
|
--w-slider-track-active-height: 6px;
|
|
20
21
|
--w-slider-thumb-background: var(--w-s-color-background-primary);
|
|
21
|
-
--w-slider-thumb-background-hover: var(
|
|
22
|
+
--w-slider-thumb-background-hover: var(
|
|
23
|
+
--w-s-color-background-primary-hover
|
|
24
|
+
);
|
|
22
25
|
--w-slider-thumb-size: 28px;
|
|
23
26
|
--w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
|
|
24
27
|
--w-slider-marker-color: var(--w-s-color-border);
|
|
@@ -29,26 +32,45 @@ export const wSliderStyles = css `
|
|
|
29
32
|
--_value-range: calc(var(--max) - var(--min));
|
|
30
33
|
|
|
31
34
|
/** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
|
|
32
|
-
--_from-in-range: round(
|
|
35
|
+
--_from-in-range: round(
|
|
36
|
+
up,
|
|
37
|
+
max(calc(var(--from) - var(--min)), 0),
|
|
38
|
+
var(--step, 1)
|
|
39
|
+
);
|
|
33
40
|
|
|
34
41
|
/* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
|
|
35
|
-
--_to-in-range: round(
|
|
42
|
+
--_to-in-range: round(
|
|
43
|
+
up,
|
|
44
|
+
min(calc(var(--to) - var(--min)), var(--_value-range)),
|
|
45
|
+
var(--step, 1)
|
|
46
|
+
);
|
|
36
47
|
|
|
37
48
|
/* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
|
|
38
49
|
* In other words, given a width of 100% how many percent should be left unfilled/blank
|
|
39
50
|
* at the beginning of the range slider (dashes in this ASCII-range-slider: |---O******O|) */
|
|
40
|
-
--_from-as-percent-of-max: calc(
|
|
51
|
+
--_from-as-percent-of-max: calc(
|
|
52
|
+
var(--_from-in-range) / var(--_value-range) * 100
|
|
53
|
+
);
|
|
41
54
|
--_blank-values-before: var(--_from-as-percent-of-max);
|
|
42
55
|
|
|
43
56
|
/* Set the width of the fill as a percentage.
|
|
44
57
|
* In other words, given a width of 100% how many percent should be left unfilled/blank
|
|
45
58
|
* at the end of the slider (dashes in this ASCII-slider: |******O---|) */
|
|
46
|
-
--_to-as-percent-of-max: calc(
|
|
47
|
-
|
|
59
|
+
--_to-as-percent-of-max: calc(
|
|
60
|
+
var(--_to-in-range) / var(--_value-range) * 100
|
|
61
|
+
);
|
|
62
|
+
--_filled-values: calc(
|
|
63
|
+
var(--_to-as-percent-of-max) - var(--_blank-values-before)
|
|
64
|
+
);
|
|
48
65
|
|
|
49
66
|
/* Vertical position of range and markers */
|
|
50
67
|
--_range-top: calc(
|
|
51
|
-
var(--w-slider-thumb-size) / 2 +
|
|
68
|
+
var(--w-slider-thumb-size) / 2 +
|
|
69
|
+
calc(
|
|
70
|
+
var(--w-slider-track-active-height) - calc(
|
|
71
|
+
var(--w-slider-track-height) / 2
|
|
72
|
+
) + 1px
|
|
73
|
+
)
|
|
52
74
|
);
|
|
53
75
|
}
|
|
54
76
|
|
|
@@ -90,8 +112,16 @@ export const wSliderStyles = css `
|
|
|
90
112
|
border-start-start-radius: var(--active-range-border-radius, 0);
|
|
91
113
|
border-end-start-radius: var(--active-range-border-radius, 0);
|
|
92
114
|
|
|
93
|
-
margin-left: calc(
|
|
94
|
-
|
|
115
|
+
margin-left: calc(
|
|
116
|
+
calc(var(--_blank-values-before) * 1%) - var(
|
|
117
|
+
--active-range-inline-start-padding,
|
|
118
|
+
0px
|
|
119
|
+
)
|
|
120
|
+
);
|
|
121
|
+
width: calc(
|
|
122
|
+
calc(var(--_filled-values) * 1%) +
|
|
123
|
+
var(--active-range-inline-end-padding, 0px)
|
|
124
|
+
);
|
|
95
125
|
z-index: 1;
|
|
96
126
|
}
|
|
97
127
|
|
|
@@ -105,13 +135,15 @@ export const wSliderStyles = css `
|
|
|
105
135
|
followed by enough transparent that we can repeat the gradient
|
|
106
136
|
along the X axis and have markers visible where we want them. */
|
|
107
137
|
background: linear-gradient(
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
138
|
+
to right,
|
|
139
|
+
var(--w-slider-marker-color) var(--_marker-width),
|
|
140
|
+
rgba(0, 0, 0, 0) 1px calc(100% - 1px),
|
|
141
|
+
var(--w-slider-marker-color) 100%
|
|
142
|
+
)
|
|
143
|
+
repeat-x;
|
|
113
144
|
--_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
|
|
114
|
-
background-size: calc(var(--_step-width-as-percent) * 1%)
|
|
145
|
+
background-size: calc(var(--_step-width-as-percent) * 1%)
|
|
146
|
+
var(--_marker-height);
|
|
115
147
|
|
|
116
148
|
background-position: bottom 0 left 8px right 8px;
|
|
117
149
|
position: absolute;
|
|
@@ -123,6 +155,21 @@ export const wSliderStyles = css `
|
|
|
123
155
|
margin-inline: var(--w-slider-thumb-offset);
|
|
124
156
|
}
|
|
125
157
|
|
|
158
|
+
.w-slider__error {
|
|
159
|
+
grid-area: error;
|
|
160
|
+
padding-top: 8px;
|
|
161
|
+
font-size: var(--w-font-size-xs);
|
|
162
|
+
line-height: var(--w-line-height-xs);
|
|
163
|
+
color: var(--w-s-color-text-negative);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.w-slider__help-text {
|
|
167
|
+
grid-area: error;
|
|
168
|
+
padding-top: 8px;
|
|
169
|
+
font-size: var(--w-font-size-xs);
|
|
170
|
+
line-height: var(--w-line-height-xs);
|
|
171
|
+
}
|
|
172
|
+
|
|
126
173
|
slot::slotted(w-slider-thumb) {
|
|
127
174
|
position: static;
|
|
128
175
|
top: 0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var
|
|
1
|
+
var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var s=r>1?void 0:r?Q(o,i):o,g=h.length-1,w;g>=0;g--)(w=h[g])&&(s=(r?w(o,i,s):w(s))||s);return r&&s&&K(o,i,s),s};var Y=function(){for(var h=[],o=arguments.length;o--;)h[o]=arguments[o];return h.reduce(function(i,r){return i.concat(typeof r=="string"?r:Array.isArray(r)?Y.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(s){return r[s]?s:""}):"")},[]).join(" ")};var a=function(h,o,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?h!==o||!r:!o.has(h))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(h):r?r.value:o.get(h)},b=function(h,o,i,r,s){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!s)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?h!==o||!s:!o.has(h))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?s.call(h,i):s?s.value=i:o.set(h,i),i};function B(h){var o,i,r,s,g,w,k,T,_,P,A,F,V,z,E,f,L,X,O;class J extends h{constructor(...e){var t,c,p;super(...e),o.add(this),this.internals=this.attachInternals(),i.set(this,!1),r.set(this,!1),s.set(this,!1),g.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),P.set(this,()=>{b(this,s,!0,"f"),b(this,i,!0,"f"),a(this,o,"m",f).call(this)}),A.set(this,()=>{b(this,i,!1,"f"),a(this,o,"m",L).call(this,this.shouldFormValueUpdate()?a(this,_,"f"):""),!this.validity.valid&&a(this,s,"f")&&b(this,r,!0,"f");let m=a(this,o,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),F.set(this,()=>{var m;a(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,s,!0,"f"),b(this,r,!0,"f"),a(this,o,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),V.set(this,void 0),z.set(this,!1),E.set(this,Promise.resolve()),(t=this.addEventListener)===null||t===void 0||t.call(this,"focus",a(this,P,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",a(this,A,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",a(this,F,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let e=this.validators.map(p=>p.attribute).flat(),t=super.observedAttributes||[];return[...new Set([...t,...e])]}static getValidator(e){return this.validators.find(t=>t.attribute===e)||null}static getValidators(e){return this.validators.filter(t=>{var c;if(t.attribute===e||!((c=t.attribute)===null||c===void 0)&&c.includes(e))return!0})}get form(){return this.internals.form}get showError(){return a(this,o,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(e,t,c){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,e,t,c);let $=this.constructor.getValidators(e);$!=null&&$.length&&this.validationTarget&&this.setValue(a(this,_,"f"))}setValue(e){var t;b(this,r,!1,"f"),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,""),b(this,_,e,"f");let p=this.shouldFormValueUpdate()?e:null;this.internals.setFormValue(p),a(this,o,"m",L).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),a(this,o,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(e=>e(a(this,E,"f")))}formResetCallback(){var e,t;b(this,s,!1,"f"),b(this,r,!1,"f"),a(this,o,"m",f).call(this),(e=this.resetFormControl)===null||e===void 0||e.call(this),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,a(this,o,"m",f).call(this)?this.validationMessage:"")}}return i=new WeakMap,r=new WeakMap,s=new WeakMap,g=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,P=new WeakMap,A=new WeakMap,F=new WeakMap,V=new WeakMap,z=new WeakMap,E=new WeakMap,o=new WeakSet,T=function(){let e=this.getRootNode(),t=`${this.localName}[name="${this.getAttribute("name")}"]`;return e.querySelectorAll(t)},f=function(){if(this.hasAttribute("disabled"))return!1;let e=a(this,r,"f")||a(this,s,"f")&&!this.validity.valid&&!a(this,i,"f");return e&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),e},L=function(e){let t=this.constructor,c={},p=t.validators,m=[],$=p.some(u=>u.isValid instanceof Promise);a(this,z,"f")||(b(this,E,new Promise(u=>{b(this,V,u,"f")}),"f"),b(this,z,!0,"f")),a(this,g,"f")&&(a(this,g,"f").abort(),b(this,w,a(this,g,"f"),"f"));let M=new AbortController;b(this,g,M,"f");let S,q=!1;p.length&&(p.forEach(u=>{let Z=u.key||"customError",y=u.isValid(this,e,M.signal);y instanceof Promise?(m.push(y),y.then(N=>{N!=null&&(c[Z]=!N,S=a(this,o,"m",O).call(this,u,e),a(this,o,"m",X).call(this,c,S))})):(c[Z]=!y,this.validity[Z]!==!y&&(q=!0),!y&&!S&&(S=a(this,o,"m",O).call(this,u,e)))}),Promise.allSettled(m).then(()=>{var u;M!=null&&M.signal.aborted||(b(this,z,!1,"f"),(u=a(this,V,"f"))===null||u===void 0||u.call(this))}),(q||!$)&&a(this,o,"m",X).call(this,c,S))},X=function(e,t){if(this.validationTarget)this.internals.setValidity(e,t,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(e,t),this.internals.validity.valid)return;b(this,k,!0,"f")}},O=function(e,t){if(this.validityCallback){let c=this.validityCallback(e.key||"customError");if(c)return c}return e.message instanceof Function?e.message(this,t):e.message},J}import{html as j,LitElement as G,nothing as re}from"lit";import{property as d,query as oe}from"lit/decorators.js";import{classMap as te}from"lit/directives/class-map.js";import{ifDefined as v}from"lit/directives/if-defined.js";import{css as R}from"lit";var H=R`
|
|
2
2
|
*,
|
|
3
3
|
:before,
|
|
4
4
|
:after {
|
|
@@ -2489,7 +2489,7 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2489
2489
|
text-overflow: ellipsis;
|
|
2490
2490
|
z-index: 1;
|
|
2491
2491
|
}
|
|
2492
|
-
`;import{css as ee}from"lit";var D=ee`*,: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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.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}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},
|
|
2492
|
+
`;import{css as ee}from"lit";var D=ee`*,: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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.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}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},I={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},n=class extends B(G){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}get _inputstyles(){return Y([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return Y([I.base,this.invalid?I.colorInvalid:I.color])}get _label(){if(this.label)return j`<label for="${this._id}" class=${ae.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:s}=i.currentTarget;this.value=s;let g=new CustomEvent(i.type,{detail:{name:r,value:s,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return j`
|
|
2493
2493
|
${this._label}
|
|
2494
2494
|
<div
|
|
2495
2495
|
class="${te({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">
|
|
@@ -2499,22 +2499,23 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2499
2499
|
<input
|
|
2500
2500
|
class="${this._inputstyles}"
|
|
2501
2501
|
type="${this.type}"
|
|
2502
|
-
min="${
|
|
2503
|
-
max="${
|
|
2504
|
-
size="${
|
|
2505
|
-
minlength="${
|
|
2506
|
-
maxlength="${
|
|
2507
|
-
name="${
|
|
2508
|
-
pattern="${
|
|
2509
|
-
placeholder="${
|
|
2502
|
+
min="${v(this.min)}"
|
|
2503
|
+
max="${v(this.max)}"
|
|
2504
|
+
size="${v(this.size)}"
|
|
2505
|
+
minlength="${v(this.minLength)}"
|
|
2506
|
+
maxlength="${v(this.maxLength)}"
|
|
2507
|
+
name="${v(this.name)}"
|
|
2508
|
+
pattern="${v(this.pattern)}"
|
|
2509
|
+
placeholder="${v(this.placeholder)}"
|
|
2510
2510
|
.value="${this.value||""}"
|
|
2511
|
-
aria-describedby="${
|
|
2512
|
-
aria-errormessage="${
|
|
2513
|
-
aria-invalid="${
|
|
2511
|
+
aria-describedby="${v(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
|
|
2512
|
+
aria-errormessage="${v(this._error)}"
|
|
2513
|
+
aria-invalid="${v(this.invalid)}"
|
|
2514
2514
|
id="${this._id}"
|
|
2515
2515
|
?disabled="${this.disabled}"
|
|
2516
2516
|
?readonly="${this.readonly||this.readOnly}"
|
|
2517
2517
|
?required="${this.required}"
|
|
2518
|
+
step="${v(this.step)}"
|
|
2518
2519
|
@blur="${this.handler}"
|
|
2519
2520
|
@change="${this.handler}"
|
|
2520
2521
|
@input="${this.handler}"
|
|
@@ -2524,5 +2525,5 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2524
2525
|
</div>
|
|
2525
2526
|
<span class="sr-only" id="aria-description">${this.ariaDescription}</span>
|
|
2526
2527
|
${this.helpText&&j`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`}
|
|
2527
|
-
`}};
|
|
2528
|
+
`}};n.shadowRootOptions={...G.shadowRootOptions,delegatesFocus:!0},n.styles=[H,D,U],l([d({type:Boolean,reflect:!0})],n.prototype,"disabled",2),l([d({type:Boolean,reflect:!0})],n.prototype,"invalid",2),l([d({type:String,reflect:!0})],n.prototype,"id",2),l([d({type:String,reflect:!0})],n.prototype,"label",2),l([d({type:String,reflect:!0,attribute:"help-text"})],n.prototype,"helpText",2),l([d({type:String,reflect:!0})],n.prototype,"size",2),l([d({type:Number,reflect:!0})],n.prototype,"max",2),l([d({type:Number,reflect:!0})],n.prototype,"min",2),l([d({type:Number,reflect:!0,attribute:"min-length"})],n.prototype,"minLength",2),l([d({type:Number,reflect:!0,attribute:"max-length"})],n.prototype,"maxLength",2),l([d({type:String,reflect:!0})],n.prototype,"pattern",2),l([d({type:String,reflect:!0})],n.prototype,"placeholder",2),l([d({type:Boolean,reflect:!0,attribute:"read-only"})],n.prototype,"readOnly",2),l([d({type:Boolean,reflect:!0})],n.prototype,"readonly",2),l([d({type:Boolean,reflect:!0})],n.prototype,"required",2),l([d({type:String,reflect:!0})],n.prototype,"type",2),l([d({type:String,reflect:!0})],n.prototype,"value",2),l([d({type:String,reflect:!0})],n.prototype,"name",2),l([d({type:Number,reflect:!0})],n.prototype,"step",2),l([d({attribute:!1})],n.prototype,"formatter",2),l([oe(".w-textfield__mask")],n.prototype,"mask",2),l([d({type:Boolean})],n.prototype,"_hasPrefix",2),l([d({type:Boolean})],n.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",n);export{n as WarpTextField};
|
|
2528
2529
|
//# sourceMappingURL=index.js.map
|