@otto-de/b2b-core-components 1.28.1 → 1.29.1

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.
Files changed (79) hide show
  1. package/dist/b2b-core-components/b2b-core-components.esm.js +1 -1
  2. package/dist/b2b-core-components/p-6731435f.entry.js +1 -0
  3. package/dist/b2b-core-components/p-e59239ce.entry.js +1 -0
  4. package/dist/cjs/b2b-core-components.cjs.js +1 -1
  5. package/dist/cjs/b2b-date-picker.cjs.entry.js +26 -2
  6. package/dist/cjs/b2b-dropdown.cjs.entry.js +27 -2
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/alert/alert.css +2 -2
  9. package/dist/collection/components/anchor/anchor.css +2 -2
  10. package/dist/collection/components/background-box/background-box.css +2 -2
  11. package/dist/collection/components/breadcrumb/breadcrumb.css +2 -2
  12. package/dist/collection/components/button/button.css +2 -2
  13. package/dist/collection/components/card/card.css +2 -2
  14. package/dist/collection/components/checkbox/checkbox.css +2 -2
  15. package/dist/collection/components/checkbox-group/checkbox-group.css +2 -2
  16. package/dist/collection/components/chip/chip.css +2 -2
  17. package/dist/collection/components/date-picker/date-picker-days-header.css +2 -2
  18. package/dist/collection/components/date-picker/date-picker-days.css +2 -2
  19. package/dist/collection/components/date-picker/date-picker-header.css +2 -2
  20. package/dist/collection/components/date-picker/date-picker-months.css +2 -2
  21. package/dist/collection/components/date-picker/date-picker-years.css +2 -2
  22. package/dist/collection/components/date-picker/date-picker.css +26 -23
  23. package/dist/collection/components/date-picker/date-picker.js +54 -0
  24. package/dist/collection/components/dropdown/dropdown.css +2 -2
  25. package/dist/collection/components/dropdown/dropdown.e2e.js +30 -0
  26. package/dist/collection/components/dropdown/dropdown.js +27 -2
  27. package/dist/collection/components/flyout-menu/flyout-menu-option.css +2 -2
  28. package/dist/collection/components/flyout-menu/flyout-menu.css +2 -2
  29. package/dist/collection/components/headline/headline.css +2 -2
  30. package/dist/collection/components/icon/icon.css +2 -2
  31. package/dist/collection/components/icon-100/icon-100.css +2 -2
  32. package/dist/collection/components/icon-50/icon-50.css +2 -2
  33. package/dist/collection/components/input/input.css +2 -2
  34. package/dist/collection/components/input-group/input-group.css +2 -2
  35. package/dist/collection/components/input-list/input-list.css +2 -2
  36. package/dist/collection/components/label/label.css +2 -2
  37. package/dist/collection/components/modal/modal.css +2 -2
  38. package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css +2 -2
  39. package/dist/collection/components/pagination/pagination.css +2 -2
  40. package/dist/collection/components/paragraph/paragraph.css +2 -2
  41. package/dist/collection/components/progress-bar/progress-bar.css +2 -2
  42. package/dist/collection/components/radio/radio.css +2 -2
  43. package/dist/collection/components/radio-group/radio-group.css +2 -2
  44. package/dist/collection/components/required-separator/required-separator.css +2 -2
  45. package/dist/collection/components/rounded-icon/rounded-icon.css +2 -2
  46. package/dist/collection/components/scrollable-container/scrollable-container.css +2 -2
  47. package/dist/collection/components/separator/separator.css +2 -2
  48. package/dist/collection/components/shimmer/shimmer.css +2 -2
  49. package/dist/collection/components/snackbar/snackbar.css +2 -2
  50. package/dist/collection/components/spinner/spinner.css +2 -2
  51. package/dist/collection/components/tab/tab.css +2 -2
  52. package/dist/collection/components/tab-panel/tab-panel.css +2 -2
  53. package/dist/collection/components/table/table-cell/table-cell.css +2 -2
  54. package/dist/collection/components/table/table-header/table-header.css +2 -2
  55. package/dist/collection/components/table/table-row/table-row.css +2 -2
  56. package/dist/collection/components/table/table-rowgroup/table-rowgroup.css +2 -2
  57. package/dist/collection/components/table/table.css +2 -2
  58. package/dist/collection/components/textarea/textarea.css +2 -2
  59. package/dist/collection/components/toggle-button/toggle-button.css +2 -2
  60. package/dist/collection/components/toggle-chip/toggle-chip.css +2 -2
  61. package/dist/collection/components/toggle-group/toggle-group.css +2 -2
  62. package/dist/collection/components/toggle-switch/toggle-switch.css +2 -2
  63. package/dist/collection/components/tooltip/tooltip.css +2 -2
  64. package/dist/collection/components/wizard/wizard.css +2 -2
  65. package/dist/collection/components/wizard-icon/wizard-icon.css +2 -2
  66. package/dist/components/b2b-date-picker.js +32 -3
  67. package/dist/components/b2b-dropdown.js +27 -2
  68. package/dist/esm/b2b-core-components.js +1 -1
  69. package/dist/esm/b2b-date-picker.entry.js +26 -2
  70. package/dist/esm/b2b-dropdown.entry.js +27 -2
  71. package/dist/esm/loader.js +1 -1
  72. package/dist/types/components/date-picker/date-picker.d.ts +8 -1
  73. package/dist/types/components/dropdown/dropdown.d.ts +2 -0
  74. package/dist/types/components.d.ts +7 -2
  75. package/dist/types/utils/interfaces/form.interface.d.ts +2 -0
  76. package/dist/web-types.json +11 -1
  77. package/package.json +2 -2
  78. package/dist/b2b-core-components/p-97fa0bb3.entry.js +0 -1
  79. package/dist/b2b-core-components/p-dd96c384.entry.js +0 -1
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Wed, 14 May 2025 12:50:46 GMT
4
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --b2b-size-200: 5rem; /* 80px */
@@ -125,7 +125,7 @@
125
125
  }
126
126
  /**
127
127
  * Do not edit directly
128
- * Generated on Wed, 14 May 2025 12:50:46 GMT
128
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
129
129
  */
130
130
  :root [data-theme="dark"] {
131
131
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -219,11 +219,14 @@
219
219
  font-family: ObcIcons;
220
220
  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
221
221
  }
222
- :host .b2b-date-picker {
222
+ :host {
223
+ position: relative;
224
+ }
225
+ .b2b-date-picker {
223
226
  position: relative;
224
227
  z-index: 300;
225
228
  }
226
- :host .b2b-date-picker__backdrop {
229
+ .b2b-date-picker__backdrop {
227
230
  position: fixed;
228
231
  top: 0;
229
232
  left: 0;
@@ -231,14 +234,14 @@
231
234
  height: 100%;
232
235
  z-index: 0;
233
236
  }
234
- :host .b2b-date-picker-input-focus-wrapper {
237
+ .b2b-date-picker-input-focus-wrapper {
235
238
  width: 100%;
236
239
  height: 100%;
237
240
  }
238
- :host .b2b-date-picker-input-focus-wrapper:hover {
241
+ .b2b-date-picker-input-focus-wrapper:hover {
239
242
  cursor: text;
240
243
  }
241
- :host .b2b-date-picker-input-wrapper {
244
+ .b2b-date-picker-input-wrapper {
242
245
  display: flex;
243
246
  box-sizing: border-box;
244
247
  height: var(--b2b-size-90); /* The height of the wrapper */
@@ -249,16 +252,16 @@
249
252
  background-color: var(--b2b-color-white-100);
250
253
  transition: outline 0.2s ease-in-out, border-color 0.2s ease-in-out;
251
254
  }
252
- :host .b2b-date-picker-input-wrapper--focused {
255
+ .b2b-date-picker-input-wrapper--focused {
253
256
  outline: 2px solid -webkit-focus-ring-color;
254
257
  outline-offset: -1px;
255
258
  }
256
- :host .b2b-date-picker-input-wrapper--error {
259
+ .b2b-date-picker-input-wrapper--error {
257
260
  background-color: var(--b2b-color-error-50);
258
261
  border: 1px solid var(--b2b-color-error-100);
259
262
  border-color: var(--b2b-color-error-100);
260
263
  }
261
- :host .b2b-date-picker-input-wrapper .b2b-date-picker-input {
264
+ .b2b-date-picker-input-wrapper .b2b-date-picker-input {
262
265
  border: none;
263
266
  outline: none;
264
267
  box-shadow: none;
@@ -272,55 +275,55 @@
272
275
  font-weight: var(--b2b-font-weight-normal);
273
276
  font-family: var(--b2b-font-family-default);
274
277
  }
275
- :host .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
278
+ .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
276
279
  background-color: var(--b2b-color-error-50);
277
280
  }
278
- :host .b2b-date-picker-selected-date {
281
+ .b2b-date-picker-selected-date {
279
282
  flex: 1;
280
283
  align-self: center;
281
284
  font-size: var(--b2b-size-35);
282
285
  }
283
- :host .b2b-date-picker-label {
286
+ .b2b-date-picker-label {
284
287
  font-size: var(--b2b-size-35);
285
288
  color: var(--b2b-color-black-100);
286
289
  line-height: var(--b2b-size-copy-line-height-100);
287
290
  margin-bottom: var(--b2b-size-5);
288
291
  }
289
- :host .b2b-date-picker-hint {
292
+ .b2b-date-picker-hint {
290
293
  font-size: var(--b2b-size-copy-50);
291
294
  line-height: var(--b2b-size-copy-line-height-75);
292
295
  display: block;
293
296
  margin-top: var(--b2b-size-7);
294
297
  color: var(--b2b-color-grey-300);
295
298
  }
296
- :host .b2b-date-picker-hint--error {
299
+ .b2b-date-picker-hint--error {
297
300
  color: var(--b2b-color-error-100);
298
301
  }
299
- :host .b2b-date-picker-body {
300
- position: relative;
302
+ .b2b-date-picker-body {
303
+ position: absolute;
301
304
  border-right: var(--b2b-size-1) solid var(--b2b-color-black-100);
302
305
  border-left: var(--b2b-size-1) solid var(--b2b-color-black-100);
303
306
  border-bottom: var(--b2b-size-1) solid var(--b2b-color-black-100);
304
- border-top: 2px none -webkit-focus-ring-color;
305
307
  outline-offset: -1px;
306
308
  width: 300px;
307
309
  box-sizing: border-box;
310
+ margin-top: 1px;
308
311
  padding-bottom: var(--b2b-size-40);
309
312
  outline: none;
310
313
  background-color: var(--b2b-color-white-100);
311
- z-index: 200;
314
+ z-index: 400;
312
315
  }
313
- :host .b2b-date-picker-body--hidden {
316
+ .b2b-date-picker-body--hidden {
314
317
  display: none;
315
318
  }
316
- :host .b2b-icons {
319
+ .b2b-icons {
317
320
  display: flex;
318
321
  margin-top: var(--b2b-size-5);
319
322
  align-items: center;
320
323
  }
321
- :host .b2b-close-icon {
324
+ .b2b-close-icon {
322
325
  display: block;
323
326
  }
324
- :host .b2b-event-icon {
327
+ .b2b-event-icon {
325
328
  display: block;
326
329
  }
@@ -77,6 +77,7 @@ export class B2bDatePicker {
77
77
  this.clearDateInput = () => {
78
78
  this.selectedDay = undefined;
79
79
  this.userInputDate = undefined;
80
+ this.b2bClear.emit();
80
81
  };
81
82
  this.handleBackdropDismiss = () => {
82
83
  this.showDatePicker = false;
@@ -198,6 +199,23 @@ export class B2bDatePicker {
198
199
  handleDisableDaysChanged(newVal) {
199
200
  this.normalizedDisableEvery = this.normalizeArrayInput(newVal);
200
201
  }
202
+ handleDisableDatesUntilChanged(newVal) {
203
+ this.normalizedDisableDatesUntil =
204
+ this.normalizeDisableDatesUntilAndFrom(newVal);
205
+ }
206
+ handleDisableDatesFromChanged(newVal) {
207
+ this.normalizedDisableDatesFrom =
208
+ this.normalizeDisableDatesUntilAndFrom(newVal);
209
+ }
210
+ handleDisablePastDatesChanged(newVal) {
211
+ this.disablePastDates = newVal;
212
+ }
213
+ handleDisableFutureDatesChanged(newVal) {
214
+ this.disableFutureDates = newVal;
215
+ }
216
+ handleDisableWeekendsChanged(newVal) {
217
+ this.disableWeekends = newVal;
218
+ }
201
219
  parseDateInput(dateString) {
202
220
  const regex = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/;
203
221
  if (dateString == '' || dateString === undefined) {
@@ -709,6 +727,27 @@ export class B2bDatePicker {
709
727
  }
710
728
  }
711
729
  }
730
+ }, {
731
+ "method": "b2bClear",
732
+ "name": "b2b-clear",
733
+ "bubbles": true,
734
+ "cancelable": true,
735
+ "composed": true,
736
+ "docs": {
737
+ "tags": [],
738
+ "text": "Emits when the user clicks the clear button."
739
+ },
740
+ "complexType": {
741
+ "original": "DateClear",
742
+ "resolved": "DateClear<any>",
743
+ "references": {
744
+ "DateClear": {
745
+ "location": "import",
746
+ "path": "../../utils/interfaces/form.interface",
747
+ "id": "src/utils/interfaces/form.interface.d.ts::DateClear"
748
+ }
749
+ }
750
+ }
712
751
  }];
713
752
  }
714
753
  static get elementRef() { return "host"; }
@@ -719,6 +758,21 @@ export class B2bDatePicker {
719
758
  }, {
720
759
  "propName": "disableDays",
721
760
  "methodName": "handleDisableDaysChanged"
761
+ }, {
762
+ "propName": "disableDatesUntil",
763
+ "methodName": "handleDisableDatesUntilChanged"
764
+ }, {
765
+ "propName": "disableDatesFrom",
766
+ "methodName": "handleDisableDatesFromChanged"
767
+ }, {
768
+ "propName": "disablePastDates",
769
+ "methodName": "handleDisablePastDatesChanged"
770
+ }, {
771
+ "propName": "disableFutureDates",
772
+ "methodName": "handleDisableFutureDatesChanged"
773
+ }, {
774
+ "propName": "disableWeekends",
775
+ "methodName": "handleDisableWeekendsChanged"
722
776
  }];
723
777
  }
724
778
  static get listeners() {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -53,4 +53,34 @@ describe('B2B-Dropdown', () => {
53
53
  expect(selectedTextElementAfter).not.toBeNull();
54
54
  expect(selectedTextElementAfter.textContent).toBe('Select an option...');
55
55
  });
56
+ it('should render dynamically added <option> elements using MutationObserver', async () => {
57
+ const page = await newE2EPage({
58
+ html: `<b2b-dropdown label="Fruits"></b2b-dropdown>`,
59
+ });
60
+ await page.evaluate(() => {
61
+ const dropdown = document.querySelector('b2b-dropdown');
62
+ const opt1 = document.createElement('option');
63
+ opt1.value = 'apple';
64
+ opt1.textContent = 'Apple';
65
+ const opt2 = document.createElement('option');
66
+ opt2.value = 'banana';
67
+ opt2.textContent = 'Banana';
68
+ dropdown.appendChild(opt1);
69
+ dropdown.appendChild(opt2);
70
+ });
71
+ const count = await page.evaluate(async () => {
72
+ const dropdown = document.querySelector('b2b-dropdown');
73
+ if (!dropdown)
74
+ return -1;
75
+ await new Promise(resolve => setTimeout(resolve, 2000));
76
+ const options = dropdown.querySelectorAll('option');
77
+ return options.length;
78
+ });
79
+ expect(count).toBe(2);
80
+ const dropdownPage = await page.$('b2b-dropdown');
81
+ const renderedOptions = await dropdownPage.$$('option');
82
+ const texts = await Promise.all(renderedOptions.map(opt => opt.evaluate(el => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })));
83
+ expect(texts).toContain('Apple');
84
+ expect(texts).toContain('Banana');
85
+ });
56
86
  });
@@ -83,15 +83,40 @@ export class DropdownComponent {
83
83
  this.selectedValue = this.placeholderValue || '';
84
84
  this.selectedText = '';
85
85
  }
86
+ refreshOptions() {
87
+ const optionElements = Array.from(this.hostElement.querySelectorAll('option'));
88
+ this.options = optionElements.map(option => {
89
+ var _a;
90
+ return ({
91
+ value: option.getAttribute('value') || '',
92
+ label: ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
93
+ selected: option.hasAttribute('selected'),
94
+ disabled: option.hasAttribute('disabled'),
95
+ });
96
+ });
97
+ }
86
98
  componentDidLoad() {
87
99
  this.initializeOptions();
88
100
  this.updateTruncatedText();
89
101
  document.addEventListener('click', this.onClickOutside);
90
102
  window.addEventListener('resize', this.updateTruncatedText);
103
+ this.refreshOptions();
104
+ if (typeof MutationObserver !== 'undefined') {
105
+ this.mutationObserver = new MutationObserver(() => {
106
+ this.refreshOptions();
107
+ });
108
+ this.mutationObserver.observe(this.hostElement, {
109
+ childList: true,
110
+ subtree: true,
111
+ });
112
+ }
91
113
  }
92
114
  disconnectedCallback() {
93
115
  document.removeEventListener('click', this.onClickOutside);
94
116
  window.removeEventListener('resize', this.updateTruncatedText);
117
+ if (this.mutationObserver) {
118
+ this.mutationObserver.disconnect();
119
+ }
95
120
  }
96
121
  watchDropdownState() {
97
122
  if (this.isOpen)
@@ -125,11 +150,11 @@ export class DropdownComponent {
125
150
  const hasError = this.invalid && !this.disabled;
126
151
  const showHint = this.hint && (!this.invalid || this.disabled);
127
152
  const showError = this.error && hasError;
128
- return (h(Host, { key: '09be0fe07181c102f688599b581973d03c6347ae', class: {
153
+ return (h(Host, { key: 'c637b01d1726e3986a086fda92e76baf3a4aebf3', class: {
129
154
  'b2b-dropdown': true,
130
155
  'b2b-dropdown--error': hasError,
131
156
  'b2b-dropdown--disabled': this.disabled,
132
- } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'f4756d9f9550c1adc4aa618e9e7c673bfd89037a', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '5fed7fbb2599116576887c05d85b884367e2bf0e', class: {
157
+ } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'de226d45b1c2f01ab465c180c3adcd646d714a6d', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '4cbf77b6f513e0f00987ef7aa95b63377f8d2169', class: {
133
158
  'b2b-dropdown__select': true,
134
159
  'b2b-dropdown__select--open': this.isOpen,
135
160
  'b2b-dropdown__select--focused': this.focused,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 14 May 2025 12:50:46 GMT
3
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
4
4
  */
5
5
  :root, :host {
6
6
  --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
124
124
  }
125
125
  /**
126
126
  * Do not edit directly
127
- * Generated on Wed, 14 May 2025 12:50:46 GMT
127
+ * Generated on Mon, 02 Jun 2025 07:16:21 GMT
128
128
  */
129
129
  :root [data-theme="dark"] {
130
130
  --b2b-size-200: 5rem; /* 80px */