blip-ds 1.186.2 → 1.187.2
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/blip-ds/bds-autocomplete.entry.js +43 -25
- package/dist/blip-ds/bds-autocomplete.system.entry.js +1 -1
- package/dist/blip-ds/blip-ds.esm.js +1 -1
- package/dist/blip-ds/blip-ds.system.js +1 -1
- package/dist/blip-ds/p-76b42f33.system.js +1 -1
- package/dist/blip-ds/p-7ed56484.system.entry.js +1 -0
- package/dist/blip-ds/p-eea89f94.entry.js +1 -0
- package/dist/cjs/bds-autocomplete.cjs.entry.js +42 -24
- package/dist/cjs/blip-ds.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/autocomplete/autocomplete.css +341 -0
- package/dist/collection/components/autocomplete/autocomplete.js +51 -26
- package/dist/esm/bds-autocomplete.entry.js +43 -25
- package/dist/esm/blip-ds.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/bds-autocomplete.entry.js +1 -1
- package/dist/esm-es5/blip-ds.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/types/components/autocomplete/autocomplete.d.ts +8 -5
- package/package.json +1 -1
- package/dist/blip-ds/p-6d7bcc88.system.entry.js +0 -1
- package/dist/blip-ds/p-8366e222.entry.js +0 -1
|
@@ -21,6 +21,347 @@
|
|
|
21
21
|
/** Animations */
|
|
22
22
|
/** Aligns */
|
|
23
23
|
/** Scoll Bar */
|
|
24
|
+
:host {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
position: relative;
|
|
28
|
+
flex: 1;
|
|
29
|
+
width: 100%;
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
max-height: 100%;
|
|
32
|
+
}
|
|
33
|
+
:host input,
|
|
34
|
+
:host textarea {
|
|
35
|
+
box-shadow: inherit;
|
|
36
|
+
}
|
|
37
|
+
:host input::placeholder,
|
|
38
|
+
:host textarea::placeholder {
|
|
39
|
+
color: #b9cbd3;
|
|
40
|
+
opacity: 1;
|
|
41
|
+
}
|
|
42
|
+
:host input::-webkit-input-placeholder,
|
|
43
|
+
:host textarea::-webkit-input-placeholder {
|
|
44
|
+
color: #b9cbd3;
|
|
45
|
+
opacity: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.input {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: row;
|
|
51
|
+
align-items: center;
|
|
52
|
+
padding: 8px 4px 9px 12px;
|
|
53
|
+
flex: 1;
|
|
54
|
+
width: 100%;
|
|
55
|
+
max-width: 100%;
|
|
56
|
+
max-height: 100%;
|
|
57
|
+
background: #ffffff;
|
|
58
|
+
}
|
|
59
|
+
.input--state-primary {
|
|
60
|
+
border: 1px solid #d2dfe6;
|
|
61
|
+
box-sizing: border-box;
|
|
62
|
+
border-radius: 8px;
|
|
63
|
+
}
|
|
64
|
+
.input--state-primary:hover {
|
|
65
|
+
border: 1px solid #3f7de8;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
border-radius: 8px;
|
|
68
|
+
}
|
|
69
|
+
.input--state-primary.input--pressed {
|
|
70
|
+
border: 1px solid #3f7de8;
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
border-radius: 8px;
|
|
73
|
+
-webkit-box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
|
|
74
|
+
box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
|
|
75
|
+
}
|
|
76
|
+
.input--state-primary .input__icon {
|
|
77
|
+
color: #3f7de8;
|
|
78
|
+
background-color: #e8f2ff;
|
|
79
|
+
}
|
|
80
|
+
.input--state-primary .input__container__label {
|
|
81
|
+
color: #8ca0b3;
|
|
82
|
+
}
|
|
83
|
+
.input--state-primary .input__container__label--pressed {
|
|
84
|
+
color: #3f7de8;
|
|
85
|
+
}
|
|
86
|
+
.input--state-primary .input__container__text {
|
|
87
|
+
caret-color: #3f7de8;
|
|
88
|
+
color: #202c44;
|
|
89
|
+
}
|
|
90
|
+
.input--state-danger {
|
|
91
|
+
border: 1px solid #ff4c4c;
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
border-radius: 8px;
|
|
94
|
+
}
|
|
95
|
+
.input--state-danger:hover {
|
|
96
|
+
border: 1px solid #ff4c4c;
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
border-radius: 8px;
|
|
99
|
+
}
|
|
100
|
+
.input--state-danger.input--pressed {
|
|
101
|
+
border: 1px solid #ff4c4c;
|
|
102
|
+
box-sizing: border-box;
|
|
103
|
+
border-radius: 8px;
|
|
104
|
+
-webkit-box-shadow: 0 0 0 2px #ffa5a5;
|
|
105
|
+
box-shadow: 0 0 0 2px #ffa5a5;
|
|
106
|
+
}
|
|
107
|
+
.input--state-danger .input__icon {
|
|
108
|
+
color: #ff4c4c;
|
|
109
|
+
background-color: #ffa5a5;
|
|
110
|
+
}
|
|
111
|
+
.input--state-danger .input__container__label {
|
|
112
|
+
color: #8ca0b3;
|
|
113
|
+
}
|
|
114
|
+
.input--state-danger .input__container__label--pressed {
|
|
115
|
+
color: #ff4c4c;
|
|
116
|
+
}
|
|
117
|
+
.input--state-danger .input__container__text {
|
|
118
|
+
caret-color: #ff4c4c;
|
|
119
|
+
color: #202c44;
|
|
120
|
+
}
|
|
121
|
+
.input--state-disabled {
|
|
122
|
+
cursor: not-allowed;
|
|
123
|
+
border: 1px solid #e7edf4;
|
|
124
|
+
box-sizing: border-box;
|
|
125
|
+
border-radius: 8px;
|
|
126
|
+
background: #f3f6fa;
|
|
127
|
+
}
|
|
128
|
+
.input--state-disabled:hover {
|
|
129
|
+
border: 1px solid #b9cbd3;
|
|
130
|
+
box-sizing: border-box;
|
|
131
|
+
border-radius: 8px;
|
|
132
|
+
border: 1px solid #e7edf4;
|
|
133
|
+
box-sizing: border-box;
|
|
134
|
+
border-radius: 8px;
|
|
135
|
+
}
|
|
136
|
+
.input--state-disabled.input--pressed {
|
|
137
|
+
border: 1px solid #b9cbd3;
|
|
138
|
+
box-sizing: border-box;
|
|
139
|
+
border-radius: 8px;
|
|
140
|
+
-webkit-box-shadow: 0 0 0 2px #e7edf4;
|
|
141
|
+
box-shadow: 0 0 0 2px #e7edf4;
|
|
142
|
+
}
|
|
143
|
+
.input--state-disabled .input__icon {
|
|
144
|
+
color: #b9cbd3;
|
|
145
|
+
background-color: #f8fbfb;
|
|
146
|
+
}
|
|
147
|
+
.input--state-disabled .input__container__label {
|
|
148
|
+
color: #b9cbd3;
|
|
149
|
+
}
|
|
150
|
+
.input--state-disabled .input__container__label--pressed {
|
|
151
|
+
color: #b9cbd3;
|
|
152
|
+
}
|
|
153
|
+
.input--state-disabled .input__container__text {
|
|
154
|
+
caret-color: #b9cbd3;
|
|
155
|
+
color: #b9cbd3;
|
|
156
|
+
}
|
|
157
|
+
.input--label {
|
|
158
|
+
padding: 7px 4px 8px 12px;
|
|
159
|
+
}
|
|
160
|
+
.input__icon {
|
|
161
|
+
cursor: inherit;
|
|
162
|
+
display: flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
border-radius: 8px;
|
|
166
|
+
margin-right: 8px;
|
|
167
|
+
padding: 2.5px;
|
|
168
|
+
}
|
|
169
|
+
.input__icon--large {
|
|
170
|
+
padding: 4px;
|
|
171
|
+
}
|
|
172
|
+
.input__container {
|
|
173
|
+
display: flex;
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
width: 100%;
|
|
177
|
+
}
|
|
178
|
+
.input__container__wrapper {
|
|
179
|
+
display: flex;
|
|
180
|
+
flex-wrap: wrap;
|
|
181
|
+
}
|
|
182
|
+
.input__container__wrapper__chips {
|
|
183
|
+
display: inline;
|
|
184
|
+
max-height: 100px;
|
|
185
|
+
overflow: auto;
|
|
186
|
+
}
|
|
187
|
+
.input__container__wrapper__chips::-webkit-scrollbar {
|
|
188
|
+
width: 16px;
|
|
189
|
+
background-color: transparent;
|
|
190
|
+
}
|
|
191
|
+
.input__container__wrapper__chips::-webkit-scrollbar-thumb {
|
|
192
|
+
border-radius: 10px;
|
|
193
|
+
border: 4px solid transparent;
|
|
194
|
+
border-radius: 10px;
|
|
195
|
+
background-clip: content-box;
|
|
196
|
+
background-color: #b9cbd3;
|
|
197
|
+
}
|
|
198
|
+
.input__container__label {
|
|
199
|
+
display: flex;
|
|
200
|
+
align-items: center;
|
|
201
|
+
}
|
|
202
|
+
.input__container__text {
|
|
203
|
+
display: inline-block;
|
|
204
|
+
margin: 0;
|
|
205
|
+
border: 0;
|
|
206
|
+
padding: 0;
|
|
207
|
+
width: auto;
|
|
208
|
+
vertical-align: middle;
|
|
209
|
+
white-space: normal;
|
|
210
|
+
line-height: inherit;
|
|
211
|
+
background: none;
|
|
212
|
+
/* Browsers have different default form fonts */
|
|
213
|
+
color: inherit;
|
|
214
|
+
font-size: inherit;
|
|
215
|
+
font-family: inherit;
|
|
216
|
+
-webkit-box-sizing: content-box;
|
|
217
|
+
-moz-box-sizing: content-box;
|
|
218
|
+
box-sizing: content-box;
|
|
219
|
+
/* Make webkit render the search input like a normal text field */
|
|
220
|
+
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
|
|
221
|
+
/* Fix IE7 display bug */
|
|
222
|
+
font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
|
|
223
|
+
font-size: 0.875rem;
|
|
224
|
+
line-height: 150%;
|
|
225
|
+
resize: none;
|
|
226
|
+
cursor: inherit;
|
|
227
|
+
}
|
|
228
|
+
.input__container__text:focus {
|
|
229
|
+
outline: 0;
|
|
230
|
+
}
|
|
231
|
+
.input__container__text::-webkit-file-upload-button {
|
|
232
|
+
padding: 0;
|
|
233
|
+
border: 0;
|
|
234
|
+
background: none;
|
|
235
|
+
}
|
|
236
|
+
.input__container__text:focus {
|
|
237
|
+
outline: 0;
|
|
238
|
+
}
|
|
239
|
+
.input__container__text[type=checkbox], .input__container__text[type=radio] {
|
|
240
|
+
width: 13px;
|
|
241
|
+
height: 13px;
|
|
242
|
+
}
|
|
243
|
+
.input__container__text[type=search] {
|
|
244
|
+
-webkit-appearance: textfield;
|
|
245
|
+
-webkit-box-sizing: content-box;
|
|
246
|
+
}
|
|
247
|
+
::-webkit-search-decoration {
|
|
248
|
+
display: none;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.input__container__text[type=reset], .input__container__text[type=button], .input__container__text[type=submit] {
|
|
252
|
+
overflow: visible;
|
|
253
|
+
}
|
|
254
|
+
.input__container__text::-webkit-scrollbar {
|
|
255
|
+
width: 16px;
|
|
256
|
+
background-color: transparent;
|
|
257
|
+
}
|
|
258
|
+
.input__container__text::-webkit-scrollbar-thumb {
|
|
259
|
+
border-radius: 10px;
|
|
260
|
+
border: 4px solid transparent;
|
|
261
|
+
border-radius: 10px;
|
|
262
|
+
background-clip: content-box;
|
|
263
|
+
background-color: #b9cbd3;
|
|
264
|
+
}
|
|
265
|
+
.input__message {
|
|
266
|
+
display: flex;
|
|
267
|
+
align-items: baseline;
|
|
268
|
+
height: 20px;
|
|
269
|
+
margin: 3.7px 2.5px;
|
|
270
|
+
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
271
|
+
color: #8ca0b3;
|
|
272
|
+
word-break: break-word;
|
|
273
|
+
height: auto;
|
|
274
|
+
min-height: 20px;
|
|
275
|
+
}
|
|
276
|
+
.input__message bds-typo {
|
|
277
|
+
margin-top: 0px;
|
|
278
|
+
align-self: self-start;
|
|
279
|
+
}
|
|
280
|
+
.input__message__icon {
|
|
281
|
+
display: flex;
|
|
282
|
+
padding-right: 4px;
|
|
283
|
+
margin-top: 0px;
|
|
284
|
+
padding-top: 2px;
|
|
285
|
+
}
|
|
286
|
+
.input__message--danger {
|
|
287
|
+
color: #ff4c4c;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.input__container {
|
|
291
|
+
display: flex;
|
|
292
|
+
flex-direction: column;
|
|
293
|
+
justify-content: center;
|
|
294
|
+
width: 100%;
|
|
295
|
+
}
|
|
296
|
+
.input__container__label {
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.input__container__wrapper {
|
|
302
|
+
display: flex;
|
|
303
|
+
flex-wrap: nowrap;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.input__container__text {
|
|
307
|
+
display: inline-block;
|
|
308
|
+
margin: 0;
|
|
309
|
+
border: 0;
|
|
310
|
+
padding: 0;
|
|
311
|
+
width: auto;
|
|
312
|
+
vertical-align: middle;
|
|
313
|
+
white-space: normal;
|
|
314
|
+
line-height: inherit;
|
|
315
|
+
background: none;
|
|
316
|
+
/* Browsers have different default form fonts */
|
|
317
|
+
color: inherit;
|
|
318
|
+
font-size: inherit;
|
|
319
|
+
font-family: inherit;
|
|
320
|
+
-webkit-box-sizing: content-box;
|
|
321
|
+
-moz-box-sizing: content-box;
|
|
322
|
+
box-sizing: content-box;
|
|
323
|
+
/* Make webkit render the search input like a normal text field */
|
|
324
|
+
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
|
|
325
|
+
/* Fix IE7 display bug */
|
|
326
|
+
font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
|
|
327
|
+
font-size: 0.875rem;
|
|
328
|
+
line-height: 150%;
|
|
329
|
+
width: 100%;
|
|
330
|
+
resize: none;
|
|
331
|
+
cursor: inherit;
|
|
332
|
+
}
|
|
333
|
+
.input__container__text:focus {
|
|
334
|
+
outline: 0;
|
|
335
|
+
}
|
|
336
|
+
.input__container__text::-webkit-file-upload-button {
|
|
337
|
+
padding: 0;
|
|
338
|
+
border: 0;
|
|
339
|
+
background: none;
|
|
340
|
+
}
|
|
341
|
+
.input__container__text:focus {
|
|
342
|
+
outline: 0;
|
|
343
|
+
}
|
|
344
|
+
.input__container__text[type=checkbox], .input__container__text[type=radio] {
|
|
345
|
+
width: 13px;
|
|
346
|
+
height: 13px;
|
|
347
|
+
}
|
|
348
|
+
.input__container__text[type=search] {
|
|
349
|
+
-webkit-appearance: textfield;
|
|
350
|
+
-webkit-box-sizing: content-box;
|
|
351
|
+
}
|
|
352
|
+
::-webkit-search-decoration {
|
|
353
|
+
display: none;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.input__container__text[type=reset], .input__container__text[type=button], .input__container__text[type=submit] {
|
|
357
|
+
overflow: visible;
|
|
358
|
+
}
|
|
359
|
+
.input__container__text__chips {
|
|
360
|
+
width: auto;
|
|
361
|
+
min-width: 216px;
|
|
362
|
+
max-width: 216px;
|
|
363
|
+
}
|
|
364
|
+
|
|
24
365
|
:host {
|
|
25
366
|
display: block;
|
|
26
367
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import { Component, h, State, Prop, Event, Watch, Element, Listen } from '@stencil/core';
|
|
1
|
+
import { Component, h, Host, State, Prop, Event, Watch, Element, Listen } from '@stencil/core';
|
|
2
2
|
export class BdsAutocomplete {
|
|
3
3
|
constructor() {
|
|
4
|
+
/**
|
|
5
|
+
* Conditions the element to say whether it is pressed or not, to add styles.
|
|
6
|
+
*/
|
|
7
|
+
this.isPressed = false;
|
|
4
8
|
this.isOpen = false;
|
|
5
9
|
this.text = '';
|
|
6
10
|
this.isFocused = false;
|
|
@@ -40,18 +44,9 @@ export class BdsAutocomplete {
|
|
|
40
44
|
* Data test is the prop to specifically test the component action object.
|
|
41
45
|
*/
|
|
42
46
|
this.dataTest = null;
|
|
43
|
-
this.onInput = (ev) => {
|
|
44
|
-
const input = ev.target;
|
|
45
|
-
if (input) {
|
|
46
|
-
this.value = input.value || '';
|
|
47
|
-
}
|
|
48
|
-
this.bdsInput.emit(ev);
|
|
49
|
-
};
|
|
50
|
-
this.refNativeInput = (el) => {
|
|
51
|
-
this.nativeInput = el;
|
|
52
|
-
};
|
|
53
47
|
this.onFocus = () => {
|
|
54
48
|
this.isFocused = true;
|
|
49
|
+
this.isPressed = true;
|
|
55
50
|
this.bdsFocus.emit();
|
|
56
51
|
};
|
|
57
52
|
this.onFocusout = () => {
|
|
@@ -61,11 +56,19 @@ export class BdsAutocomplete {
|
|
|
61
56
|
};
|
|
62
57
|
this.onBlur = () => {
|
|
63
58
|
this.bdsBlur.emit();
|
|
59
|
+
this.isPressed = false;
|
|
64
60
|
if (!this.isOpen) {
|
|
65
61
|
this.isFocused = false;
|
|
66
62
|
this.nativeInput.value = this.getText();
|
|
67
63
|
}
|
|
68
64
|
};
|
|
65
|
+
this.onClickWrapper = () => {
|
|
66
|
+
this.onFocus();
|
|
67
|
+
this.toggle();
|
|
68
|
+
if (this.nativeInput) {
|
|
69
|
+
this.nativeInput.focus();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
69
72
|
this.toggle = () => {
|
|
70
73
|
if (!this.disabled) {
|
|
71
74
|
this.isOpen = !this.isOpen;
|
|
@@ -93,17 +96,6 @@ export class BdsAutocomplete {
|
|
|
93
96
|
this.value = value;
|
|
94
97
|
this.toggle();
|
|
95
98
|
};
|
|
96
|
-
this.setFocusWrapper = () => {
|
|
97
|
-
if (!this.disabled && this.nativeInput) {
|
|
98
|
-
this.nativeInput.setFocus();
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
this.removeFocusWrapper = (event) => {
|
|
102
|
-
const isInputElement = event.relatedTarget.localName === 'bds-input';
|
|
103
|
-
if (this.nativeInput && !isInputElement) {
|
|
104
|
-
this.nativeInput.removeFocus();
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
99
|
this.keyPressWrapper = (event) => {
|
|
108
100
|
var _a, _b;
|
|
109
101
|
this.isOpen = true;
|
|
@@ -145,7 +137,12 @@ export class BdsAutocomplete {
|
|
|
145
137
|
await this.resetFilterOptions();
|
|
146
138
|
}
|
|
147
139
|
};
|
|
148
|
-
this.changedInputValue = async () => {
|
|
140
|
+
this.changedInputValue = async (ev) => {
|
|
141
|
+
const input = ev.target;
|
|
142
|
+
if (input) {
|
|
143
|
+
this.value = input.value || '';
|
|
144
|
+
}
|
|
145
|
+
this.bdsInput.emit(ev);
|
|
149
146
|
this.bdsChange.emit({ value: this.nativeInput.value });
|
|
150
147
|
if (this.nativeInput.value) {
|
|
151
148
|
await this.filterOptions(this.nativeInput.value);
|
|
@@ -169,6 +166,7 @@ export class BdsAutocomplete {
|
|
|
169
166
|
this.bdsSelectedChange.emit(this.selected);
|
|
170
167
|
}
|
|
171
168
|
valueChanged() {
|
|
169
|
+
this.bdsChange.emit({ value: this.value == null ? this.value : this.value.toString() });
|
|
172
170
|
for (const option of this.childOptions) {
|
|
173
171
|
option.selected = this.value === option.value;
|
|
174
172
|
}
|
|
@@ -248,11 +246,37 @@ export class BdsAutocomplete {
|
|
|
248
246
|
var _a;
|
|
249
247
|
return (_a = this.childOptionSelected) === null || _a === void 0 ? void 0 : _a.value;
|
|
250
248
|
}
|
|
249
|
+
renderIcon() {
|
|
250
|
+
return (this.icon && (h("div", { class: {
|
|
251
|
+
input__icon: true,
|
|
252
|
+
'input__icon--large': !!this.label,
|
|
253
|
+
} },
|
|
254
|
+
h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
|
|
255
|
+
}
|
|
256
|
+
renderLabel() {
|
|
257
|
+
return (this.label && (h("label", { class: {
|
|
258
|
+
input__container__label: true,
|
|
259
|
+
'input__container__label--pressed': this.isPressed && !this.disabled,
|
|
260
|
+
} },
|
|
261
|
+
h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
|
|
262
|
+
}
|
|
251
263
|
render() {
|
|
252
264
|
const iconArrow = this.isOpen ? 'arrow-up' : 'arrow-down';
|
|
253
|
-
return (h(
|
|
254
|
-
h("
|
|
255
|
-
|
|
265
|
+
return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
|
|
266
|
+
h("div", { class: {
|
|
267
|
+
input: true,
|
|
268
|
+
select: true,
|
|
269
|
+
'input--state-primary': !this.danger,
|
|
270
|
+
'input--state-danger': this.danger,
|
|
271
|
+
'input--state-disabled': this.disabled,
|
|
272
|
+
'input--label': !!this.label,
|
|
273
|
+
'input--pressed': this.isPressed,
|
|
274
|
+
}, onClick: this.onClickWrapper, onKeyDown: this.keyPressWrapper },
|
|
275
|
+
this.renderIcon(),
|
|
276
|
+
h("div", { class: "input__container", tabindex: "0", onFocusout: this.onFocusout, onKeyDown: this.keyPressWrapper },
|
|
277
|
+
this.renderLabel(),
|
|
278
|
+
h("input", { class: { input__container__text: true }, ref: (input) => (this.nativeInput = input), disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.changedInputValue, placeholder: this.placeholder, type: "text", value: this.text, "data-test": this.dataTest })),
|
|
279
|
+
h("div", { class: "select__icon" },
|
|
256
280
|
h("bds-icon", { size: "small", name: "error", theme: "solid", onClick: this.cleanInputSelection, class: {
|
|
257
281
|
'icon-hidden': (this.clearIconOnFocus && (!this.isFocused || !this.isOpen)) || !this.value,
|
|
258
282
|
} }),
|
|
@@ -499,6 +523,7 @@ export class BdsAutocomplete {
|
|
|
499
523
|
}
|
|
500
524
|
}; }
|
|
501
525
|
static get states() { return {
|
|
526
|
+
"isPressed": {},
|
|
502
527
|
"isOpen": {},
|
|
503
528
|
"text": {},
|
|
504
529
|
"internalOptions": {},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, g as getElement } from './index-822aa79c.js';
|
|
1
|
+
import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-822aa79c.js';
|
|
2
2
|
|
|
3
|
-
const autocompleteCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__icon bds-icon{margin-left:10px}.select .icon-hidden{visibility:hidden}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
|
|
3
|
+
const autocompleteCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}:host input,:host textarea{-webkit-box-shadow:inherit;box-shadow:inherit}:host input::-webkit-input-placeholder,:host textarea::-webkit-input-placeholder{color:#b9cbd3;opacity:1}:host input::-moz-placeholder,:host textarea::-moz-placeholder{color:#b9cbd3;opacity:1}:host input:-ms-input-placeholder,:host textarea:-ms-input-placeholder{color:#b9cbd3;opacity:1}:host input::-ms-input-placeholder,:host textarea::-ms-input-placeholder{color:#b9cbd3;opacity:1}:host input::placeholder,:host textarea::placeholder{color:#b9cbd3;opacity:1}:host input::-webkit-input-placeholder,:host textarea::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4);box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4)}.input--state-primary .input__icon{color:#3f7de8;background-color:#e8f2ff}.input--state-primary .input__container__label{color:#8ca0b3}.input--state-primary .input__container__label--pressed{color:#3f7de8}.input--state-primary .input__container__text{caret-color:#3f7de8;color:#202c44}.input--state-danger{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #ffa5a5;box-shadow:0 0 0 2px #ffa5a5}.input--state-danger .input__icon{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger .input__container__label{color:#8ca0b3}.input--state-danger .input__container__label--pressed{color:#ff4c4c}.input--state-danger .input__container__text{caret-color:#ff4c4c;color:#202c44}.input--state-disabled{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #e7edf4;box-shadow:0 0 0 2px #e7edf4}.input--state-disabled .input__icon{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled .input__container__label{color:#b9cbd3}.input--state-disabled .input__container__label--pressed{color:#b9cbd3}.input--state-disabled .input__container__text{caret-color:#b9cbd3;color:#b9cbd3}.input--label{padding:7px 4px 8px 12px}.input__icon{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;width:100%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text__chips{width:auto;min-width:216px;max-width:216px}:host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__icon bds-icon{margin-left:10px}.select .icon-hidden{visibility:hidden}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
|
|
4
4
|
|
|
5
5
|
const BdsAutocomplete = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -11,6 +11,10 @@ const BdsAutocomplete = class {
|
|
|
11
11
|
this.bdsCancel = createEvent(this, "bdsCancel", 7);
|
|
12
12
|
this.bdsFocus = createEvent(this, "bdsFocus", 7);
|
|
13
13
|
this.bdsBlur = createEvent(this, "bdsBlur", 7);
|
|
14
|
+
/**
|
|
15
|
+
* Conditions the element to say whether it is pressed or not, to add styles.
|
|
16
|
+
*/
|
|
17
|
+
this.isPressed = false;
|
|
14
18
|
this.isOpen = false;
|
|
15
19
|
this.text = '';
|
|
16
20
|
this.isFocused = false;
|
|
@@ -50,18 +54,9 @@ const BdsAutocomplete = class {
|
|
|
50
54
|
* Data test is the prop to specifically test the component action object.
|
|
51
55
|
*/
|
|
52
56
|
this.dataTest = null;
|
|
53
|
-
this.onInput = (ev) => {
|
|
54
|
-
const input = ev.target;
|
|
55
|
-
if (input) {
|
|
56
|
-
this.value = input.value || '';
|
|
57
|
-
}
|
|
58
|
-
this.bdsInput.emit(ev);
|
|
59
|
-
};
|
|
60
|
-
this.refNativeInput = (el) => {
|
|
61
|
-
this.nativeInput = el;
|
|
62
|
-
};
|
|
63
57
|
this.onFocus = () => {
|
|
64
58
|
this.isFocused = true;
|
|
59
|
+
this.isPressed = true;
|
|
65
60
|
this.bdsFocus.emit();
|
|
66
61
|
};
|
|
67
62
|
this.onFocusout = () => {
|
|
@@ -71,11 +66,19 @@ const BdsAutocomplete = class {
|
|
|
71
66
|
};
|
|
72
67
|
this.onBlur = () => {
|
|
73
68
|
this.bdsBlur.emit();
|
|
69
|
+
this.isPressed = false;
|
|
74
70
|
if (!this.isOpen) {
|
|
75
71
|
this.isFocused = false;
|
|
76
72
|
this.nativeInput.value = this.getText();
|
|
77
73
|
}
|
|
78
74
|
};
|
|
75
|
+
this.onClickWrapper = () => {
|
|
76
|
+
this.onFocus();
|
|
77
|
+
this.toggle();
|
|
78
|
+
if (this.nativeInput) {
|
|
79
|
+
this.nativeInput.focus();
|
|
80
|
+
}
|
|
81
|
+
};
|
|
79
82
|
this.toggle = () => {
|
|
80
83
|
if (!this.disabled) {
|
|
81
84
|
this.isOpen = !this.isOpen;
|
|
@@ -103,17 +106,6 @@ const BdsAutocomplete = class {
|
|
|
103
106
|
this.value = value;
|
|
104
107
|
this.toggle();
|
|
105
108
|
};
|
|
106
|
-
this.setFocusWrapper = () => {
|
|
107
|
-
if (!this.disabled && this.nativeInput) {
|
|
108
|
-
this.nativeInput.setFocus();
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
this.removeFocusWrapper = (event) => {
|
|
112
|
-
const isInputElement = event.relatedTarget.localName === 'bds-input';
|
|
113
|
-
if (this.nativeInput && !isInputElement) {
|
|
114
|
-
this.nativeInput.removeFocus();
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
109
|
this.keyPressWrapper = (event) => {
|
|
118
110
|
var _a, _b;
|
|
119
111
|
this.isOpen = true;
|
|
@@ -155,7 +147,12 @@ const BdsAutocomplete = class {
|
|
|
155
147
|
await this.resetFilterOptions();
|
|
156
148
|
}
|
|
157
149
|
};
|
|
158
|
-
this.changedInputValue = async () => {
|
|
150
|
+
this.changedInputValue = async (ev) => {
|
|
151
|
+
const input = ev.target;
|
|
152
|
+
if (input) {
|
|
153
|
+
this.value = input.value || '';
|
|
154
|
+
}
|
|
155
|
+
this.bdsInput.emit(ev);
|
|
159
156
|
this.bdsChange.emit({ value: this.nativeInput.value });
|
|
160
157
|
if (this.nativeInput.value) {
|
|
161
158
|
await this.filterOptions(this.nativeInput.value);
|
|
@@ -179,6 +176,7 @@ const BdsAutocomplete = class {
|
|
|
179
176
|
this.bdsSelectedChange.emit(this.selected);
|
|
180
177
|
}
|
|
181
178
|
valueChanged() {
|
|
179
|
+
this.bdsChange.emit({ value: this.value == null ? this.value : this.value.toString() });
|
|
182
180
|
for (const option of this.childOptions) {
|
|
183
181
|
option.selected = this.value === option.value;
|
|
184
182
|
}
|
|
@@ -258,9 +256,29 @@ const BdsAutocomplete = class {
|
|
|
258
256
|
var _a;
|
|
259
257
|
return (_a = this.childOptionSelected) === null || _a === void 0 ? void 0 : _a.value;
|
|
260
258
|
}
|
|
259
|
+
renderIcon() {
|
|
260
|
+
return (this.icon && (h("div", { class: {
|
|
261
|
+
input__icon: true,
|
|
262
|
+
'input__icon--large': !!this.label,
|
|
263
|
+
} }, h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
|
|
264
|
+
}
|
|
265
|
+
renderLabel() {
|
|
266
|
+
return (this.label && (h("label", { class: {
|
|
267
|
+
input__container__label: true,
|
|
268
|
+
'input__container__label--pressed': this.isPressed && !this.disabled,
|
|
269
|
+
} }, h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
|
|
270
|
+
}
|
|
261
271
|
render() {
|
|
262
272
|
const iconArrow = this.isOpen ? 'arrow-up' : 'arrow-down';
|
|
263
|
-
return (h(
|
|
273
|
+
return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, h("div", { class: {
|
|
274
|
+
input: true,
|
|
275
|
+
select: true,
|
|
276
|
+
'input--state-primary': !this.danger,
|
|
277
|
+
'input--state-danger': this.danger,
|
|
278
|
+
'input--state-disabled': this.disabled,
|
|
279
|
+
'input--label': !!this.label,
|
|
280
|
+
'input--pressed': this.isPressed,
|
|
281
|
+
}, onClick: this.onClickWrapper, onKeyDown: this.keyPressWrapper }, this.renderIcon(), h("div", { class: "input__container", tabindex: "0", onFocusout: this.onFocusout, onKeyDown: this.keyPressWrapper }, this.renderLabel(), h("input", { class: { input__container__text: true }, ref: (input) => (this.nativeInput = input), disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.changedInputValue, placeholder: this.placeholder, type: "text", value: this.text, "data-test": this.dataTest })), h("div", { class: "select__icon" }, h("bds-icon", { size: "small", name: "error", theme: "solid", onClick: this.cleanInputSelection, class: {
|
|
264
282
|
'icon-hidden': (this.clearIconOnFocus && (!this.isFocused || !this.isOpen)) || !this.value,
|
|
265
283
|
} }), h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), h("div", { class: {
|
|
266
284
|
select__options: true,
|