@descope/web-components-ui 1.0.388 → 1.0.390

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3366,6 +3366,7 @@ var textFieldMappings = {
3366
3366
  hostWidth: { ...host$n, property: 'width' },
3367
3367
  hostMinWidth: { ...host$n, property: 'min-width' },
3368
3368
  hostDirection: { ...host$n, property: 'direction' },
3369
+ inputDirection: { ...input$1, property: 'direction' },
3369
3370
 
3370
3371
  inputBackgroundColor: [
3371
3372
  { ...inputField$6, property: 'background-color' },
@@ -4380,7 +4381,7 @@ const EmailFieldClass = compose(
4380
4381
  }),
4381
4382
  draggableMixin,
4382
4383
  externalInputMixin({
4383
- inputType: 'text',
4384
+ inputType: 'email',
4384
4385
  autocompleteType: 'username',
4385
4386
  includeAttrs: ['disabled', 'readonly', 'pattern'],
4386
4387
  }),
@@ -5888,7 +5889,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$G, baseS
5888
5889
  }
5889
5890
  }
5890
5891
 
5891
- const textVars$3 = TextClass.cssVarList;
5892
+ const textVars$4 = TextClass.cssVarList;
5892
5893
  const { host: host$h, before, after: after$1, text } = {
5893
5894
  host: { selector: () => ':host' },
5894
5895
  before: { selector: '::before' },
@@ -5907,7 +5908,7 @@ const DividerClass = compose(
5907
5908
  alignItems: {},
5908
5909
  alignSelf: {},
5909
5910
  flexDirection: {},
5910
- textAlign: { ...text, property: textVars$3.textAlign },
5911
+ textAlign: { ...text, property: textVars$4.textAlign },
5911
5912
 
5912
5913
  labelTextWidth: { ...text, property: 'width' },
5913
5914
  labelTextMaxWidth: { ...text, property: 'max-width' },
@@ -6105,13 +6106,13 @@ const {
6105
6106
  errorMessage: { selector: '::part(error-message)' },
6106
6107
  };
6107
6108
 
6108
- const textVars$2 = TextFieldClass.cssVarList;
6109
+ const textVars$3 = TextFieldClass.cssVarList;
6109
6110
  const loaderVars = LoaderRadialClass.cssVarList;
6110
6111
 
6111
6112
  const PasscodeClass = compose(
6112
6113
  createStyleMixin({
6113
6114
  mappings: {
6114
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$g],
6115
+ fontSize: [{ ...digitField, property: textVars$3.fontSize }, host$g],
6115
6116
  hostWidth: { property: 'width' },
6116
6117
  hostDirection: { ...host$g, property: 'direction' },
6117
6118
  fontFamily: [host$g, { ...label$6 }],
@@ -6123,20 +6124,20 @@ const PasscodeClass = compose(
6123
6124
  errorMessageTextColor: { ...errorMessage$7, property: 'color' },
6124
6125
  digitValueTextColor: {
6125
6126
  selector: TextFieldClass.componentName,
6126
- property: textVars$2.inputValueTextColor,
6127
+ property: textVars$3.inputValueTextColor,
6127
6128
  },
6128
6129
  digitSize: [
6129
6130
  { ...digitField, property: 'height' },
6130
6131
  { ...digitField, property: 'width' },
6131
6132
  ],
6132
- digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
6133
- digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
6134
- digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
6133
+ digitPadding: { ...digitField, property: textVars$3.inputHorizontalPadding },
6134
+ digitTextAlign: { ...digitField, property: textVars$3.inputTextAlign },
6135
+ digitCaretTextColor: { ...digitField, property: textVars$3.inputCaretTextColor },
6135
6136
  digitSpacing: { ...internalWrapper$1, property: 'gap' },
6136
- digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
6137
- digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
6137
+ digitOutlineColor: { ...digitField, property: textVars$3.inputOutlineColor },
6138
+ digitOutlineWidth: { ...digitField, property: textVars$3.inputOutlineWidth },
6138
6139
 
6139
- focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
6140
+ focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$3.inputOutlineColor },
6140
6141
  overlayOpacity: { ...internalWrapper$1, property: 'opacity' },
6141
6142
  spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
6142
6143
  },
@@ -6184,7 +6185,7 @@ const PasscodeClass = compose(
6184
6185
 
6185
6186
  descope-passcode-internal descope-text-field {
6186
6187
  min-width: 2em;
6187
- max-width: var(${textVars$2.inputHeight});
6188
+ max-width: var(${textVars$3.inputHeight});
6188
6189
  }
6189
6190
 
6190
6191
  vaadin-text-field::part(input-field) {
@@ -8226,7 +8227,7 @@ const componentName$z = getComponentName('phone-field-internal');
8226
8227
 
8227
8228
  createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
8228
8229
 
8229
- const textVars$1 = TextFieldClass.cssVarList;
8230
+ const textVars$2 = TextFieldClass.cssVarList;
8230
8231
  const comboVars = ComboBoxClass.cssVarList;
8231
8232
 
8232
8233
  const componentName$y = getComponentName('phone-field');
@@ -8363,11 +8364,11 @@ const PhoneFieldClass = compose(
8363
8364
  errorMessageTextColor: { ...errorMessage$5, property: 'color' },
8364
8365
 
8365
8366
  inputValueTextColor: [
8366
- { ...phoneInput$1, property: textVars$1.inputValueTextColor },
8367
+ { ...phoneInput$1, property: textVars$2.inputValueTextColor },
8367
8368
  { ...countryCodeInput, property: comboVars.inputValueTextColor },
8368
8369
  ],
8369
8370
 
8370
- inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$1.inputPlaceholderColor },
8371
+ inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$2.inputPlaceholderColor },
8371
8372
 
8372
8373
  overlayItemBackgroundColor: {
8373
8374
  selector: 'descope-combo-box',
@@ -8380,9 +8381,9 @@ const PhoneFieldClass = compose(
8380
8381
  inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
8381
8382
 
8382
8383
  valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],
8383
- valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$1.valueInputMarginBottom }],
8384
+ valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$2.valueInputMarginBottom }],
8384
8385
  marginInlineStart: [
8385
- { ...phoneInput$1, property: textVars$1.marginInlineStart },
8386
+ { ...phoneInput$1, property: textVars$2.marginInlineStart },
8386
8387
  { ...countryCodeInput, property: comboVars.marginInlineStart },
8387
8388
  ],
8388
8389
  },
@@ -8451,10 +8452,10 @@ const PhoneFieldClass = compose(
8451
8452
  }
8452
8453
  descope-text-field {
8453
8454
  flex-grow: 1;
8454
- ${textVars$1.inputOutlineWidth}: 0;
8455
- ${textVars$1.inputOutlineOffset}: 0;
8456
- ${textVars$1.inputBorderWidth}: 0;
8457
- ${textVars$1.inputBorderRadius}: 0;
8455
+ ${textVars$2.inputOutlineWidth}: 0;
8456
+ ${textVars$2.inputOutlineOffset}: 0;
8457
+ ${textVars$2.inputBorderWidth}: 0;
8458
+ ${textVars$2.inputBorderRadius}: 0;
8458
8459
  }
8459
8460
 
8460
8461
  :host([label-type="floating"]) vaadin-text-field::part(label) {
@@ -8519,7 +8520,7 @@ const componentName$x = getComponentName('phone-field-internal-input-box');
8519
8520
 
8520
8521
  createBaseInputClass({ componentName: componentName$x, baseSelector: 'div' });
8521
8522
 
8522
- const textVars = TextFieldClass.cssVarList;
8523
+ const textVars$1 = TextFieldClass.cssVarList;
8523
8524
 
8524
8525
  const componentName$w = getComponentName('phone-input-box-field');
8525
8526
 
@@ -8618,9 +8619,9 @@ const PhoneFieldInputBoxClass = compose(
8618
8619
  labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
8619
8620
  errorMessageTextColor: { ...errorMessage$4, property: 'color' },
8620
8621
 
8621
- inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
8622
+ inputValueTextColor: { ...phoneInput, property: textVars$1.inputValueTextColor },
8622
8623
 
8623
- inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
8624
+ inputPlaceholderTextColor: { ...phoneInput, property: textVars$1.inputPlaceholderColor },
8624
8625
 
8625
8626
  inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
8626
8627
  inputOutlineColor: { ...inputField$1, property: 'outline-color' },
@@ -8639,7 +8640,7 @@ const PhoneFieldInputBoxClass = compose(
8639
8640
  valueInputHeight: { ...inputElement$1, property: 'height' },
8640
8641
  valueInputMarginBottom: {
8641
8642
  selector: TextFieldClass.componentName,
8642
- property: textVars.valueInputMarginBottom,
8643
+ property: textVars$1.valueInputMarginBottom,
8643
8644
  },
8644
8645
  },
8645
8646
  }),
@@ -8696,10 +8697,10 @@ const PhoneFieldInputBoxClass = compose(
8696
8697
  descope-text-field {
8697
8698
  flex-grow: 1;
8698
8699
  width: 100%;
8699
- ${textVars.inputOutlineWidth}: 0;
8700
- ${textVars.inputOutlineOffset}: 0;
8701
- ${textVars.inputBorderWidth}: 0;
8702
- ${textVars.inputBorderRadius}: 0;
8700
+ ${textVars$1.inputOutlineWidth}: 0;
8701
+ ${textVars$1.inputOutlineOffset}: 0;
8702
+ ${textVars$1.inputBorderWidth}: 0;
8703
+ ${textVars$1.inputBorderRadius}: 0;
8703
8704
  direction: ltr;
8704
8705
  }
8705
8706
  vaadin-text-field[readonly] > input:placeholder-shown {
@@ -15350,9 +15351,11 @@ class RawDateFieldClass extends BaseInputClass {
15350
15351
  }
15351
15352
  }
15352
15353
 
15353
- const { host, input, toggleButton, overlay, backdrop } = {
15354
+ const textVars = TextFieldClass.cssVarList;
15355
+ const { host, input, inputEleRTL, toggleButton, overlay, backdrop } = {
15354
15356
  host: { selector: () => ':host' },
15355
15357
  input: { selector: () => 'descope-text-field' },
15358
+ inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
15356
15359
  toggleButton: { selector: () => '.toggle-calendar' },
15357
15360
  overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
15358
15361
  backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
@@ -15366,6 +15369,8 @@ const DateFieldClass = compose(
15366
15369
  hostWidth: { ...host, property: 'width' },
15367
15370
  hostDirection: { ...host, property: 'direction' },
15368
15371
  textAlign: { ...input, property: 'text-align' },
15372
+ rtlInputDirection: { ...inputEleRTL, property: textVars.inputDirection },
15373
+ rtlInputAlignment: { ...inputEleRTL, property: textVars.inputTextAlign },
15369
15374
  overlayGap: {
15370
15375
  property: () => DateFieldClass.cssVarList.overlayGap,
15371
15376
  },
@@ -15407,7 +15412,6 @@ const DateFieldClass = compose(
15407
15412
  )(RawDateFieldClass);
15408
15413
 
15409
15414
  const globalRefs$3 = getThemeRefs(globals);
15410
-
15411
15415
  const shadowColor$1 = '#00000020';
15412
15416
  const { shadow } = globalRefs$3;
15413
15417
 
@@ -15427,6 +15431,9 @@ const dateField = {
15427
15431
  [vars$5.overlay.outlineColor]: 'transparent',
15428
15432
  [vars$5.overlay.outlineStyle]: 'none',
15429
15433
  [vars$5.overlay.padding]: '0',
15434
+
15435
+ [vars$5.rtlInputDirection]: 'ltr',
15436
+ [vars$5.rtlInputAlignment]: 'right',
15430
15437
  };
15431
15438
 
15432
15439
  var dateField$1 = /*#__PURE__*/Object.freeze({