@descope/web-components-ui 1.0.136 → 1.0.148

package/src/mixins/draggableMixin.js

@@ -1,62 +1,62 @@
 export const draggableMixin = (superclass) =>
-	class DraggableMixinClass extends superclass {
-		#styleEle = null;
-
-		static get observedAttributes() {
-			const superAttrs = superclass.observedAttributes || [];
-			return [...superAttrs, 'draggable'];
-		}
-
-		constructor() {
-			super();
-
-			this.#styleEle = document.createElement('style');
-			this.#styleEle.innerText = `* { cursor: inherit!important }`;
-		}
-
-		#handleDraggableStyle(isDraggable) {
-			if (isDraggable) {
-				this.shadowRoot.appendChild(this.#styleEle);
-			} else {
-				this.#styleEle.remove();
-			}
-		}
-
-		get isDraggable() {
-			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
-		}
-
-		init() {
-			// because we are delegating the focus from the outer component, 
-			// the D&D is not working well in the page editor
-			// in order to solve it we are making the inner component focusable on mouse down
-			// and removing it on complete
-			this.addEventListener('mousedown', (e) => {
-				if (this.isDraggable) {
-					const prevTabIndex = this.baseElement.getAttribute('tabindex')
-					this.baseElement.setAttribute('tabindex', '-1');
-
-					const onComplete = () => {
-						prevTabIndex ?
-							this.baseElement.setAttribute('tabindex', prevTabIndex) :
-							this.baseElement.removeAttribute('tabindex');
-
-						e.target.removeEventListener('mouseup', onComplete)
-						e.target.removeEventListener('dragend', onComplete)
-					}
-
-					e.target.addEventListener('mouseup', onComplete, { once: true })
-					e.target.addEventListener('dragend', onComplete, { once: true })
-				}
-			})
-
-			super.init?.();
-		}
-
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
-			if (attrName === 'draggable') {
-				this.#handleDraggableStyle(newValue === 'true');
-			}
-		}
-	};
+  class DraggableMixinClass extends superclass {
+    #styleEle = null;
+
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || [];
+      return [...superAttrs, 'draggable'];
+    }
+
+    constructor() {
+      super();
+
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.innerText = `* { cursor: inherit!important }`;
+    }
+
+    #handleDraggableStyle(isDraggable) {
+      if (isDraggable) {
+        this.shadowRoot.appendChild(this.#styleEle);
+      } else {
+        this.#styleEle.remove();
+      }
+    }
+
+    get isDraggable() {
+      return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false';
+    }
+
+    init() {
+      // because we are delegating the focus from the outer component,
+      // the D&D is not working well in the page editor
+      // in order to solve it we are making the inner component focusable on mouse down
+      // and removing it on complete
+      this.addEventListener('mousedown', (e) => {
+        if (this.isDraggable) {
+          const prevTabIndex = this.baseElement.getAttribute('tabindex');
+          this.baseElement.setAttribute('tabindex', '-1');
+
+          const onComplete = () => {
+            prevTabIndex
+              ? this.baseElement.setAttribute('tabindex', prevTabIndex)
+              : this.baseElement.removeAttribute('tabindex');
+
+            e.target.removeEventListener('mouseup', onComplete);
+            e.target.removeEventListener('dragend', onComplete);
+          };
+
+          e.target.addEventListener('mouseup', onComplete, { once: true });
+          e.target.addEventListener('dragend', onComplete, { once: true });
+        }
+      });
+
+      super.init?.();
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+      if (attrName === 'draggable') {
+        this.#handleDraggableStyle(newValue === 'true');
+      }
+    }
+  };

package/src/mixins/hoverableMixin.js

@@ -1,15 +1,13 @@
 export const hoverableMixin = (superclass) =>
-	class HoverableMixinClass extends superclass {
-		init() {
-			super.init?.();
+  class HoverableMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-			this.baseElement.addEventListener('mouseover', (e) => {
-				this.setAttribute('hover', 'true');
-				e.target.addEventListener(
-					'mouseleave',
-					() => this.removeAttribute('hover'),
-					{ once: true }
-				);
-			})
-		}
-	};
+      this.baseElement.addEventListener('mouseover', (e) => {
+        this.setAttribute('hover', 'true');
+        e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
+          once: true,
+        });
+      });
+    }
+  };

package/src/mixins/index.js

@@ -4,9 +4,9 @@ export { createProxy } from './createProxy';
 export { proxyInputMixin } from './proxyInputMixin';
 export { componentNameValidationMixin } from './componentNameValidationMixin';
 export { hoverableMixin } from './hoverableMixin';
-export { inputValidationMixin } from './inputValidationMixin'
-export { portalMixin } from './portalMixin'
-export { changeMixin } from './changeMixin'
-export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin'
-export { lifecycleEventsMixin } from './lifecycleEventsMixin'
-export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin'
+export { inputValidationMixin } from './inputValidationMixin';
+export { portalMixin } from './portalMixin';
+export { changeMixin } from './changeMixin';
+export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin';
+export { lifecycleEventsMixin } from './lifecycleEventsMixin';
+export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';

package/src/mixins/inputEventsDispatchingMixin.js

@@ -1,71 +1,72 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
 
-export const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
-  init() {
-    this.#blockNativeEvents();
+export const inputEventsDispatchingMixin = (superclass) =>
+  class InputEventsDispatchingMixinClass extends superclass {
+    init() {
+      this.#blockNativeEvents();
 
-    super.init?.();
-  }
+      super.init?.();
+    }
 
-  // we want to block the native (trusted) events and control when these events are being dispatched
-  #blockNativeEvents() {
-    ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
-      this.addEventListener(event, (e) => {
-        e.isTrusted && e.target === this && e.stopImmediatePropagation()
-      })
-    })
-  }
+    // we want to block the native (trusted) events and control when these events are being dispatched
+    #blockNativeEvents() {
+      ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
+        this.addEventListener(event, (e) => {
+          e.isTrusted && e.target === this && e.stopImmediatePropagation();
+        });
+      });
+    }
 
-  handleFocusEventsDispatching(inputs) {
-    let timerId
+    handleFocusEventsDispatching(inputs) {
+      let timerId;
 
-    // in order to simulate blur & focusout on root input element
-    // we are checking if focus on one of the inner elements happened immediately after blur
-    // if not, the component is no longer focused and we should dispatch blur & focusout
-    inputs?.forEach(input => {
-      input?.addEventListener('focusout', (e) => {
-        e.stopImmediatePropagation();
-        timerId = setTimeout(() => {
-          timerId = null
+      // in order to simulate blur & focusout on root input element
+      // we are checking if focus on one of the inner elements happened immediately after blur
+      // if not, the component is no longer focused and we should dispatch blur & focusout
+      inputs?.forEach((input) => {
+        input?.addEventListener('focusout', (e) => {
+          e.stopImmediatePropagation();
+          timerId = setTimeout(() => {
+            timerId = null;
 
-          createDispatchEvent.call(this, 'blur');
-          createDispatchEvent.call(this, 'focusout', { bubbles: true });
+            createDispatchEvent.call(this, 'blur');
+            createDispatchEvent.call(this, 'focusout', { bubbles: true });
+          });
         });
-      })
 
-      // in order to simulate focus & focusin on the root input element
-      // we are holding a timer id and clearing it on focusin
-      // if there is a timer id, it means that the root input is still focused
-      // otherwise, it was not focused before, and we should dispatch focus & focusin
-      const onFocus = (e) => {
-        e.stopImmediatePropagation();
-        clearTimeout(timerId)
-        if (!timerId) {
-          createDispatchEvent.call(this, 'focus');
-          createDispatchEvent.call(this, 'focusin', { bubbles: true });
-        }
-      }
+        // in order to simulate focus & focusin on the root input element
+        // we are holding a timer id and clearing it on focusin
+        // if there is a timer id, it means that the root input is still focused
+        // otherwise, it was not focused before, and we should dispatch focus & focusin
+        const onFocus = (e) => {
+          e.stopImmediatePropagation();
+          clearTimeout(timerId);
+          if (!timerId) {
+            createDispatchEvent.call(this, 'focus');
+            createDispatchEvent.call(this, 'focusin', { bubbles: true });
+          }
+        };
 
-      // some components are not dispatching focusin but only focus
-      input?.addEventListener('focusin', onFocus)
-      input?.addEventListener('focus', onFocus)
-    })
-  }
+        // some components are not dispatching focusin but only focus
+        input?.addEventListener('focusin', onFocus);
+        input?.addEventListener('focus', onFocus);
+      });
+    }
 
-  // we want to block the input events from propagating in case the value of the root input wasn't change
-  // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
-  // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
-  handleInputEventDispatching() {
-    let previousRootComponentValue = this.value
+    // we want to block the input events from propagating in case the value of the root input wasn't change
+    // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
+    // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
+    handleInputEventDispatching() {
+      let previousRootComponentValue = this.value;
 
-    this.addEventListener('input', (e) => {
-      // we are comparing the previous value to the new one,
-      // and if they have the same value, we are blocking the input event
-      if (previousRootComponentValue === this.value) {
-        e.stopImmediatePropagation();
-      } else {
-        previousRootComponentValue = this.value
-      }
-    });
-  }
-}
+      this.addEventListener('input', (e) => {
+        // we are comparing the previous value to the new one,
+        // and if they have the same value, we are blocking the input event
+        if (previousRootComponentValue === this.value) {
+          e.stopImmediatePropagation();
+        } else {
+          previousRootComponentValue = this.value;
+        }
+      });
+    }
+  };

package/src/mixins/inputValidationMixin.js

@@ -1,154 +1,159 @@
-const observedAttributes = [
-  'required',
-  'pattern',
-]
+const observedAttributes = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
   patternMismatch: 'data-errormessage-pattern-mismatch',
   tooShort: 'data-errormessage-pattern-mismatch-too-short',
   tooLong: 'data-errormessage-pattern-mismatch-too-long',
-}
-export const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
-  static get observedAttributes() {
-    return [
-      ...superclass.observedAttributes || [],
-      ...observedAttributes
-    ];
-  }
-
-  static get formAssociated() {
-    return true;
-  }
-
-  #internals
-
-  constructor() {
-    super();
-
-    this.#internals = this.attachInternals();
-  }
-
-  get defaultErrorMsgValueMissing() {
-    return 'Please fill out this field.'
-  }
-
-  get defaultErrorMsgPatternMismatch() {
-    return 'Please match the requested format.'
-  }
-
-  get defaultErrorMsgTooShort() {
-    return `Minimum length is ${this.getAttribute('minlength')}.`
-  }
-
-  get defaultErrorMsgTooLong() {
-    return `Maximum length is ${this.getAttribute('maxlength')}.  `
-  }
-
-  getErrorMessage(flags) {
-    const {
-      valueMissing,
-      patternMismatch,
-      typeMismatch,
-      stepMismatch,
-      tooShort,
-      tooLong,
-      rangeOverflow,
-      rangeUnderflow,
-      badInput,
-      customError
-    } = flags;
-    switch (true) {
-      case valueMissing:
-        return this.getAttribute(errorAttributes.valueMissing) ||
-          this.defaultErrorMsgValueMissing
-      case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
-        return this.getAttribute(errorAttributes.patternMismatch) ||
-          this.defaultErrorMsgPatternMismatch
-      case tooShort:
-        return this.getAttribute(errorAttributes.tooShort) ||
-          this.defaultErrorMsgTooShort
-      case tooLong:
-        return this.getAttribute(errorAttributes.tooLong) ||
-          this.defaultErrorMsgTooLong
-      case customError:
-        return this.validationMessage
-      default:
-        return ''
-    }
-  }
-
-  #setValidity() {
-    const validity = this.isReadOnly ? {} : this.getValidity()
-    this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget)
-  }
-
-  get validationMessage() {
-    return this.#internals.validationMessage;
-  }
-
-  getValidity() {
-    console.warn('getValidity', 'is not implemented')
-  }
-
-  checkValidity() {
-    return this.#internals.validity.valid
-  }
-
-  reportValidity() {
-    return this.#internals.reportValidity()
-  }
-
-  get validity() {
-    return this.#internals.validity
-  }
-
-  get validationTarget() {
-    return this.inputElement
-  }
-
-  setCustomValidity(errorMessage) {
-    if (errorMessage) {
-      this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget)
-    } else {
-      this.#internals.setValidity({})
-      this.#setValidity()
-    }
-  }
-
-  get isRequired() {
-    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
-  }
-
-  get isReadOnly() {
-    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
-  }
-
-  get pattern() {
-    return this.getAttribute('pattern')
-  }
-
-  get form() {
-    return this.#internals.form
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (observedAttributes.includes(attrName)) {
-      this.#setValidity();
-    }
-  }
-
-  init() {
-    super.init?.();
-    this.addEventListener('change', this.#setValidity)
-    this.addEventListener('invalid', (e) => e.stopPropagation())
-    this.addEventListener('input', this.#setValidity)
-
-    // The attribute sync takes time, so getValidity returns valid,
-    // even when it shouldn't. This way allows all attributes to sync
-    // after render, before checking the validity.
-    setTimeout(() => this.#setValidity());
-  }
-}
+};
+export const inputValidationMixin = (superclass) =>
+  class InputValidationMixinClass extends superclass {
+    static get observedAttributes() {
+      return [...(superclass.observedAttributes || []), ...observedAttributes];
+    }
+
+    static get formAssociated() {
+      return true;
+    }
+
+    #internals;
+
+    constructor() {
+      super();
+
+      this.#internals = this.attachInternals();
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgValueMissing() {
+      return 'Please fill out this field.';
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgPatternMismatch() {
+      return 'Please match the requested format.';
+    }
+
+    get defaultErrorMsgTooShort() {
+      return `Minimum length is ${this.getAttribute('minlength')}.`;
+    }
+
+    get defaultErrorMsgTooLong() {
+      return `Maximum length is ${this.getAttribute('maxlength')}.  `;
+    }
+
+    getErrorMessage(flags) {
+      const {
+        valueMissing,
+        patternMismatch,
+        typeMismatch,
+        stepMismatch,
+        tooShort,
+        tooLong,
+        rangeOverflow,
+        rangeUnderflow,
+        badInput,
+        customError,
+      } = flags;
+      switch (true) {
+        case valueMissing:
+          return (
+            this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
+          );
+        case patternMismatch ||
+          typeMismatch ||
+          stepMismatch ||
+          rangeOverflow ||
+          rangeUnderflow ||
+          badInput:
+          return (
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgPatternMismatch
+          );
+        case tooShort:
+          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+        case tooLong:
+          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+        case customError:
+          return this.validationMessage;
+        default:
+          return '';
+      }
+    }
+
+    #setValidity() {
+      const validity = this.isReadOnly ? {} : this.getValidity();
+      this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
+    }
+
+    get validationMessage() {
+      return this.#internals.validationMessage;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getValidity() {
+      // eslint-disable-next-line no-console
+      console.warn('getValidity', 'is not implemented');
+    }
+
+    checkValidity() {
+      return this.#internals.validity.valid;
+    }
+
+    reportValidity() {
+      return this.#internals.reportValidity();
+    }
+
+    get validity() {
+      return this.#internals.validity;
+    }
+
+    get validationTarget() {
+      return this.inputElement;
+    }
+
+    setCustomValidity(errorMessage) {
+      if (errorMessage) {
+        this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
+      } else {
+        this.#internals.setValidity({});
+        this.#setValidity();
+      }
+    }
+
+    get isRequired() {
+      return this.hasAttribute('required') && this.getAttribute('required') !== 'false';
+    }
+
+    get isReadOnly() {
+      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+    }
+
+    get pattern() {
+      return this.getAttribute('pattern');
+    }
+
+    get form() {
+      return this.#internals.form;
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (observedAttributes.includes(attrName)) {
+        this.#setValidity();
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.addEventListener('change', this.#setValidity);
+      this.addEventListener('invalid', (e) => e.stopPropagation());
+      this.addEventListener('input', this.#setValidity);
+
+      // The attribute sync takes time, so getValidity returns valid,
+      // even when it shouldn't. This way allows all attributes to sync
+      // after render, before checking the validity.
+      setTimeout(() => this.#setValidity());
+    }
+  };

package/src/mixins/lifecycleEventsMixin.js

@@ -1,21 +1,23 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
 
-export const lifecycleEventsMixin = (superclass) => class LifecycleEventsMixinClass extends superclass {
-  #dispatchConnected = createDispatchEvent.bind(this, 'connected')
-  #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected')
+export const lifecycleEventsMixin = (superclass) =>
+  class LifecycleEventsMixinClass extends superclass {
+    #dispatchConnected = createDispatchEvent.bind(this, 'connected');
 
-  connectedCallback() {
-    if (this.rootElement.isConnected) {
-      super.connectedCallback?.();
+    #dispatchDisconnected = createDispatchEvent.bind(this, 'disconnected');
 
-      // we are waiting for all components to listen before dispatching
-      setTimeout(this.#dispatchConnected)
+    connectedCallback() {
+      if (this.rootElement.isConnected) {
+        super.connectedCallback?.();
+
+        // we are waiting for all components to listen before dispatching
+        setTimeout(this.#dispatchConnected);
+      }
     }
-  }
 
-  disconnectedCallback() {
-    super.disconnectedCallback?.();
+    disconnectedCallback() {
+      super.disconnectedCallback?.();
 
-    this.#dispatchDisconnected()
-  }
-}
+      this.#dispatchDisconnected();
+    }
+  };