@descope/web-components-ui 1.0.179 → 1.0.181

package/dist/cjs/index.cjs.js

@@ -608,6 +608,8 @@ const createStyleMixin =
 
       #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
@@ -620,16 +622,12 @@ const createStyleMixin =
         super();
         this.#componentNameSuffix = componentNameSuffix;
         this.#themeSection = themeSection;
-        this.#rootElement = getRootElement?.(this) || this.shadowRoot;
         this.#baseSelector = baseSelector ?? this.baseSelector;
+        this.#getRootElement = getRootElement;
 
         this.#styleAttributes = Object.keys(mappings).map((key) =>
           kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
         );
-
-        this.#createMappingStyle();
-        this.#createComponentTheme();
-        this.#createOverridesStyle();
       }
 
       // eslint-disable-next-line class-methods-use-this
@@ -718,8 +716,14 @@ const createStyleMixin =
       init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
+          this.#rootElement = 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), {});
         }
@@ -1218,124 +1222,129 @@ const getNestedInput = (ele) => {
   return undefined;
 };
 
-const proxyInputMixin = (superclass) =>
-  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
-    static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...errorAttrs];
-    }
+const proxyInputMixin =
+  ({ proxyProps = [] }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
 
-    #inputElement;
+      #inputElement;
 
-    #dispatchChange = createDispatchEvent.bind(this, 'change');
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
 
-    constructor() {
-      super();
+      constructor() {
+        super();
 
-      this.#inputElement = super.inputElement;
-    }
+        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);
+      // 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);
-    }
+        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;
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
 
-      this.warnIfInputElementIsMissing();
+        this.warnIfInputElementIsMissing();
 
-      const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
-      const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
 
-      this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
 
-      return this.#inputElement;
-    }
+        return this.#inputElement;
+      }
 
-    set inputElement(ele) {
-      this.#inputElement = ele;
-    }
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
 
-    getValidity() {
-      return this.inputElement?.validity || {};
-    }
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
 
-    handleInternalInputErrorMessage() {
-      if (!this.inputElement.checkValidity()) {
-        this.inputElement.setCustomValidity(this.validationMessage);
+      handleInternalInputErrorMessage() {
+        if (!this.inputElement.checkValidity()) {
+          this.inputElement.setCustomValidity(this.validationMessage);
+        }
       }
-    }
 
-    #handleErrorMessage() {
-      this.handleInternalInputErrorMessage();
-      this.setAttribute('error-message', this.validationMessage);
-    }
+      #handleErrorMessage() {
+        this.handleInternalInputErrorMessage();
+        this.setAttribute('error-message', this.validationMessage);
+      }
 
-    init() {
-      super.init?.();
+      init() {
+        super.init?.();
 
-      // 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(() => {
-        this.inputElement?.addEventListener('input', (e) => {
-          if (!this.inputElement.checkValidity()) {
-            this.inputElement.setCustomValidity('');
-            // after updating the input validity we want to trigger set validity on the wrapping element
-            // so we will get the updated validity
-            this.setCustomValidity('');
-
-            // Vaadin is getting the input event before us,
-            // so in order to make sure they use the updated validity
-            // we calling their fn after updating the input validity
-            this.baseElement.__onInput(e);
+        // 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(() => {
+          this.inputElement?.addEventListener('input', (e) => {
+            if (!this.inputElement.checkValidity()) {
+              this.inputElement.setCustomValidity('');
+              // after updating the input validity we want to trigger set validity on the wrapping element
+              // so we will get the updated validity
+              this.setCustomValidity('');
+
+              // Vaadin is getting the input event before us,
+              // so in order to make sure they use the updated validity
+              // we calling their fn after updating the input validity
+              this.baseElement.__onInput(e);
+
+              this.#handleErrorMessage();
+            }
+          });
 
-            this.#handleErrorMessage();
-          }
-        });
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
 
-        this.baseElement.addEventListener('change', () => {
-          this.#dispatchChange();
-        });
+          this.#inputElement.addEventListener('blur', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+              this.#handleErrorMessage();
+            }
+          });
 
-        this.#inputElement.addEventListener('blur', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
             this.#handleErrorMessage();
-          }
-        });
+          });
 
-        this.addEventListener('invalid', () => {
-          if (!this.checkValidity()) {
-            this.setAttribute('invalid', 'true');
-          }
-          this.#handleErrorMessage();
-        });
+          this.handleInternalInputErrorMessage();
 
-        this.handleInternalInputErrorMessage();
+          // sync properties
+          proxyProps.forEach((prop) => {
+            propertyObserver(this, this.inputElement, prop);
+          });
 
-        // sync properties
-        propertyObserver(this, this.inputElement, 'value');
-        propertyObserver(this, this.inputElement, 'selectionStart');
-        this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-        forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
-      });
-    }
-  };
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+      }
+    };
 
-const composedProxyInputMixin = compose(
-  proxyInputMixin,
-  // 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') })
-);
+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') })
+  );
 
 // this is needed because we might generate the same css vars names
 // e.g. "overlayColor" attribute in style mixin's mapping,
@@ -1942,7 +1951,7 @@ const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$6
 )(
@@ -2177,7 +2186,7 @@ const PasswordClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   passwordDraggableMixin
 )(
@@ -2278,7 +2287,7 @@ const NumberFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({
@@ -2345,7 +2354,7 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$5
 )(
@@ -2450,7 +2459,7 @@ const TextAreaClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin
 )(
   createProxy({
@@ -2481,7 +2490,7 @@ const vars$k = TextAreaClass.cssVarList;
 const textArea = {
   [vars$k.hostWidth]: refs.width,
   [vars$k.hostMinWidth]: refs.minWidth,
-  [vars$k.fontSize]: globalRefs$a.typography.body2.size,
+  [vars$k.fontSize]: refs.fontSize,
   [vars$k.fontFamily]: refs.fontFamily,
   [vars$k.labelTextColor]: refs.labelTextColor,
   [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
@@ -2694,7 +2703,7 @@ const CheckboxClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   booleanFieldMixin
 )(
@@ -2830,7 +2839,7 @@ const SwitchToggleClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   booleanFieldMixin
 )(
@@ -3674,7 +3683,7 @@ const PasscodeClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$4
 )(
@@ -4040,6 +4049,16 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideOverlaySettings();
       observeChildren(this, this.#onChildrenChange.bind(this));
     }
+
+    set value(val) {
+      this.baseElement.selectedItem = this.baseElement.items.find(
+        (item) => item['data-id'] === val
+      );
+    }
+
+    get value() {
+      return this.baseElement.selectedItem?.['data-id'] || '';
+    }
   };
 
 const {
@@ -4064,11 +4083,6 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-// const { slotted, selected } = {
-// 	slotted: { selector: () => '::slotted(*)' },
-// 	selected: { selector: () => '::slotted([selected])' }
-// }
-
 const ComboBoxClass = compose(
   createStyleMixin({
     mappings: {
@@ -4112,6 +4126,9 @@ const ComboBoxClass = compose(
       // at this time.
       overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
       overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
     },
   }),
   draggableMixin,
@@ -4120,17 +4137,18 @@ const ComboBoxClass = compose(
     selector: '',
     mappings: {
       backgroundColor: { selector: 'vaadin-combo-box-scroller' },
-      cursor: { selector: 'vaadin-combo-box-item' }, // TODO: this mapping doesn't work, needs fixing.
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
+      cursor: { selector: 'vaadin-combo-box-item' },
       fontFamily: { selector: 'vaadin-combo-box-item' },
+      fontSize: { selector: 'vaadin-combo-box-item' },
     },
     forward: {
       include: false,
       attributes: ['size'],
     },
   }),
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
   componentNameValidationMixin,
   ComboBoxMixin
 )(
@@ -4208,12 +4226,14 @@ const comboBox = {
     [vars$8.inputDropdownButtonCursor]: 'default',
   },
 
-  [vars$8.overlay.minHeight]: '400px',
-  [vars$8.overlay.margin]: '0 auto',
+  // Overlay theme exposed via the component:
+  [vars$8.overlayFontSize]: refs.fontSize,
+  [vars$8.overlayFontFamily]: refs.fontFamily,
+  [vars$8.overlayCursor]: 'pointer',
 
-  // [vars.overlayCursor]: 'pointer',
-  // [vars.overlayBackground]: globalRefs.colors.surface.light,
-  // [vars.overlayBorder]: `2px solid red`,
+  // Overlay direct theme:
+  [vars$8.overlay.minHeight]: '400px',
+  [vars$8.overlay.margin]: '0',
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
@@ -5637,7 +5657,7 @@ const PhoneFieldClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$3
 )(
   createProxy({
@@ -5845,7 +5865,7 @@ const PhoneFieldInputBoxClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$2
 )(
   createProxy({
@@ -6017,7 +6037,7 @@ const NewPasswordClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$1
 )(
   createProxy({
@@ -6389,7 +6409,7 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
   vars: vars$3
 });
 
-const componentName$3 = getComponentName('select-item');
+const componentName$3 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
   componentName: componentName$3,
@@ -6457,7 +6477,7 @@ class RawSelectItem extends createBaseClass({
   }
 }
 
-const SelectItemClass = compose(
+const ButtonSelectionGroupItemClass = compose(
   createStyleMixin({
     mappings: {
       backgroundColor: {
@@ -6488,9 +6508,9 @@ const SelectItemClass = compose(
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = SelectItemClass.cssVarList;
+const vars$2 = ButtonSelectionGroupItemClass.cssVarList;
 
-const selectItem = {
+const buttonSelectionGroupItem = {
   [vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
   [vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.borderColor]: globalRefs$1.colors.surface.main,
@@ -6508,15 +6528,15 @@ const selectItem = {
   },
 };
 
-var selectItem$1 = /*#__PURE__*/Object.freeze({
+var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: selectItem,
+  default: buttonSelectionGroupItem,
   vars: vars$2
 });
 
-const componentName$2 = getComponentName('single-select-internal');
+const componentName$2 = getComponentName('button-selection-group-internal');
 
-class SingleSelectInternalClass extends createBaseInputClass({
+class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   componentName: componentName$2,
   baseSelector: 'slot',
 }) {
@@ -6642,17 +6662,17 @@ class SingleSelectInternalClass extends createBaseInputClass({
   }
 }
 
-const componentName$1 = getComponentName('single-select');
+const componentName$1 = getComponentName('button-selection-group');
 
 const customMixin = (superclass) =>
-  class SingleSelectMixinClass extends superclass {
+  class ButtonSelectionGroupMixinClass extends superclass {
     init() {
       super.init?.();
       const template = document.createElement('template');
 
       template.innerHTML = `
 			<${componentName$2}
-				name="single-select"
+				name="button-selection-group"
 				slot="input"
         tabindex="-1"
 			>
@@ -6672,11 +6692,11 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  internalWrapper: { selector: 'descope-single-select-internal slot' },
+  internalWrapper: { selector: 'descope-button-selection-group-internal slot' },
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const SingleSelectClass = compose(
+const ButtonSelectionGroupClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { ...host, property: 'width' },
@@ -6691,7 +6711,7 @@ const SingleSelectClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin,
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin
 )(
@@ -6711,7 +6731,7 @@ const SingleSelectClass = compose(
 				background-color: transparent;
 			}
 
-			descope-single-select-internal {
+			descope-button-selection-group-internal {
 				-webkit-mask-image: none;
 				padding: 0;
 				width: 100%;
@@ -6757,9 +6777,9 @@ const SingleSelectClass = compose(
 );
 
 const globalRefs = getThemeRefs(globals);
-const vars$1 = SingleSelectClass.cssVarList;
+const vars$1 = ButtonSelectionGroupClass.cssVarList;
 
-const singleSelect = {
+const buttonSelectionGroup = {
   [vars$1.fontFamily]: refs.fontFamily,
   [vars$1.labelTextColor]: refs.labelTextColor,
   [vars$1.labelRequiredIndicator]: refs.requiredIndicator,
@@ -6768,9 +6788,9 @@ const singleSelect = {
   [vars$1.hostWidth]: refs.width,
 };
 
-var singleSelect$1 = /*#__PURE__*/Object.freeze({
+var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: singleSelect,
+  default: buttonSelectionGroup,
   vars: vars$1
 });
 
@@ -6799,8 +6819,8 @@ const components = {
   newPassword: newPassword$1,
   inputWrapper,
   uploadFile: uploadFile$1,
-  selectItem: selectItem$1,
-  singleSelect: singleSelect$1,
+  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
+  buttonSelectionGroup: buttonSelectionGroup$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -6971,6 +6991,8 @@ class RawRecaptcha extends BaseClass {
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
 
 exports.ButtonClass = ButtonClass;
+exports.ButtonSelectionGroupClass = ButtonSelectionGroupClass;
+exports.ButtonSelectionGroupItemClass = ButtonSelectionGroupItemClass;
 exports.CheckboxClass = CheckboxClass;
 exports.ContainerClass = ContainerClass;
 exports.DividerClass = DividerClass;
@@ -6987,8 +7009,6 @@ exports.PasswordClass = PasswordClass;
 exports.PhoneFieldClass = PhoneFieldClass;
 exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
 exports.RecaptchaClass = RecaptchaClass;
-exports.SelectItemClass = SelectItemClass;
-exports.SingleSelectClass = SingleSelectClass;
 exports.SwitchToggleClass = SwitchToggleClass;
 exports.TextAreaClass = TextAreaClass;
 exports.TextClass = TextClass;