@descope/web-components-ui 1.0.388 → 1.0.389

package/dist/cjs/index.cjs.js

@@ -3366,6 +3366,7 @@ var textFieldMappings = {
   hostWidth: { ...host$n, property: 'width' },
   hostMinWidth: { ...host$n, property: 'min-width' },
   hostDirection: { ...host$n, property: 'direction' },
+  inputDirection: { ...input$1, property: 'direction' },
 
   inputBackgroundColor: [
     { ...inputField$6, property: 'background-color' },
@@ -5888,7 +5889,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$G, baseS
   }
 }
 
-const textVars$3 = TextClass.cssVarList;
+const textVars$4 = TextClass.cssVarList;
 const { host: host$h, before, after: after$1, text } = {
   host: { selector: () => ':host' },
   before: { selector: '::before' },
@@ -5907,7 +5908,7 @@ const DividerClass = compose(
       alignItems: {},
       alignSelf: {},
       flexDirection: {},
-      textAlign: { ...text, property: textVars$3.textAlign },
+      textAlign: { ...text, property: textVars$4.textAlign },
 
       labelTextWidth: { ...text, property: 'width' },
       labelTextMaxWidth: { ...text, property: 'max-width' },
@@ -6105,13 +6106,13 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const textVars$2 = TextFieldClass.cssVarList;
+const textVars$3 = TextFieldClass.cssVarList;
 const loaderVars = LoaderRadialClass.cssVarList;
 
 const PasscodeClass = compose(
   createStyleMixin({
     mappings: {
-      fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$g],
+      fontSize: [{ ...digitField, property: textVars$3.fontSize }, host$g],
       hostWidth: { property: 'width' },
       hostDirection: { ...host$g, property: 'direction' },
       fontFamily: [host$g, { ...label$6 }],
@@ -6123,20 +6124,20 @@ const PasscodeClass = compose(
       errorMessageTextColor: { ...errorMessage$7, property: 'color' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
-        property: textVars$2.inputValueTextColor,
+        property: textVars$3.inputValueTextColor,
       },
       digitSize: [
         { ...digitField, property: 'height' },
         { ...digitField, property: 'width' },
       ],
-      digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
-      digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
-      digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
+      digitPadding: { ...digitField, property: textVars$3.inputHorizontalPadding },
+      digitTextAlign: { ...digitField, property: textVars$3.inputTextAlign },
+      digitCaretTextColor: { ...digitField, property: textVars$3.inputCaretTextColor },
       digitSpacing: { ...internalWrapper$1, property: 'gap' },
-      digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
-      digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
+      digitOutlineColor: { ...digitField, property: textVars$3.inputOutlineColor },
+      digitOutlineWidth: { ...digitField, property: textVars$3.inputOutlineWidth },
 
-      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
+      focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$3.inputOutlineColor },
       overlayOpacity: { ...internalWrapper$1, property: 'opacity' },
       spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
     },
@@ -6184,7 +6185,7 @@ const PasscodeClass = compose(
 
 			descope-passcode-internal descope-text-field {
 				min-width: 2em;
-				max-width: var(${textVars$2.inputHeight});
+				max-width: var(${textVars$3.inputHeight});
 			}
 
 			vaadin-text-field::part(input-field) {
@@ -8226,7 +8227,7 @@ const componentName$z = getComponentName('phone-field-internal');
 
 createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
 
-const textVars$1 = TextFieldClass.cssVarList;
+const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
 const componentName$y = getComponentName('phone-field');
@@ -8363,11 +8364,11 @@ const PhoneFieldClass = compose(
       errorMessageTextColor: { ...errorMessage$5, property: 'color' },
 
       inputValueTextColor: [
-        { ...phoneInput$1, property: textVars$1.inputValueTextColor },
+        { ...phoneInput$1, property: textVars$2.inputValueTextColor },
         { ...countryCodeInput, property: comboVars.inputValueTextColor },
       ],
 
-      inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$1.inputPlaceholderColor },
+      inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$2.inputPlaceholderColor },
 
       overlayItemBackgroundColor: {
         selector: 'descope-combo-box',
@@ -8380,9 +8381,9 @@ const PhoneFieldClass = compose(
       inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
 
       valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
-      valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom }],
+      valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$2.valueInputMarginBottom }],
       marginInlineStart: [
-        { ...phoneInput$1, property: textVars$1.marginInlineStart },
+        { ...phoneInput$1, property: textVars$2.marginInlineStart },
         { ...countryCodeInput, property: comboVars.marginInlineStart },
       ],
     },
@@ -8451,10 +8452,10 @@ const PhoneFieldClass = compose(
 			}
 			descope-text-field {
 				flex-grow: 1;
-				${textVars$1.inputOutlineWidth}: 0;
-				${textVars$1.inputOutlineOffset}: 0;
-				${textVars$1.inputBorderWidth}: 0;
-				${textVars$1.inputBorderRadius}: 0;
+				${textVars$2.inputOutlineWidth}: 0;
+				${textVars$2.inputOutlineOffset}: 0;
+				${textVars$2.inputBorderWidth}: 0;
+				${textVars$2.inputBorderRadius}: 0;
       }
 
       :host([label-type="floating"]) vaadin-text-field::part(label) {
@@ -8519,7 +8520,7 @@ const componentName$x = getComponentName('phone-field-internal-input-box');
 
 createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
 
-const textVars = TextFieldClass.cssVarList;
+const textVars$1 = TextFieldClass.cssVarList;
 
 const componentName$w = getComponentName('phone-input-box-field');
 
@@ -8618,9 +8619,9 @@ const PhoneFieldInputBoxClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
       errorMessageTextColor: { ...errorMessage$4, property: 'color' },
 
-      inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
+      inputValueTextColor: { ...phoneInput, property: textVars$1.inputValueTextColor },
 
-      inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
+      inputPlaceholderTextColor: { ...phoneInput, property: textVars$1.inputPlaceholderColor },
 
       inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
       inputOutlineColor: { ...inputField$1, property: 'outline-color' },
@@ -8639,7 +8640,7 @@ const PhoneFieldInputBoxClass = compose(
       valueInputHeight: { ...inputElement$1, property: 'height' },
       valueInputMarginBottom: {
         selector: TextFieldClass.componentName,
-        property: textVars.valueInputMarginBottom,
+        property: textVars$1.valueInputMarginBottom,
       },
     },
   }),
@@ -8696,10 +8697,10 @@ const PhoneFieldInputBoxClass = compose(
     descope-text-field {
       flex-grow: 1;
       width: 100%;
-      ${textVars.inputOutlineWidth}: 0;
-      ${textVars.inputOutlineOffset}: 0;
-      ${textVars.inputBorderWidth}: 0;
-      ${textVars.inputBorderRadius}: 0;
+      ${textVars$1.inputOutlineWidth}: 0;
+      ${textVars$1.inputOutlineOffset}: 0;
+      ${textVars$1.inputBorderWidth}: 0;
+      ${textVars$1.inputBorderRadius}: 0;
       direction: ltr;
     }
     vaadin-text-field[readonly] > input:placeholder-shown {
@@ -15350,9 +15351,11 @@ class RawDateFieldClass extends BaseInputClass {
   }
 }
 
-const { host, input, toggleButton, overlay, backdrop } = {
+const textVars = TextFieldClass.cssVarList;
+const { host, input, inputEleRTL, toggleButton, overlay, backdrop } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
+  inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
   toggleButton: { selector: () => '.toggle-calendar' },
   overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
@@ -15366,6 +15369,8 @@ const DateFieldClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       textAlign: { ...input, property: 'text-align' },
+      rtlInputDirection: { ...inputEleRTL, property: textVars.inputDirection },
+      rtlInputAlignment: { ...inputEleRTL, property: textVars.inputTextAlign },
       overlayGap: {
         property: () => DateFieldClass.cssVarList.overlayGap,
       },
@@ -15407,7 +15412,6 @@ const DateFieldClass = compose(
 )(RawDateFieldClass);
 
 const globalRefs$3 = getThemeRefs(globals);
-
 const shadowColor$1 = '#00000020';
 const { shadow } = globalRefs$3;
 
@@ -15427,6 +15431,9 @@ const dateField = {
   [vars$5.overlay.outlineColor]: 'transparent',
   [vars$5.overlay.outlineStyle]: 'none',
   [vars$5.overlay.padding]: '0',
+
+  [vars$5.rtlInputDirection]: 'ltr',
+  [vars$5.rtlInputAlignment]: 'right',
 };
 
 var dateField$1 = /*#__PURE__*/Object.freeze({