@descope/web-components-ui 1.0.333 → 1.0.335

package/src/mixins/proxyInputMixin.js

@@ -42,7 +42,7 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // useProxyTargets flag allows to forwardProps to other targets, other than
-    // `this.inputElement`. It's to be used within `external-input` components,
+    // `this.inputElement`.
     // if needed
     useProxyTargets = false,
     // allows us to set the event that should trigger validation
@@ -171,10 +171,7 @@ const proxyInputMixin =
 
           // sync properties
           proxyProps.forEach((prop) => {
-            const externalInput = this.querySelector('input[slot="external-input"]') || null;
-            const proxyTargets = useProxyTargets
-              ? [this.baseElement, externalInput].filter(Boolean)
-              : [];
+            const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
             forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 

package/src/theme/components/comboBox.js

@@ -35,21 +35,16 @@ export const comboBox = {
   [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
   [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
   [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   _readonly: {
     [vars.inputDropdownButtonCursor]: 'default',

package/src/theme/components/emailField.js

@@ -27,21 +27,16 @@ const emailField = {
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
   [vars.inputHeight]: refs.inputHeight,
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 export default emailField;

package/src/theme/components/grid.js

@@ -30,6 +30,7 @@ export const grid = {
 
   [vars.valueTextColor]: globalRefs.colors.surface.contrast,
   [vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
+  [vars.hostDirection]: globalRefs.direction,
 
   _bordered: {
     [vars.borderColor]: refs.borderColor,

package/src/theme/components/multiSelectComboBox.js

@@ -39,20 +39,19 @@ export const multiSelectComboBox = {
   [vars.chipFontSize]: refs.chipFontSize,
   [vars.chipTextColor]: globalRefs.colors.surface.contrast,
   [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelLeftPosition]: refs.labelLeftPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
   labelType: {
     floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelLeftPosition]: refs.labelLeftPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
       [vars.inputHorizontalPadding]: '0.25em',
-
       _hasValue: {
         [vars.inputHorizontalPadding]: '0.45em',
       },

package/src/theme/components/newPassword.js

@@ -19,12 +19,7 @@ const newPassword = {
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.policyPreviewBackgroundColor]: 'none',
   [vars.policyPreviewPadding]: globalRefs.spacing.lg,
-
-  labelType: {
-    floating: {
-      [vars.valueInputHeight]: refs.valueInputHeight,
-    },
-  },
+  [vars.valueInputHeight]: refs.valueInputHeight,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.

package/src/theme/components/numberField.js

@@ -27,21 +27,16 @@ const numberField = {
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
   [vars.inputHeight]: refs.inputHeight,
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 export default numberField;

package/src/theme/components/password.js

@@ -33,20 +33,15 @@ const password = {
   [vars.revealButtonOffset]: globalRefs.spacing.md,
   [vars.revealButtonSize]: refs.toggleButtonSize,
   [vars.revealButtonColor]: refs.placeholderTextColor,
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
 };
 
 export default password;

package/src/theme/components/phoneField.js

@@ -24,14 +24,9 @@ const phoneField = {
   [vars.phoneInputWidth]: refs.minWidth,
   [vars.countryCodeInputWidth]: '5em',
   [vars.countryCodeDropdownWidth]: '20em',
-
-  labelType: {
-    floating: {
-      [vars.marginInlineStart]: '-0.25em',
-      [vars.valueInputHeight]: '1.65em',
-      [vars.valueInputMarginBottom]: '0.25em',
-    },
-  },
+  [vars.marginInlineStart]: '-0.25em',
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'

package/src/theme/components/phoneInputBoxField.js

@@ -24,20 +24,15 @@ const phoneInputBoxField = {
   [vars.inputOutlineWidth]: refs.outlineWidth,
   [vars.inputOutlineColor]: refs.outlineColor,
   [vars.inputOutlineOffset]: refs.outlineOffset,
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-      [vars.valueInputMarginBottom]: '0.25em',
-      [vars.inputHorizontalPadding]: '0',
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars.inputHorizontalPadding]: '0',
 
   _fullWidth: {
     [vars.hostWidth]: refs.width,

package/src/theme/components/textField.js

@@ -33,21 +33,16 @@ export const textField = {
     left: { [vars.inputTextAlign]: 'left' },
     center: { [vars.inputTextAlign]: 'center' },
   },
-
-  labelType: {
-    floating: {
-      [vars.labelPosition]: refs.labelPosition,
-      [vars.labelTopPosition]: refs.labelTopPosition,
-      [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-      [vars.inputTransformY]: refs.inputTransformY,
-      [vars.inputTransition]: refs.inputTransition,
-      [vars.marginInlineStart]: refs.marginInlineStart,
-      [vars.placeholderOpacity]: refs.placeholderOpacity,
-      [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-      [vars.valueInputHeight]: refs.valueInputHeight,
-      [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-    },
-  },
+  [vars.labelPosition]: refs.labelPosition,
+  [vars.labelTopPosition]: refs.labelTopPosition,
+  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
+  [vars.inputTransformY]: refs.inputTransformY,
+  [vars.inputTransition]: refs.inputTransition,
+  [vars.marginInlineStart]: refs.marginInlineStart,
+  [vars.placeholderOpacity]: refs.placeholderOpacity,
+  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
+  [vars.valueInputHeight]: refs.valueInputHeight,
+  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
 };
 
 export default textField;

package/src/helpers/externalInputs.js

@@ -1,76 +0,0 @@
-// 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) => {
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '_';
-
-  const valueColor = computedStyle.getPropertyValue('color');
-
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '';
-
-  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) => {
-  const inputEle = document.createElement('input');
-
-  inputEle.setAttribute('slot', targetSlotName);
-  inputEle.setAttribute('type', type);
-  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) => {
-  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],
-    ['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
-    ['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');
-  }
-};