@descope-ui/common 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.14](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.13...@descope-ui/common-0.0.14) (2025-06-26)
+
+## [0.0.13](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.12...@descope-ui/common-0.0.13) (2025-06-09)
+
 ## [0.0.12](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.11...@descope-ui/common-0.0.12) (2025-05-28)
 
 ## [0.0.11](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.10...@descope-ui/common-0.0.11) (2025-04-29)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsMixins/mixins/inputEventsDispatchingMixin.js

@@ -12,7 +12,9 @@ export const inputEventsDispatchingMixin = (superclass) =>
     #blockNativeEvents() {
       ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
         this.addEventListener(event, (e) => {
-          e.isTrusted && e.target === this && e.stopImmediatePropagation();
+          if (e.isTrusted && e.target === this) {
+            e.stopImmediatePropagation()
+          };
         });
       });
     }

package/src/componentsMixins/mixins/inputValidationMixin.js

@@ -73,6 +73,12 @@ export const inputValidationMixin = (superclass) =>
       return `Please match the requested type.`;
     }
 
+    getCustomErrorMessage(attr, defaultMsg) {
+      return this.hasAttribute(attr)
+        ? this.getAttribute(attr) || ' '
+        : defaultMsg;
+    }
+
     getErrorMessage(flags) {
       const {
         valueMissing,
@@ -89,31 +95,39 @@ export const inputValidationMixin = (superclass) =>
 
       switch (true) {
         case valueMissing:
-          return (
-            this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
+          return this.getCustomErrorMessage(
+            errorAttributes.valueMissing,
+            this.defaultErrorMsgValueMissing,
           );
         case patternMismatch || stepMismatch || badInput:
-          return (
-            this.getAttribute(errorAttributes.patternMismatch) ||
-            this.defaultErrorMsgPatternMismatch
+          return this.getCustomErrorMessage(
+            errorAttributes.patternMismatch,
+            this.defaultErrorMsgPatternMismatch,
           );
         case typeMismatch:
-          return (
-            this.getAttribute(errorAttributes.typeMismatch) ||
-            this.getAttribute(errorAttributes.patternMismatch) ||
-            this.defaultErrorMsgTypeMismatch
+          return this.getCustomErrorMessage(
+            errorAttributes.typeMismatch,
+            this.defaultErrorMsgTypeMismatch,
           );
         case tooShort:
-          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+          return this.getCustomErrorMessage(
+            errorAttributes.tooShort,
+            this.defaultErrorMsgTooShort,
+          );
         case tooLong:
-          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+          return this.getCustomErrorMessage(
+            errorAttributes.tooLong,
+            this.defaultErrorMsgTooLong,
+          );
         case rangeUnderflow:
-          return (
-            this.getAttribute(errorAttributes.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+          return this.getCustomErrorMessage(
+            errorAttributes.rangeUnderflow,
+            this.defaultErrorMsgRangeUnderflow,
           );
         case rangeOverflow:
-          return (
-            this.getAttribute(errorAttributes.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+          return this.getCustomErrorMessage(
+            errorAttributes.rangeOverflow,
+            this.defaultErrorMsgRangeOverflow,
           );
         case customError:
           return this.validationMessage;
@@ -124,7 +138,11 @@ export const inputValidationMixin = (superclass) =>
 
     #setValidity() {
       const validity = this.isReadOnly ? {} : this.getValidity();
-      this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
+      this.#internals.setValidity(
+        validity,
+        this.getErrorMessage(validity),
+        this.validationTarget,
+      );
     }
 
     get validationMessage() {
@@ -161,7 +179,11 @@ export const inputValidationMixin = (superclass) =>
 
     setCustomValidity(errorMessage) {
       if (errorMessage) {
-        this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
+        this.#internals.setValidity(
+          { customError: true },
+          errorMessage,
+          this.validationTarget,
+        );
       } else {
         this.#internals.setValidity({});
         this.#setValidity();
@@ -169,15 +191,24 @@ export const inputValidationMixin = (superclass) =>
     }
 
     get isRequired() {
-      return this.hasAttribute('required') && this.getAttribute('required') !== 'false';
+      return (
+        this.hasAttribute('required') &&
+        this.getAttribute('required') !== 'false'
+      );
     }
 
     get isReadOnly() {
-      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+      return (
+        this.hasAttribute('readonly') &&
+        this.getAttribute('readonly') !== 'false'
+      );
     }
 
     get isDisabled() {
-      return this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
+      return (
+        this.hasAttribute('disabled') &&
+        this.getAttribute('disabled') !== 'false'
+      );
     }
 
     get pattern() {

package/src/sbControls.js

@@ -303,6 +303,24 @@ export const errorMessageIconControl = {
   },
 };
 
+export const defaultValueMissingControl = {
+  defaultErrorMessageValueMissing: {
+    name: 'Default error-message: Value missing',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const toggleDefaultErrorMessagePatternMismatch = {
+  defaultErrorMessagePatternMismatch: {
+    name: 'Default error-message: Pattern mismatch',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const errorMessageIconAttrs = `
     st-error-message-icon="url(${errorMessageIconBase64})"
     st-error-message-icon-size="14px"

package/src/sbHelpers.js

@@ -20,6 +20,34 @@ export const withForm = (story) => {
   `;
 };
 
+export const toggleDefaultErrorMessageValueMissingDecorator = (
+  story,
+  { component, args },
+) => {
+  setTimeout(() => {
+    const ele = document.querySelector(component);
+    if (!ele) return;
+    if (args.defaultErrorMessageValueMissing) {
+      ele.removeAttribute('data-errormessage-value-missing');
+    }
+  });
+  return story();
+};
+
+export const toggleDefaultErrorMessagePatternMismatchDecorator = (
+  story,
+  { component, args },
+) => {
+  setTimeout(() => {
+    const ele = document.querySelector(component);
+    if (!ele) return;
+    if (args.defaultErrorMessagePatternMismatch) {
+      ele.removeAttribute('data-errormessage-pattern-mismatch');
+    }
+  });
+  return story();
+};
+
 export const appleIcon = `
 <svg
   width="1.5em"