@descope/web-components-ui 1.0.256 → 1.0.258
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +31 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +31 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/ButtonClass.js +2 -1
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +29 -2
package/dist/cjs/index.cjs.js
CHANGED
@@ -2432,6 +2432,7 @@ const resetStyles = `
|
|
2432
2432
|
box-shadow: none;
|
2433
2433
|
}
|
2434
2434
|
vaadin-button::part(label) {
|
2435
|
+
justify-content: center;
|
2435
2436
|
padding: 0;
|
2436
2437
|
width: 100%;
|
2437
2438
|
}
|
@@ -2485,7 +2486,7 @@ const ButtonClass = compose(
|
|
2485
2486
|
labelTextColor: { property: 'color' },
|
2486
2487
|
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
2487
2488
|
labelSpacing: { ...label$a, property: 'gap' },
|
2488
|
-
textAlign: { ...label$a, property: 'justify-content' },
|
2489
|
+
textAlign: { ...label$a, property: 'justify-content', important: true },
|
2489
2490
|
},
|
2490
2491
|
}),
|
2491
2492
|
clickableMixin,
|
@@ -9039,7 +9040,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
9039
9040
|
}
|
9040
9041
|
}
|
9041
9042
|
|
9042
|
-
get
|
9043
|
+
get allowCustomValues() {
|
9043
9044
|
return this.getAttribute('allow-custom-value') === 'true';
|
9044
9045
|
}
|
9045
9046
|
|
@@ -9178,7 +9179,7 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
9178
9179
|
}
|
9179
9180
|
|
9180
9181
|
#handleCustomValues() {
|
9181
|
-
if (this.
|
9182
|
+
if (this.allowCustomValues) {
|
9182
9183
|
this.baseElement.addEventListener('custom-value-set', (e) => {
|
9183
9184
|
const newItemHtml = this.#renderItem({
|
9184
9185
|
label: e.detail,
|
@@ -9286,6 +9287,33 @@ const multiSelectComboBoxMixin = (superclass) =>
|
|
9286
9287
|
const selectedChildren = this.baseElement.items?.filter((item) =>
|
9287
9288
|
vals.includes(item['data-id'])
|
9288
9289
|
);
|
9290
|
+
|
9291
|
+
// If the component allows custom values, we need to add the values that are not present in the children
|
9292
|
+
if (this.allowCustomValues) {
|
9293
|
+
const existingValues =
|
9294
|
+
selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
|
9295
|
+
const missingValues = vals.filter((val) => !existingValues.includes(val));
|
9296
|
+
|
9297
|
+
if (missingValues.length) {
|
9298
|
+
const newItemsHtml = missingValues.reduce((acc, val) => {
|
9299
|
+
const newItemHtml = this.#renderItem({
|
9300
|
+
label: val,
|
9301
|
+
displayName: val,
|
9302
|
+
value: val,
|
9303
|
+
});
|
9304
|
+
return acc + newItemHtml;
|
9305
|
+
}, '');
|
9306
|
+
this.innerHTML += newItemsHtml;
|
9307
|
+
|
9308
|
+
// The value needs to be set with a timeout because it needs to execute after
|
9309
|
+
// the custom values are added to the items by the children change observer
|
9310
|
+
setTimeout(() => {
|
9311
|
+
this.value = vals;
|
9312
|
+
}, 0);
|
9313
|
+
return;
|
9314
|
+
}
|
9315
|
+
}
|
9316
|
+
|
9289
9317
|
const newSelectedValues =
|
9290
9318
|
selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
|
9291
9319
|
if (!compareArraysUnordered(this.#value, newSelectedValues)) {
|