@descope/web-components-ui 1.0.90 → 1.0.92
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/index.esm.js +184 -157
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/387.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-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +39 -25
- package/src/components/descope-combo-box/ComboBox.js +4 -3
- package/src/components/descope-passcode/Passcode.js +42 -41
- package/src/components/descope-password-field/PasswordField.js +36 -27
- package/src/components/descope-phone-field/PhoneField.js +7 -2
- package/src/components/descope-text-field/TextField.js +1 -0
- package/src/theme/components/button.js +31 -37
package/dist/index.esm.js
CHANGED
@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1041
1041
|
|
1042
1042
|
const componentName$o = getComponentName('button');
|
1043
1043
|
|
1044
|
-
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1045
1044
|
const resetStyles = `
|
1046
1045
|
:host {
|
1047
1046
|
display: inline-block;
|
1048
1047
|
}
|
1049
|
-
vaadin-button {
|
1048
|
+
vaadin-button {
|
1049
|
+
margin: 0;
|
1050
|
+
min-width: 0;
|
1051
|
+
width: 100%;
|
1052
|
+
height: auto;
|
1053
|
+
}
|
1054
|
+
vaadin-button::part(label) {
|
1055
|
+
padding: 0;
|
1056
|
+
}
|
1050
1057
|
vaadin-button::part(prefix) {
|
1051
1058
|
margin-left: 0;
|
1052
1059
|
margin-right: 0;
|
1053
1060
|
}
|
1054
1061
|
`;
|
1062
|
+
|
1055
1063
|
const iconStyles = `
|
1056
1064
|
vaadin-button::part(prefix),
|
1057
1065
|
vaadin-button::part(label) {
|
1058
1066
|
display: flex;
|
1059
1067
|
justify-content: center;
|
1060
1068
|
align-items: center;
|
1061
|
-
gap: 5px;
|
1062
1069
|
}
|
1063
1070
|
`;
|
1064
1071
|
|
1065
|
-
const
|
1072
|
+
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1073
|
+
|
1074
|
+
const { host: host$9, label: label$6 } = {
|
1075
|
+
host: { selector: () => ':host' },
|
1066
1076
|
label: { selector: '::part(label)' },
|
1067
|
-
host: { selector: () => ':host' }
|
1068
1077
|
};
|
1069
1078
|
|
1070
1079
|
const Button = compose(
|
1071
1080
|
createStyleMixin({
|
1072
1081
|
mappings: {
|
1082
|
+
color: {},
|
1083
|
+
textDecoration: label$6,
|
1084
|
+
fontSize: {},
|
1085
|
+
cursor: {},
|
1073
1086
|
backgroundColor: {},
|
1074
1087
|
borderRadius: {},
|
1075
|
-
color: label$5,
|
1076
1088
|
borderColor: {},
|
1077
1089
|
borderStyle: {},
|
1078
1090
|
borderWidth: {},
|
1079
|
-
fontSize: {},
|
1080
|
-
height: {},
|
1081
1091
|
width: host$9,
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1092
|
+
gap: label$6,
|
1093
|
+
verticalPadding: [
|
1094
|
+
{ property: 'padding-top' },
|
1095
|
+
{ property: 'padding-bottom' },
|
1096
|
+
],
|
1097
|
+
horizontalPadding: [
|
1098
|
+
{ property: 'padding-left' },
|
1099
|
+
{ property: 'padding-right' },
|
1100
|
+
]
|
1085
1101
|
}
|
1086
1102
|
}),
|
1087
1103
|
draggableMixin,
|
@@ -1090,44 +1106,44 @@ const Button = compose(
|
|
1090
1106
|
createProxy({
|
1091
1107
|
slots: ['prefix', 'label', 'suffix'],
|
1092
1108
|
wrappedEleName: 'vaadin-button',
|
1093
|
-
style: () =>
|
1094
|
-
|
1109
|
+
style: () => `
|
1110
|
+
${resetStyles}
|
1111
|
+
${iconStyles}
|
1112
|
+
${loadingIndicatorStyles}
|
1113
|
+
${editorOverrides}
|
1114
|
+
`,
|
1095
1115
|
excludeAttrsSync: ['tabindex'],
|
1096
1116
|
componentName: componentName$o
|
1097
1117
|
})
|
1098
1118
|
);
|
1099
1119
|
|
1120
|
+
const { color, fontSize } = Button.cssVarList;
|
1100
1121
|
const loadingIndicatorStyles = `
|
1101
1122
|
@keyframes spin {
|
1102
1123
|
0% { -webkit-transform: rotate(0deg); }
|
1103
1124
|
100% { -webkit-transform: rotate(360deg); }
|
1104
1125
|
}
|
1105
1126
|
:host([loading="true"]) ::before {
|
1106
|
-
--marginRatio: 1.35;
|
1107
|
-
color: var(${Button.cssVarList.color});
|
1108
1127
|
animation: spin 2s linear infinite;
|
1109
1128
|
position: absolute;
|
1110
|
-
top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1111
|
-
left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1112
1129
|
content: '';
|
1113
1130
|
z-index: 1;
|
1114
1131
|
box-sizing: border-box;
|
1115
1132
|
border-radius: 50%;
|
1116
1133
|
border-bottom-color: transparent;
|
1117
1134
|
border-left-color: transparent;
|
1118
|
-
border-width: calc(var(${Button.cssVarList.height}) / 12);
|
1119
1135
|
border-style: solid;
|
1120
|
-
|
1121
|
-
|
1136
|
+
color: var(${color});
|
1137
|
+
top: calc(50% - (var(${fontSize}) / 2));
|
1138
|
+
left: calc(50% - (var(${fontSize}) / 2));
|
1139
|
+
border-width: calc(var(${fontSize}) / 10);
|
1140
|
+
width: var(${fontSize});
|
1141
|
+
height: var(${fontSize});
|
1122
1142
|
}
|
1123
1143
|
:host([loading="true"])::part(prefix),
|
1124
1144
|
:host([loading="true"])::part(label) {
|
1125
1145
|
visibility: hidden;
|
1126
1146
|
}
|
1127
|
-
|
1128
|
-
vaadin-button {
|
1129
|
-
width: 100%;
|
1130
|
-
}
|
1131
1147
|
`;
|
1132
1148
|
|
1133
1149
|
customElements.define(componentName$o, Button);
|
@@ -1306,7 +1322,7 @@ const {
|
|
1306
1322
|
checkboxElement,
|
1307
1323
|
checkboxSurface,
|
1308
1324
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1309
|
-
label: label$
|
1325
|
+
label: label$5,
|
1310
1326
|
requiredIndicator: requiredIndicator$4
|
1311
1327
|
} = {
|
1312
1328
|
host: { selector: () => ':host' },
|
@@ -1329,7 +1345,7 @@ const Checkbox = compose(
|
|
1329
1345
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1330
1346
|
checkboxWidth: [
|
1331
1347
|
{ ...checkboxElement, property: 'width' },
|
1332
|
-
{ ...label$
|
1348
|
+
{ ...label$5, property: 'margin-left' }
|
1333
1349
|
],
|
1334
1350
|
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1335
1351
|
|
@@ -1344,23 +1360,23 @@ const Checkbox = compose(
|
|
1344
1360
|
|
1345
1361
|
// Label
|
1346
1362
|
labelFontSize: [
|
1347
|
-
{ ...label$
|
1363
|
+
{ ...label$5, property: 'font-size' },
|
1348
1364
|
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1349
1365
|
],
|
1350
1366
|
labelLineHeight: [
|
1351
|
-
{ ...label$
|
1367
|
+
{ ...label$5, property: 'line-height' },
|
1352
1368
|
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1353
1369
|
],
|
1354
1370
|
labelFontWeight: [
|
1355
|
-
{ ...label$
|
1371
|
+
{ ...label$5, property: 'font-weight' },
|
1356
1372
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
1357
1373
|
],
|
1358
1374
|
labelMargin: [
|
1359
|
-
{ ...label$
|
1375
|
+
{ ...label$5, property: 'left' },
|
1360
1376
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' }
|
1361
1377
|
],
|
1362
1378
|
labelTextColor: [
|
1363
|
-
{ ...label$
|
1379
|
+
{ ...label$5, property: 'color' },
|
1364
1380
|
{ ...requiredIndicator$4, property: 'color' },
|
1365
1381
|
],
|
1366
1382
|
},
|
@@ -1398,7 +1414,7 @@ const {
|
|
1398
1414
|
checkboxElement: track,
|
1399
1415
|
checkboxSurface: knob,
|
1400
1416
|
checkboxHiddenLabel,
|
1401
|
-
label: label$
|
1417
|
+
label: label$4,
|
1402
1418
|
requiredIndicator: requiredIndicator$3,
|
1403
1419
|
} = {
|
1404
1420
|
host: { selector: () => ':host' },
|
@@ -1415,7 +1431,7 @@ const SwitchToggle = compose(
|
|
1415
1431
|
mappings: {
|
1416
1432
|
width: host$7,
|
1417
1433
|
cursor: [component, checkboxHiddenLabel, track],
|
1418
|
-
fontSize: [component, label$
|
1434
|
+
fontSize: [component, label$4, checkboxHiddenLabel],
|
1419
1435
|
|
1420
1436
|
// Track
|
1421
1437
|
trackBorderWidth: { ...track, property: 'border-width' },
|
@@ -1452,19 +1468,19 @@ const SwitchToggle = compose(
|
|
1452
1468
|
|
1453
1469
|
// Label
|
1454
1470
|
labelMargin: [
|
1455
|
-
{ ...label$
|
1471
|
+
{ ...label$4, property: 'padding-left' },
|
1456
1472
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1457
1473
|
],
|
1458
1474
|
labelLineHeight: [
|
1459
|
-
{ ...label$
|
1475
|
+
{ ...label$4, property: 'line-height' },
|
1460
1476
|
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1461
1477
|
],
|
1462
1478
|
labelFontWeight: [
|
1463
|
-
{ ...label$
|
1479
|
+
{ ...label$4, property: 'font-weight' },
|
1464
1480
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1465
1481
|
],
|
1466
1482
|
labelTextColor: [
|
1467
|
-
{ ...label$
|
1483
|
+
{ ...label$4, property: 'color' },
|
1468
1484
|
{ ...requiredIndicator$3, property: 'color' },
|
1469
1485
|
],
|
1470
1486
|
},
|
@@ -1869,7 +1885,7 @@ var textFieldMappings = {
|
|
1869
1885
|
|
1870
1886
|
const componentName$e = getComponentName('email-field');
|
1871
1887
|
|
1872
|
-
let overrides$
|
1888
|
+
let overrides$4 = ``;
|
1873
1889
|
|
1874
1890
|
const EmailField = compose(
|
1875
1891
|
createStyleMixin({
|
@@ -1884,13 +1900,13 @@ const EmailField = compose(
|
|
1884
1900
|
createProxy({
|
1885
1901
|
slots: ['suffix'],
|
1886
1902
|
wrappedEleName: 'vaadin-email-field',
|
1887
|
-
style: () => overrides$
|
1903
|
+
style: () => overrides$4,
|
1888
1904
|
excludeAttrsSync: ['tabindex'],
|
1889
1905
|
componentName: componentName$e
|
1890
1906
|
})
|
1891
1907
|
);
|
1892
1908
|
|
1893
|
-
overrides$
|
1909
|
+
overrides$4 = `
|
1894
1910
|
:host {
|
1895
1911
|
display: inline-block;
|
1896
1912
|
}
|
@@ -2043,7 +2059,7 @@ customElements.define(componentName$c, Logo);
|
|
2043
2059
|
|
2044
2060
|
const componentName$b = getComponentName('number-field');
|
2045
2061
|
|
2046
|
-
let overrides$
|
2062
|
+
let overrides$3 = ``;
|
2047
2063
|
|
2048
2064
|
const NumberField = compose(
|
2049
2065
|
createStyleMixin({
|
@@ -2058,13 +2074,13 @@ const NumberField = compose(
|
|
2058
2074
|
createProxy({
|
2059
2075
|
slots: ['prefix', 'suffix'],
|
2060
2076
|
wrappedEleName: 'vaadin-number-field',
|
2061
|
-
style: () => overrides$
|
2077
|
+
style: () => overrides$3,
|
2062
2078
|
excludeAttrsSync: ['tabindex'],
|
2063
2079
|
componentName: componentName$b
|
2064
2080
|
})
|
2065
2081
|
);
|
2066
2082
|
|
2067
|
-
overrides$
|
2083
|
+
overrides$3 = `
|
2068
2084
|
:host {
|
2069
2085
|
display: inline-block;
|
2070
2086
|
}
|
@@ -2310,7 +2326,7 @@ class PasscodeInternal extends BaseInputClass$2 {
|
|
2310
2326
|
|
2311
2327
|
const componentName$9 = getComponentName('text-field');
|
2312
2328
|
|
2313
|
-
let overrides$
|
2329
|
+
let overrides$2 = ``;
|
2314
2330
|
|
2315
2331
|
const observedAttrs = ['type'];
|
2316
2332
|
|
@@ -2346,13 +2362,13 @@ const TextField = compose(
|
|
2346
2362
|
createProxy({
|
2347
2363
|
slots: ['prefix', 'suffix'],
|
2348
2364
|
wrappedEleName: 'vaadin-text-field',
|
2349
|
-
style: () => overrides$
|
2365
|
+
style: () => overrides$2,
|
2350
2366
|
excludeAttrsSync: ['tabindex'],
|
2351
2367
|
componentName: componentName$9
|
2352
2368
|
})
|
2353
2369
|
);
|
2354
2370
|
|
2355
|
-
overrides$
|
2371
|
+
overrides$2 = `
|
2356
2372
|
:host {
|
2357
2373
|
display: inline-block;
|
2358
2374
|
--vaadin-field-default-width: auto;
|
@@ -2368,6 +2384,7 @@ overrides$3 = `
|
|
2368
2384
|
overflow: hidden;
|
2369
2385
|
padding: 0;
|
2370
2386
|
}
|
2387
|
+
vaadin-text-field[disabled] > input:placeholder-shown,
|
2371
2388
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
2372
2389
|
opacity: 1;
|
2373
2390
|
}
|
@@ -2441,7 +2458,7 @@ const customMixin$2 = (superclass) =>
|
|
2441
2458
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2442
2459
|
textFieldMappings;
|
2443
2460
|
|
2444
|
-
const { digitField, label: label$
|
2461
|
+
const { digitField, label: label$3, requiredIndicator: requiredIndicator$2, internalWrapper, focusedValidDigitField } = {
|
2445
2462
|
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2446
2463
|
digitField: { selector: () => TextField.componentName },
|
2447
2464
|
label: { selector: '> label' },
|
@@ -2463,7 +2480,7 @@ const Passcode = compose(
|
|
2463
2480
|
// ideally, this would be part of the text field
|
2464
2481
|
{ ...internalWrapper, property: 'padding' }
|
2465
2482
|
],
|
2466
|
-
color: [restTextFieldMappings.color, label$
|
2483
|
+
color: [restTextFieldMappings.color, label$3, requiredIndicator$2],
|
2467
2484
|
padding: { ...digitField, property: textVars$1.padding },
|
2468
2485
|
margin: { ...digitField, property: textVars$1.margin },
|
2469
2486
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
@@ -2487,55 +2504,56 @@ const Passcode = compose(
|
|
2487
2504
|
}
|
2488
2505
|
|
2489
2506
|
descope-passcode-internal {
|
2490
|
-
|
2491
|
-
|
2492
|
-
|
2493
|
-
|
2494
|
-
|
2507
|
+
-webkit-mask-image: none;
|
2508
|
+
padding: 0;
|
2509
|
+
width: 100%;
|
2510
|
+
height: 100%;
|
2511
|
+
min-height: initial;
|
2495
2512
|
}
|
2496
2513
|
|
2497
|
-
|
2498
|
-
|
2499
|
-
|
2500
|
-
|
2514
|
+
descope-passcode-internal .wrapper {
|
2515
|
+
box-sizing: border-box;
|
2516
|
+
min-height: initial;
|
2517
|
+
height: 100%;
|
2518
|
+
justify-content: center;
|
2501
2519
|
}
|
2502
2520
|
|
2503
|
-
|
2504
|
-
|
2505
|
-
|
2521
|
+
descope-passcode-internal descope-text-field {
|
2522
|
+
width: var(${textVars$1.height})
|
2523
|
+
}
|
2506
2524
|
|
2507
2525
|
vaadin-text-field::part(input-field) {
|
2508
|
-
|
2509
|
-
|
2510
|
-
|
2511
|
-
|
2526
|
+
background-color: transparent;
|
2527
|
+
padding: 0;
|
2528
|
+
overflow: hidden;
|
2529
|
+
-webkit-mask-image: none;
|
2512
2530
|
}
|
2513
2531
|
|
2514
|
-
|
2515
|
-
|
2516
|
-
|
2517
|
-
|
2518
|
-
|
2532
|
+
vaadin-text-field {
|
2533
|
+
margin: 0;
|
2534
|
+
padding: 0;
|
2535
|
+
width: 100%
|
2536
|
+
}
|
2519
2537
|
|
2520
|
-
|
2521
|
-
|
2522
|
-
|
2538
|
+
vaadin-text-field::before {
|
2539
|
+
height: initial;
|
2540
|
+
}
|
2523
2541
|
|
2524
|
-
|
2525
|
-
|
2526
|
-
|
2527
|
-
|
2528
|
-
vaadin-text-field::part(input-field):focus {
|
2529
|
-
cursor: text;
|
2530
|
-
}
|
2542
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
2543
|
+
opacity: 1;
|
2544
|
+
}
|
2531
2545
|
|
2532
|
-
|
2533
|
-
|
2534
|
-
|
2535
|
-
|
2536
|
-
|
2537
|
-
|
2538
|
-
|
2546
|
+
vaadin-text-field::part(input-field):focus {
|
2547
|
+
cursor: text;
|
2548
|
+
}
|
2549
|
+
|
2550
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
2551
|
+
font-size: "12px";
|
2552
|
+
content: "*";
|
2553
|
+
}
|
2554
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
2555
|
+
border: 0 solid;
|
2556
|
+
}
|
2539
2557
|
`,
|
2540
2558
|
excludeAttrsSync: ['tabindex'],
|
2541
2559
|
componentName: componentName$8
|
@@ -2550,14 +2568,22 @@ customElements.define(componentName$8, Passcode);
|
|
2550
2568
|
|
2551
2569
|
const componentName$7 = getComponentName('password-field');
|
2552
2570
|
|
2553
|
-
|
2554
|
-
|
2555
|
-
|
2571
|
+
const {
|
2572
|
+
host: host$3,
|
2573
|
+
inputWrapper: inputWrapper$1,
|
2574
|
+
inputElement,
|
2575
|
+
inputElementPlaceholder,
|
2576
|
+
revealButton,
|
2577
|
+
revealButtonIcon,
|
2578
|
+
label: label$2,
|
2579
|
+
requiredIndicator: requiredIndicator$1
|
2580
|
+
} = {
|
2556
2581
|
host: () => ':host',
|
2557
2582
|
inputWrapper: { selector: '::part(input-field)' },
|
2558
2583
|
inputElement: { selector: '> input' },
|
2559
2584
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2560
2585
|
revealButton: { selector: 'vaadin-password-field-button' },
|
2586
|
+
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
2561
2587
|
label: { selector: '> label' },
|
2562
2588
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2563
2589
|
};
|
@@ -2570,17 +2596,20 @@ const PasswordField = compose(
|
|
2570
2596
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2571
2597
|
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2572
2598
|
labelTextColor: [
|
2573
|
-
{ ...label$
|
2599
|
+
{ ...label$2, property: 'color' },
|
2574
2600
|
{ ...requiredIndicator$1, property: 'color' }
|
2575
2601
|
],
|
2576
|
-
inputTextColor: [
|
2602
|
+
inputTextColor: [
|
2603
|
+
{ ...inputElement, property: 'color' },
|
2604
|
+
{ ...revealButtonIcon, property: 'color' }
|
2605
|
+
],
|
2577
2606
|
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2578
2607
|
fontSize: [{}, host$3],
|
2579
2608
|
height: inputWrapper$1,
|
2580
2609
|
padding: inputWrapper$1,
|
2581
2610
|
pointerCursor: [
|
2582
2611
|
{ ...revealButton, property: 'cursor' },
|
2583
|
-
{ ...label$
|
2612
|
+
{ ...label$2, property: 'cursor' },
|
2584
2613
|
{ ...requiredIndicator$1, property: 'cursor' }
|
2585
2614
|
],
|
2586
2615
|
}
|
@@ -2592,34 +2621,32 @@ const PasswordField = compose(
|
|
2592
2621
|
createProxy({
|
2593
2622
|
slots: ['suffix'],
|
2594
2623
|
wrappedEleName: 'vaadin-password-field',
|
2595
|
-
style:
|
2624
|
+
style: `
|
2625
|
+
:host {
|
2626
|
+
display: inline-block;
|
2627
|
+
}
|
2628
|
+
vaadin-password-field {
|
2629
|
+
width: 100%;
|
2630
|
+
padding: 0;
|
2631
|
+
}
|
2632
|
+
vaadin-password-field > input {
|
2633
|
+
min-height: 0;
|
2634
|
+
}
|
2635
|
+
vaadin-password-field::part(input-field) {
|
2636
|
+
background: transparent;
|
2637
|
+
}
|
2638
|
+
vaadin-password-field::part(input-field)::after {
|
2639
|
+
opacity: 0;
|
2640
|
+
}
|
2641
|
+
vaadin-password-field::before {
|
2642
|
+
height: initial;
|
2643
|
+
}
|
2644
|
+
`,
|
2596
2645
|
excludeAttrsSync: ['tabindex'],
|
2597
2646
|
componentName: componentName$7
|
2598
2647
|
})
|
2599
2648
|
);
|
2600
2649
|
|
2601
|
-
overrides$2 = `
|
2602
|
-
:host {
|
2603
|
-
display: inline-block;
|
2604
|
-
}
|
2605
|
-
vaadin-password-field {
|
2606
|
-
width: 100%;
|
2607
|
-
padding: 0;
|
2608
|
-
}
|
2609
|
-
vaadin-password-field > input {
|
2610
|
-
min-height: 0;
|
2611
|
-
}
|
2612
|
-
vaadin-password-field::part(input-field) {
|
2613
|
-
background: transparent;
|
2614
|
-
}
|
2615
|
-
vaadin-password-field::part(input-field)::after {
|
2616
|
-
opacity: 0;
|
2617
|
-
}
|
2618
|
-
vaadin-password-field::before {
|
2619
|
-
height: initial;
|
2620
|
-
}
|
2621
|
-
`;
|
2622
|
-
|
2623
2650
|
customElements.define(componentName$7, PasswordField);
|
2624
2651
|
|
2625
2652
|
const componentName$6 = getComponentName('text-area');
|
@@ -2787,11 +2814,12 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
2787
2814
|
}
|
2788
2815
|
};
|
2789
2816
|
|
2790
|
-
const { host: host$2, input, placeholder, toggle } = {
|
2817
|
+
const { host: host$2, input, placeholder, toggle, label: label$1 } = {
|
2791
2818
|
host: { selector: () => ':host' },
|
2792
2819
|
input: { selector: '::part(input-field)' },
|
2793
2820
|
placeholder: { selector: '> input:placeholder-shown' },
|
2794
|
-
toggle: { selector: '::part(toggle-button)' }
|
2821
|
+
toggle: { selector: '::part(toggle-button)' },
|
2822
|
+
label: { selector: '::part(label)' }
|
2795
2823
|
};
|
2796
2824
|
|
2797
2825
|
// const { slotted, selected } = {
|
@@ -2814,7 +2842,7 @@ const ComboBox = compose(
|
|
2814
2842
|
borderStyle: input,
|
2815
2843
|
borderRadius: input,
|
2816
2844
|
|
2817
|
-
color: input,
|
2845
|
+
color: [label$1, input],
|
2818
2846
|
|
2819
2847
|
// we apply font-size also on the host so we can set its width with em
|
2820
2848
|
fontSize: [{}, host$2],
|
@@ -4364,7 +4392,7 @@ const {
|
|
4364
4392
|
inputWrapper: { selector: '::part(input-field)' },
|
4365
4393
|
phoneInput: { selector: () => 'descope-text-field' },
|
4366
4394
|
countryCodeInput: { selector: () => 'descope-combo-box' },
|
4367
|
-
label: { selector: '
|
4395
|
+
label: { selector: '::part(label)' },
|
4368
4396
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
4369
4397
|
separator: { selector: 'descope-phone-field-internal .separator' }
|
4370
4398
|
};
|
@@ -4398,7 +4426,12 @@ const PhoneField = compose(
|
|
4398
4426
|
|
4399
4427
|
phoneInputWidth: { ...phoneInput, property: 'width' },
|
4400
4428
|
|
4401
|
-
color: [
|
4429
|
+
color: [
|
4430
|
+
label,
|
4431
|
+
requiredIndicator,
|
4432
|
+
{ ...phoneInput, property: textVars.color },
|
4433
|
+
{ ...countryCodeInput, property: comboVars.color }
|
4434
|
+
],
|
4402
4435
|
|
4403
4436
|
placeholderColor: {
|
4404
4437
|
...phoneInput,
|
@@ -5068,46 +5101,37 @@ const mode = {
|
|
5068
5101
|
|
5069
5102
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
5070
5103
|
|
5104
|
+
const verticalPaddingRatio = 3;
|
5105
|
+
const horizontalPaddingRatio = 2;
|
5106
|
+
|
5071
5107
|
const button = {
|
5072
5108
|
...helperTheme$2,
|
5073
|
-
[vars$g.width]: 'fit-content',
|
5074
|
-
size: {
|
5075
|
-
xs: {
|
5076
|
-
[vars$g.height]: '10px',
|
5077
|
-
[vars$g.fontSize]: '10px',
|
5078
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5079
|
-
},
|
5080
|
-
sm: {
|
5081
|
-
[vars$g.height]: '20px',
|
5082
|
-
[vars$g.fontSize]: '10px',
|
5083
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5084
|
-
},
|
5085
|
-
md: {
|
5086
|
-
[vars$g.height]: '30px',
|
5087
|
-
[vars$g.fontSize]: '14px',
|
5088
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
|
5089
|
-
},
|
5090
|
-
lg: {
|
5091
|
-
[vars$g.height]: '40px',
|
5092
|
-
[vars$g.fontSize]: '20px',
|
5093
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5094
|
-
},
|
5095
|
-
xl: {
|
5096
|
-
[vars$g.height]: '50px',
|
5097
|
-
[vars$g.fontSize]: '25px',
|
5098
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5099
|
-
}
|
5100
|
-
},
|
5101
5109
|
|
5102
|
-
[vars$g.borderRadius]: globalRefs$e.radius.lg,
|
5103
5110
|
[vars$g.cursor]: 'pointer',
|
5111
|
+
|
5112
|
+
[vars$g.borderRadius]: globalRefs$e.radius.sm,
|
5104
5113
|
[vars$g.borderWidth]: '2px',
|
5105
5114
|
[vars$g.borderStyle]: 'solid',
|
5106
5115
|
[vars$g.borderColor]: 'transparent',
|
5107
5116
|
|
5117
|
+
[vars$g.gap]: '0.25em',
|
5118
|
+
[vars$g.height]: '100%',
|
5119
|
+
|
5120
|
+
[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
|
5121
|
+
[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
|
5122
|
+
|
5123
|
+
size: {
|
5124
|
+
xs: { [vars$g.fontSize]: '12px' },
|
5125
|
+
sm: { [vars$g.fontSize]: '14px' },
|
5126
|
+
md: { [vars$g.fontSize]: '18px' },
|
5127
|
+
lg: { [vars$g.fontSize]: '22px' },
|
5128
|
+
xl: { [vars$g.fontSize]: '26px' }
|
5129
|
+
},
|
5130
|
+
|
5108
5131
|
_fullWidth: {
|
5109
5132
|
[vars$g.width]: '100%'
|
5110
5133
|
},
|
5134
|
+
|
5111
5135
|
_loading: {
|
5112
5136
|
[vars$g.cursor]: 'wait'
|
5113
5137
|
},
|
@@ -5119,27 +5143,30 @@ const button = {
|
|
5119
5143
|
_hover: {
|
5120
5144
|
[vars$g.backgroundColor]: helperRefs$2.dark
|
5121
5145
|
},
|
5122
|
-
|
5123
|
-
[vars$g.backgroundColor]: helperRefs$2.
|
5146
|
+
_active: {
|
5147
|
+
[vars$g.backgroundColor]: helperRefs$2.dark
|
5124
5148
|
}
|
5125
5149
|
},
|
5150
|
+
|
5126
5151
|
outline: {
|
5127
5152
|
[vars$g.color]: helperRefs$2.main,
|
5128
|
-
[vars$g.borderColor]:
|
5153
|
+
[vars$g.borderColor]: 'currentColor',
|
5129
5154
|
_hover: {
|
5130
5155
|
[vars$g.color]: helperRefs$2.dark,
|
5131
|
-
|
5132
|
-
|
5133
|
-
|
5134
|
-
}
|
5156
|
+
},
|
5157
|
+
_active: {
|
5158
|
+
[vars$g.color]: helperRefs$2.light,
|
5135
5159
|
}
|
5136
5160
|
},
|
5161
|
+
|
5137
5162
|
link: {
|
5138
5163
|
[vars$g.color]: helperRefs$2.main,
|
5139
|
-
[vars$g.lineHeight]: helperRefs$2.height,
|
5140
5164
|
_hover: {
|
5141
5165
|
[vars$g.color]: helperRefs$2.main,
|
5142
5166
|
[vars$g.textDecoration]: 'underline'
|
5167
|
+
},
|
5168
|
+
_active: {
|
5169
|
+
[vars$g.color]: helperRefs$2.dark
|
5143
5170
|
}
|
5144
5171
|
}
|
5145
5172
|
}
|