@descope/web-components-ui 1.0.334 → 1.0.336

package/src/components/descope-text-field/textFieldMappings.js

@@ -9,10 +9,7 @@ const {
   errorMessage,
   disabledPlaceholder,
   inputDisabled,
-  externalInput,
-  externalInputDisabled,
-  externalPlaceholder,
-  externalDisabledPlaceholder,
+  inputIcon,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -27,10 +24,7 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
-  externalInput: { selector: () => '::slotted(input)' },
-  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
-  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
-  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
+  inputIcon: { selector: 'vaadin-icon' },
 };
 
 export default {
@@ -60,12 +54,8 @@ export default {
   inputValueTextColor: [
     { ...inputField, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
-    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
-  ],
-  inputCaretTextColor: [
-    { ...input, property: 'color' },
-    { ...externalInput, property: 'color' },
   ],
+  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -78,8 +68,6 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
-    { ...externalInput, property: 'padding-left' },
-    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -87,17 +75,12 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: [
-    { ...input, property: 'text-align' },
-    { ...externalInput, property: 'text-align' },
-  ],
+  inputTextAlign: [{ ...input, property: 'text-align' }],
 
   inputPlaceholderColor: [
     { selector: () => ':host input:placeholder-shown', property: 'color' },
     { ...placeholder, property: 'color' },
-    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
-    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 
   labelPosition: { ...label, property: 'position' },
@@ -109,20 +92,15 @@ export default {
   inputTransformY: { ...label, property: 'transform' },
   inputTransition: { ...label, property: 'transition' },
   marginInlineStart: { ...label, property: 'margin-inline-start' },
-  placeholderOpacity: [
-    { selector: '> input:placeholder-shown', property: 'opacity' },
-    { ...externalPlaceholder, property: 'opacity' },
-  ],
-  inputVerticalAlignment: [
-    { ...inputField, property: 'align-items' },
-    { ...externalInput, property: 'align-items' },
-  ],
-  valueInputHeight: [
-    { ...input, property: 'height' },
-    { ...externalInput, property: 'height' },
-  ],
-  valueInputMarginBottom: [
-    { ...input, property: 'margin-bottom' },
-    { ...externalInput, property: 'margin-bottom' },
+  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
+  inputVerticalAlignment: [{ ...inputField, property: 'align-items' }],
+  valueInputHeight: [{ ...input, property: 'height' }],
+  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+
+  inputIconOffset: [
+    { ...inputIcon, property: 'margin-right' },
+    { ...inputIcon, property: 'margin-left' },
   ],
+  inputIconSize: { ...inputIcon, property: 'font-size' },
+  inputIconColor: { ...inputIcon, property: 'color' },
 };

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -68,7 +68,6 @@ const {
   inputField,
   countryCodeInput,
   phoneInput,
-  phoneExternalInput,
   separator,
   errorMessage,
   helperText,
@@ -78,7 +77,6 @@ const {
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: '::part(input-field)' },
   phoneInput: { selector: () => 'descope-text-field' },
-  phoneExternalInput: { selector: () => '::slotted(input)' },
   countryCodeInput: { selector: () => 'descope-combo-box' },
   separator: { selector: 'descope-phone-field-internal .separator' },
   helperText: { selector: '::part(helper-text)' },
@@ -168,17 +166,10 @@ export const PhoneFieldClass = compose(
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
       inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-      valueInputHeight: [
-        { ...phoneExternalInput, property: textVars.valueInputHeight },
-        { ...countryCodeInput, property: comboVars.valueInputHeight },
-      ],
-      valueInputMarginBottom: [
-        { ...phoneInput, property: textVars.valueInputMarginBottom },
-        { ...phoneExternalInput, property: 'margin-bottom' },
-      ],
+      valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
+      valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],
       marginInlineStart: [
         { ...phoneInput, property: textVars.marginInlineStart },
-        { ...phoneExternalInput, property: 'margin-inline-start' },
         { ...countryCodeInput, property: comboVars.marginInlineStart },
       ],
     },

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -1,5 +1,5 @@
 import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
-import { forwardAttrs, getComponentName, syncAttrs } from '../../../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';
 import CountryCodes from '../../CountryCodes';
 import { comboBoxItem } from '../helpers';
 
@@ -36,7 +36,7 @@ class PhoneFieldInternal extends BaseInputClass {
       ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
       </descope-combo-box>
       <div class="separator"></div>
-      <descope-text-field type="tel" external-input="true"></descope-text-field>
+      <descope-text-field type="tel"></descope-text-field>
     </div>
     `;
 
@@ -47,9 +47,6 @@ class PhoneFieldInternal extends BaseInputClass {
     forwardAttrs(this, this.countryCodeInput, { includeAttrs: ['label-type'] });
     forwardAttrs(this, this.phoneNumberInput, { includeAttrs: ['label-type'] });
 
-    const externalInput = this.phoneNumberInput.querySelector('input');
-    syncAttrs(this.phoneNumberInput, externalInput, { includeAttrs: ['focused'] });
-
     // override combo box setter to display dialCode value in input
     this.countryCodeInput.customValueTransformFn = (val) => {
       const [, dialCode] = val?.split?.(' ') || [];

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -31,7 +31,7 @@ class PhoneFieldInternal extends BaseInputClass {
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1" external-input="true"></descope-text-field>
+        <descope-text-field tabindex="1"></descope-text-field>
       </div>
       `;
 

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/inputWrapper.js

@@ -28,6 +28,7 @@ const [theme, refs, vars] = createHelperVars(
 
     minWidth: '10em',
     toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
     inputHeight: '3em',
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',

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

@@ -1,6 +1,9 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
 import { refs } from './inputWrapper';
 
+const globalRefs = getThemeRefs(globals);
 const vars = TextFieldClass.cssVarList;
 
 export const textField = {
@@ -33,21 +36,19 @@ 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,
+  [vars.inputIconOffset]: globalRefs.spacing.md,
+  [vars.inputIconSize]: refs.inputIconSize,
+  [vars.inputIconColor]: refs.placeholderTextColor,
 };
 
 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');
-  }
-};