@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,167 @@
+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

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

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

@@ -0,0 +1,93 @@
+// since on load we can only sample the color of the placeholder,
+// we need to temporarily populate the input in order to sample the value color
+const getValueColor = (ele, computedStyle) => {
+  // to support setting dynamic values, we have to store the existing value
+  // and re-set it if we are returning from this hack
+  const origVal = ele.value;
+
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '_';
+
+  const valueColor = computedStyle.getPropertyValue('color');
+
+  if (ele.value === '_') {
+    // eslint-disable-next-line no-param-reassign
+    ele.value = origVal;
+  }
+
+  return valueColor;
+};
+
+export const createExternalInputSlot = (slotName, targetSlotName) => {
+  const slotEle = document.createElement('slot');
+
+  slotEle.setAttribute('name', slotName);
+  slotEle.setAttribute('slot', targetSlotName);
+
+  return slotEle;
+};
+
+export const createExternalInputEle = (targetSlotName, type, autocompleteType, inputName) => {
+  const inputEle = document.createElement('input');
+
+  inputEle.setAttribute('slot', targetSlotName);
+  inputEle.setAttribute('type', type);
+  inputEle.setAttribute('name', inputName);
+  inputEle.setAttribute('data-hidden-input', 'true');
+  inputEle.setAttribute('autocomplete', autocompleteType);
+
+  return inputEle;
+};
+
+// We apply the original input's style to the external-input.
+// Eventually, the user should interact directly with the external input.
+// We keep the original input
+export const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
+  // We set a timeout here to avoid "Double Print" cases,
+  // caused by sampling the computed style before it's ready.
+  setTimeout(() => {
+    const computedStyle = getComputedStyle(sourceInputEle);
+    // Get minimal set of computed theme properties to set on external input
+    const height = computedStyle.getPropertyValue('height');
+    const paddingLeft = computedStyle.getPropertyValue('padding-left');
+    const paddingRight = computedStyle.getPropertyValue('padding-right');
+    const fontSize = computedStyle.getPropertyValue('font-size');
+    const fontFamily = computedStyle.getPropertyValue('font-family');
+    const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
+    const caretColor = computedStyle.getPropertyValue('caret-color');
+
+    const valueColor = getValueColor(sourceInputEle, computedStyle);
+
+    const commonThemeStyles = [
+      ['all', 'unset'],
+      ['position', 'absolute'],
+      ['background-color', 'transparent'],
+      ['height', height],
+      ['left', paddingLeft],
+      ['right', paddingRight],
+      ['font-size', fontSize],
+      ['font-family', fontFamily],
+      ['letter-spacing', letterSpacing],
+      ['caret-color', caretColor], // this is for seeing caret when focusing on external input
+      ['color', valueColor],
+    ];
+
+    commonThemeStyles.forEach(([key, val]) =>
+      targetInputEle.style.setProperty(key, val, 'important')
+    );
+
+    // Handle floating label theme properties
+    if (labelType === 'floating') {
+      const marginBottom = computedStyle.getPropertyValue('margin-bottom');
+      targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
+    }
+
+    // sample and apply width only after original input is ready and fully rendered
+    const width = computedStyle.getPropertyValue('width');
+    targetInputEle.style.setProperty(
+      'width',
+      `calc(${width} - ${paddingLeft} - ${paddingRight}`,
+      'important'
+    );
+  }, 0);
+};