@descope/web-components-ui 1.0.240 → 1.0.241

package/dist/index.esm.js

@@ -759,6 +759,14 @@ const inputValidationMixin = (superclass) =>
       return `Maximum length is ${this.getAttribute('maxlength')}.  `;
     }
 
+    get defaultErrorMsgRangeUnderflow() {
+      return `At least ${this.minItemsSelection} items are required.`;
+    }
+
+    get defaultErrorMsgRangeOverflow() {
+      return `At most ${this.maxItemsSelection} items are allowed.`;
+    }
+
     getErrorMessage(flags) {
       const {
         valueMissing,
@@ -777,12 +785,7 @@ const inputValidationMixin = (superclass) =>
           return (
             this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
           );
-        case patternMismatch ||
-          typeMismatch ||
-          stepMismatch ||
-          rangeOverflow ||
-          rangeUnderflow ||
-          badInput:
+        case patternMismatch || typeMismatch || stepMismatch || badInput:
           return (
             this.getAttribute(errorAttributes.patternMismatch) ||
             this.defaultErrorMsgPatternMismatch
@@ -791,6 +794,10 @@ const inputValidationMixin = (superclass) =>
           return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
         case tooLong:
           return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+        case rangeUnderflow:
+          return this.defaultErrorMsgRangeUnderflow;
+        case rangeOverflow:
+          return this.defaultErrorMsgRangeOverflow;
         case customError:
           return this.validationMessage;
         default:
@@ -9091,6 +9098,14 @@ const MultiSelectComboBoxMixin = (superclass) =>
       return this.getAttribute('allow-custom-value') === 'true';
     }
 
+    get minItemsSelection() {
+      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+    }
+
+    get maxItemsSelection() {
+      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+    }
+
     // eslint-disable-next-line class-methods-use-this
     isValidDataType(data) {
       const isValid = Array.isArray(data);
@@ -9235,18 +9250,37 @@ const MultiSelectComboBoxMixin = (superclass) =>
       }
     }
 
-    init() {
-      super.init?.();
-
+    setGetValidity() {
       // eslint-disable-next-line func-names
       this.getValidity = function () {
-        if (!this.value.length && this.isRequired) {
+        if (this.isRequired && !this.value.length) {
           return {
             valueMissing: true,
           };
         }
+        // If the field is not required, no minimum selection can be set
+        if (
+          this.isRequired &&
+          this.minItemsSelection &&
+          this.value.length < this.minItemsSelection
+        ) {
+          return {
+            rangeUnderflow: true,
+          };
+        }
+        if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
+          return {
+            rangeOverflow: true,
+          };
+        }
         return {};
       };
+    }
+
+    init() {
+      super.init?.();
+
+      this.setGetValidity();
 
       this.setComboBoxDescriptor();