@roadtrip/components 2.35.0 → 2.36.0
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/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-input-group.cjs.entry.js +1 -1
- package/dist/cjs/road-input.cjs.entry.js +2 -2
- package/dist/cjs/road-select-filter.cjs.entry.js +2 -1
- package/dist/cjs/road-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/road-spinner.cjs.entry.js +7 -2
- package/dist/cjs/road-tooltip.cjs.entry.js +5 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/dropdown/dropdown.js +2 -1
- package/dist/collection/components/dropdown/dropdown.stories.js +3 -3
- package/dist/collection/components/input/input.css +8 -0
- package/dist/collection/components/input/input.js +1 -1
- package/dist/collection/components/input-group/input-group.css +22 -3
- package/dist/collection/components/select-filter/select-filter.css +3 -1
- package/dist/collection/components/select-filter/select-filter.js +1 -0
- package/dist/collection/components/select-filter/select-filter.stories.js +25 -0
- package/dist/collection/components/skeleton/skeleton.css +2 -2
- package/dist/collection/components/skeleton/skeleton.stories.js +204 -46
- package/dist/collection/components/spinner/spinner.css +13 -0
- package/dist/collection/components/spinner/spinner.js +26 -3
- package/dist/collection/components/spinner/spinner.stories.js +8 -2
- package/dist/collection/components/tooltip/tooltip.css +17 -8
- package/dist/collection/components/tooltip/tooltip.js +22 -0
- package/dist/collection/components/tooltip/tooltip.stories.js +11 -5
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-input-group.entry.js +1 -1
- package/dist/esm/road-input.entry.js +2 -2
- package/dist/esm/road-select-filter.entry.js +2 -1
- package/dist/esm/road-skeleton.entry.js +1 -1
- package/dist/esm/road-spinner.entry.js +7 -2
- package/dist/esm/road-tooltip.entry.js +5 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/road-input-group.entry.js +1 -1
- package/dist/esm-es5/road-input.entry.js +1 -1
- package/dist/esm-es5/road-select-filter.entry.js +1 -1
- package/dist/esm-es5/road-skeleton.entry.js +1 -1
- package/dist/esm-es5/road-spinner.entry.js +1 -1
- package/dist/esm-es5/road-tooltip.entry.js +1 -1
- package/dist/esm-es5/roadtrip.js +1 -1
- package/dist/html.html-data.json +30 -0
- package/dist/roadtrip/p-012457c2.entry.js +1 -0
- package/dist/roadtrip/p-1f78dab9.system.entry.js +1 -0
- package/dist/roadtrip/{p-aa2d24f6.entry.js → p-22ff574e.entry.js} +1 -1
- package/dist/roadtrip/{p-3486b683.system.entry.js → p-288298fa.system.entry.js} +1 -1
- package/dist/roadtrip/p-39a93000.entry.js +1 -0
- package/dist/roadtrip/{p-60695934.entry.js → p-501c2775.entry.js} +1 -1
- package/dist/roadtrip/p-7118c44a.entry.js +1 -0
- package/dist/roadtrip/p-83926ef1.system.entry.js +1 -0
- package/dist/roadtrip/p-ad1136ff.system.entry.js +1 -0
- package/dist/roadtrip/p-b205281e.system.js +1 -1
- package/dist/roadtrip/p-bc394b73.system.entry.js +1 -0
- package/dist/roadtrip/p-f00aa43f.system.entry.js +1 -0
- package/dist/roadtrip/p-f7f442a7.entry.js +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/types/components/dropdown/dropdown.d.ts +2 -1
- package/dist/types/components/spinner/spinner.d.ts +5 -1
- package/dist/types/components/tooltip/tooltip.d.ts +4 -0
- package/dist/types/components.d.ts +20 -2
- package/package.json +1 -1
- package/dist/roadtrip/p-089db019.system.entry.js +0 -1
- package/dist/roadtrip/p-161e83eb.entry.js +0 -1
- package/dist/roadtrip/p-1c931aee.system.entry.js +0 -1
- package/dist/roadtrip/p-24b5b4ae.system.entry.js +0 -1
- package/dist/roadtrip/p-564a2eac.entry.js +0 -1
- package/dist/roadtrip/p-64ad75dd.entry.js +0 -1
- package/dist/roadtrip/p-6f30373e.system.entry.js +0 -1
- package/dist/roadtrip/p-c8d0886d.system.entry.js +0 -1
- package/dist/roadtrip/p-d2165987.entry.js +0 -1
|
@@ -6,7 +6,7 @@ export default {
|
|
|
6
6
|
argTypes: {
|
|
7
7
|
'--background-light': {
|
|
8
8
|
table: {
|
|
9
|
-
defaultValue: { summary: 'var(--road-
|
|
9
|
+
defaultValue: { summary: 'var(--road-disabled)' },
|
|
10
10
|
},
|
|
11
11
|
control: {
|
|
12
12
|
type: null,
|
|
@@ -14,7 +14,7 @@ export default {
|
|
|
14
14
|
},
|
|
15
15
|
'--background-dark': {
|
|
16
16
|
table: {
|
|
17
|
-
defaultValue: { summary: '
|
|
17
|
+
defaultValue: { summary: 'rgb(137, 143, 160, 0.4)' },
|
|
18
18
|
},
|
|
19
19
|
control: {
|
|
20
20
|
type: null,
|
|
@@ -26,83 +26,241 @@ export default {
|
|
|
26
26
|
export const List = () => html`
|
|
27
27
|
<road-grid>
|
|
28
28
|
<road-row>
|
|
29
|
-
<road-col class="col-sm-3">
|
|
30
|
-
<road-skeleton style="height:
|
|
29
|
+
<road-col class="col-12 col-sm-3 mb-16">
|
|
30
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
31
31
|
</road-col>
|
|
32
|
-
<road-col class="col-sm-9">
|
|
33
|
-
<p class="h2
|
|
34
|
-
<road-skeleton style="width: 60%; height: 1.
|
|
32
|
+
<road-col class="col-12 col-sm-9">
|
|
33
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
34
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
35
35
|
</p>
|
|
36
|
-
<p class="text-content">
|
|
37
|
-
<road-skeleton></road-skeleton>
|
|
36
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
37
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
38
38
|
</p>
|
|
39
|
-
<p class="text-content">
|
|
40
|
-
<road-skeleton></road-skeleton>
|
|
39
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
40
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
41
41
|
</p>
|
|
42
|
-
<p class="text-content">
|
|
43
|
-
<road-skeleton></road-skeleton>
|
|
42
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
43
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
44
44
|
</p>
|
|
45
45
|
</road-col>
|
|
46
46
|
</road-row>
|
|
47
47
|
|
|
48
48
|
<road-row class="mt-16">
|
|
49
|
-
<road-col class="col-sm-3">
|
|
50
|
-
<road-skeleton style="height:
|
|
49
|
+
<road-col class="col-12 col-sm-3 mb-16">
|
|
50
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
51
51
|
</road-col>
|
|
52
|
-
<road-col class="col-sm-9">
|
|
53
|
-
<p class="h2
|
|
54
|
-
<road-skeleton style="width: 60%; height: 1.
|
|
52
|
+
<road-col class="col-12 col-sm-9">
|
|
53
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
54
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
55
55
|
</p>
|
|
56
|
-
<p class="text-content">
|
|
57
|
-
<road-skeleton></road-skeleton>
|
|
56
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
57
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
58
58
|
</p>
|
|
59
|
-
<p class="text-content">
|
|
60
|
-
<road-skeleton></road-skeleton>
|
|
59
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
60
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
61
61
|
</p>
|
|
62
|
-
<p class="text-content">
|
|
63
|
-
<road-skeleton></road-skeleton>
|
|
62
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
63
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
64
64
|
</p>
|
|
65
65
|
</road-col>
|
|
66
66
|
</road-row>
|
|
67
67
|
|
|
68
68
|
<road-row class="mt-16">
|
|
69
|
-
<road-col class="col-sm-3">
|
|
70
|
-
<road-skeleton style="height:
|
|
69
|
+
<road-col class="col-12 col-sm-3 mb-16">
|
|
70
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
71
71
|
</road-col>
|
|
72
|
-
<road-col class="col-sm-9">
|
|
73
|
-
<p class="h2
|
|
74
|
-
<road-skeleton style="width: 60%; height: 1.
|
|
72
|
+
<road-col class="col-12 col-sm-9">
|
|
73
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
74
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
75
75
|
</p>
|
|
76
|
-
<p class="text-content">
|
|
77
|
-
<road-skeleton></road-skeleton>
|
|
76
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
77
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
78
78
|
</p>
|
|
79
|
-
<p class="text-content">
|
|
80
|
-
<road-skeleton></road-skeleton>
|
|
79
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
80
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
81
81
|
</p>
|
|
82
|
-
<p class="text-content">
|
|
83
|
-
<road-skeleton></road-skeleton>
|
|
82
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
83
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
84
84
|
</p>
|
|
85
85
|
</road-col>
|
|
86
86
|
</road-row>
|
|
87
87
|
|
|
88
88
|
<road-row class="mt-16">
|
|
89
|
-
<road-col class="col-sm-3">
|
|
90
|
-
<road-skeleton style="height:
|
|
89
|
+
<road-col class="col-12 col-sm-3 mb-16">
|
|
90
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
91
91
|
</road-col>
|
|
92
|
-
<road-col class="col-sm-9">
|
|
93
|
-
<p class="h2
|
|
94
|
-
<road-skeleton style="width: 60%; height: 1.
|
|
92
|
+
<road-col class="col-12 col-sm-9">
|
|
93
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
94
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
95
95
|
</p>
|
|
96
|
-
<p class="text-content">
|
|
97
|
-
<road-skeleton></road-skeleton>
|
|
96
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
97
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
98
98
|
</p>
|
|
99
|
-
<p class="text-content">
|
|
100
|
-
<road-skeleton></road-skeleton>
|
|
99
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
100
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
101
101
|
</p>
|
|
102
|
-
<p class="text-content">
|
|
103
|
-
<road-skeleton></road-skeleton>
|
|
102
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
103
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
104
104
|
</p>
|
|
105
105
|
</road-col>
|
|
106
106
|
</road-row>
|
|
107
107
|
</road-grid>
|
|
108
108
|
`;
|
|
109
|
+
|
|
110
|
+
export const Half = () => html`
|
|
111
|
+
<road-grid>
|
|
112
|
+
<road-row>
|
|
113
|
+
<road-col class="col-6">
|
|
114
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
115
|
+
</road-col>
|
|
116
|
+
<road-col class="col-6">
|
|
117
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
118
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
119
|
+
</p>
|
|
120
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
121
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
122
|
+
</p>
|
|
123
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
124
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
125
|
+
</p>
|
|
126
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
127
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
128
|
+
</p>
|
|
129
|
+
</road-col>
|
|
130
|
+
</road-row>
|
|
131
|
+
|
|
132
|
+
<road-row class="mt-16">
|
|
133
|
+
<road-col class="col-6">
|
|
134
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
135
|
+
</road-col>
|
|
136
|
+
<road-col class="col-6">
|
|
137
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
138
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
139
|
+
</p>
|
|
140
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
141
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
142
|
+
</p>
|
|
143
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
144
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
145
|
+
</p>
|
|
146
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
147
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
148
|
+
</p>
|
|
149
|
+
</road-col>
|
|
150
|
+
</road-row>
|
|
151
|
+
|
|
152
|
+
<road-row class="mt-16">
|
|
153
|
+
<road-col class="col-6">
|
|
154
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
155
|
+
</road-col>
|
|
156
|
+
<road-col class="col-6">
|
|
157
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
158
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
159
|
+
</p>
|
|
160
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
161
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
162
|
+
</p>
|
|
163
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
164
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
165
|
+
</p>
|
|
166
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
167
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
168
|
+
</p>
|
|
169
|
+
</road-col>
|
|
170
|
+
</road-row>
|
|
171
|
+
|
|
172
|
+
<road-row class="mt-16">
|
|
173
|
+
<road-col class="col-6">
|
|
174
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
175
|
+
</road-col>
|
|
176
|
+
<road-col class="col-6">
|
|
177
|
+
<p class="h2" style="margin-bottom: 12px">
|
|
178
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
179
|
+
</p>
|
|
180
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
181
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
182
|
+
</p>
|
|
183
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
184
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
185
|
+
</p>
|
|
186
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
187
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
188
|
+
</p>
|
|
189
|
+
</road-col>
|
|
190
|
+
</road-row>
|
|
191
|
+
</road-grid>
|
|
192
|
+
`;
|
|
193
|
+
|
|
194
|
+
export const Grid = () => html`
|
|
195
|
+
<road-grid>
|
|
196
|
+
<road-row>
|
|
197
|
+
<road-col class="col-12 col-sm-6 col-md-3">
|
|
198
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
199
|
+
<p class="h2 mt-16" style="margin-bottom: 12px">
|
|
200
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
201
|
+
</p>
|
|
202
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
203
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
204
|
+
</p>
|
|
205
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
206
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
207
|
+
</p>
|
|
208
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
209
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
210
|
+
</p>
|
|
211
|
+
</road-col>
|
|
212
|
+
|
|
213
|
+
<road-col class="col-12 col-sm-6 col-md-3">
|
|
214
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
215
|
+
<p class="h2 mt-16" style="margin-bottom: 12px">
|
|
216
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
217
|
+
</p>
|
|
218
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
219
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
220
|
+
</p>
|
|
221
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
222
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
223
|
+
</p>
|
|
224
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
225
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
226
|
+
</p>
|
|
227
|
+
</road-col>
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
<road-col class="col-12 col-sm-6 col-md-3">
|
|
232
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
233
|
+
<p class="h2 mt-16" style="margin-bottom: 12px">
|
|
234
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
235
|
+
</p>
|
|
236
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
237
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
238
|
+
</p>
|
|
239
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
240
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
241
|
+
</p>
|
|
242
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
243
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
244
|
+
</p>
|
|
245
|
+
</road-col>
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
<road-col class="col-12 col-sm-6 col-md-3">
|
|
250
|
+
<road-skeleton style="height: 156px"></road-skeleton>
|
|
251
|
+
<p class="h2 mt-16" style="margin-bottom: 12px">
|
|
252
|
+
<road-skeleton style="width: 60%; height: 1.875rem"></road-skeleton>
|
|
253
|
+
</p>
|
|
254
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
255
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
256
|
+
</p>
|
|
257
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
258
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
259
|
+
</p>
|
|
260
|
+
<p class="text-content" style="margin-bottom: 12px">
|
|
261
|
+
<road-skeleton style="height: 1.875rem"></road-skeleton>
|
|
262
|
+
</p>
|
|
263
|
+
</road-col>
|
|
264
|
+
</road-row>
|
|
265
|
+
</road-grid>
|
|
266
|
+
`;
|
|
@@ -34,6 +34,11 @@
|
|
|
34
34
|
height: 3rem;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.spinner.spinner--xl {
|
|
38
|
+
width: 8rem;
|
|
39
|
+
height: 8rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
37
42
|
/* CIRCLE
|
|
38
43
|
-------------------- */
|
|
39
44
|
|
|
@@ -47,6 +52,14 @@
|
|
|
47
52
|
stroke-linecap: round;
|
|
48
53
|
}
|
|
49
54
|
|
|
55
|
+
.spinner-circle.spinner-circle--dark {
|
|
56
|
+
stroke: var(--road-grey-900);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.spinner-circle.spinner-circle--light {
|
|
60
|
+
stroke: var(--road-grey-100);
|
|
61
|
+
}
|
|
62
|
+
|
|
50
63
|
/* ANIMATION
|
|
51
64
|
-------------------- */
|
|
52
65
|
|
|
@@ -5,11 +5,16 @@ export class Spinner {
|
|
|
5
5
|
* The button size.
|
|
6
6
|
*/
|
|
7
7
|
this.size = 'large';
|
|
8
|
+
/**
|
|
9
|
+
* The color spinner.
|
|
10
|
+
*/
|
|
11
|
+
this.color = 'default';
|
|
8
12
|
}
|
|
9
13
|
render() {
|
|
10
14
|
const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
|
|
15
|
+
const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
|
|
11
16
|
return (h("svg", { class: `${sizeClass}`, viewBox: "25 25 50 50" },
|
|
12
|
-
h("circle", { class:
|
|
17
|
+
h("circle", { class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
|
|
13
18
|
}
|
|
14
19
|
static get is() { return "road-spinner"; }
|
|
15
20
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24,8 +29,8 @@ export class Spinner {
|
|
|
24
29
|
"type": "string",
|
|
25
30
|
"mutable": false,
|
|
26
31
|
"complexType": {
|
|
27
|
-
"original": "'small' | 'medium' | 'large'",
|
|
28
|
-
"resolved": "\"large\" | \"medium\" | \"small\" | undefined",
|
|
32
|
+
"original": "'small' | 'medium' | 'large' | 'xl'",
|
|
33
|
+
"resolved": "\"large\" | \"medium\" | \"small\" | \"xl\" | undefined",
|
|
29
34
|
"references": {}
|
|
30
35
|
},
|
|
31
36
|
"required": false,
|
|
@@ -37,6 +42,24 @@ export class Spinner {
|
|
|
37
42
|
"attribute": "size",
|
|
38
43
|
"reflect": true,
|
|
39
44
|
"defaultValue": "'large'"
|
|
45
|
+
},
|
|
46
|
+
"color": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"mutable": false,
|
|
49
|
+
"complexType": {
|
|
50
|
+
"original": "'default' | 'light' | 'dark'",
|
|
51
|
+
"resolved": "\"dark\" | \"default\" | \"light\" | undefined",
|
|
52
|
+
"references": {}
|
|
53
|
+
},
|
|
54
|
+
"required": false,
|
|
55
|
+
"optional": true,
|
|
56
|
+
"docs": {
|
|
57
|
+
"tags": [],
|
|
58
|
+
"text": "The color spinner."
|
|
59
|
+
},
|
|
60
|
+
"attribute": "color",
|
|
61
|
+
"reflect": true,
|
|
62
|
+
"defaultValue": "'default'"
|
|
40
63
|
}
|
|
41
64
|
}; }
|
|
42
65
|
}
|
|
@@ -7,7 +7,13 @@ export default {
|
|
|
7
7
|
component: 'road-spinner',
|
|
8
8
|
argTypes: {
|
|
9
9
|
size: {
|
|
10
|
-
options: ['small', 'medium', 'large'],
|
|
10
|
+
options: ['small', 'medium', 'large', 'xl'],
|
|
11
|
+
control: {
|
|
12
|
+
type: 'select',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
color: {
|
|
16
|
+
options: ['default', 'light', 'dark'],
|
|
11
17
|
control: {
|
|
12
18
|
type: 'select',
|
|
13
19
|
},
|
|
@@ -19,5 +25,5 @@ export default {
|
|
|
19
25
|
};
|
|
20
26
|
|
|
21
27
|
export const Default = (args) => html`
|
|
22
|
-
<road-spinner size="${ifDefined(args.size)}"></road-spinner>
|
|
28
|
+
<road-spinner size="${ifDefined(args.size)}" color="${ifDefined(args.color)}"></road-spinner>
|
|
23
29
|
`;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
:host {
|
|
19
19
|
--max-width: 16rem;
|
|
20
20
|
--z-index: 1;
|
|
21
|
-
--width:
|
|
21
|
+
--width: auto;
|
|
22
22
|
|
|
23
23
|
position: relative;
|
|
24
24
|
display: inline-block;
|
|
@@ -30,22 +30,31 @@
|
|
|
30
30
|
left: 50%;
|
|
31
31
|
z-index: 1;
|
|
32
32
|
width: var(--width);
|
|
33
|
+
min-width: 6rem;
|
|
33
34
|
max-width: var(--max-width);
|
|
34
35
|
padding: 0.5rem;
|
|
35
36
|
font-family: var(--road-font);
|
|
36
|
-
font-size: 0.
|
|
37
|
+
font-size: 0.875rem;
|
|
37
38
|
color: var(--road-grey-900);
|
|
38
39
|
text-align: center;
|
|
39
40
|
pointer-events: none;
|
|
40
41
|
background: var(--road-grey-000);
|
|
41
42
|
border: 1px solid var(--road-grey-300);
|
|
42
43
|
border-radius: 0.25rem;
|
|
43
|
-
box-shadow: 0 0.1875rem 0.375rem rgba(
|
|
44
|
+
box-shadow: 0 0.1875rem 0.375rem rgba(41, 44, 51, 0.24);
|
|
44
45
|
opacity: 0;
|
|
45
46
|
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
46
47
|
transform: translateX(-50%) translateY(-100%);
|
|
47
48
|
}
|
|
48
49
|
|
|
50
|
+
:host([contentalign="left"]) .tooltip {
|
|
51
|
+
text-align: left;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tooltip.tooltip-text-left::after {
|
|
55
|
+
text-align: left;
|
|
56
|
+
}
|
|
57
|
+
|
|
49
58
|
.tooltip-open {
|
|
50
59
|
opacity: 1;
|
|
51
60
|
}
|
|
@@ -74,12 +83,12 @@
|
|
|
74
83
|
:host([data-tooltip-position="left"]) .tooltip {
|
|
75
84
|
top: 50%;
|
|
76
85
|
left: 0%;
|
|
77
|
-
margin-
|
|
86
|
+
margin-right: 0.5rem;
|
|
78
87
|
transform: translateX(-94%) translateY(-55%);
|
|
79
88
|
}
|
|
80
89
|
|
|
81
90
|
:host([data-tooltip-position="left"]) .tooltip-open {
|
|
82
|
-
transform: translateX(-
|
|
91
|
+
transform: translateX(-103%) translateY(-55%);
|
|
83
92
|
}
|
|
84
93
|
|
|
85
94
|
/**
|
|
@@ -89,12 +98,12 @@
|
|
|
89
98
|
:host([data-tooltip-position="bottom"]) .tooltip {
|
|
90
99
|
top: 100%;
|
|
91
100
|
left: 50%;
|
|
92
|
-
margin-top: 0.
|
|
101
|
+
margin-top: 0.5rem;
|
|
93
102
|
transform: translateX(-50%) translateY(-40%);
|
|
94
103
|
}
|
|
95
104
|
|
|
96
105
|
:host([data-tooltip-position="bottom"]) .tooltip-open {
|
|
97
|
-
transform: translateX(-50%) translateY(
|
|
106
|
+
transform: translateX(-50%) translateY(-6%);
|
|
98
107
|
}
|
|
99
108
|
|
|
100
109
|
/**
|
|
@@ -109,5 +118,5 @@
|
|
|
109
118
|
}
|
|
110
119
|
|
|
111
120
|
:host([data-tooltip-position="right"]) .tooltip-open {
|
|
112
|
-
transform: translateX(
|
|
121
|
+
transform: translateX(-4%) translateY(-55%);
|
|
113
122
|
}
|
|
@@ -18,6 +18,10 @@ export class Tooltip {
|
|
|
18
18
|
* The position of the tooltip.
|
|
19
19
|
*/
|
|
20
20
|
this.position = 'top';
|
|
21
|
+
/**
|
|
22
|
+
* The content align of the tooltip.
|
|
23
|
+
*/
|
|
24
|
+
this.contentAlign = 'center';
|
|
21
25
|
/**
|
|
22
26
|
* Indicates whether or not the tooltip is open. You can use this or the open/close methods.
|
|
23
27
|
*/
|
|
@@ -133,6 +137,24 @@ export class Tooltip {
|
|
|
133
137
|
"reflect": false,
|
|
134
138
|
"defaultValue": "'top'"
|
|
135
139
|
},
|
|
140
|
+
"contentAlign": {
|
|
141
|
+
"type": "string",
|
|
142
|
+
"mutable": false,
|
|
143
|
+
"complexType": {
|
|
144
|
+
"original": "| 'center'\n | 'left'",
|
|
145
|
+
"resolved": "\"center\" | \"left\"",
|
|
146
|
+
"references": {}
|
|
147
|
+
},
|
|
148
|
+
"required": false,
|
|
149
|
+
"optional": false,
|
|
150
|
+
"docs": {
|
|
151
|
+
"tags": [],
|
|
152
|
+
"text": "The content align of the tooltip."
|
|
153
|
+
},
|
|
154
|
+
"attribute": "content-align",
|
|
155
|
+
"reflect": false,
|
|
156
|
+
"defaultValue": "'center'"
|
|
157
|
+
},
|
|
136
158
|
"isOpen": {
|
|
137
159
|
"type": "boolean",
|
|
138
160
|
"mutable": true,
|
|
@@ -13,10 +13,9 @@ export const Playground = (args) => html`
|
|
|
13
13
|
tooltip-id="${ifDefined(args['tooltip-id'])}"
|
|
14
14
|
content="${ifDefined(args.content)}"
|
|
15
15
|
position="${ifDefined(args.position)}"
|
|
16
|
-
trigger="${ifDefined(args.trigger)}"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</road-button>
|
|
16
|
+
trigger="${ifDefined(args.trigger)}"
|
|
17
|
+
contentalign="${ifDefined(args.contentAlign)}">
|
|
18
|
+
<road-icon name="alert-info" color="secondary"></road-icon>
|
|
20
19
|
${unsafeHTML(args['tooltip-content'])}
|
|
21
20
|
</road-tooltip>
|
|
22
21
|
`;
|
|
@@ -25,6 +24,7 @@ Playground.args = {
|
|
|
25
24
|
'is-open': null,
|
|
26
25
|
position: 'right',
|
|
27
26
|
trigger: 'hover',
|
|
27
|
+
contentAlign: 'center',
|
|
28
28
|
};
|
|
29
29
|
Playground.argTypes = {
|
|
30
30
|
'is-open': {
|
|
@@ -36,6 +36,12 @@ Playground.argTypes = {
|
|
|
36
36
|
type: 'radio',
|
|
37
37
|
},
|
|
38
38
|
},
|
|
39
|
+
contentAlign: {
|
|
40
|
+
options: ['center', 'left'],
|
|
41
|
+
control: {
|
|
42
|
+
type: 'radio',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
39
45
|
content: {
|
|
40
46
|
control: 'text',
|
|
41
47
|
},
|
|
@@ -93,7 +99,7 @@ Playground.argTypes = {
|
|
|
93
99
|
},
|
|
94
100
|
'--width': {
|
|
95
101
|
table: {
|
|
96
|
-
defaultValue: { summary: '
|
|
102
|
+
defaultValue: { summary: 'auto' },
|
|
97
103
|
},
|
|
98
104
|
control: {
|
|
99
105
|
type: null,
|
package/dist/esm/loader.js
CHANGED
|
@@ -25,7 +25,7 @@ const patchEsm = () => {
|
|
|
25
25
|
const defineCustomElements = (win, options) => {
|
|
26
26
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
27
27
|
return patchEsm().then(() => {
|
|
28
|
-
return bootstrapLazy([["road-badge_11",[[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-duration",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"position":[513],"direction":[513]}]]],["road-modal",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-range",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"]}]]],["road-rating",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar",[[1,"road-avatar"]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner",{"size":[513]}]]],["road-switch",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-toolbar-title",[[1,"road-toolbar-title"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]}]]],["road-input-group",[[1,"road-input-group"]]]], options);
|
|
28
|
+
return bootstrapLazy([["road-badge_11",[[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-duration",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"position":[513],"direction":[513]}]]],["road-modal",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-range",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"]}]]],["road-rating",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar",[[1,"road-avatar"]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["road-switch",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-toolbar-title",[[1,"road-toolbar-title"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]}]]],["road-input-group",[[1,"road-input-group"]]]], options);
|
|
29
29
|
});
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, e as getElement } from './index-0c8a0e04.js';
|
|
2
2
|
|
|
3
|
-
const inputGroupCss = ":host{display:block}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-color:var(--road-grey-
|
|
3
|
+
const inputGroupCss = ":host{display:block}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-color:var(--road-grey-500);border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}::slotted([slot=\"append\"]){margin-left:-0.25rem;border-color:var(--road-grey-500);border-left-width:0}@media (hover: hover){.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700)}}.input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:focus-within ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}.input-group-prepend,.input-group-append{display:-ms-flexbox;display:flex;height:3rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:0.875rem}.input-group-prepend{z-index:1;-ms-flex-order:-1;order:-1}.input-group-prepend~.form-label{left:calc(3rem + 1px)}.input-group-append{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}::slotted(label){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-grey-900);text-align:center;white-space:nowrap;cursor:text;background:var(--road-grey-000);border:1px solid var(--road-grey-500);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-input:not(:first-child)),::slotted(road-select:not(:first-child)){border-radius:0}.input-group-append ::slotted([slot=\"append\"]){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend ::slotted([slot=\"prepend\"]){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"]){border-right:1px solid var(--road-grey-500);border-top-right-radius:0;border-bottom-right-radius:0}.input-group-prepend ::slotted(label){margin-right:calc(-1rem + 1px)}.size-xl .input-group-prepend,.size-xl .input-group-append{height:3.5rem}.size-xl ::slotted(road-button){height:3.5rem}.input-group.is-invalid ::slotted([slot=\"append\"]),.input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-default)}:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-default)}.input-group.is-disabled ::slotted([slot=\"append\"]),.input-group.is-disabled ::slotted([slot=\"prepend\"]){cursor:not-allowed;background:var(--road-grey-200)}.is-disabled ::slotted(road-button){opacity:1}";
|
|
4
4
|
|
|
5
5
|
let InputGroup = class {
|
|
6
6
|
constructor(hostRef) {
|