@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.
- package/dist/cjs/index.cjs.js +39 -32
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +10 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/5459.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-date-field-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-date-field/DateFieldClass.js +6 -1
- package/src/components/descope-email-field/EmailFieldClass.js +1 -1
- package/src/components/descope-text-field/textFieldMappings.js +1 -0
- package/src/theme/components/dateField.js +3 -1
package/dist/cjs/index.cjs.js
CHANGED
@@ -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: '
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
6133
|
-
digitTextAlign: { ...digitField, property: textVars$
|
6134
|
-
digitCaretTextColor: { ...digitField, property: textVars$
|
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$
|
6137
|
-
digitOutlineWidth: { ...digitField, property: textVars$
|
6137
|
+
digitOutlineColor: { ...digitField, property: textVars$3.inputOutlineColor },
|
6138
|
+
digitOutlineWidth: { ...digitField, property: textVars$3.inputOutlineWidth },
|
6138
6139
|
|
6139
|
-
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$
|
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$
|
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$
|
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$
|
8367
|
+
{ ...phoneInput$1, property: textVars$2.inputValueTextColor },
|
8367
8368
|
{ ...countryCodeInput, property: comboVars.inputValueTextColor },
|
8368
8369
|
],
|
8369
8370
|
|
8370
|
-
inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$
|
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$
|
8384
|
+
valueInputMarginBottom: [{ ...phoneInput$1, property: textVars$2.valueInputMarginBottom }],
|
8384
8385
|
marginInlineStart: [
|
8385
|
-
{ ...phoneInput$1, property: textVars$
|
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$
|
8455
|
-
${textVars$
|
8456
|
-
${textVars$
|
8457
|
-
${textVars$
|
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
|
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({
|