@descope/web-components-ui 1.0.427 → 1.0.429

package/node_modules/common/src/componentsHelpers/index.js

@@ -1,95 +0,0 @@
-import { kebabCaseJoin } from '../utils';
-import { DESCOPE_PREFIX } from '../constants';
-
-export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
-  // sync all attrs on init
-  const filteredAttrs = Array.from(ele.attributes)
-    .filter(
-      (attr) =>
-        !excludeAttrs.includes(attr.name) &&
-        (!includeAttrs.length || includeAttrs.includes(attr.name))
-    )
-    .map((attr) => attr.name);
-
-  callback(filteredAttrs);
-
-  const observer = new MutationObserver((mutationsList) => {
-    mutationsList.forEach((mutation) => {
-      if (
-        mutation.type === 'attributes' &&
-        !excludeAttrs.includes(mutation.attributeName) &&
-        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
-      ) {
-        callback([mutation.attributeName]);
-      }
-    });
-  });
-
-  observer.observe(ele, { attributes: true });
-};
-
-// calling the callback with this object: { addedNodes, removedNodes }
-export const observeChildren = (ele, callback) => {
-  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
-
-  const observer = new MutationObserver((mutationsList) => {
-    mutationsList.forEach((mutation) => {
-      if (mutation.type === 'childList' || mutation.type === 'characterData') {
-        callback(mutation);
-      }
-    });
-  });
-
-  observer.observe(ele, { childList: true, characterData: true, subtree: true });
-};
-
-const createSyncAttrsCb =
-  (srcEle, targetEle, mapAttrs = {}) =>
-  (attrNames) => {
-    attrNames.forEach((attrName) => {
-      const targetAttrName = mapAttrs[attrName] || attrName;
-      const srcAttrVal = srcEle.getAttribute(attrName);
-      if (srcAttrVal !== null) {
-        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-          targetEle.setAttribute(targetAttrName, srcAttrVal);
-        }
-      } else {
-        targetEle.removeAttribute(targetAttrName);
-      }
-    });
-  };
-
-export const syncAttrs = (ele1, ele2, options) => {
-  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
-  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
-};
-
-export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
-
-export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
-
-export const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
-};
-
-export const forwardProps = (src, target, props = []) => {
-  if (!props.length) return;
-
-  const config = props.reduce(
-    (acc, prop) =>
-      Object.assign(acc, {
-        [prop]: {
-          get() {
-            return src[prop];
-          },
-          set(v) {
-            // eslint-disable-next-line no-param-reassign
-            src[prop] = v;
-          },
-        },
-      }),
-    {}
-  );
-
-  Object.defineProperties(target, config);
-};

package/node_modules/common/src/componentsMixins/helpers/mixinsHelpers.js

@@ -1,10 +0,0 @@
-// create a dispatch event function that also calls to the onevent function in case  it's set
-// usage example:
-// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
-// this will dispatch a new event when called, but also call to "onsomething"
-export function createDispatchEvent(eventName, options = {}) {
-  const event = new Event(eventName, options);
-
-  this[`on${eventName}`]?.(event); // in case we got an event callback as property
-  this.dispatchEvent(event);
-}

package/node_modules/common/src/componentsMixins/index.js

@@ -1 +0,0 @@
-export * from './mixins'

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

@@ -1,14 +0,0 @@
-export const activeableMixin = (superclass) =>
-  class ActiveableMixinClass extends superclass {
-    init() {
-      super.init?.();
-
-      this.baseElement.addEventListener('mousedown', (e) => {
-        e.preventDefault();
-        this.setAttribute('active', 'true');
-        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
-          once: true,
-        });
-      });
-    }
-  };

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

@@ -1,22 +0,0 @@
-import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
-
-export const changeMixin = (superclass) =>
-  class ChangeMixinClass extends superclass {
-    #dispatchChange = createDispatchEvent.bind(this, 'change');
-
-    init() {
-      super.init?.();
-      this.prevValue = this.value;
-
-      this.addEventListener('change', (e) => {
-        e.stopPropagation();
-      });
-
-      this.addEventListener('blur', () => {
-        if (this.value !== this.prevValue) {
-          this.#dispatchChange();
-          this.prevValue = this.value;
-        }
-      });
-    }
-  };

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

@@ -1,23 +0,0 @@
-export const componentNameValidationMixin = (superclass) =>
-  class ComponentNameValidationMixinClass extends superclass {
-    #checkComponentName() {
-      const currentComponentName = this.localName;
-
-      if (!superclass.componentName) {
-        throw Error(
-          `component name is not defined on super class, make sure you have a static get for "componentName"`
-        );
-      }
-
-      if (currentComponentName !== superclass.componentName) {
-        throw Error(
-          `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
-        );
-      }
-    }
-
-    init() {
-      super.init?.();
-      this.#checkComponentName();
-    }
-  };

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

@@ -1,12 +0,0 @@
-export const componentsContextMixin = (superclass) =>
-  class ComponentsContextMixinClass extends superclass {
-    updateComponentsContext(componentsContext) {
-      this.dispatchEvent(
-        new CustomEvent('components-context', {
-          bubbles: true,
-          composed: true,
-          detail: componentsContext,
-        })
-      );
-    }
-  };

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

@@ -1,100 +0,0 @@
-import { observeAttributes } from '../helpers/componentHelpers';
-
-const defaultValidateSchema = () => true;
-const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
-
-const createTemplate = (templateString) => {
-  const template = document.createElement('template');
-  template.innerHTML = templateString;
-
-  return template;
-};
-
-const getTemplateContent = (templateOrString) => {
-  if (typeof templateOrString === 'string') {
-    return createTemplate(templateOrString).content;
-  }
-
-  if (templateOrString instanceof HTMLTemplateElement) {
-    return templateOrString.content;
-  }
-
-  // eslint-disable-next-line no-console
-  console.error('Invalid template', templateOrString);
-  return null;
-};
-
-export const createDynamicDataMixin =
-  ({
-    itemRenderer = defaultItemRenderer,
-    validateSchema = defaultValidateSchema,
-    slotName,
-    rerenderAttrsList = [],
-  }) =>
-  (superclass) =>
-    class DynamicDataMixinClass extends superclass {
-      #data = [];
-
-      // eslint-disable-next-line class-methods-use-this
-      #validateSchema(data) {
-        if (!validateSchema) return true;
-
-        const validation = validateSchema(data);
-        if (validation === true) return true;
-
-        // eslint-disable-next-line no-console
-        console.error('Data schema validation failed', validation || '');
-
-        return false;
-      }
-
-      #removeOldItems() {
-        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
-        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
-      }
-
-      #renderItems() {
-        this.#removeOldItems();
-        this.data.forEach((item, index) => {
-          const content = getTemplateContent(itemRenderer(item, index, this));
-          this.baseElement.appendChild(content?.cloneNode(true));
-        });
-      }
-
-      set data(value) {
-        if (this.#validateSchema(value)) {
-          this.#data = value;
-          this.#renderItems();
-        }
-      }
-
-      get data() {
-        return this.#data;
-      }
-
-      init() {
-        super.init?.();
-
-        observeAttributes(
-          this,
-          (attrs) => {
-            if (attrs.includes('data')) this.#handleDataAttr();
-            else this.#renderItems();
-          },
-          { includeAttrs: [...rerenderAttrsList, 'data'] }
-        );
-      }
-
-      #handleDataAttr() {
-        const dataAttr = this.getAttribute('data');
-
-        if (!dataAttr) return;
-
-        try {
-          this.data = JSON.parse(dataAttr);
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn('Invalid JSON data', dataAttr);
-        }
-      }
-    };

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

@@ -1,58 +0,0 @@
-import { createBaseClass } from '../../baseClasses';
-import { isFunction } from '../../utils';
-import { forwardProps, syncAttrs } from '../../componentsHelpers';
-import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
-
-export const createProxy = ({
-  componentName,
-  wrappedEleName,
-  slots = [],
-  style,
-  excludeAttrsSync = [],
-  includeAttrsSync = [],
-  includeForwardProps = [],
-  delegatesFocus = true,
-}) => {
-  class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
-    #dispatchBlur = createDispatchEvent.bind(this, 'blur');
-
-    #dispatchFocus = createDispatchEvent.bind(this, 'focus');
-
-    constructor() {
-      super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
-			<${wrappedEleName}>
-			${slots
-        .map(
-          (
-            slot // when slot is an empty string, we will create the default slot (without a name)
-          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
-        )
-        .join('')}
-			</${wrappedEleName}>
-		`;
-    }
-
-    init() {
-      super.init?.();
-
-      this.baseElement.addEventListener('blur', (_) => {
-        this.#dispatchBlur();
-      });
-
-      this.baseElement.addEventListener('focus', (_) => {
-        this.#dispatchFocus();
-      });
-
-      // this is needed for components that uses props, such as combo box
-      forwardProps(this.baseElement, this, includeForwardProps);
-
-      syncAttrs(this.baseElement, this, {
-        excludeAttrs: excludeAttrsSync,
-        includeAttrs: includeAttrsSync,
-      });
-    }
-  }
-
-  return ProxyClass;
-};

package/node_modules/common/src/componentsMixins/mixins/createStyleMixin/helpers.js

@@ -1,106 +0,0 @@
-import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../../utils';
-import { getCssVarName } from '../../../componentsHelpers';
-
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
-
-const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
-  isFunction(relativeSelectorOrSelectorFn)
-    ? relativeSelectorOrSelectorFn(baseSelector)
-    : `${baseSelector}${
-        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-          ? ` ${relativeSelectorOrSelectorFn}`
-          : relativeSelectorOrSelectorFn
-      }`;
-
-class StyleBuilder {
-  constructor() {
-    this.styleMap = new Map();
-  }
-
-  add(selector, property, value) {
-    if (!this.styleMap.has(selector)) {
-      this.styleMap.set(selector, []);
-    }
-
-    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
-  }
-
-  toString() {
-    return Array.from(this.styleMap.entries()).reduce((acc, [selector, propValArr]) => {
-      const properties = propValArr
-        .map(({ property, value }) => `${property}: ${value}`)
-        .join(';\n');
-
-      return `${acc}${selector} { \n${properties} \n}\n\n`;
-    }, '');
-  }
-}
-
-const normalizeConfig = (attr, config) => {
-  const defaultMapping = { selector: '', property: kebabCase(attr) };
-
-  if (!config || !Object.keys(config).length) return [defaultMapping];
-
-  if (Array.isArray(config)) return config.map((entry) => ({ ...defaultMapping, ...entry }));
-
-  return [{ ...defaultMapping, ...config }];
-};
-
-const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
-
-export const createStyle = (componentName, baseSelector, mappings) => {
-  const style = new StyleBuilder();
-  const createFallbackVar = (fallback, origVarName) => {
-    if (!fallback) return '';
-    if (typeof fallback === 'string') return fallback;
-
-    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
-    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
-  };
-
-  Object.keys(mappings).forEach((attr) => {
-    const attrConfig = normalizeConfig(attr, mappings[attr]);
-
-    const cssVarName = getCssVarName(componentName, attr);
-
-    attrConfig.forEach(
-      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
-        const fallbackValue = createFallbackVar(fallback, cssVarName);
-        style.add(
-          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-          isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
-        );
-      }
-    );
-  });
-
-  return style.toString();
-};
-
-const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
-  if (!fallback) return {};
-
-  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
-  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
-  return {
-    [fallbackAttrName]: fallbackVarName,
-    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
-  };
-};
-
-export const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce((acc, attr) => {
-    const varName = getCssVarName(componentName, attr);
-
-    return Object.assign(
-      acc,
-      { [attr]: varName },
-      getFallbackVarsNames(attr, varName, mappings[attr])
-    );
-  }, {});
-
-// on some cases we need a selector to be more specific than another
-// for this we have this fn that generate a class selector multiple times
-export const createClassSelectorSpecifier = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');

package/node_modules/common/src/componentsMixins/mixins/createStyleMixin/index.js

@@ -1,167 +0,0 @@
-import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../../constants';
-import { kebabCaseJoin } from '../../../utils';
-import { getCssVarName, observeAttributes } from '../../../componentsHelpers';
-import { componentsThemeManager } from '../../../themeHelpers';
-import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
-
-const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
-
-export const createStyleMixin =
-  ({ mappings = {}, componentNameOverride = '' }) =>
-  (superclass) => {
-    const componentName = componentNameOverride || superclass.componentName;
-
-    return class CustomStyleMixinClass extends superclass {
-      static get cssVarList() {
-        return {
-          ...superclass.cssVarList,
-          ...createCssVarsList(componentName, {
-            ...mappings,
-          }),
-        };
-      }
-
-      #overrideStyleEle;
-
-      #themeStyleEle;
-
-      #disconnectThemeManager;
-
-      #componentNameSuffix;
-
-      #themeSection;
-
-      #rootElement;
-
-      #baseSelector;
-
-      #styleAttributes;
-
-      #getRootElement;
-
-      // we are using this mixin also for portalMixin
-      // so we should be able to inject styles to other DOM elements
-      // this is why we need to support these overrides
-      constructor({
-        getRootElement,
-        componentNameSuffix = '',
-        themeSection = BASE_THEME_SECTION,
-        baseSelector,
-      } = {}) {
-        super();
-        this.#componentNameSuffix = componentNameSuffix;
-        this.#themeSection = themeSection;
-        this.#baseSelector = baseSelector ?? this.baseSelector;
-        this.#getRootElement = getRootElement;
-
-        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
-        );
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      get #componentTheme() {
-        return componentsThemeManager.currentTheme?.[componentName] || '';
-      }
-
-      #onComponentThemeChange() {
-        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
-      }
-
-      #createComponentTheme() {
-        this.#themeStyleEle = document.createElement('style');
-        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
-        this.#rootElement.prepend(this.#themeStyleEle);
-        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
-          this.#onComponentThemeChange.bind(this)
-        );
-        this.#onComponentThemeChange();
-      }
-
-      #createOverridesStyle() {
-        if (this.#styleAttributes.length) {
-          this.#overrideStyleEle = document.createElement('style');
-          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
-
-          const classSpecifier = createClassSelectorSpecifier(
-            componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
-          );
-
-          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-          this.#rootElement.append(this.#overrideStyleEle);
-        }
-      }
-
-      #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
-        if (!style) return;
-
-        const varName = getCssVarName(
-          componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
-        );
-
-        if (value) style?.setProperty(varName, value);
-        else {
-          style?.removeProperty(varName);
-          this.removeAttribute(attrName);
-        }
-      }
-
-      #updateOverridesStyle(attrs = []) {
-        let shouldUpdate = false;
-
-        attrs.forEach((attr) => {
-          if (this.#styleAttributes.includes(attr)) {
-            this.#setAttrOverride(attr, this.getAttribute(attr));
-            shouldUpdate = true;
-          }
-        });
-
-        if (shouldUpdate) {
-          // we are rewriting the style back to the style tag
-          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
-        }
-      }
-
-      #createMappingStyle() {
-        if (Object.keys(mappings).length) {
-          const themeStyle = document.createElement('style');
-          themeStyle.id = `style-mixin-mappings__${componentName}`;
-          themeStyle.innerHTML = createStyle(
-            kebabCaseJoin(componentName, this.#componentNameSuffix),
-            this.#baseSelector,
-            mappings
-          );
-          this.#rootElement.prepend(themeStyle);
-        }
-      }
-
-      #addClassName(className) {
-        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
-      }
-
-      async init() {
-        super.init?.();
-        if (this.shadowRoot.isConnected) {
-          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
-
-          this.#addClassName(componentName);
-
-          this.#createMappingStyle();
-          this.#createComponentTheme();
-          this.#createOverridesStyle();
-
-          // this is instead attributeChangedCallback because we cannot use static methods in this case
-          observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
-        }
-      }
-
-      disconnectedCallback() {
-        super.disconnectedCallback?.();
-
-        this.#disconnectThemeManager?.();
-      }
-    };
-  };

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

@@ -1,62 +0,0 @@
-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');
-      }
-    }
-  };