@descope/web-components-ui 1.0.426 → 1.0.428

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

@@ -1,112 +0,0 @@
-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/node_modules/common/src/componentsMixins/mixins/proxyInputMixin.js

@@ -1,242 +0,0 @@
-/* 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/node_modules/common/src/constants.js

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

package/node_modules/common/src/icons/errorMessageIconBase64.js

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

package/node_modules/common/src/sbControls.js

@@ -1,302 +0,0 @@
-import errorMessageIconBase64 from './icons/errorMessageIconBase64';
-
-export const labelControl = {
-  label: {
-    name: 'Label',
-    control: { type: 'text' },
-  },
-};
-
-export const helperTextControl = {
-  'helper-text': {
-    name: 'Helper Text',
-    control: { type: 'text' },
-  },
-};
-
-export const placeholderControl = {
-  placeholder: {
-    name: 'Placeholder',
-    control: { type: 'text' },
-  },
-};
-
-export const sizeControl = {
-  size: {
-    name: 'Size',
-    options: ['xs', 'sm', 'md', 'lg'],
-    control: { type: 'select' },
-  },
-};
-
-export const loadingControl = {
-  loading: {
-    name: 'Loading',
-    control: { type: 'boolean' },
-  },
-};
-
-export const fullWidthControl = {
-  'full-width': {
-    name: 'Full Width',
-    control: { type: 'boolean' },
-  },
-};
-
-export const disabledControl = {
-  disabled: {
-    name: 'Disabled',
-    control: { type: 'boolean' },
-  },
-};
-
-export const readOnlyControl = {
-  readonly: {
-    name: 'Read Only',
-    control: { type: 'boolean' },
-  },
-};
-
-export const requiredControl = {
-  required: {
-    name: 'Required',
-    control: { type: 'boolean' },
-  },
-};
-
-export const directionControl = {
-  direction: {
-    name: 'Direction',
-    options: ['ltr', 'rtl'],
-    control: { type: 'select' },
-  },
-};
-
-export const borderedControl = {
-  bordered: {
-    name: 'Bordered',
-    control: { type: 'boolean' },
-  },
-};
-
-export const minLengthControl = {
-  minlength: {
-    name: 'Min. Length',
-    control: { type: 'text' },
-  },
-};
-
-export const maxLengthControl = {
-  maxlength: {
-    name: 'Max. Length',
-    control: { type: 'text' },
-  },
-};
-
-export const textContentControl = {
-  text: {
-    name: 'Content',
-    control: { type: 'text' },
-  },
-};
-
-export const modeControl = {
-  mode: {
-    name: 'Mode',
-    options: ['none', 'primary', 'secondary', 'success', 'error'],
-    control: { type: 'select' },
-  },
-};
-
-export const textAlignControl = {
-  'text-align': {
-    name: 'Text Align',
-    options: ['left', 'center', 'right'],
-    control: { type: 'select' },
-  },
-};
-
-export const errorMissingValueControl = {
-  'data-errormessage-value-missing': {
-    name: 'Custom Error: Mandatory',
-    control: { type: 'text' },
-  },
-};
-
-export const errorPatternMismatchControl = {
-  'data-errormessage-pattern-mismatch': {
-    name: 'Custom Error: Pattern Mismatch',
-    control: { type: 'text' },
-  },
-};
-
-export const errorTypeMismatchControl = {
-  'data-errormessage-type-mismatch': {
-    name: 'Custom Error: Type Mismatch',
-    control: { type: 'text' },
-  },
-};
-
-export const errorBadInputControl = {
-  'data-errormessage-bad-input': {
-    name: 'Custom Error: Bad Input',
-    control: { type: 'text' },
-  },
-};
-
-export const errorRangeUnderflowControl = {
-  'data-errormessage-range-underflow': {
-    name: 'Custom Error: Below minimum value',
-    control: { type: 'text' },
-  },
-};
-
-export const errorRangeOverflowControl = {
-  'data-errormessage-range-overflow': {
-    name: 'Custom Error: Exceeds maximum value',
-    control: { type: 'text' },
-  },
-};
-
-export const fillControl = {
-  'st-fill': {
-    name: 'Fill',
-    control: { type: 'color' },
-  },
-};
-
-export const customHeightControl = {
-  'st-host-height': {
-    name: 'Custom Height',
-    control: { type: 'text' },
-  },
-};
-
-export const customWidthControl = {
-  'st-host-width': {
-    name: 'Custom Width',
-    control: { type: 'text' },
-  },
-};
-
-export const checkboxValueControl = {
-  checked: {
-    name: 'Checked',
-    control: { type: 'boolean' },
-  },
-};
-
-export const buttonVariantControl = {
-  variant: {
-    name: 'Button Variant',
-    options: ['contained', 'outline', 'link'],
-    control: { type: 'select' },
-  },
-};
-
-export const boxShadowControl = {
-  shadow: {
-    name: 'Shadow',
-    options: ['sm', 'md', 'lg', 'xl', '2xl'],
-    control: { type: 'select' },
-  },
-};
-
-export const borderRadiusControl = {
-  'border-radius': {
-    name: 'Radius',
-    options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
-    control: { type: 'select' },
-  },
-};
-
-export const imgSrcControl = {
-  src: {
-    name: 'Image Source',
-    control: { type: 'text' },
-  },
-};
-
-export const typographyVariantControl = {
-  variant: {
-    name: 'Variant',
-    options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
-    control: { type: 'select' },
-  },
-};
-
-export const overrideRenderItemControl = {
-  overrideRenderItem: {
-    name: 'Override the default item renderer function',
-    control: { type: 'boolean' },
-  },
-};
-
-export const itemsSourceControl = {
-  itemsSource: {
-    name: 'Where to take the items from',
-    control: {
-      type: 'select',
-      options: {
-        Children: 'children',
-        '"data" attribute': 'attr',
-        '"data" property': 'prop',
-      },
-    },
-  },
-};
-
-export const minItemsSelectionControl = {
-  minItemsSelection: {
-    name: 'Min Items Selection',
-    control: { type: 'number' },
-  },
-};
-
-export const maxItemsSelectionControl = {
-  maxItemsSelection: {
-    name: 'Max Items Selection',
-    control: { type: 'number' },
-  },
-};
-
-export const labelSpacingControl = {
-  'label-spacing': {
-    name: 'Label Spacing',
-    control: { type: 'range', min: 0, max: 200, step: 1 },
-  },
-};
-
-export const inputLabelTypeControl = {
-  'label-type': {
-    name: 'Label Type',
-    control: {
-      type: 'select',
-      options: ['static', 'floating'],
-    },
-  },
-};
-
-export const inputCopyToClipboardControl = {
-  'copy-to-clipboard': {
-    name: 'Copy to clipboard',
-    control: {
-      type: 'boolean',
-    },
-  },
-};
-
-export const errorMessageIconControl = {
-  errorMsgIcon: {
-    name: 'Error Message Icon',
-    control: {
-      type: 'boolean',
-    },
-  },
-};
-
-export const errorMessageIconAttrs = `
-    st-error-message-icon="url(${errorMessageIconBase64})"
-    st-error-message-icon-size="14px"
-    st-error-message-icon-padding="1.5em"
-  `;