@descope/web-components-ui 1.0.256 → 1.0.258

package/dist/index.esm.js

@@ -1306,6 +1306,7 @@ const resetStyles = `
 		box-shadow: none;
 	}
 	vaadin-button::part(label) {
+    justify-content: center;
 		padding: 0;
     width: 100%;
 	}
@@ -1359,7 +1360,7 @@ const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
-      textAlign: { ...label$a, property: 'justify-content' },
+      textAlign: { ...label$a, property: 'justify-content', important: true },
     },
   }),
   clickableMixin,
@@ -7535,7 +7536,7 @@ const multiSelectComboBoxMixin = (superclass) =>
       }
     }
 
-    get allowCustomValue() {
+    get allowCustomValues() {
       return this.getAttribute('allow-custom-value') === 'true';
     }
 
@@ -7674,7 +7675,7 @@ const multiSelectComboBoxMixin = (superclass) =>
     }
 
     #handleCustomValues() {
-      if (this.allowCustomValue) {
+      if (this.allowCustomValues) {
         this.baseElement.addEventListener('custom-value-set', (e) => {
           const newItemHtml = this.#renderItem({
             label: e.detail,
@@ -7782,6 +7783,33 @@ const multiSelectComboBoxMixin = (superclass) =>
         const selectedChildren = this.baseElement.items?.filter((item) =>
           vals.includes(item['data-id'])
         );
+
+        // If the component allows custom values, we need to add the values that are not present in the children
+        if (this.allowCustomValues) {
+          const existingValues =
+            selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
+          const missingValues = vals.filter((val) => !existingValues.includes(val));
+
+          if (missingValues.length) {
+            const newItemsHtml = missingValues.reduce((acc, val) => {
+              const newItemHtml = this.#renderItem({
+                label: val,
+                displayName: val,
+                value: val,
+              });
+              return acc + newItemHtml;
+            }, '');
+            this.innerHTML += newItemsHtml;
+
+            // The value needs to be set with a timeout because it needs to execute after
+            // the custom values are added to the items by the children change observer
+            setTimeout(() => {
+              this.value = vals;
+            }, 0);
+            return;
+          }
+        }
+
         const newSelectedValues =
           selectedChildren?.map((child) => child.getAttribute('data-id')) || [];
         if (!compareArraysUnordered(this.#value, newSelectedValues)) {