@descope-ui/common 0.0.1

package/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/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/src/componentsMixins/mixins/normalizeBooleanAttributesMixin.js

@@ -0,0 +1,59 @@
+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',
+  'loading',
+  'allow-custom-value',
+];
+
+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/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();
+      }
+    };
+  };

package/src/componentsMixins/mixins/proxyInputMixin.js

@@ -0,0 +1,242 @@
+/* eslint-disable no-param-reassign */
+import { compose } from '../../utils';
+import { forwardAttrs, getComponentName } from '../../componentsHelpers';
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+import { inputValidationMixin } from '../mixins/inputValidationMixin';
+import { createStyleMixin } from '../mixins/createStyleMixin';
+
+const errorAttrs = ['invalid', 'required'];
+
+const forwardProps = (src, targets, property) => {
+  const targetArr = Array.isArray(targets) ? targets : [targets];
+
+  Object.defineProperty(src, property, {
+    set(v) {
+      targetArr.forEach((target) => {
+        target[property] = v;
+      });
+    },
+    get() {
+      return targets[0][property];
+    },
+    configurable: true,
+  });
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+  if (!ele) return undefined;
+
+  const nestingLevel = 10;
+
+  let nonSlotEle = ele;
+  for (let i = 0; i < nestingLevel; i++) {
+    [nonSlotEle] = nonSlotEle.assignedElements();
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
+  }
+  return undefined;
+};
+
+const proxyInputMixin =
+  ({
+    proxyProps = [],
+    // useProxyTargets flag allows to forwardProps to other targets, other than
+    // `this.inputElement`. It's to be used within `external-input` components,
+    // if needed
+    useProxyTargets = false,
+    // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
+    inputEvent = 'input',
+    triggerValidationEvents = [],
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
+  }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
+
+      #inputElement;
+
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+      constructor() {
+        super();
+
+        this.#inputElement = super.inputElement;
+      }
+
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
+
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
+
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
+
+        this.warnIfInputElementIsMissing();
+
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+
+        return this.#inputElement;
+      }
+
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
+
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
+
+      #handleErrorMessage() {
+        this.setAttribute('error-message', this.validationMessage);
+      }
+
+      // We do not want to show the default validity report tooltip
+      // So we are overriding the reportValidity fn to show the input's error message
+      reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+          this.#handleErrorMessage();
+          this.focus();
+        }
+      };
+
+      // we are keeping also the default reportValidity because there are some components that still using it
+      defaultReportValidity() {
+        return super.reportValidity();
+      }
+
+      init() {
+        super.init?.();
+
+        // vaadin sets invalid indication on blur
+        // we want invalid indication to appear only when calling reportValidity
+        // this is why we are overriding vaadin's setInvalid behavior
+        // to update only when the element is valid (so invalid indication will only be removed)
+        // and we are adding it in reportValidity
+        // eslint-disable-next-line func-names
+        this.baseElement._setInvalid = function (invalid) {
+          if (!invalid && this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        };
+
+        // We want to ensure that `input` events properly cross ShadowDOM boundries
+        // e.g. When we autofill a component's input with 1Password, for instance,
+        // the event is fired without `composed: true` and doesn't our component's
+        // ShadowDOM.
+        this.baseElement.addEventListener('input', (e) => {
+          if (!e.composed) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        });
+
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
+          });
+
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
+
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
+            this.#handleErrorMessage();
+          });
+
+          // sync properties
+          proxyProps.forEach((prop) => {
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
+            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
+          });
+
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
+      }
+    };
+
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
+
+export { composedProxyInputMixin as proxyInputMixin };

package/src/constants.js

@@ -0,0 +1,4 @@
+export const DESCOPE_PREFIX = 'descope';
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const BASE_THEME_SECTION = 'host';
+export const PORTAL_THEME_PREFIX = '@';

package/src/icons/errorMessageIconBase64.js

@@ -0,0 +1 @@
+export default `data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZTIxZDEyIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzMC4zMzQgMzAuMzM0Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0xNS4xNjcsMEM2LjgwNSwwLDAuMDAxLDYuODA0LDAuMDAxLDE1LjE2N2MwLDguMzYyLDYuODA0LDE1LjE2NywxNS4xNjYsMTUuMTY3YzguMzYxLDAsMTUuMTY2LTYuODA1LDE1LjE2Ni0xNS4xNjcNCgkJQzMwLjMzMyw2LjgwNCwyMy41MjgsMCwxNS4xNjcsMHogTTE3LjE2NywyNS42NjdoLTR2LTQuNWg0VjI1LjY2N3ogTTE3LjE2NywxOS41NDJoLTRWNS4xNjdoNFYxOS41NDJ6Ii8+DQo8L2c+DQo8L3N2Zz4=`;