@descope/web-components-ui 1.0.131 → 1.0.133
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +239 -194
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +239 -195
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/201.js +1 -1
- package/dist/umd/241.js +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/481.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-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-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +11 -12
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +8 -9
- package/src/components/descope-button/ButtonClass.js +4 -5
- package/src/components/descope-combo-box/ComboBoxClass.js +24 -8
- package/src/components/descope-email-field/EmailFieldClass.js +2 -2
- package/src/components/descope-link/LinkClass.js +5 -4
- package/src/components/descope-new-password/NewPasswordClass.js +5 -5
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +0 -1
- package/src/components/descope-number-field/NumberFieldClass.js +2 -2
- package/src/components/descope-passcode/PasscodeClass.js +5 -1
- package/src/components/descope-password/PasswordClass.js +22 -9
- package/src/components/descope-phone-field/PhoneFieldClass.js +9 -14
- package/src/components/descope-text/TextClass.js +1 -1
- package/src/components/descope-text-area/TextAreaClass.js +9 -10
- package/src/components/descope-text-field/TextFieldClass.js +2 -3
- package/src/components/descope-text-field/textFieldMappings.js +14 -21
- package/src/helpers/themeHelpers/resetHelpers.js +22 -6
- package/src/mixins/normalizeBooleanAttributesMixin.js +2 -1
- package/src/theme/components/comboBox.js +3 -0
- package/src/theme/components/emailField.js +2 -0
- package/src/theme/components/inputWrapper.js +5 -1
- package/src/theme/components/link.js +0 -4
- package/src/theme/components/newPassword.js +1 -0
- package/src/theme/components/numberField.js +3 -1
- package/src/theme/components/passcode.js +1 -0
- package/src/theme/components/password.js +3 -1
- package/src/theme/components/phoneField.js +1 -1
- package/src/theme/components/textArea.js +1 -0
- package/src/theme/components/textField.js +2 -0
package/dist/index.esm.js
CHANGED
@@ -138,6 +138,107 @@ const forwardProps = (src, target, props = []) => {
|
|
138
138
|
Object.defineProperties(target, config);
|
139
139
|
};
|
140
140
|
|
141
|
+
const resetInputOverrides = (name, cssVarList) => `
|
142
|
+
${resetInputContainer(name)}
|
143
|
+
${resetInputCursor(name)}
|
144
|
+
${resetInputPlaceholder(name)}
|
145
|
+
${resetInputField(name)}
|
146
|
+
${resetInputAutoFill(name, cssVarList)}
|
147
|
+
${resetInputFieldInvalidBackgroundColor(name)}
|
148
|
+
${resetInitialHeight(name)}
|
149
|
+
${resetInputElement(name)}
|
150
|
+
${resetInputFieldunderlayingBorder(name)}
|
151
|
+
`;
|
152
|
+
|
153
|
+
const useHostExternalPadding = (cssVarList) => `
|
154
|
+
:host {
|
155
|
+
padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
|
156
|
+
}
|
157
|
+
`;
|
158
|
+
|
159
|
+
const resetInputFieldunderlayingBorder = (name) => `
|
160
|
+
${name}::part(input-field)::after {
|
161
|
+
border: none;
|
162
|
+
}
|
163
|
+
`;
|
164
|
+
|
165
|
+
const resetInitialHeight = (name) => `
|
166
|
+
${name}::before {
|
167
|
+
height: unset;
|
168
|
+
}
|
169
|
+
`;
|
170
|
+
|
171
|
+
const resetInputElement = (name) => `
|
172
|
+
${name} > input {
|
173
|
+
-webkit-mask-image: none;
|
174
|
+
min-height: 0;
|
175
|
+
box-sizing: border-box;
|
176
|
+
}
|
177
|
+
`;
|
178
|
+
|
179
|
+
const resetInputContainer = (name) => `
|
180
|
+
${name} {
|
181
|
+
margin: 0;
|
182
|
+
padding: 0;
|
183
|
+
width: 100%;
|
184
|
+
height: 100%;
|
185
|
+
box-sizing: border-box;
|
186
|
+
}
|
187
|
+
`;
|
188
|
+
|
189
|
+
const resetInputField = (name) => `
|
190
|
+
${name}::part(input-field) {
|
191
|
+
overflow: hidden;
|
192
|
+
padding: 0;
|
193
|
+
box-shadow: none;
|
194
|
+
}
|
195
|
+
`;
|
196
|
+
|
197
|
+
const resetInputCursor = (name) => `
|
198
|
+
${name} > label,
|
199
|
+
${name}::part(label),
|
200
|
+
${name}::part(required-indicator) {
|
201
|
+
cursor: pointer;
|
202
|
+
}
|
203
|
+
`;
|
204
|
+
|
205
|
+
const resetInputPlaceholder = (name, ele = 'input') => `
|
206
|
+
${name}[disabled] > ${ele}:placeholder-shown,
|
207
|
+
${name}[readonly] > ${ele}:placeholder-shown {
|
208
|
+
opacity: 1;
|
209
|
+
}
|
210
|
+
`;
|
211
|
+
|
212
|
+
const resetInputAutoFill = (name, cssVarList) => `
|
213
|
+
${name} input:-webkit-autofill,
|
214
|
+
${name} input:-webkit-autofill::first-line,
|
215
|
+
${name} input:-webkit-autofill:hover,
|
216
|
+
${name} input:-webkit-autofill:active,
|
217
|
+
${name} input:-webkit-autofill:focus {
|
218
|
+
-webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
|
219
|
+
box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
|
220
|
+
}
|
221
|
+
`;
|
222
|
+
|
223
|
+
const resetInputFieldDefaultWidth = () => `
|
224
|
+
:host {
|
225
|
+
--vaadin-field-default-width: auto;
|
226
|
+
box-sizing: border-box;
|
227
|
+
}
|
228
|
+
`;
|
229
|
+
|
230
|
+
const resetInputReadonlyStyle = (name) => `
|
231
|
+
${name}::part(input-field)::after {
|
232
|
+
opacity: 0;
|
233
|
+
}
|
234
|
+
`;
|
235
|
+
|
236
|
+
const resetInputFieldInvalidBackgroundColor = (name) => `
|
237
|
+
${name}::part(input-field)::after {
|
238
|
+
background: none;
|
239
|
+
}
|
240
|
+
`;
|
241
|
+
|
141
242
|
class ComponentsThemeManager {
|
142
243
|
static mountOnPropName = 'DescopeThemeManager';
|
143
244
|
|
@@ -527,7 +628,8 @@ const booleanAttributesList = [
|
|
527
628
|
'has-error-message',
|
528
629
|
'focus-ring',
|
529
630
|
'opened',
|
530
|
-
'active'
|
631
|
+
'active',
|
632
|
+
'password-visible'
|
531
633
|
];
|
532
634
|
|
533
635
|
const isBooleanAttribute = (attr) => {
|
@@ -1164,8 +1266,8 @@ const ButtonClass = compose(
|
|
1164
1266
|
createStyleMixin({
|
1165
1267
|
mappings: {
|
1166
1268
|
hostWidth: { ...host$c, property: 'width' },
|
1167
|
-
fontSize: {
|
1168
|
-
fontFamily: {
|
1269
|
+
fontSize: {},
|
1270
|
+
fontFamily: {},
|
1169
1271
|
|
1170
1272
|
cursor: {},
|
1171
1273
|
backgroundColor: {},
|
@@ -1206,9 +1308,7 @@ const ButtonClass = compose(
|
|
1206
1308
|
${iconStyles}
|
1207
1309
|
${loadingIndicatorStyles}
|
1208
1310
|
${editorOverrides}
|
1209
|
-
|
1210
|
-
padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
|
1211
|
-
}
|
1311
|
+
${useHostExternalPadding(ButtonClass.cssVarList)}
|
1212
1312
|
`,
|
1213
1313
|
excludeAttrsSync: ['tabindex'],
|
1214
1314
|
componentName: componentName$o
|
@@ -1351,91 +1451,6 @@ const booleanFieldMixin = (superclass) =>
|
|
1351
1451
|
}
|
1352
1452
|
};
|
1353
1453
|
|
1354
|
-
const resetInputOverrides = (name, cssVarList) => `
|
1355
|
-
${resetInputContainer(name)}
|
1356
|
-
${resetInputCursor(name)}
|
1357
|
-
${resetInputPlaceholder(name)}
|
1358
|
-
${resetInputField(name)}
|
1359
|
-
${resetInputAutoFill(name, cssVarList)}
|
1360
|
-
${resetInputFieldInvalidBackgroundColor(name)}
|
1361
|
-
|
1362
|
-
${name}::before {
|
1363
|
-
height: unset;
|
1364
|
-
}
|
1365
|
-
|
1366
|
-
${name} > input {
|
1367
|
-
-webkit-mask-image: none;
|
1368
|
-
min-height: 0;
|
1369
|
-
}
|
1370
|
-
|
1371
|
-
${name}::part(input-field)::after {
|
1372
|
-
opacity: 0 !important;
|
1373
|
-
}
|
1374
|
-
`;
|
1375
|
-
|
1376
|
-
const resetInputContainer = (name) => `
|
1377
|
-
${name} {
|
1378
|
-
margin: 0;
|
1379
|
-
padding: 0;
|
1380
|
-
width: 100%;
|
1381
|
-
height: 100%;
|
1382
|
-
box-sizing: border-box;
|
1383
|
-
}
|
1384
|
-
`;
|
1385
|
-
|
1386
|
-
const resetInputField = (name) => `
|
1387
|
-
${name}::part(input-field) {
|
1388
|
-
overflow: hidden;
|
1389
|
-
padding: 0;
|
1390
|
-
box-shadow: none;
|
1391
|
-
}
|
1392
|
-
`;
|
1393
|
-
|
1394
|
-
const resetInputCursor = (name) => `
|
1395
|
-
${name} > label,
|
1396
|
-
${name}::part(label),
|
1397
|
-
${name}::part(required-indicator) {
|
1398
|
-
cursor: pointer;
|
1399
|
-
}
|
1400
|
-
`;
|
1401
|
-
|
1402
|
-
const resetInputPlaceholder = (name, ele = 'input') => `
|
1403
|
-
${name}[disabled] > ${ele}:placeholder-shown,
|
1404
|
-
${name}[readonly] > ${ele}:placeholder-shown {
|
1405
|
-
opacity: 1;
|
1406
|
-
}
|
1407
|
-
`;
|
1408
|
-
|
1409
|
-
const resetInputAutoFill = (name, cssVarList) => `
|
1410
|
-
${name} input:-webkit-autofill,
|
1411
|
-
${name} input:-webkit-autofill::first-line,
|
1412
|
-
${name} input:-webkit-autofill:hover,
|
1413
|
-
${name} input:-webkit-autofill:active,
|
1414
|
-
${name} input:-webkit-autofill:focus {
|
1415
|
-
-webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
|
1416
|
-
box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
|
1417
|
-
}
|
1418
|
-
`;
|
1419
|
-
|
1420
|
-
const resetInputFieldDefaultWidth = () => `
|
1421
|
-
:host {
|
1422
|
-
--vaadin-field-default-width: auto;
|
1423
|
-
box-sizing: border-box;
|
1424
|
-
}
|
1425
|
-
`;
|
1426
|
-
|
1427
|
-
const resetInputReadonlyStyle = (name) => `
|
1428
|
-
${name}::part(input-field)::after {
|
1429
|
-
opacity: 0;
|
1430
|
-
}
|
1431
|
-
`;
|
1432
|
-
|
1433
|
-
const resetInputFieldInvalidBackgroundColor = (name) => `
|
1434
|
-
${name}::part(input-field)::after {
|
1435
|
-
background: none;
|
1436
|
-
}
|
1437
|
-
`;
|
1438
|
-
|
1439
1454
|
var commonStyles = `
|
1440
1455
|
:host {
|
1441
1456
|
display: inline-flex;
|
@@ -1532,16 +1547,16 @@ const CheckboxClass = compose(
|
|
1532
1547
|
hostWidth: { ...host$b, property: 'width' },
|
1533
1548
|
|
1534
1549
|
fontSize: [
|
1535
|
-
|
1536
|
-
|
1537
|
-
|
1538
|
-
|
1550
|
+
host$b,
|
1551
|
+
checkboxElement,
|
1552
|
+
label$8,
|
1553
|
+
checkboxHiddenLabel$1,
|
1539
1554
|
],
|
1540
1555
|
fontFamily: [
|
1541
|
-
|
1542
|
-
|
1543
|
-
|
1544
|
-
|
1556
|
+
label$8,
|
1557
|
+
checkboxHiddenLabel$1,
|
1558
|
+
helperText$7,
|
1559
|
+
errorMessage$7,
|
1545
1560
|
],
|
1546
1561
|
|
1547
1562
|
labelTextColor: [
|
@@ -1585,10 +1600,8 @@ const CheckboxClass = compose(
|
|
1585
1600
|
slots: [],
|
1586
1601
|
wrappedEleName: 'vaadin-text-field',
|
1587
1602
|
style: () => `
|
1588
|
-
|
1589
|
-
|
1590
|
-
padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
|
1591
|
-
}
|
1603
|
+
${commonStyles}
|
1604
|
+
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
1592
1605
|
`,
|
1593
1606
|
excludeAttrsSync: ['tabindex'],
|
1594
1607
|
componentName: componentName$m
|
@@ -1628,14 +1641,14 @@ const SwitchToggleClass = compose(
|
|
1628
1641
|
mappings: {
|
1629
1642
|
hostWidth: { ...host$a, property: 'width' },
|
1630
1643
|
fontSize: [
|
1631
|
-
|
1632
|
-
|
1633
|
-
|
1644
|
+
component,
|
1645
|
+
label$7,
|
1646
|
+
checkboxHiddenLabel,
|
1634
1647
|
],
|
1635
1648
|
fontFamily: [
|
1636
|
-
|
1637
|
-
|
1638
|
-
|
1649
|
+
label$7,
|
1650
|
+
helperText$6,
|
1651
|
+
errorMessage$6,
|
1639
1652
|
],
|
1640
1653
|
trackBorderWidth: { ...track, property: 'border-width' },
|
1641
1654
|
trackBorderStyle: { ...track, property: 'border-style' },
|
@@ -1694,9 +1707,7 @@ const SwitchToggleClass = compose(
|
|
1694
1707
|
wrappedEleName: 'vaadin-text-field',
|
1695
1708
|
style: () => `
|
1696
1709
|
${commonStyles}
|
1697
|
-
|
1698
|
-
padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
|
1699
|
-
}
|
1710
|
+
${useHostExternalPadding(SwitchToggleClass.cssVarList)}
|
1700
1711
|
vaadin-text-field::part(label) {
|
1701
1712
|
left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
|
1702
1713
|
}
|
@@ -2027,7 +2038,7 @@ const TextClass = compose(
|
|
2027
2038
|
createStyleMixin({
|
2028
2039
|
mappings: {
|
2029
2040
|
hostWidth: { selector: () => ':host', property: 'width' },
|
2030
|
-
fontSize: {
|
2041
|
+
fontSize: {},
|
2031
2042
|
textColor: { property: 'color' },
|
2032
2043
|
textLineHeight: { property: 'line-height' },
|
2033
2044
|
textLetterSpacing: { property: 'letter-spacing' },
|
@@ -2057,7 +2068,6 @@ const {
|
|
2057
2068
|
requiredIndicator: requiredIndicator$5,
|
2058
2069
|
inputField: inputField$4,
|
2059
2070
|
input,
|
2060
|
-
readOnlyInput,
|
2061
2071
|
helperText: helperText$5,
|
2062
2072
|
errorMessage: errorMessage$5
|
2063
2073
|
} = {
|
@@ -2067,7 +2077,6 @@ const {
|
|
2067
2077
|
placeholder: { selector: '> input:placeholder-shown' },
|
2068
2078
|
inputField: { selector: '::part(input-field)' },
|
2069
2079
|
input: { selector: 'input' },
|
2070
|
-
readOnlyInput: { selector: '[readonly]::part(input-field)::after' },
|
2071
2080
|
helperText: { selector: '::part(helper-text)' },
|
2072
2081
|
errorMessage: { selector: '::part(error-message)' }
|
2073
2082
|
};
|
@@ -2075,17 +2084,18 @@ const {
|
|
2075
2084
|
var textFieldMappings = {
|
2076
2085
|
// we apply font-size also on the host so we can set its width with em
|
2077
2086
|
fontSize: [
|
2078
|
-
{
|
2079
|
-
|
2087
|
+
{},
|
2088
|
+
host$7,
|
2080
2089
|
],
|
2081
2090
|
fontFamily: [
|
2082
|
-
|
2083
|
-
|
2084
|
-
|
2085
|
-
|
2091
|
+
label$6,
|
2092
|
+
inputField$4,
|
2093
|
+
helperText$5,
|
2094
|
+
errorMessage$5,
|
2086
2095
|
],
|
2087
2096
|
|
2088
2097
|
hostWidth: { ...host$7, property: 'width' },
|
2098
|
+
hostMinWidth: { ...host$7, property: 'min-width' },
|
2089
2099
|
|
2090
2100
|
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
2091
2101
|
|
@@ -2099,22 +2109,16 @@ var textFieldMappings = {
|
|
2099
2109
|
|
2100
2110
|
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
2101
2111
|
|
2102
|
-
inputBorderColor:
|
2103
|
-
|
2104
|
-
|
2105
|
-
],
|
2106
|
-
inputBorderWidth: [
|
2107
|
-
{ ...inputField$4, property: 'border-width' },
|
2108
|
-
{ ...readOnlyInput, property: 'border-width' }
|
2109
|
-
],
|
2110
|
-
inputBorderStyle: [
|
2111
|
-
{ ...inputField$4, property: 'border-style' },
|
2112
|
-
{ ...readOnlyInput, property: 'border-style' }
|
2113
|
-
],
|
2112
|
+
inputBorderColor: { ...inputField$4, property: 'border-color' },
|
2113
|
+
inputBorderWidth: { ...inputField$4, property: 'border-width' },
|
2114
|
+
inputBorderStyle: { ...inputField$4, property: 'border-style' },
|
2114
2115
|
inputBorderRadius: { ...inputField$4, property: 'border-radius' },
|
2115
2116
|
|
2116
2117
|
inputHeight: { ...inputField$4, property: 'height' },
|
2117
|
-
|
2118
|
+
inputHorizontalPadding: [
|
2119
|
+
{ ...input, property: 'padding-left' },
|
2120
|
+
{ ...input, property: 'padding-right' }
|
2121
|
+
],
|
2118
2122
|
|
2119
2123
|
inputOutlineColor: { ...inputField$4, property: 'outline-color' },
|
2120
2124
|
inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
|
@@ -2143,9 +2147,9 @@ const EmailFieldClass = compose(
|
|
2143
2147
|
:host {
|
2144
2148
|
display: inline-block;
|
2145
2149
|
max-width: 100%;
|
2146
|
-
min-width: 10em;
|
2147
2150
|
padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
|
2148
2151
|
}
|
2152
|
+
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2149
2153
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2150
2154
|
`,
|
2151
2155
|
excludeAttrsSync: ['tabindex'],
|
@@ -2168,6 +2172,10 @@ class RawLink extends createBaseClass({ componentName: componentName$e, baseSele
|
|
2168
2172
|
}
|
2169
2173
|
:host a {
|
2170
2174
|
display: inline;
|
2175
|
+
text-decoration: none;
|
2176
|
+
}
|
2177
|
+
:host a:hover {
|
2178
|
+
text-decoration: underline;
|
2171
2179
|
}
|
2172
2180
|
</style>
|
2173
2181
|
<div>
|
@@ -2211,10 +2219,7 @@ const LinkClass = compose(
|
|
2211
2219
|
{ ...text$2, property: TextClass.cssVarList.textColor }
|
2212
2220
|
],
|
2213
2221
|
cursor: anchor,
|
2214
|
-
|
2215
|
-
textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
|
2216
|
-
textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
|
2217
|
-
},
|
2222
|
+
}
|
2218
2223
|
}),
|
2219
2224
|
draggableMixin,
|
2220
2225
|
componentNameValidationMixin
|
@@ -2288,9 +2293,9 @@ const NumberFieldClass = compose(
|
|
2288
2293
|
:host {
|
2289
2294
|
display: inline-block;
|
2290
2295
|
max-width: 100%;
|
2291
|
-
min-width: 10em;
|
2292
2296
|
padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
|
2293
2297
|
}
|
2298
|
+
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
2294
2299
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2295
2300
|
`,
|
2296
2301
|
excludeAttrsSync: ['tabindex'],
|
@@ -2539,10 +2544,9 @@ const TextFieldClass = compose(
|
|
2539
2544
|
:host {
|
2540
2545
|
display: inline-block;
|
2541
2546
|
max-width: 100%;
|
2542
|
-
min-width: 10em;
|
2543
2547
|
padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
|
2544
2548
|
}
|
2545
|
-
${
|
2549
|
+
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
2546
2550
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
2547
2551
|
`,
|
2548
2552
|
excludeAttrsSync: ['tabindex'],
|
@@ -2632,7 +2636,11 @@ const PasscodeClass = compose(
|
|
2632
2636
|
selector: TextFieldClass.componentName,
|
2633
2637
|
property: textVars$1.inputValueTextColor
|
2634
2638
|
},
|
2635
|
-
|
2639
|
+
digitSize: [
|
2640
|
+
{ ...digitField, property: 'height' },
|
2641
|
+
{ ...digitField, property: 'width' }
|
2642
|
+
],
|
2643
|
+
digitPadding: { ...digitField, property: textVars$1.inputHorizontalPadding },
|
2636
2644
|
digitTextAlign: { ...digitField, property: textVars$1.inputTextAlign },
|
2637
2645
|
digitCaretTextColor: { ...digitField, property: textVars$1.inputCaretTextColor },
|
2638
2646
|
digitSpacing: { ...internalWrapper, property: 'gap' },
|
@@ -2764,7 +2772,7 @@ const componentName$8 = getComponentName('password');
|
|
2764
2772
|
const {
|
2765
2773
|
host: host$4,
|
2766
2774
|
inputField: inputField$3,
|
2767
|
-
inputElement,
|
2775
|
+
inputElement: inputElement$1,
|
2768
2776
|
inputElementPlaceholder,
|
2769
2777
|
revealButtonContainer,
|
2770
2778
|
revealButtonIcon,
|
@@ -2789,9 +2797,10 @@ const PasswordClass = compose(
|
|
2789
2797
|
createStyleMixin({
|
2790
2798
|
mappings: {
|
2791
2799
|
hostWidth: { ...host$4, property: 'width' },
|
2800
|
+
hostMinWidth: { ...host$4, property: 'min-width' },
|
2792
2801
|
fontSize: [
|
2793
|
-
{
|
2794
|
-
|
2802
|
+
{},
|
2803
|
+
host$4,
|
2795
2804
|
],
|
2796
2805
|
fontFamily: [
|
2797
2806
|
label$4,
|
@@ -2800,6 +2809,10 @@ const PasswordClass = compose(
|
|
2800
2809
|
helperText$4
|
2801
2810
|
],
|
2802
2811
|
inputHeight: { ...inputField$3, property: 'height' },
|
2812
|
+
inputHorizontalPadding: [
|
2813
|
+
{ ...inputElement$1, property: 'padding-left' },
|
2814
|
+
{ ...inputElement$1, property: 'padding-right' }
|
2815
|
+
],
|
2803
2816
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
2804
2817
|
|
2805
2818
|
inputBorderStyle: { ...inputField$3, property: 'border-style' },
|
@@ -2819,12 +2832,17 @@ const PasswordClass = compose(
|
|
2819
2832
|
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
2820
2833
|
|
2821
2834
|
inputValueTextColor: [
|
2822
|
-
{ ...inputElement, property: 'color' },
|
2835
|
+
{ ...inputElement$1, property: 'color' },
|
2823
2836
|
{ ...revealButtonIcon, property: 'color' }
|
2824
2837
|
],
|
2825
2838
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2826
2839
|
|
2827
|
-
revealButtonOffset:
|
2840
|
+
revealButtonOffset: [
|
2841
|
+
{ ...revealButtonContainer, property: 'margin-right' },
|
2842
|
+
{ ...revealButtonContainer, property: 'margin-left' }
|
2843
|
+
],
|
2844
|
+
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
2845
|
+
|
2828
2846
|
}
|
2829
2847
|
}),
|
2830
2848
|
draggableMixin,
|
@@ -2838,17 +2856,22 @@ const PasswordClass = compose(
|
|
2838
2856
|
style: () => `
|
2839
2857
|
:host {
|
2840
2858
|
display: inline-block;
|
2841
|
-
min-width: 10em;
|
2842
2859
|
max-width: 100%;
|
2843
|
-
|
2844
|
-
padding: calc(var(${PasswordClass.cssVarList.inputOutlineWidth}) + var(${PasswordClass.cssVarList.inputOutlineOffset}));
|
2860
|
+
min-width: 10em;
|
2845
2861
|
}
|
2862
|
+
${useHostExternalPadding(PasswordClass.cssVarList)}
|
2863
|
+
${resetInputCursor('vaadin-password-field')}
|
2864
|
+
|
2846
2865
|
vaadin-password-field {
|
2847
2866
|
width: 100%;
|
2848
2867
|
box-sizing: border-box;
|
2849
2868
|
padding: 0;
|
2850
2869
|
}
|
2870
|
+
vaadin-password-field > input {
|
2871
|
+
box-sizing: border-box;
|
2872
|
+
}
|
2851
2873
|
vaadin-password-field::part(input-field) {
|
2874
|
+
box-sizing: border-box;
|
2852
2875
|
padding: 0;
|
2853
2876
|
}
|
2854
2877
|
vaadin-password-field[focus-ring]::part(input-field) {
|
@@ -2871,8 +2894,6 @@ const PasswordClass = compose(
|
|
2871
2894
|
cursor: pointer;
|
2872
2895
|
}
|
2873
2896
|
|
2874
|
-
${resetInputCursor('vaadin-password-field')}
|
2875
|
-
|
2876
2897
|
[readonly] vaadin-password-field-button {
|
2877
2898
|
pointer-events: none;
|
2878
2899
|
}
|
@@ -2914,15 +2935,16 @@ const TextAreaClass = compose(
|
|
2914
2935
|
createStyleMixin({
|
2915
2936
|
mappings: {
|
2916
2937
|
hostWidth: { ...host$3, property: 'width' },
|
2938
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
2917
2939
|
fontSize: [
|
2918
|
-
|
2919
|
-
|
2940
|
+
host$3,
|
2941
|
+
textArea$2,
|
2920
2942
|
],
|
2921
2943
|
fontFamily: [
|
2922
|
-
|
2923
|
-
|
2924
|
-
|
2925
|
-
|
2944
|
+
label$3,
|
2945
|
+
inputField$2,
|
2946
|
+
helperText$3,
|
2947
|
+
errorMessage$3,
|
2926
2948
|
],
|
2927
2949
|
labelTextColor: [
|
2928
2950
|
{ ...label$3, property: 'color' },
|
@@ -2953,11 +2975,9 @@ const TextAreaClass = compose(
|
|
2953
2975
|
style: () => `
|
2954
2976
|
:host {
|
2955
2977
|
display: inline-block;
|
2956
|
-
min-width: 10em;
|
2957
2978
|
max-width: 100%;
|
2958
|
-
padding: calc(var(${TextAreaClass.cssVarList.inputOutlineWidth}) + var(${TextAreaClass.cssVarList.inputOutlineOffset}));
|
2959
2979
|
}
|
2960
|
-
|
2980
|
+
${useHostExternalPadding(TextAreaClass.cssVarList)}
|
2961
2981
|
${resetInputContainer('vaadin-text-area')}
|
2962
2982
|
${resetInputField('vaadin-text-area')}
|
2963
2983
|
${resetInputPlaceholder('vaadin-text-area', 'textarea')}
|
@@ -3071,6 +3091,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
3071
3091
|
const {
|
3072
3092
|
host: host$2,
|
3073
3093
|
inputField: inputField$1,
|
3094
|
+
inputElement,
|
3074
3095
|
placeholder,
|
3075
3096
|
toggle,
|
3076
3097
|
label: label$2,
|
@@ -3080,6 +3101,7 @@ const {
|
|
3080
3101
|
} = {
|
3081
3102
|
host: { selector: () => ':host' },
|
3082
3103
|
inputField: { selector: '::part(input-field)' },
|
3104
|
+
inputElement: { selector: 'input' },
|
3083
3105
|
placeholder: { selector: '> input:placeholder-shown' },
|
3084
3106
|
toggle: { selector: '::part(toggle-button)' },
|
3085
3107
|
label: { selector: '::part(label)' },
|
@@ -3099,8 +3121,8 @@ const ComboBoxClass = compose(
|
|
3099
3121
|
hostWidth: { ...host$2, property: 'width' },
|
3100
3122
|
// we apply font-size also on the host so we can set its width with em
|
3101
3123
|
fontSize: [
|
3102
|
-
{
|
3103
|
-
|
3124
|
+
{},
|
3125
|
+
host$2,
|
3104
3126
|
],
|
3105
3127
|
fontFamily: [
|
3106
3128
|
label$2,
|
@@ -3124,10 +3146,19 @@ const ComboBoxClass = compose(
|
|
3124
3146
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3125
3147
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
3126
3148
|
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
3149
|
+
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
3150
|
+
inputDropdownButtonOffset: [
|
3151
|
+
{ ...toggle, property: 'margin-right' },
|
3152
|
+
{ ...toggle, property: 'margin-left' },
|
3153
|
+
],
|
3127
3154
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
3128
3155
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
3129
3156
|
inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
|
3130
3157
|
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
3158
|
+
inputHorizontalPadding: [
|
3159
|
+
{ ...inputElement, property: 'padding-left' },
|
3160
|
+
{ ...inputElement, property: 'padding-right' }
|
3161
|
+
],
|
3131
3162
|
|
3132
3163
|
// we need to use the variables from the portal mixin
|
3133
3164
|
// so we need to use an arrow function on the selector
|
@@ -3165,24 +3196,29 @@ const ComboBoxClass = compose(
|
|
3165
3196
|
display: inline-flex;
|
3166
3197
|
box-sizing: border-box;
|
3167
3198
|
-webkit-mask-image: none;
|
3168
|
-
padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
|
3169
3199
|
}
|
3200
|
+
${useHostExternalPadding(ComboBoxClass.cssVarList)}
|
3201
|
+
${resetInputReadonlyStyle('vaadin-combo-box')}
|
3202
|
+
${resetInputPlaceholder('vaadin-combo-box')}
|
3203
|
+
${resetInputCursor('vaadin-combo-box')}
|
3204
|
+
|
3170
3205
|
vaadin-combo-box {
|
3171
3206
|
padding: 0;
|
3172
3207
|
width: 100%;
|
3173
3208
|
}
|
3209
|
+
vaadin-combo-box::before {
|
3210
|
+
height: initial;
|
3211
|
+
}
|
3174
3212
|
vaadin-combo-box [slot="input"] {
|
3175
3213
|
-webkit-mask-image: none;
|
3176
3214
|
min-height: 0;
|
3215
|
+
box-sizing: border-box;
|
3177
3216
|
}
|
3178
3217
|
|
3179
3218
|
vaadin-combo-box::part(input-field) {
|
3180
3219
|
padding: 0;
|
3220
|
+
box-shadow: none;
|
3181
3221
|
}
|
3182
|
-
|
3183
|
-
${resetInputReadonlyStyle('vaadin-combo-box')}
|
3184
|
-
${resetInputPlaceholder('vaadin-combo-box')}
|
3185
|
-
${resetInputCursor('vaadin-combo-box')}
|
3186
3222
|
`,
|
3187
3223
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
3188
3224
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -4706,8 +4742,8 @@ const PhoneFieldClass = compose(
|
|
4706
4742
|
createStyleMixin({
|
4707
4743
|
mappings: {
|
4708
4744
|
fontSize: [
|
4709
|
-
|
4710
|
-
|
4745
|
+
host$1,
|
4746
|
+
inputField,
|
4711
4747
|
{
|
4712
4748
|
selector: TextFieldClass.componentName,
|
4713
4749
|
property: TextFieldClass.cssVarList.fontSize
|
@@ -4746,8 +4782,6 @@ const PhoneFieldClass = compose(
|
|
4746
4782
|
],
|
4747
4783
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
4748
4784
|
|
4749
|
-
inputHeight: { ...inputField, property: 'height' },
|
4750
|
-
|
4751
4785
|
countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
|
4752
4786
|
countryCodeDropdownWidth: {
|
4753
4787
|
...countryCodeInput,
|
@@ -4792,8 +4826,11 @@ const PhoneFieldClass = compose(
|
|
4792
4826
|
max-width: 100%;
|
4793
4827
|
min-width: 15em;
|
4794
4828
|
box-sizing: border-box;
|
4795
|
-
padding: calc(var(${PhoneFieldClass.cssVarList.inputOutlineWidth}) + var(${PhoneFieldClass.cssVarList.inputOutlineOffset}))
|
4796
4829
|
}
|
4830
|
+
${useHostExternalPadding(PhoneFieldClass.cssVarList)}
|
4831
|
+
${resetInputCursor('vaadin-text-field')}
|
4832
|
+
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
4833
|
+
|
4797
4834
|
div {
|
4798
4835
|
display: inline-flex;
|
4799
4836
|
}
|
@@ -4832,7 +4869,7 @@ const PhoneFieldClass = compose(
|
|
4832
4869
|
}
|
4833
4870
|
descope-combo-box {
|
4834
4871
|
flex-shrink: 0;
|
4835
|
-
|
4872
|
+
min-width: 5.75em;
|
4836
4873
|
${comboVars.inputOutlineWidth}: 0;
|
4837
4874
|
${comboVars.inputOutlineOffset}: 0;
|
4838
4875
|
${comboVars.inputBorderWidth}: 0;
|
@@ -4840,9 +4877,8 @@ const PhoneFieldClass = compose(
|
|
4840
4877
|
}
|
4841
4878
|
descope-text-field {
|
4842
4879
|
flex-grow: 1;
|
4843
|
-
min-height: 0;
|
4844
|
-
height: 100%;
|
4845
4880
|
${textVars.inputOutlineWidth}: 0;
|
4881
|
+
${comboVars.inputOutlineOffset}: 0;
|
4846
4882
|
${textVars.inputBorderWidth}: 0;
|
4847
4883
|
${textVars.inputBorderRadius}: 0;
|
4848
4884
|
}
|
@@ -4852,11 +4888,6 @@ const PhoneFieldClass = compose(
|
|
4852
4888
|
vaadin-text-field::part(input-field)::after {
|
4853
4889
|
border: none;
|
4854
4890
|
}
|
4855
|
-
|
4856
|
-
${resetInputFieldDefaultWidth()}
|
4857
|
-
${resetInputCursor('vaadin-text-field')}
|
4858
|
-
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
4859
|
-
|
4860
4891
|
`,
|
4861
4892
|
excludeAttrsSync: ['tabindex'],
|
4862
4893
|
componentName: componentName$3
|
@@ -4930,6 +4961,7 @@ const NewPasswordClass = compose(
|
|
4930
4961
|
mappings: {
|
4931
4962
|
fontSize: [
|
4932
4963
|
host,
|
4964
|
+
{},
|
4933
4965
|
{
|
4934
4966
|
selector: PasswordClass.componentName,
|
4935
4967
|
property: PasswordClass.cssVarList.fontSize
|
@@ -4941,6 +4973,7 @@ const NewPasswordClass = compose(
|
|
4941
4973
|
helperText
|
4942
4974
|
],
|
4943
4975
|
hostWidth: { ...host, property: 'width' },
|
4976
|
+
hostMinWidth: { ...host, property: 'min-width' },
|
4944
4977
|
inputsRequiredIndicator: { ...host, property: 'content' },
|
4945
4978
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
4946
4979
|
}
|
@@ -4956,10 +4989,9 @@ const NewPasswordClass = compose(
|
|
4956
4989
|
:host {
|
4957
4990
|
display: inline-block;
|
4958
4991
|
max-width: 100%;
|
4959
|
-
min-width: 10em;
|
4960
4992
|
box-sizing: border-box;
|
4961
4993
|
}
|
4962
|
-
${
|
4994
|
+
${useHostExternalPadding(PasswordClass.cssVarList)}
|
4963
4995
|
vaadin-text-field {
|
4964
4996
|
padding: 0;
|
4965
4997
|
width: 100%;
|
@@ -4968,7 +5000,6 @@ const NewPasswordClass = compose(
|
|
4968
5000
|
vaadin-text-field::part(input-field) {
|
4969
5001
|
min-height: 0;
|
4970
5002
|
background: transparent;
|
4971
|
-
overflow: hidden;
|
4972
5003
|
box-shadow: none;
|
4973
5004
|
padding: 0;
|
4974
5005
|
}
|
@@ -4987,7 +5018,7 @@ const NewPasswordClass = compose(
|
|
4987
5018
|
width: 100%;
|
4988
5019
|
height: 100%;
|
4989
5020
|
display: flex;
|
4990
|
-
|
5021
|
+
flex-direction: column;
|
4991
5022
|
}
|
4992
5023
|
descope-password {
|
4993
5024
|
display: block;
|
@@ -5018,7 +5049,6 @@ const commonAttrs = [
|
|
5018
5049
|
'invalid',
|
5019
5050
|
'readonly',
|
5020
5051
|
'draggable'
|
5021
|
-
|
5022
5052
|
];
|
5023
5053
|
|
5024
5054
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
@@ -5652,7 +5682,11 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
5652
5682
|
outlineColor: 'transparent',
|
5653
5683
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
5654
5684
|
|
5655
|
-
|
5685
|
+
minWidth: '10em',
|
5686
|
+
toggleButtonSize: '1.5em',
|
5687
|
+
inputHeight: '3em',
|
5688
|
+
horizontalPadding: '0.5em',
|
5689
|
+
verticalPadding: '0.5em',
|
5656
5690
|
|
5657
5691
|
backgroundColor: globalRefs$b.colors.surface.light,
|
5658
5692
|
|
@@ -5704,6 +5738,7 @@ const vars$j = TextFieldClass.cssVarList;
|
|
5704
5738
|
|
5705
5739
|
const textField = ({
|
5706
5740
|
[vars$j.hostWidth]: refs.width,
|
5741
|
+
[vars$j.hostMinWidth]: refs.minWidth,
|
5707
5742
|
[vars$j.fontSize]: refs.fontSize,
|
5708
5743
|
[vars$j.fontFamily]: refs.fontFamily,
|
5709
5744
|
[vars$j.labelTextColor]: refs.labelTextColor,
|
@@ -5720,6 +5755,7 @@ const textField = ({
|
|
5720
5755
|
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
5721
5756
|
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
5722
5757
|
[vars$j.inputHeight]: refs.inputHeight,
|
5758
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding
|
5723
5759
|
});
|
5724
5760
|
|
5725
5761
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
@@ -5737,6 +5773,7 @@ const password = {
|
|
5737
5773
|
[vars$i.fontSize]: refs.fontSize,
|
5738
5774
|
[vars$i.fontFamily]: refs.fontFamily,
|
5739
5775
|
[vars$i.labelTextColor]: refs.labelTextColor,
|
5776
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
5740
5777
|
[vars$i.inputHeight]: refs.inputHeight,
|
5741
5778
|
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
5742
5779
|
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
@@ -5750,7 +5787,8 @@ const password = {
|
|
5750
5787
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
5751
5788
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
5752
5789
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
5753
|
-
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md
|
5790
|
+
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md,
|
5791
|
+
[vars$i.revealButtonSize]: refs.toggleButtonSize
|
5754
5792
|
};
|
5755
5793
|
|
5756
5794
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -5763,6 +5801,7 @@ const vars$h = NumberFieldClass.cssVarList;
|
|
5763
5801
|
|
5764
5802
|
const numberField = {
|
5765
5803
|
[vars$h.hostWidth]: refs.width,
|
5804
|
+
[vars$h.hostMinWidth]: refs.minWidth,
|
5766
5805
|
[vars$h.fontSize]: refs.fontSize,
|
5767
5806
|
[vars$h.fontFamily]: refs.fontFamily,
|
5768
5807
|
[vars$h.labelTextColor]: refs.labelTextColor,
|
@@ -5778,7 +5817,8 @@ const numberField = {
|
|
5778
5817
|
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
5779
5818
|
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
5780
5819
|
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
5781
|
-
[vars$h.
|
5820
|
+
[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
|
5821
|
+
[vars$h.inputHeight]: refs.inputHeight
|
5782
5822
|
};
|
5783
5823
|
|
5784
5824
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -5791,6 +5831,7 @@ const vars$g = EmailFieldClass.cssVarList;
|
|
5791
5831
|
|
5792
5832
|
const emailField = {
|
5793
5833
|
[vars$g.hostWidth]: refs.width,
|
5834
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
5794
5835
|
[vars$g.fontSize]: refs.fontSize,
|
5795
5836
|
[vars$g.fontFamily]: refs.fontFamily,
|
5796
5837
|
[vars$g.labelTextColor]: refs.labelTextColor,
|
@@ -5806,6 +5847,7 @@ const emailField = {
|
|
5806
5847
|
[vars$g.inputOutlineColor]: refs.outlineColor,
|
5807
5848
|
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
5808
5849
|
[vars$g.inputBackgroundColor]: refs.backgroundColor,
|
5850
|
+
[vars$g.inputHorizontalPadding]: refs.horizontalPadding,
|
5809
5851
|
[vars$g.inputHeight]: refs.inputHeight
|
5810
5852
|
};
|
5811
5853
|
|
@@ -5820,6 +5862,7 @@ const vars$f = TextAreaClass.cssVarList;
|
|
5820
5862
|
|
5821
5863
|
const textArea = {
|
5822
5864
|
[vars$f.hostWidth]: refs.width,
|
5865
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
5823
5866
|
[vars$f.fontSize]: '14px',
|
5824
5867
|
[vars$f.fontFamily]: refs.fontFamily,
|
5825
5868
|
[vars$f.labelTextColor]: refs.labelTextColor,
|
@@ -6183,10 +6226,6 @@ const link = {
|
|
6183
6226
|
[vars$9.hostWidth]: '100%'
|
6184
6227
|
},
|
6185
6228
|
|
6186
|
-
_hover: {
|
6187
|
-
[vars$9.textUnderlineColor]: 'currentColor'
|
6188
|
-
},
|
6189
|
-
|
6190
6229
|
mode: {
|
6191
6230
|
primary: {
|
6192
6231
|
[vars$9.textColor]: globalRefs$4.colors.primary.main,
|
@@ -6274,6 +6313,7 @@ const passcode = {
|
|
6274
6313
|
[vars$7.digitOutlineColor]: 'transparent',
|
6275
6314
|
[vars$7.digitOutlineWidth]: refs.outlineWidth,
|
6276
6315
|
[vars$7.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
6316
|
+
[vars$7.digitSize]: refs.inputHeight,
|
6277
6317
|
|
6278
6318
|
_hideCursor: {
|
6279
6319
|
[vars$7.digitCaretTextColor]: 'transparent',
|
@@ -6399,9 +6439,12 @@ const comboBox = {
|
|
6399
6439
|
[vars$4.inputValueTextColor]: refs.valueTextColor,
|
6400
6440
|
[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
6401
6441
|
[vars$4.inputBackgroundColor]: refs.backgroundColor,
|
6442
|
+
[vars$4.inputHorizontalPadding]: refs.horizontalPadding,
|
6402
6443
|
[vars$4.inputHeight]: refs.inputHeight,
|
6403
6444
|
[vars$4.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
|
6404
6445
|
[vars$4.inputDropdownButtonCursor]: 'pointer',
|
6446
|
+
[vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
|
6447
|
+
[vars$4.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
6405
6448
|
|
6406
6449
|
_readonly: {
|
6407
6450
|
[vars$4.inputDropdownButtonCursor]: 'default'
|
@@ -6451,7 +6494,7 @@ const phoneField = {
|
|
6451
6494
|
[vars$2.inputOutlineColor]: refs.outlineColor,
|
6452
6495
|
[vars$2.inputOutlineOffset]: refs.outlineOffset,
|
6453
6496
|
[vars$2.inputHeight]: refs.inputHeight,
|
6454
|
-
[vars$2.phoneInputWidth]:
|
6497
|
+
[vars$2.phoneInputWidth]: refs.minWidth,
|
6455
6498
|
[vars$2.countryCodeInputWidth]: '5em',
|
6456
6499
|
[vars$2.countryCodeDropdownWidth]: '20em',
|
6457
6500
|
|
@@ -6470,6 +6513,7 @@ const vars$1 = NewPasswordClass.cssVarList;
|
|
6470
6513
|
|
6471
6514
|
const newPassword = {
|
6472
6515
|
[vars$1.hostWidth]: refs.width,
|
6516
|
+
[vars$1.hostMinWidth]: refs.minWidth,
|
6473
6517
|
[vars$1.fontSize]: refs.fontSize,
|
6474
6518
|
[vars$1.fontFamily]: refs.fontFamily,
|
6475
6519
|
[vars$1.spaceBetweenInputs]: '1em',
|