@descope/web-components-ui 1.0.418 → 1.0.420

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);
+};

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

@@ -0,0 +1,170 @@
+import { syncAttrs } from '../../componentsHelpers';
+import {
+  applyExternalInputStyles,
+  createExternalInputEle,
+  createExternalInputSlot,
+} from './externalInputHelpers';
+
+export const externalInputMixin =
+  ({ inputType, inputName, autocompleteType, includeAttrs = [], noBlurDispatch = false }) =>
+  (superclass) =>
+    class ExternalInputMixinClass extends superclass {
+      #timers = [];
+
+      get isExternalInput() {
+        return this.getAttribute('external-input') === 'true';
+      }
+
+      createExternalInput() {
+        if (!this.isExternalInput || this.isReadOnly || this.isDisabled) {
+          return null;
+        }
+
+        // use original input element as reference
+        const origInput = this.baseElement.querySelector('input');
+
+        if (!origInput) {
+          return null;
+        }
+
+        // to avoid focus loop between external-input and origInput
+        // we set origInput's tabindex to -1
+        // otherwise, shift-tab will never leave the component focus
+        origInput.setAttribute('tabindex', '-1');
+
+        // create external slot
+        const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
+
+        // append external slot to base element
+        this.baseElement.appendChild(externalInputSlot);
+
+        this.externalInput = createExternalInputEle(
+          'external-input',
+          inputType,
+          this.getAutocompleteType(),
+          inputName
+        );
+
+        // apply original input's styles to external input
+        setTimeout(() => {
+          applyExternalInputStyles(origInput, this.externalInput, this.getAttribute('label-type'));
+        });
+
+        // 1Password catches the internal input, so we forward the value to the external input
+        this.forwardInputValue(origInput, this.externalInput);
+
+        syncAttrs(origInput, this.externalInput, {
+          includeAttrs,
+        });
+
+        // We disable Vaadin's original `_setFocused` function, and use handleFocusEvents
+        // and handleBlurEvents functions
+        this.baseElement
+          .querySelector('input')
+          .addEventListener('focusout', (e) => e.stopImmediatePropagation(), true);
+
+        // In order to manage focus/blur events when moving between parts of the component
+        // we're managing the event dispatching by ourselves, with the following strategy:
+        // - If one of the component parts is focused - it means that the component is still focused - so we stop the blur events.
+        // - When none of the component parts is focused, we dispatch blur event.
+        this.handleFocusEvents();
+        this.handleBlurEvents();
+
+        // sync input value
+        this.handlelInputEvents(this.externalInput);
+
+        // append external input to component's DOM
+        this.appendChild(this.externalInput);
+
+        return this.externalInput;
+      }
+
+      clearBlurTimers() {
+        this.#timers.forEach((timer) => clearTimeout(timer));
+        this.#timers.length = 0;
+      }
+
+      dispatchBlur() {
+        return setTimeout(() => {
+          this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
+          this.removeAttribute('focused');
+        });
+      }
+
+      handleFocusEvents() {
+        // on baseElement `focus` we forward the focus to the external input.
+        // also, in order to avoid any blur within the component, we clear the blur timers.
+        this.baseElement.addEventListener('focus', () => {
+          this.externalInput.focus();
+          this.clearBlurTimers();
+        });
+
+        // on `focus` of the external input, we manually set the `focused` attribute
+        this.externalInput.addEventListener('focus', () => {
+          this.clearBlurTimers();
+          setTimeout(() => this.baseElement.setAttribute('focused', 'true'));
+        });
+      }
+
+      handleBlurEvents() {
+        this.baseElement.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            // some components do not require this synthetic blur dispatch (e.g. Password)
+            // so we allow them to override this dispatch
+            if (noBlurDispatch) return;
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+
+        this.externalInput.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+      }
+
+      handlelInputEvents(externalInput) {
+        // sync value of insible input back to original input
+        externalInput.addEventListener('input', (e) => {
+          this.value = e.target.value;
+        });
+
+        // handle has-value attr
+        externalInput.addEventListener('input', (e) => {
+          if (!e.target.value) {
+            this.removeAttribute('has-value');
+          } else {
+            this.setAttribute('has-value', 'true');
+          }
+        });
+      }
+
+      getAutocompleteType() {
+        return this.getAttribute('autocomplete') || autocompleteType;
+      }
+
+      forwardInputValue(source, target) {
+        // set internal sync events
+        const valueDescriptor = Object.getOwnPropertyDescriptor(
+          this.inputElement.constructor.prototype,
+          'value'
+        );
+
+        Object.defineProperty(source, 'value', {
+          ...valueDescriptor,
+
+          set(v) {
+            valueDescriptor.set.call(this, v);
+            // eslint-disable-next-line no-param-reassign
+            target.value = v;
+          },
+          configurable: true,
+        });
+      }
+    };

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

@@ -0,0 +1,13 @@
+export const hoverableMixin = (superclass) =>
+  class HoverableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mouseover', (e) => {
+        this.setAttribute('hover', 'true');
+        e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
+          once: true,
+        });
+      });
+    }
+  };

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

@@ -0,0 +1,14 @@
+export { createStyleMixin } from './createStyleMixin';
+export { draggableMixin } from './draggableMixin';
+export { createProxy } from './createProxy';
+export { proxyInputMixin } from './proxyInputMixin';
+export { componentNameValidationMixin } from './componentNameValidationMixin';
+export { hoverableMixin } from './hoverableMixin';
+export { inputValidationMixin } from './inputValidationMixin';
+export { portalMixin } from './portalMixin';
+export { changeMixin } from './changeMixin';
+export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMixin';
+export { lifecycleEventsMixin } from './lifecycleEventsMixin';
+export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
+export { externalInputMixin } from './externalInputMixin';
+export {componentsContextMixin} from './componentsContextMixin'