@descope/web-components-ui 1.0.96 → 1.0.98
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +4 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +161 -117
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-passcode-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/package.json +1 -1
- package/src/components/descope-email-field/EmailField.js +4 -2
- package/src/components/descope-loader-linear/LoaderLinear.js +1 -1
- package/src/components/descope-passcode/Passcode.js +6 -1
- package/src/components/descope-text-area/TextArea.js +38 -20
- package/src/components/descope-text-field/TextField.js +4 -2
- package/src/components/descope-text-field/textFieldMappings.js +7 -3
- package/src/helpers/themeHelpers/index.js +4 -0
- package/src/theme/components/button.js +0 -1
- package/src/theme/components/checkbox.js +1 -1
- package/src/theme/components/container.js +10 -1
- package/src/theme/components/textArea.js +9 -9
- package/src/theme/components/textField.js +6 -7
- package/src/theme/globals.js +5 -3
package/dist/index.esm.js
CHANGED
@@ -1110,7 +1110,7 @@ const iconStyles = `
|
|
1110
1110
|
|
1111
1111
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1112
1112
|
|
1113
|
-
const { host: host$
|
1113
|
+
const { host: host$a, label: label$7 } = {
|
1114
1114
|
host: { selector: () => ':host' },
|
1115
1115
|
label: { selector: '::part(label)' },
|
1116
1116
|
};
|
@@ -1119,7 +1119,7 @@ const Button = compose(
|
|
1119
1119
|
createStyleMixin({
|
1120
1120
|
mappings: {
|
1121
1121
|
color: {},
|
1122
|
-
textDecoration: label$
|
1122
|
+
textDecoration: label$7,
|
1123
1123
|
fontSize: {},
|
1124
1124
|
cursor: {},
|
1125
1125
|
backgroundColor: {},
|
@@ -1127,8 +1127,8 @@ const Button = compose(
|
|
1127
1127
|
borderColor: {},
|
1128
1128
|
borderStyle: {},
|
1129
1129
|
borderWidth: {},
|
1130
|
-
width: host$
|
1131
|
-
gap: label$
|
1130
|
+
width: host$a,
|
1131
|
+
gap: label$7,
|
1132
1132
|
verticalPadding: [
|
1133
1133
|
{ property: 'padding-top' },
|
1134
1134
|
{ property: 'padding-bottom' },
|
@@ -1356,13 +1356,13 @@ descope-boolean-field-internal {
|
|
1356
1356
|
const componentName$m = getComponentName('checkbox');
|
1357
1357
|
|
1358
1358
|
const {
|
1359
|
-
host: host$
|
1359
|
+
host: host$9,
|
1360
1360
|
component: component$1,
|
1361
1361
|
checkboxElement,
|
1362
1362
|
checkboxSurface,
|
1363
1363
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
1364
|
-
label: label$
|
1365
|
-
requiredIndicator: requiredIndicator$
|
1364
|
+
label: label$6,
|
1365
|
+
requiredIndicator: requiredIndicator$5
|
1366
1366
|
} = {
|
1367
1367
|
host: { selector: () => ':host' },
|
1368
1368
|
label: { selector: '::part(label)' },
|
@@ -1376,7 +1376,7 @@ const {
|
|
1376
1376
|
const Checkbox = compose(
|
1377
1377
|
createStyleMixin({
|
1378
1378
|
mappings: {
|
1379
|
-
width: host$
|
1379
|
+
width: host$9,
|
1380
1380
|
cursor: component$1,
|
1381
1381
|
|
1382
1382
|
// Checkbox
|
@@ -1384,7 +1384,7 @@ const Checkbox = compose(
|
|
1384
1384
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1385
1385
|
checkboxWidth: [
|
1386
1386
|
{ ...checkboxElement, property: 'width' },
|
1387
|
-
{ ...label$
|
1387
|
+
{ ...label$6, property: 'margin-left' }
|
1388
1388
|
],
|
1389
1389
|
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1390
1390
|
|
@@ -1399,24 +1399,24 @@ const Checkbox = compose(
|
|
1399
1399
|
|
1400
1400
|
// Label
|
1401
1401
|
labelFontSize: [
|
1402
|
-
{ ...label$
|
1402
|
+
{ ...label$6, property: 'font-size' },
|
1403
1403
|
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1404
1404
|
],
|
1405
1405
|
labelLineHeight: [
|
1406
|
-
{ ...label$
|
1406
|
+
{ ...label$6, property: 'line-height' },
|
1407
1407
|
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1408
1408
|
],
|
1409
1409
|
labelFontWeight: [
|
1410
|
-
{ ...label$
|
1410
|
+
{ ...label$6, property: 'font-weight' },
|
1411
1411
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
1412
1412
|
],
|
1413
1413
|
labelMargin: [
|
1414
|
-
{ ...label$
|
1414
|
+
{ ...label$6, property: 'left' },
|
1415
1415
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' }
|
1416
1416
|
],
|
1417
1417
|
labelTextColor: [
|
1418
|
-
{ ...label$
|
1419
|
-
{ ...requiredIndicator$
|
1418
|
+
{ ...label$6, property: 'color' },
|
1419
|
+
{ ...requiredIndicator$5, property: 'color' },
|
1420
1420
|
],
|
1421
1421
|
},
|
1422
1422
|
}),
|
@@ -1448,13 +1448,13 @@ customElements.define(componentName$m, Checkbox);
|
|
1448
1448
|
const componentName$l = getComponentName('switch-toggle');
|
1449
1449
|
|
1450
1450
|
const {
|
1451
|
-
host: host$
|
1451
|
+
host: host$8,
|
1452
1452
|
component,
|
1453
1453
|
checkboxElement: track,
|
1454
1454
|
checkboxSurface: knob,
|
1455
1455
|
checkboxHiddenLabel,
|
1456
|
-
label: label$
|
1457
|
-
requiredIndicator: requiredIndicator$
|
1456
|
+
label: label$5,
|
1457
|
+
requiredIndicator: requiredIndicator$4,
|
1458
1458
|
} = {
|
1459
1459
|
host: { selector: () => ':host' },
|
1460
1460
|
label: { selector: '::part(label)' },
|
@@ -1468,9 +1468,9 @@ const {
|
|
1468
1468
|
const SwitchToggle = compose(
|
1469
1469
|
createStyleMixin({
|
1470
1470
|
mappings: {
|
1471
|
-
width: host$
|
1471
|
+
width: host$8,
|
1472
1472
|
cursor: [component, checkboxHiddenLabel, track],
|
1473
|
-
fontSize: [component, label$
|
1473
|
+
fontSize: [component, label$5, checkboxHiddenLabel],
|
1474
1474
|
|
1475
1475
|
// Track
|
1476
1476
|
trackBorderWidth: { ...track, property: 'border-width' },
|
@@ -1507,20 +1507,20 @@ const SwitchToggle = compose(
|
|
1507
1507
|
|
1508
1508
|
// Label
|
1509
1509
|
labelMargin: [
|
1510
|
-
{ ...label$
|
1510
|
+
{ ...label$5, property: 'padding-left' },
|
1511
1511
|
{ ...checkboxHiddenLabel, property: 'padding-left' }
|
1512
1512
|
],
|
1513
1513
|
labelLineHeight: [
|
1514
|
-
{ ...label$
|
1514
|
+
{ ...label$5, property: 'line-height' },
|
1515
1515
|
{ ...checkboxHiddenLabel, property: 'line-height' }
|
1516
1516
|
],
|
1517
1517
|
labelFontWeight: [
|
1518
|
-
{ ...label$
|
1518
|
+
{ ...label$5, property: 'font-weight' },
|
1519
1519
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
1520
1520
|
],
|
1521
1521
|
labelTextColor: [
|
1522
|
-
{ ...label$
|
1523
|
-
{ ...requiredIndicator$
|
1522
|
+
{ ...label$5, property: 'color' },
|
1523
|
+
{ ...requiredIndicator$4, property: 'color' },
|
1524
1524
|
],
|
1525
1525
|
},
|
1526
1526
|
}),
|
@@ -1575,7 +1575,7 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
|
|
1575
1575
|
}
|
1576
1576
|
:host {
|
1577
1577
|
position: relative;
|
1578
|
-
display:
|
1578
|
+
display: flex;
|
1579
1579
|
}
|
1580
1580
|
div::after {
|
1581
1581
|
content: '';
|
@@ -1593,19 +1593,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$k,
|
|
1593
1593
|
}
|
1594
1594
|
}
|
1595
1595
|
|
1596
|
-
const selectors$
|
1596
|
+
const selectors$3 = {
|
1597
1597
|
root: {},
|
1598
1598
|
after: { selector: '::after' },
|
1599
1599
|
host: { selector: () => ':host' }
|
1600
1600
|
};
|
1601
1601
|
|
1602
|
-
const { root: root$1, after: after$1, host: host$
|
1602
|
+
const { root: root$1, after: after$1, host: host$7 } = selectors$3;
|
1603
1603
|
|
1604
1604
|
const LoaderLinear = compose(
|
1605
1605
|
createStyleMixin({
|
1606
1606
|
mappings: {
|
1607
1607
|
display: root$1,
|
1608
|
-
width: host$
|
1608
|
+
width: host$7,
|
1609
1609
|
height: [root$1, after$1],
|
1610
1610
|
borderRadius: [root$1, after$1],
|
1611
1611
|
surfaceColor: [{ property: 'background-color' }],
|
@@ -1800,7 +1800,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$g, baseS
|
|
1800
1800
|
}
|
1801
1801
|
}
|
1802
1802
|
|
1803
|
-
const selectors$
|
1803
|
+
const selectors$2 = {
|
1804
1804
|
root: { selector: '' },
|
1805
1805
|
before: { selector: '::before' },
|
1806
1806
|
after: { selector: '::after' },
|
@@ -1808,7 +1808,7 @@ const selectors$3 = {
|
|
1808
1808
|
host: { selector: () => ':host' },
|
1809
1809
|
};
|
1810
1810
|
|
1811
|
-
const { root, before, after, text: text$2, host: host$
|
1811
|
+
const { root, before, after, text: text$2, host: host$6 } = selectors$2;
|
1812
1812
|
|
1813
1813
|
const Divider = compose(
|
1814
1814
|
createStyleMixin({
|
@@ -1819,8 +1819,8 @@ const Divider = compose(
|
|
1819
1819
|
alignSelf: root,
|
1820
1820
|
flexDirection: root,
|
1821
1821
|
textPadding: { ...text$2, property: 'padding' },
|
1822
|
-
width: host$
|
1823
|
-
padding: host$
|
1822
|
+
width: host$6,
|
1823
|
+
padding: host$6,
|
1824
1824
|
backgroundColor: [before, after],
|
1825
1825
|
opacity: [before, after],
|
1826
1826
|
textWidth: { ...text$2, property: 'width' },
|
@@ -1880,7 +1880,7 @@ customElements.define(componentName$f, Text);
|
|
1880
1880
|
|
1881
1881
|
customElements.define(componentName$g, Divider);
|
1882
1882
|
|
1883
|
-
const selectors$
|
1883
|
+
const selectors$1 = {
|
1884
1884
|
label: '::part(label)',
|
1885
1885
|
inputWrapper: '::part(input-field)',
|
1886
1886
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
@@ -1890,37 +1890,41 @@ const selectors$2 = {
|
|
1890
1890
|
};
|
1891
1891
|
|
1892
1892
|
var textFieldMappings = {
|
1893
|
-
backgroundColor: { selector: selectors$
|
1894
|
-
color: { selector: selectors$
|
1895
|
-
width: { selector: selectors$
|
1893
|
+
backgroundColor: { selector: selectors$1.inputWrapper },
|
1894
|
+
color: { selector: selectors$1.inputWrapper },
|
1895
|
+
width: { selector: selectors$1.host },
|
1896
1896
|
borderColor: [
|
1897
|
-
{ selector: selectors$
|
1898
|
-
{ selector: selectors$
|
1897
|
+
{ selector: selectors$1.inputWrapper },
|
1898
|
+
{ selector: selectors$1.readOnlyInput }
|
1899
1899
|
],
|
1900
1900
|
borderWidth: [
|
1901
|
-
{ selector: selectors$
|
1902
|
-
{ selector: selectors$
|
1901
|
+
{ selector: selectors$1.inputWrapper },
|
1902
|
+
{ selector: selectors$1.readOnlyInput }
|
1903
1903
|
],
|
1904
1904
|
borderStyle: [
|
1905
|
-
{ selector: selectors$
|
1906
|
-
{ selector: selectors$
|
1905
|
+
{ selector: selectors$1.inputWrapper },
|
1906
|
+
{ selector: selectors$1.readOnlyInput }
|
1907
1907
|
],
|
1908
|
-
borderRadius: { selector: selectors$
|
1909
|
-
boxShadow: { selector: selectors$
|
1908
|
+
borderRadius: { selector: selectors$1.inputWrapper },
|
1909
|
+
boxShadow: { selector: selectors$1.inputWrapper },
|
1910
1910
|
|
1911
1911
|
// we apply font-size also on the host so we can set its width with em
|
1912
|
-
fontSize: [{}, { selector: selectors$
|
1913
|
-
|
1914
|
-
height: { selector: selectors$
|
1915
|
-
padding: { selector: selectors$
|
1916
|
-
margin: { selector: selectors$
|
1917
|
-
caretColor: { selector: selectors$
|
1918
|
-
outlineColor: { selector: selectors$
|
1919
|
-
outlineStyle: { selector: selectors$
|
1920
|
-
outlineWidth:
|
1921
|
-
|
1922
|
-
|
1923
|
-
|
1912
|
+
fontSize: [{}, { selector: selectors$1.host }],
|
1913
|
+
|
1914
|
+
height: { selector: selectors$1.inputWrapper },
|
1915
|
+
padding: { selector: selectors$1.inputWrapper },
|
1916
|
+
margin: { selector: selectors$1.inputWrapper },
|
1917
|
+
caretColor: { selector: selectors$1.input },
|
1918
|
+
outlineColor: { selector: selectors$1.inputWrapper },
|
1919
|
+
outlineStyle: { selector: selectors$1.inputWrapper },
|
1920
|
+
outlineWidth: [
|
1921
|
+
{ selector: selectors$1.inputWrapper },
|
1922
|
+
// we need to make sure there is enough space for the outline
|
1923
|
+
{ property: 'padding' }
|
1924
|
+
],
|
1925
|
+
outlineOffset: { selector: selectors$1.inputWrapper },
|
1926
|
+
textAlign: { selector: selectors$1.input },
|
1927
|
+
placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
|
1924
1928
|
};
|
1925
1929
|
|
1926
1930
|
const componentName$e = getComponentName('email-field');
|
@@ -1952,8 +1956,11 @@ overrides$4 = `
|
|
1952
1956
|
}
|
1953
1957
|
vaadin-email-field {
|
1954
1958
|
margin: 0;
|
1955
|
-
padding: 0;
|
1956
1959
|
width: 100%;
|
1960
|
+
box-sizing: border-box;
|
1961
|
+
}
|
1962
|
+
vaadin-email-field::before {
|
1963
|
+
height: 0;
|
1957
1964
|
}
|
1958
1965
|
vaadin-email-field::part(input-field) {
|
1959
1966
|
overflow: hidden;
|
@@ -1978,7 +1985,6 @@ overrides$4 = `
|
|
1978
1985
|
cursor: text;
|
1979
1986
|
}
|
1980
1987
|
vaadin-email-field[required]::part(required-indicator)::after {
|
1981
|
-
font-size: "12px";
|
1982
1988
|
content: "*";
|
1983
1989
|
color: var(${EmailField.cssVarList.color});
|
1984
1990
|
}
|
@@ -2026,19 +2032,19 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
|
|
2026
2032
|
}
|
2027
2033
|
}
|
2028
2034
|
|
2029
|
-
const selectors
|
2035
|
+
const selectors = {
|
2030
2036
|
host: { selector: () => 'host' },
|
2031
2037
|
anchor: {},
|
2032
2038
|
wrapper: {selector: () => ':host > div'},
|
2033
2039
|
text: { selector: () => Text.componentName }
|
2034
2040
|
};
|
2035
2041
|
|
2036
|
-
const { anchor, text: text$1, host: host$
|
2042
|
+
const { anchor, text: text$1, host: host$5, wrapper } = selectors;
|
2037
2043
|
|
2038
2044
|
const Link = compose(
|
2039
2045
|
createStyleMixin({
|
2040
2046
|
mappings: {
|
2041
|
-
width: host$
|
2047
|
+
width: host$5,
|
2042
2048
|
textAlign: wrapper,
|
2043
2049
|
color: [anchor, { ...text$1, property: Text.cssVarList.color }],
|
2044
2050
|
cursor: anchor,
|
@@ -2419,6 +2425,7 @@ overrides$2 = `
|
|
2419
2425
|
padding: 0;
|
2420
2426
|
width: 100%;
|
2421
2427
|
height: 100%;
|
2428
|
+
box-sizing: border-box;
|
2422
2429
|
}
|
2423
2430
|
|
2424
2431
|
vaadin-text-field::part(input-field) {
|
@@ -2454,10 +2461,11 @@ overrides$2 = `
|
|
2454
2461
|
content: "*";
|
2455
2462
|
color: var(${TextField.cssVarList.color});
|
2456
2463
|
}
|
2457
|
-
vaadin-text-field
|
2458
|
-
|
2464
|
+
vaadin-text-field::part(input-field)::after {
|
2465
|
+
opacity: 0 !important;
|
2459
2466
|
}
|
2460
2467
|
|
2468
|
+
|
2461
2469
|
vaadin-text-field::before {
|
2462
2470
|
height: unset;
|
2463
2471
|
}
|
@@ -2499,7 +2507,7 @@ const customMixin$2 = (superclass) =>
|
|
2499
2507
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2500
2508
|
textFieldMappings;
|
2501
2509
|
|
2502
|
-
const { digitField, label: label$
|
2510
|
+
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedValidDigitField } = {
|
2503
2511
|
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2504
2512
|
digitField: { selector: () => TextField.componentName },
|
2505
2513
|
label: { selector: '> label' },
|
@@ -2521,7 +2529,7 @@ const Passcode = compose(
|
|
2521
2529
|
// ideally, this would be part of the text field
|
2522
2530
|
{ ...internalWrapper, property: 'padding' }
|
2523
2531
|
],
|
2524
|
-
color: [restTextFieldMappings.color, label$
|
2532
|
+
color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
|
2525
2533
|
padding: { ...digitField, property: textVars$1.padding },
|
2526
2534
|
margin: { ...digitField, property: textVars$1.margin },
|
2527
2535
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
@@ -2543,6 +2551,12 @@ const Passcode = compose(
|
|
2543
2551
|
--vaadin-field-default-width: auto;
|
2544
2552
|
display: inline-block;
|
2545
2553
|
}
|
2554
|
+
:host::after {
|
2555
|
+
background-color: transparent;
|
2556
|
+
}
|
2557
|
+
:host::part(input-field)::after {
|
2558
|
+
background-color: transparent;
|
2559
|
+
}
|
2546
2560
|
|
2547
2561
|
descope-passcode-internal {
|
2548
2562
|
-webkit-mask-image: none;
|
@@ -2589,7 +2603,6 @@ const Passcode = compose(
|
|
2589
2603
|
}
|
2590
2604
|
|
2591
2605
|
vaadin-text-field[required]::part(required-indicator)::after {
|
2592
|
-
font-size: "12px";
|
2593
2606
|
content: "*";
|
2594
2607
|
}
|
2595
2608
|
vaadin-text-field[readonly]::part(input-field)::after {
|
@@ -2610,14 +2623,14 @@ customElements.define(componentName$8, Passcode);
|
|
2610
2623
|
const componentName$7 = getComponentName('password-field');
|
2611
2624
|
|
2612
2625
|
const {
|
2613
|
-
host: host$
|
2626
|
+
host: host$4,
|
2614
2627
|
inputWrapper: inputWrapper$1,
|
2615
2628
|
inputElement,
|
2616
2629
|
inputElementPlaceholder,
|
2617
2630
|
revealButton,
|
2618
2631
|
revealButtonIcon,
|
2619
|
-
label: label$
|
2620
|
-
requiredIndicator: requiredIndicator$
|
2632
|
+
label: label$3,
|
2633
|
+
requiredIndicator: requiredIndicator$2
|
2621
2634
|
} = {
|
2622
2635
|
host: () => ':host',
|
2623
2636
|
inputWrapper: { selector: '::part(input-field)' },
|
@@ -2637,21 +2650,21 @@ const PasswordField = compose(
|
|
2637
2650
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2638
2651
|
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2639
2652
|
labelTextColor: [
|
2640
|
-
{ ...label$
|
2641
|
-
{ ...requiredIndicator$
|
2653
|
+
{ ...label$3, property: 'color' },
|
2654
|
+
{ ...requiredIndicator$2, property: 'color' }
|
2642
2655
|
],
|
2643
2656
|
inputTextColor: [
|
2644
2657
|
{ ...inputElement, property: 'color' },
|
2645
2658
|
{ ...revealButtonIcon, property: 'color' }
|
2646
2659
|
],
|
2647
2660
|
placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2648
|
-
fontSize: [{}, host$
|
2661
|
+
fontSize: [{}, host$4],
|
2649
2662
|
height: inputWrapper$1,
|
2650
2663
|
padding: inputWrapper$1,
|
2651
2664
|
pointerCursor: [
|
2652
2665
|
{ ...revealButton, property: 'cursor' },
|
2653
|
-
{ ...label$
|
2654
|
-
{ ...requiredIndicator$
|
2666
|
+
{ ...label$3, property: 'cursor' },
|
2667
|
+
{ ...requiredIndicator$2, property: 'cursor' }
|
2655
2668
|
],
|
2656
2669
|
}
|
2657
2670
|
}),
|
@@ -2692,11 +2705,20 @@ customElements.define(componentName$7, PasswordField);
|
|
2692
2705
|
|
2693
2706
|
const componentName$6 = getComponentName('text-area');
|
2694
2707
|
|
2695
|
-
const
|
2696
|
-
|
2697
|
-
|
2698
|
-
|
2699
|
-
|
2708
|
+
const {
|
2709
|
+
host: host$3,
|
2710
|
+
placeholder: placeholder$1,
|
2711
|
+
input: input$1,
|
2712
|
+
textArea: textArea$1,
|
2713
|
+
label: label$2,
|
2714
|
+
requiredIndicator: requiredIndicator$1
|
2715
|
+
} = {
|
2716
|
+
host: { selector: () => ':host' },
|
2717
|
+
textArea: { selector: '> textarea' },
|
2718
|
+
label: { selector: '::part(label)' },
|
2719
|
+
input: { selector: '::part(input-field)' },
|
2720
|
+
placeholder: { selector: 'textarea:placeholder-shown' },
|
2721
|
+
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2700
2722
|
};
|
2701
2723
|
|
2702
2724
|
let overrides$1 = ``;
|
@@ -2704,19 +2726,24 @@ let overrides$1 = ``;
|
|
2704
2726
|
const TextArea = compose(
|
2705
2727
|
createStyleMixin({
|
2706
2728
|
mappings: {
|
2707
|
-
resize:
|
2708
|
-
color:
|
2729
|
+
resize: textArea$1,
|
2730
|
+
color: textArea$1,
|
2709
2731
|
cursor: {},
|
2710
|
-
|
2711
|
-
|
2712
|
-
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2718
|
-
|
2719
|
-
|
2732
|
+
labelColor: [
|
2733
|
+
{ ...label$2, property: 'color' },
|
2734
|
+
{ ...requiredIndicator$1, property: 'color' }
|
2735
|
+
],
|
2736
|
+
placeholderColor: { ...placeholder$1, property: 'color' },
|
2737
|
+
width: host$3,
|
2738
|
+
backgroundColor: input$1,
|
2739
|
+
borderWidth: input$1,
|
2740
|
+
borderStyle: input$1,
|
2741
|
+
borderColor: input$1,
|
2742
|
+
borderRadius: input$1,
|
2743
|
+
outlineWidth: input$1,
|
2744
|
+
outlineStyle: input$1,
|
2745
|
+
outlineColor: input$1,
|
2746
|
+
outlineOffset: [input$1, { property: 'padding' }],
|
2720
2747
|
}
|
2721
2748
|
}),
|
2722
2749
|
draggableMixin,
|
@@ -2740,6 +2767,7 @@ overrides$1 = `
|
|
2740
2767
|
vaadin-text-area {
|
2741
2768
|
margin: 0;
|
2742
2769
|
width: 100%;
|
2770
|
+
box-sizing: border-box;
|
2743
2771
|
}
|
2744
2772
|
vaadin-text-area > label,
|
2745
2773
|
vaadin-text-area::part(input-field) {
|
@@ -2748,10 +2776,13 @@ overrides$1 = `
|
|
2748
2776
|
vaadin-text-area[focused]::part(input-field) {
|
2749
2777
|
cursor: text;
|
2750
2778
|
}
|
2751
|
-
vaadin-text-area::part(required-indicator)::after {
|
2752
|
-
font-size: "12px";
|
2779
|
+
vaadin-text-area[required]::part(required-indicator)::after {
|
2753
2780
|
content: "*";
|
2754
|
-
}
|
2781
|
+
}
|
2782
|
+
vaadin-text-area[disabled] > textarea:placeholder-shown,
|
2783
|
+
vaadin-text-area[readonly] > textarea:placeholder-shown {
|
2784
|
+
opacity: 1;
|
2785
|
+
}
|
2755
2786
|
`;
|
2756
2787
|
|
2757
2788
|
customElements.define(componentName$6, TextArea);
|
@@ -4909,6 +4940,10 @@ const componentsThemeToStyleObj = (componentsTheme) =>
|
|
4909
4940
|
const property = restPath.pop();
|
4910
4941
|
const componentName = getComponentName(component);
|
4911
4942
|
|
4943
|
+
if(property === 'undefined'){
|
4944
|
+
console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
|
4945
|
+
}
|
4946
|
+
|
4912
4947
|
// we need a support for portal components theme (e.g. overlay)
|
4913
4948
|
// this allows us to generate those themes under different sections
|
4914
4949
|
// if the theme has root level attribute that starts with #
|
@@ -5121,12 +5156,12 @@ const typography = {
|
|
5121
5156
|
},
|
5122
5157
|
body1: {
|
5123
5158
|
font: fontsRef.font1.family,
|
5124
|
-
weight: '
|
5159
|
+
weight: '400',
|
5125
5160
|
size: '16px'
|
5126
5161
|
},
|
5127
5162
|
body2: {
|
5128
5163
|
font: fontsRef.font1.family,
|
5129
|
-
weight: '
|
5164
|
+
weight: '400',
|
5130
5165
|
size: '14px'
|
5131
5166
|
}
|
5132
5167
|
};
|
@@ -5152,7 +5187,9 @@ const radius = {
|
|
5152
5187
|
sm: '10px',
|
5153
5188
|
md: '15px',
|
5154
5189
|
lg: '20px',
|
5155
|
-
xl: '25px'
|
5190
|
+
xl: '25px',
|
5191
|
+
'2xl': '30px',
|
5192
|
+
'3xl': '35px'
|
5156
5193
|
};
|
5157
5194
|
|
5158
5195
|
const shadow = {
|
@@ -5209,7 +5246,6 @@ const button = {
|
|
5209
5246
|
[vars$g.borderColor]: 'transparent',
|
5210
5247
|
|
5211
5248
|
[vars$g.gap]: '0.25em',
|
5212
|
-
[vars$g.height]: '100%',
|
5213
5249
|
|
5214
5250
|
[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
|
5215
5251
|
[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
|
@@ -5271,31 +5307,32 @@ const globalRefs$e = getThemeRefs(globals);
|
|
5271
5307
|
const vars$f = TextField.cssVarList;
|
5272
5308
|
|
5273
5309
|
const textField = (vars) => ({
|
5310
|
+
[vars.padding]: '0 1em',
|
5311
|
+
|
5312
|
+
[vars.outlineWidth]: '2px',
|
5313
|
+
[vars.outlineStyle]: 'solid',
|
5314
|
+
[vars.outlineColor]: 'transparent',
|
5315
|
+
|
5274
5316
|
size: {
|
5275
5317
|
xs: {
|
5276
5318
|
[vars.height]: '14px',
|
5277
5319
|
[vars.fontSize]: '8px',
|
5278
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5279
5320
|
},
|
5280
5321
|
sm: {
|
5281
5322
|
[vars.height]: '20px',
|
5282
5323
|
[vars.fontSize]: '10px',
|
5283
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5284
5324
|
},
|
5285
5325
|
md: {
|
5286
5326
|
[vars.height]: '30px',
|
5287
5327
|
[vars.fontSize]: '14px',
|
5288
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.md}`
|
5289
5328
|
},
|
5290
5329
|
lg: {
|
5291
5330
|
[vars.height]: '40px',
|
5292
5331
|
[vars.fontSize]: '20px',
|
5293
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5294
5332
|
},
|
5295
5333
|
xl: {
|
5296
5334
|
[vars.height]: '50px',
|
5297
5335
|
[vars.fontSize]: '25px',
|
5298
|
-
[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5299
5336
|
}
|
5300
5337
|
},
|
5301
5338
|
|
@@ -5320,8 +5357,6 @@ const textField = (vars) => ({
|
|
5320
5357
|
},
|
5321
5358
|
|
5322
5359
|
_focused: {
|
5323
|
-
[vars.outlineWidth]: '2px',
|
5324
|
-
[vars.outlineStyle]: 'solid',
|
5325
5360
|
[vars.outlineColor]: globalRefs$e.colors.surface.main
|
5326
5361
|
},
|
5327
5362
|
|
@@ -5409,36 +5444,36 @@ const globalRefs$c = getThemeRefs(globals);
|
|
5409
5444
|
const vars$d = TextArea.cssVarList;
|
5410
5445
|
|
5411
5446
|
const textArea = {
|
5412
|
-
[vars$d.
|
5447
|
+
[vars$d.labelColor]: globalRefs$c.colors.surface.contrast,
|
5448
|
+
[vars$d.placeholderColor]: globalRefs$c.colors.surface.main,
|
5449
|
+
[vars$d.color]: globalRefs$c.colors.surface.contrast,
|
5450
|
+
|
5413
5451
|
[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
|
5414
5452
|
[vars$d.resize]: 'vertical',
|
5415
5453
|
|
5416
5454
|
[vars$d.borderRadius]: globalRefs$c.radius.sm,
|
5417
5455
|
[vars$d.borderWidth]: '1px',
|
5418
5456
|
[vars$d.borderStyle]: 'solid',
|
5419
|
-
[vars$d.borderColor]:
|
5457
|
+
[vars$d.borderColor]: globalRefs$c.colors.surface.main,
|
5420
5458
|
[vars$d.outlineWidth]: '2px',
|
5421
5459
|
[vars$d.outlineStyle]: 'solid',
|
5422
5460
|
[vars$d.outlineColor]: 'transparent',
|
5461
|
+
[vars$d.outlineOffset]: '0px',
|
5423
5462
|
|
5424
|
-
|
5425
|
-
|
5426
|
-
[vars$d.borderColor]: globalRefs$c.colors.surface.main
|
5463
|
+
_fullWidth: {
|
5464
|
+
[vars$d.width]: '100%'
|
5427
5465
|
},
|
5428
5466
|
|
5429
5467
|
_focused: {
|
5430
5468
|
[vars$d.outlineColor]: globalRefs$c.colors.surface.main
|
5431
5469
|
},
|
5432
5470
|
|
5433
|
-
_fullWidth: {
|
5434
|
-
[vars$d.width]: '100%'
|
5435
|
-
},
|
5436
|
-
|
5437
5471
|
_disabled: {
|
5438
5472
|
[vars$d.cursor]: 'not-allowed'
|
5439
5473
|
},
|
5440
5474
|
|
5441
5475
|
_invalid: {
|
5476
|
+
[vars$d.labelColor]: globalRefs$c.colors.error.main,
|
5442
5477
|
[vars$d.outlineColor]: globalRefs$c.colors.error.main
|
5443
5478
|
}
|
5444
5479
|
};
|
@@ -5458,7 +5493,7 @@ const checkbox = {
|
|
5458
5493
|
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5459
5494
|
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5460
5495
|
|
5461
|
-
[vars$c.checkboxRadius]: globalRefs$b.radius.
|
5496
|
+
[vars$c.checkboxRadius]: globalRefs$b.radius.xs,
|
5462
5497
|
|
5463
5498
|
size: {
|
5464
5499
|
xs: {
|
@@ -5673,7 +5708,7 @@ const container = {
|
|
5673
5708
|
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
5674
5709
|
},
|
5675
5710
|
'2xl': {
|
5676
|
-
[helperVars.shadowColor]: '#00000050',
|
5711
|
+
[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
5677
5712
|
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
5678
5713
|
},
|
5679
5714
|
},
|
@@ -5688,6 +5723,15 @@ const container = {
|
|
5688
5723
|
lg: {
|
5689
5724
|
[vars$a.borderRadius]: globalRefs$9.radius.lg
|
5690
5725
|
},
|
5726
|
+
xl: {
|
5727
|
+
[vars$a.borderRadius]: globalRefs$9.radius.xl
|
5728
|
+
},
|
5729
|
+
'2xl': {
|
5730
|
+
[vars$a.borderRadius]: globalRefs$9.radius['2xl']
|
5731
|
+
},
|
5732
|
+
'3xl': {
|
5733
|
+
[vars$a.borderRadius]: globalRefs$9.radius['3xl']
|
5734
|
+
},
|
5691
5735
|
}
|
5692
5736
|
};
|
5693
5737
|
|