@descope/web-components-ui 1.0.419 → 1.0.420

package/node_modules/common/src/componentsMixins/mixins/inputEventsDispatchingMixin.js

@@ -0,0 +1,76 @@
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+
+export const inputEventsDispatchingMixin = (superclass) =>
+  class InputEventsDispatchingMixinClass extends superclass {
+    init() {
+      this.#blockNativeEvents();
+
+      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();
+        });
+      });
+    }
+
+    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;
+
+            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 });
+          }
+        };
+
+        // 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 are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      this.addEventListener('input', (e) => {
+        // We don't want to block our own event that we fire from handleInputEventDispatching
+        if (this !== e.target) {
+          e.stopImmediatePropagation();
+
+          if (previousRootComponentValue !== this.value) {
+            previousRootComponentValue = this.value;
+            createDispatchEvent.call(this, 'input', { bubbles: true, composed: true });
+          }
+        }
+      });
+    }
+  };

package/node_modules/common/src/componentsMixins/mixins/inputValidationMixin.js

@@ -0,0 +1,210 @@
+import 'element-internals-polyfill'; // this is needed in order to support older browsers
+
+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',
+  rangeUnderflow: 'data-errormessage-pattern-range-underflow',
+  rangeOverflow: 'data-errormessage-pattern-range-overflow',
+  typeMismatch: 'data-errormessage-type-mismatch',
+};
+
+const validationTargetSymbol = Symbol('validationTarget');
+
+export const inputValidationMixin = (superclass) =>
+  class InputValidationMixinClass extends superclass {
+    #validationTarget = validationTargetSymbol;
+
+    static get observedAttributes() {
+      return [...(superclass.observedAttributes || []), ...observedAttributes];
+    }
+
+    static get formAssociated() {
+      return true;
+    }
+
+    #internals;
+
+    get internals() {
+      return this.#internals;
+    }
+
+    set internals(value) {
+      this.#internals = value;
+    }
+
+    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')}.  `;
+    }
+
+    get defaultErrorMsgRangeUnderflow() {
+      return `At least ${this.getAttribute('min-items-selection')} items are required.`;
+    }
+
+    get defaultErrorMsgRangeOverflow() {
+      return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    get defaultErrorMsgTypeMismatch() {
+      return `Please match the requested type.`;
+    }
+
+    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 || stepMismatch || badInput:
+          return (
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgPatternMismatch
+          );
+        case typeMismatch:
+          return (
+            this.getAttribute(errorAttributes.typeMismatch) ||
+            this.getAttribute(errorAttributes.patternMismatch) ||
+            this.defaultErrorMsgTypeMismatch
+          );
+        case tooShort:
+          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+        case tooLong:
+          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+        case rangeUnderflow:
+          return (
+            this.getAttribute(errorAttributes.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+          );
+        case rangeOverflow:
+          return (
+            this.getAttribute(errorAttributes.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+          );
+        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.#validationTarget === validationTargetSymbol
+        ? this.inputElement
+        : this.#validationTarget;
+    }
+
+    set validationTarget(val) {
+      this.#validationTarget = val;
+    }
+
+    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 isDisabled() {
+      return this.hasAttribute('disabled') && this.getAttribute('disabled') !== '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/node_modules/common/src/componentsMixins/mixins/lifecycleEventsMixin.js

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

package/node_modules/common/src/componentsMixins/mixins/normalizeBooleanAttributesMixin.js

@@ -0,0 +1,57 @@
+import { observeAttributes } from '../../componentsHelpers';
+
+const booleanAttributesList = [
+  'readonly',
+  'focused',
+  'invalid',
+  'has-label',
+  'required',
+  'disabled',
+  'checked',
+  'has-helper',
+  'has-value',
+  'step-buttons-visible',
+  'hover',
+  'has-error-message',
+  'focus-ring',
+  'opened',
+  'active',
+  'password-visible',
+  'opening',
+  'closing',
+  'has-no-options',
+];
+
+const isBooleanAttribute = (attr) => {
+  return booleanAttributesList.includes(attr);
+};
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
+export const normalizeBooleanAttributesMixin = (superclass) =>
+  class NormalizeBooleanAttributesMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      observeAttributes(
+        this,
+        (attrs) =>
+          attrs.forEach((attr) => {
+            const attrVal = this.getAttribute(attr);
+
+            if (isBooleanAttribute(attr)) {
+              if (attrVal === '') {
+                this.setAttribute(attr, 'true');
+              } else if (attrVal === 'false') {
+                this.removeAttribute(attr);
+              }
+            } else if (!attrVal) {
+              // eslint-disable-next-line no-console
+              console.debug(
+                `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
+              );
+            }
+          }),
+        {}
+      );
+    }
+  };

package/node_modules/common/src/componentsMixins/mixins/portalMixin.js

@@ -0,0 +1,112 @@
+import { kebabCaseJoin } from '../../utils';
+import { forwardAttrs } from '../../componentsHelpers';
+import { createStyleMixin } from '../mixins/createStyleMixin';
+import { createCssVarsList } from './createStyleMixin/helpers';
+
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping,
+// will generate the same var as "color" attribute in portals's mapping
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_';
+const PORTAL_THEME_PREFIX = '@';
+
+
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+
+const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
+    const MAX_RETRIES = 20;
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele?.shadowRoot) {
+        setTimeout(check);
+      } else {
+        res(ele.shadowRoot);
+      }
+    };
+    check();
+  });
+};
+
+export const portalMixin =
+  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
+  (superclass) => {
+    const eleDisplayName = name || sanitizeSelector(selector);
+
+    const BaseClass = createStyleMixin({
+      mappings,
+    })(superclass);
+
+    return class PortalMixinClass extends BaseClass {
+      static get cssVarList() {
+        return {
+          ...BaseClass.cssVarList,
+          [eleDisplayName]: createCssVarsList(
+            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+            mappings
+          ),
+        };
+      }
+
+      #portalEle;
+
+      constructor() {
+        // we cannot use "this" before calling "super"
+        const getRootElement = async (that) => {
+          const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
+          if (!selector) {
+            return baseEle;
+          }
+
+          // in case we have a selector, we should first wait for the base element shadow root
+          //  and then look for the internal element
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          return baseEleShadowRoot.querySelector(selector);
+        };
+
+        const getPortalElement = withWaitForShadowRoot(getRootElement);
+
+        super({
+          getRootElement: getPortalElement,
+          componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
+          themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+          baseSelector: ':host',
+        });
+
+        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
+      }
+
+      async #handleHoverAttribute() {
+        const portalEle = await this.#portalEle;
+        portalEle.onmouseenter = (e) => {
+          e.target.setAttribute('hover', 'true');
+        };
+        portalEle.onmouseleave = (e) => {
+          e.target.removeAttribute('hover');
+        };
+      }
+
+      async init() {
+        super.init?.();
+        const portalEle = await this.#portalEle;
+        forwardAttrs(this, portalEle, {
+          [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
+        });
+
+        this.#handleHoverAttribute();
+      }
+    };
+  };