@descope/web-components-ui 1.0.130 → 1.0.132
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +235 -187
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +235 -188
- 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-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-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 +10 -15
- 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/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/cjs/index.cjs.js
CHANGED
@@ -510,6 +510,107 @@ const globals = {
|
|
510
510
|
};
|
511
511
|
const vars$m = getThemeVars(globals);
|
512
512
|
|
513
|
+
const resetInputOverrides = (name, cssVarList) => `
|
514
|
+
${resetInputContainer(name)}
|
515
|
+
${resetInputCursor(name)}
|
516
|
+
${resetInputPlaceholder(name)}
|
517
|
+
${resetInputField(name)}
|
518
|
+
${resetInputAutoFill(name, cssVarList)}
|
519
|
+
${resetInputFieldInvalidBackgroundColor(name)}
|
520
|
+
${resetInitialHeight(name)}
|
521
|
+
${resetInputElement(name)}
|
522
|
+
${resetInputFieldunderlayingBorder(name)}
|
523
|
+
`;
|
524
|
+
|
525
|
+
const useHostExternalPadding = (cssVarList) => `
|
526
|
+
:host {
|
527
|
+
padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
|
528
|
+
}
|
529
|
+
`;
|
530
|
+
|
531
|
+
const resetInputFieldunderlayingBorder = (name) => `
|
532
|
+
${name}::part(input-field)::after {
|
533
|
+
border: none;
|
534
|
+
}
|
535
|
+
`;
|
536
|
+
|
537
|
+
const resetInitialHeight = (name) => `
|
538
|
+
${name}::before {
|
539
|
+
height: unset;
|
540
|
+
}
|
541
|
+
`;
|
542
|
+
|
543
|
+
const resetInputElement = (name) => `
|
544
|
+
${name} > input {
|
545
|
+
-webkit-mask-image: none;
|
546
|
+
min-height: 0;
|
547
|
+
box-sizing: border-box;
|
548
|
+
}
|
549
|
+
`;
|
550
|
+
|
551
|
+
const resetInputContainer = (name) => `
|
552
|
+
${name} {
|
553
|
+
margin: 0;
|
554
|
+
padding: 0;
|
555
|
+
width: 100%;
|
556
|
+
height: 100%;
|
557
|
+
box-sizing: border-box;
|
558
|
+
}
|
559
|
+
`;
|
560
|
+
|
561
|
+
const resetInputField = (name) => `
|
562
|
+
${name}::part(input-field) {
|
563
|
+
overflow: hidden;
|
564
|
+
padding: 0;
|
565
|
+
box-shadow: none;
|
566
|
+
}
|
567
|
+
`;
|
568
|
+
|
569
|
+
const resetInputCursor = (name) => `
|
570
|
+
${name} > label,
|
571
|
+
${name}::part(label),
|
572
|
+
${name}::part(required-indicator) {
|
573
|
+
cursor: pointer;
|
574
|
+
}
|
575
|
+
`;
|
576
|
+
|
577
|
+
const resetInputPlaceholder = (name, ele = 'input') => `
|
578
|
+
${name}[disabled] > ${ele}:placeholder-shown,
|
579
|
+
${name}[readonly] > ${ele}:placeholder-shown {
|
580
|
+
opacity: 1;
|
581
|
+
}
|
582
|
+
`;
|
583
|
+
|
584
|
+
const resetInputAutoFill = (name, cssVarList) => `
|
585
|
+
${name} input:-webkit-autofill,
|
586
|
+
${name} input:-webkit-autofill::first-line,
|
587
|
+
${name} input:-webkit-autofill:hover,
|
588
|
+
${name} input:-webkit-autofill:active,
|
589
|
+
${name} input:-webkit-autofill:focus {
|
590
|
+
-webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
|
591
|
+
box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
|
592
|
+
}
|
593
|
+
`;
|
594
|
+
|
595
|
+
const resetInputFieldDefaultWidth = () => `
|
596
|
+
:host {
|
597
|
+
--vaadin-field-default-width: auto;
|
598
|
+
box-sizing: border-box;
|
599
|
+
}
|
600
|
+
`;
|
601
|
+
|
602
|
+
const resetInputReadonlyStyle = (name) => `
|
603
|
+
${name}::part(input-field)::after {
|
604
|
+
opacity: 0;
|
605
|
+
}
|
606
|
+
`;
|
607
|
+
|
608
|
+
const resetInputFieldInvalidBackgroundColor = (name) => `
|
609
|
+
${name}::part(input-field)::after {
|
610
|
+
background: none;
|
611
|
+
}
|
612
|
+
`;
|
613
|
+
|
513
614
|
const createCssVarFallback = (first, ...rest) =>
|
514
615
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
515
616
|
|
@@ -859,7 +960,8 @@ const booleanAttributesList = [
|
|
859
960
|
'has-error-message',
|
860
961
|
'focus-ring',
|
861
962
|
'opened',
|
862
|
-
'active'
|
963
|
+
'active',
|
964
|
+
'password-visible'
|
863
965
|
];
|
864
966
|
|
865
967
|
const isBooleanAttribute = (attr) => {
|
@@ -1496,8 +1598,8 @@ const ButtonClass = compose(
|
|
1496
1598
|
createStyleMixin({
|
1497
1599
|
mappings: {
|
1498
1600
|
hostWidth: { ...host$c, property: 'width' },
|
1499
|
-
fontSize: {
|
1500
|
-
fontFamily: {
|
1601
|
+
fontSize: {},
|
1602
|
+
fontFamily: {},
|
1501
1603
|
|
1502
1604
|
cursor: {},
|
1503
1605
|
backgroundColor: {},
|
@@ -1538,9 +1640,7 @@ const ButtonClass = compose(
|
|
1538
1640
|
${iconStyles}
|
1539
1641
|
${loadingIndicatorStyles}
|
1540
1642
|
${editorOverrides}
|
1541
|
-
|
1542
|
-
padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}))
|
1543
|
-
}
|
1643
|
+
${useHostExternalPadding(ButtonClass.cssVarList)}
|
1544
1644
|
`,
|
1545
1645
|
excludeAttrsSync: ['tabindex'],
|
1546
1646
|
componentName: componentName$o
|
@@ -1687,7 +1787,6 @@ const {
|
|
1687
1787
|
requiredIndicator: requiredIndicator$7,
|
1688
1788
|
inputField: inputField$4,
|
1689
1789
|
input,
|
1690
|
-
readOnlyInput,
|
1691
1790
|
helperText: helperText$7,
|
1692
1791
|
errorMessage: errorMessage$7
|
1693
1792
|
} = {
|
@@ -1697,7 +1796,6 @@ const {
|
|
1697
1796
|
placeholder: { selector: '> input:placeholder-shown' },
|
1698
1797
|
inputField: { selector: '::part(input-field)' },
|
1699
1798
|
input: { selector: 'input' },
|
1700
|
-
readOnlyInput: { selector: '[readonly]::part(input-field)::after' },
|
1701
1799
|
helperText: { selector: '::part(helper-text)' },
|
1702
1800
|
errorMessage: { selector: '::part(error-message)' }
|
1703
1801
|
};
|
@@ -1705,17 +1803,18 @@ const {
|
|
1705
1803
|
var textFieldMappings = {
|
1706
1804
|
// we apply font-size also on the host so we can set its width with em
|
1707
1805
|
fontSize: [
|
1708
|
-
{
|
1709
|
-
|
1806
|
+
{},
|
1807
|
+
host$b,
|
1710
1808
|
],
|
1711
1809
|
fontFamily: [
|
1712
|
-
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1810
|
+
label$8,
|
1811
|
+
inputField$4,
|
1812
|
+
helperText$7,
|
1813
|
+
errorMessage$7,
|
1716
1814
|
],
|
1717
1815
|
|
1718
1816
|
hostWidth: { ...host$b, property: 'width' },
|
1817
|
+
hostMinWidth: { ...host$b, property: 'min-width' },
|
1719
1818
|
|
1720
1819
|
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
1721
1820
|
|
@@ -1729,22 +1828,16 @@ var textFieldMappings = {
|
|
1729
1828
|
|
1730
1829
|
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
1731
1830
|
|
1732
|
-
inputBorderColor:
|
1733
|
-
|
1734
|
-
|
1735
|
-
],
|
1736
|
-
inputBorderWidth: [
|
1737
|
-
{ ...inputField$4, property: 'border-width' },
|
1738
|
-
{ ...readOnlyInput, property: 'border-width' }
|
1739
|
-
],
|
1740
|
-
inputBorderStyle: [
|
1741
|
-
{ ...inputField$4, property: 'border-style' },
|
1742
|
-
{ ...readOnlyInput, property: 'border-style' }
|
1743
|
-
],
|
1831
|
+
inputBorderColor: { ...inputField$4, property: 'border-color' },
|
1832
|
+
inputBorderWidth: { ...inputField$4, property: 'border-width' },
|
1833
|
+
inputBorderStyle: { ...inputField$4, property: 'border-style' },
|
1744
1834
|
inputBorderRadius: { ...inputField$4, property: 'border-radius' },
|
1745
1835
|
|
1746
1836
|
inputHeight: { ...inputField$4, property: 'height' },
|
1747
|
-
|
1837
|
+
inputHorizontalPadding: [
|
1838
|
+
{ ...input, property: 'padding-left' },
|
1839
|
+
{ ...input, property: 'padding-right' }
|
1840
|
+
],
|
1748
1841
|
|
1749
1842
|
inputOutlineColor: { ...inputField$4, property: 'outline-color' },
|
1750
1843
|
inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
|
@@ -1756,91 +1849,6 @@ var textFieldMappings = {
|
|
1756
1849
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' }
|
1757
1850
|
};
|
1758
1851
|
|
1759
|
-
const resetInputOverrides = (name, cssVarList) => `
|
1760
|
-
${resetInputContainer(name)}
|
1761
|
-
${resetInputCursor(name)}
|
1762
|
-
${resetInputPlaceholder(name)}
|
1763
|
-
${resetInputField(name)}
|
1764
|
-
${resetInputAutoFill(name, cssVarList)}
|
1765
|
-
${resetInputFieldInvalidBackgroundColor(name)}
|
1766
|
-
|
1767
|
-
${name}::before {
|
1768
|
-
height: unset;
|
1769
|
-
}
|
1770
|
-
|
1771
|
-
${name} > input {
|
1772
|
-
-webkit-mask-image: none;
|
1773
|
-
min-height: 0;
|
1774
|
-
}
|
1775
|
-
|
1776
|
-
${name}::part(input-field)::after {
|
1777
|
-
opacity: 0 !important;
|
1778
|
-
}
|
1779
|
-
`;
|
1780
|
-
|
1781
|
-
const resetInputContainer = (name) => `
|
1782
|
-
${name} {
|
1783
|
-
margin: 0;
|
1784
|
-
padding: 0;
|
1785
|
-
width: 100%;
|
1786
|
-
height: 100%;
|
1787
|
-
box-sizing: border-box;
|
1788
|
-
}
|
1789
|
-
`;
|
1790
|
-
|
1791
|
-
const resetInputField = (name) => `
|
1792
|
-
${name}::part(input-field) {
|
1793
|
-
overflow: hidden;
|
1794
|
-
padding: 0;
|
1795
|
-
box-shadow: none;
|
1796
|
-
}
|
1797
|
-
`;
|
1798
|
-
|
1799
|
-
const resetInputCursor = (name) => `
|
1800
|
-
${name} > label,
|
1801
|
-
${name}::part(label),
|
1802
|
-
${name}::part(required-indicator) {
|
1803
|
-
cursor: pointer;
|
1804
|
-
}
|
1805
|
-
`;
|
1806
|
-
|
1807
|
-
const resetInputPlaceholder = (name, ele = 'input') => `
|
1808
|
-
${name}[disabled] > ${ele}:placeholder-shown,
|
1809
|
-
${name}[readonly] > ${ele}:placeholder-shown {
|
1810
|
-
opacity: 1;
|
1811
|
-
}
|
1812
|
-
`;
|
1813
|
-
|
1814
|
-
const resetInputAutoFill = (name, cssVarList) => `
|
1815
|
-
${name} input:-webkit-autofill,
|
1816
|
-
${name} input:-webkit-autofill::first-line,
|
1817
|
-
${name} input:-webkit-autofill:hover,
|
1818
|
-
${name} input:-webkit-autofill:active,
|
1819
|
-
${name} input:-webkit-autofill:focus {
|
1820
|
-
-webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
|
1821
|
-
box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
|
1822
|
-
}
|
1823
|
-
`;
|
1824
|
-
|
1825
|
-
const resetInputFieldDefaultWidth = () => `
|
1826
|
-
:host {
|
1827
|
-
--vaadin-field-default-width: auto;
|
1828
|
-
box-sizing: border-box;
|
1829
|
-
}
|
1830
|
-
`;
|
1831
|
-
|
1832
|
-
const resetInputReadonlyStyle = (name) => `
|
1833
|
-
${name}::part(input-field)::after {
|
1834
|
-
opacity: 0;
|
1835
|
-
}
|
1836
|
-
`;
|
1837
|
-
|
1838
|
-
const resetInputFieldInvalidBackgroundColor = (name) => `
|
1839
|
-
${name}::part(input-field)::after {
|
1840
|
-
background: none;
|
1841
|
-
}
|
1842
|
-
`;
|
1843
|
-
|
1844
1852
|
const componentName$n = getComponentName('text-field');
|
1845
1853
|
|
1846
1854
|
const observedAttrs = ['type'];
|
@@ -1881,10 +1889,9 @@ const TextFieldClass = compose(
|
|
1881
1889
|
:host {
|
1882
1890
|
display: inline-block;
|
1883
1891
|
max-width: 100%;
|
1884
|
-
min-width: 10em;
|
1885
1892
|
padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
|
1886
1893
|
}
|
1887
|
-
${
|
1894
|
+
${useHostExternalPadding(TextFieldClass.cssVarList)}
|
1888
1895
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
1889
1896
|
`,
|
1890
1897
|
excludeAttrsSync: ['tabindex'],
|
@@ -1910,7 +1917,11 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1910
1917
|
outlineColor: 'transparent',
|
1911
1918
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
1912
1919
|
|
1913
|
-
|
1920
|
+
minWidth: '10em',
|
1921
|
+
toggleButtonSize: '1.5em',
|
1922
|
+
inputHeight: '3em',
|
1923
|
+
horizontalPadding: '0.5em',
|
1924
|
+
verticalPadding: '0.5em',
|
1914
1925
|
|
1915
1926
|
backgroundColor: globalRefs$b.colors.surface.light,
|
1916
1927
|
|
@@ -1962,6 +1973,7 @@ const vars$j = TextFieldClass.cssVarList;
|
|
1962
1973
|
|
1963
1974
|
const textField = ({
|
1964
1975
|
[vars$j.hostWidth]: refs.width,
|
1976
|
+
[vars$j.hostMinWidth]: refs.minWidth,
|
1965
1977
|
[vars$j.fontSize]: refs.fontSize,
|
1966
1978
|
[vars$j.fontFamily]: refs.fontFamily,
|
1967
1979
|
[vars$j.labelTextColor]: refs.labelTextColor,
|
@@ -1978,6 +1990,7 @@ const textField = ({
|
|
1978
1990
|
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
1979
1991
|
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
1980
1992
|
[vars$j.inputHeight]: refs.inputHeight,
|
1993
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding
|
1981
1994
|
});
|
1982
1995
|
|
1983
1996
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
@@ -2025,7 +2038,7 @@ const componentName$l = getComponentName('password');
|
|
2025
2038
|
const {
|
2026
2039
|
host: host$a,
|
2027
2040
|
inputField: inputField$3,
|
2028
|
-
inputElement,
|
2041
|
+
inputElement: inputElement$1,
|
2029
2042
|
inputElementPlaceholder,
|
2030
2043
|
revealButtonContainer,
|
2031
2044
|
revealButtonIcon,
|
@@ -2050,9 +2063,10 @@ const PasswordClass = compose(
|
|
2050
2063
|
createStyleMixin({
|
2051
2064
|
mappings: {
|
2052
2065
|
hostWidth: { ...host$a, property: 'width' },
|
2066
|
+
hostMinWidth: { ...host$a, property: 'min-width' },
|
2053
2067
|
fontSize: [
|
2054
|
-
{
|
2055
|
-
|
2068
|
+
{},
|
2069
|
+
host$a,
|
2056
2070
|
],
|
2057
2071
|
fontFamily: [
|
2058
2072
|
label$7,
|
@@ -2061,6 +2075,10 @@ const PasswordClass = compose(
|
|
2061
2075
|
helperText$6
|
2062
2076
|
],
|
2063
2077
|
inputHeight: { ...inputField$3, property: 'height' },
|
2078
|
+
inputHorizontalPadding: [
|
2079
|
+
{ ...inputElement$1, property: 'padding-left' },
|
2080
|
+
{ ...inputElement$1, property: 'padding-right' }
|
2081
|
+
],
|
2064
2082
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
2065
2083
|
|
2066
2084
|
inputBorderStyle: { ...inputField$3, property: 'border-style' },
|
@@ -2080,12 +2098,17 @@ const PasswordClass = compose(
|
|
2080
2098
|
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
2081
2099
|
|
2082
2100
|
inputValueTextColor: [
|
2083
|
-
{ ...inputElement, property: 'color' },
|
2101
|
+
{ ...inputElement$1, property: 'color' },
|
2084
2102
|
{ ...revealButtonIcon, property: 'color' }
|
2085
2103
|
],
|
2086
2104
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2087
2105
|
|
2088
|
-
revealButtonOffset:
|
2106
|
+
revealButtonOffset: [
|
2107
|
+
{ ...revealButtonContainer, property: 'margin-right' },
|
2108
|
+
{ ...revealButtonContainer, property: 'margin-left' }
|
2109
|
+
],
|
2110
|
+
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
2111
|
+
|
2089
2112
|
}
|
2090
2113
|
}),
|
2091
2114
|
draggableMixin,
|
@@ -2099,17 +2122,22 @@ const PasswordClass = compose(
|
|
2099
2122
|
style: () => `
|
2100
2123
|
:host {
|
2101
2124
|
display: inline-block;
|
2102
|
-
min-width: 10em;
|
2103
2125
|
max-width: 100%;
|
2104
|
-
|
2105
|
-
padding: calc(var(${PasswordClass.cssVarList.inputOutlineWidth}) + var(${PasswordClass.cssVarList.inputOutlineOffset}));
|
2126
|
+
min-width: 10em;
|
2106
2127
|
}
|
2128
|
+
${useHostExternalPadding(PasswordClass.cssVarList)}
|
2129
|
+
${resetInputCursor('vaadin-password-field')}
|
2130
|
+
|
2107
2131
|
vaadin-password-field {
|
2108
2132
|
width: 100%;
|
2109
2133
|
box-sizing: border-box;
|
2110
2134
|
padding: 0;
|
2111
2135
|
}
|
2136
|
+
vaadin-password-field > input {
|
2137
|
+
box-sizing: border-box;
|
2138
|
+
}
|
2112
2139
|
vaadin-password-field::part(input-field) {
|
2140
|
+
box-sizing: border-box;
|
2113
2141
|
padding: 0;
|
2114
2142
|
}
|
2115
2143
|
vaadin-password-field[focus-ring]::part(input-field) {
|
@@ -2132,8 +2160,6 @@ const PasswordClass = compose(
|
|
2132
2160
|
cursor: pointer;
|
2133
2161
|
}
|
2134
2162
|
|
2135
|
-
${resetInputCursor('vaadin-password-field')}
|
2136
|
-
|
2137
2163
|
[readonly] vaadin-password-field-button {
|
2138
2164
|
pointer-events: none;
|
2139
2165
|
}
|
@@ -2155,6 +2181,7 @@ const password = {
|
|
2155
2181
|
[vars$i.fontSize]: refs.fontSize,
|
2156
2182
|
[vars$i.fontFamily]: refs.fontFamily,
|
2157
2183
|
[vars$i.labelTextColor]: refs.labelTextColor,
|
2184
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
2158
2185
|
[vars$i.inputHeight]: refs.inputHeight,
|
2159
2186
|
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
2160
2187
|
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
@@ -2168,7 +2195,8 @@ const password = {
|
|
2168
2195
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
2169
2196
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
2170
2197
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
2171
|
-
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md
|
2198
|
+
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md,
|
2199
|
+
[vars$i.revealButtonSize]: refs.toggleButtonSize
|
2172
2200
|
};
|
2173
2201
|
|
2174
2202
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -2194,9 +2222,9 @@ const NumberFieldClass = compose(
|
|
2194
2222
|
:host {
|
2195
2223
|
display: inline-block;
|
2196
2224
|
max-width: 100%;
|
2197
|
-
min-width: 10em;
|
2198
2225
|
padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
|
2199
2226
|
}
|
2227
|
+
${useHostExternalPadding(NumberFieldClass.cssVarList)}
|
2200
2228
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2201
2229
|
`,
|
2202
2230
|
excludeAttrsSync: ['tabindex'],
|
@@ -2208,6 +2236,7 @@ const vars$h = NumberFieldClass.cssVarList;
|
|
2208
2236
|
|
2209
2237
|
const numberField = {
|
2210
2238
|
[vars$h.hostWidth]: refs.width,
|
2239
|
+
[vars$h.hostMinWidth]: refs.minWidth,
|
2211
2240
|
[vars$h.fontSize]: refs.fontSize,
|
2212
2241
|
[vars$h.fontFamily]: refs.fontFamily,
|
2213
2242
|
[vars$h.labelTextColor]: refs.labelTextColor,
|
@@ -2223,7 +2252,8 @@ const numberField = {
|
|
2223
2252
|
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
2224
2253
|
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
2225
2254
|
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
2226
|
-
[vars$h.
|
2255
|
+
[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
|
2256
|
+
[vars$h.inputHeight]: refs.inputHeight
|
2227
2257
|
};
|
2228
2258
|
|
2229
2259
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
@@ -2249,9 +2279,9 @@ const EmailFieldClass = compose(
|
|
2249
2279
|
:host {
|
2250
2280
|
display: inline-block;
|
2251
2281
|
max-width: 100%;
|
2252
|
-
min-width: 10em;
|
2253
2282
|
padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
|
2254
2283
|
}
|
2284
|
+
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
2255
2285
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2256
2286
|
`,
|
2257
2287
|
excludeAttrsSync: ['tabindex'],
|
@@ -2263,6 +2293,7 @@ const vars$g = EmailFieldClass.cssVarList;
|
|
2263
2293
|
|
2264
2294
|
const emailField = {
|
2265
2295
|
[vars$g.hostWidth]: refs.width,
|
2296
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
2266
2297
|
[vars$g.fontSize]: refs.fontSize,
|
2267
2298
|
[vars$g.fontFamily]: refs.fontFamily,
|
2268
2299
|
[vars$g.labelTextColor]: refs.labelTextColor,
|
@@ -2278,6 +2309,7 @@ const emailField = {
|
|
2278
2309
|
[vars$g.inputOutlineColor]: refs.outlineColor,
|
2279
2310
|
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
2280
2311
|
[vars$g.inputBackgroundColor]: refs.backgroundColor,
|
2312
|
+
[vars$g.inputHorizontalPadding]: refs.horizontalPadding,
|
2281
2313
|
[vars$g.inputHeight]: refs.inputHeight
|
2282
2314
|
};
|
2283
2315
|
|
@@ -2313,15 +2345,16 @@ const TextAreaClass = compose(
|
|
2313
2345
|
createStyleMixin({
|
2314
2346
|
mappings: {
|
2315
2347
|
hostWidth: { ...host$9, property: 'width' },
|
2348
|
+
hostMinWidth: { ...host$9, property: 'min-width' },
|
2316
2349
|
fontSize: [
|
2317
|
-
|
2318
|
-
|
2350
|
+
host$9,
|
2351
|
+
textArea$2,
|
2319
2352
|
],
|
2320
2353
|
fontFamily: [
|
2321
|
-
|
2322
|
-
|
2323
|
-
|
2324
|
-
|
2354
|
+
label$6,
|
2355
|
+
inputField$2,
|
2356
|
+
helperText$5,
|
2357
|
+
errorMessage$5,
|
2325
2358
|
],
|
2326
2359
|
labelTextColor: [
|
2327
2360
|
{ ...label$6, property: 'color' },
|
@@ -2352,11 +2385,9 @@ const TextAreaClass = compose(
|
|
2352
2385
|
style: () => `
|
2353
2386
|
:host {
|
2354
2387
|
display: inline-block;
|
2355
|
-
min-width: 10em;
|
2356
2388
|
max-width: 100%;
|
2357
|
-
padding: calc(var(${TextAreaClass.cssVarList.inputOutlineWidth}) + var(${TextAreaClass.cssVarList.inputOutlineOffset}));
|
2358
2389
|
}
|
2359
|
-
|
2390
|
+
${useHostExternalPadding(TextAreaClass.cssVarList)}
|
2360
2391
|
${resetInputContainer('vaadin-text-area')}
|
2361
2392
|
${resetInputField('vaadin-text-area')}
|
2362
2393
|
${resetInputPlaceholder('vaadin-text-area', 'textarea')}
|
@@ -2372,6 +2403,7 @@ const vars$f = TextAreaClass.cssVarList;
|
|
2372
2403
|
|
2373
2404
|
const textArea = {
|
2374
2405
|
[vars$f.hostWidth]: refs.width,
|
2406
|
+
[vars$f.hostMinWidth]: refs.minWidth,
|
2375
2407
|
[vars$f.fontSize]: '14px',
|
2376
2408
|
[vars$f.fontFamily]: refs.fontFamily,
|
2377
2409
|
[vars$f.labelTextColor]: refs.labelTextColor,
|
@@ -2547,16 +2579,16 @@ const CheckboxClass = compose(
|
|
2547
2579
|
hostWidth: { ...host$8, property: 'width' },
|
2548
2580
|
|
2549
2581
|
fontSize: [
|
2550
|
-
|
2551
|
-
|
2552
|
-
|
2553
|
-
|
2582
|
+
host$8,
|
2583
|
+
checkboxElement,
|
2584
|
+
label$5,
|
2585
|
+
checkboxHiddenLabel$1,
|
2554
2586
|
],
|
2555
2587
|
fontFamily: [
|
2556
|
-
|
2557
|
-
|
2558
|
-
|
2559
|
-
|
2588
|
+
label$5,
|
2589
|
+
checkboxHiddenLabel$1,
|
2590
|
+
helperText$4,
|
2591
|
+
errorMessage$4,
|
2560
2592
|
],
|
2561
2593
|
|
2562
2594
|
labelTextColor: [
|
@@ -2600,10 +2632,8 @@ const CheckboxClass = compose(
|
|
2600
2632
|
slots: [],
|
2601
2633
|
wrappedEleName: 'vaadin-text-field',
|
2602
2634
|
style: () => `
|
2603
|
-
|
2604
|
-
|
2605
|
-
padding: calc(var(${CheckboxClass.cssVarList.inputOutlineWidth}) + var(${CheckboxClass.cssVarList.inputOutlineOffset}));
|
2606
|
-
}
|
2635
|
+
${commonStyles}
|
2636
|
+
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
2607
2637
|
`,
|
2608
2638
|
excludeAttrsSync: ['tabindex'],
|
2609
2639
|
componentName: componentName$g
|
@@ -2674,14 +2704,14 @@ const SwitchToggleClass = compose(
|
|
2674
2704
|
mappings: {
|
2675
2705
|
hostWidth: { ...host$7, property: 'width' },
|
2676
2706
|
fontSize: [
|
2677
|
-
|
2678
|
-
|
2679
|
-
|
2707
|
+
component,
|
2708
|
+
label$4,
|
2709
|
+
checkboxHiddenLabel,
|
2680
2710
|
],
|
2681
2711
|
fontFamily: [
|
2682
|
-
|
2683
|
-
|
2684
|
-
|
2712
|
+
label$4,
|
2713
|
+
helperText$3,
|
2714
|
+
errorMessage$3,
|
2685
2715
|
],
|
2686
2716
|
trackBorderWidth: { ...track, property: 'border-width' },
|
2687
2717
|
trackBorderStyle: { ...track, property: 'border-style' },
|
@@ -2740,9 +2770,7 @@ const SwitchToggleClass = compose(
|
|
2740
2770
|
wrappedEleName: 'vaadin-text-field',
|
2741
2771
|
style: () => `
|
2742
2772
|
${commonStyles}
|
2743
|
-
|
2744
|
-
padding: calc(var(${SwitchToggleClass.cssVarList.inputOutlineWidth}) + var(${SwitchToggleClass.cssVarList.inputOutlineOffset}));
|
2745
|
-
}
|
2773
|
+
${useHostExternalPadding(SwitchToggleClass.cssVarList)}
|
2746
2774
|
vaadin-text-field::part(label) {
|
2747
2775
|
left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
|
2748
2776
|
}
|
@@ -3077,7 +3105,7 @@ const TextClass = compose(
|
|
3077
3105
|
createStyleMixin({
|
3078
3106
|
mappings: {
|
3079
3107
|
hostWidth: { selector: () => ':host', property: 'width' },
|
3080
|
-
fontSize: {
|
3108
|
+
fontSize: {},
|
3081
3109
|
textColor: { property: 'color' },
|
3082
3110
|
textLineHeight: { property: 'line-height' },
|
3083
3111
|
textLetterSpacing: { property: 'letter-spacing' },
|
@@ -3538,7 +3566,11 @@ const PasscodeClass = compose(
|
|
3538
3566
|
selector: TextFieldClass.componentName,
|
3539
3567
|
property: textVars$1.inputValueTextColor
|
3540
3568
|
},
|
3541
|
-
|
3569
|
+
digitSize: [
|
3570
|
+
{ ...digitField, property: 'height' },
|
3571
|
+
{ ...digitField, property: 'width' }
|
3572
|
+
],
|
3573
|
+
digitPadding: { ...digitField, property: textVars$1.inputHorizontalPadding },
|
3542
3574
|
digitTextAlign: { ...digitField, property: textVars$1.inputTextAlign },
|
3543
3575
|
digitCaretTextColor: { ...digitField, property: textVars$1.inputCaretTextColor },
|
3544
3576
|
digitSpacing: { ...internalWrapper, property: 'gap' },
|
@@ -3642,6 +3674,7 @@ const passcode = {
|
|
3642
3674
|
[vars$7.digitOutlineColor]: 'transparent',
|
3643
3675
|
[vars$7.digitOutlineWidth]: refs.outlineWidth,
|
3644
3676
|
[vars$7.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
3677
|
+
[vars$7.digitSize]: refs.inputHeight,
|
3645
3678
|
|
3646
3679
|
_hideCursor: {
|
3647
3680
|
[vars$7.digitCaretTextColor]: 'transparent',
|
@@ -3917,6 +3950,7 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
|
|
3917
3950
|
const {
|
3918
3951
|
host: host$2,
|
3919
3952
|
inputField: inputField$1,
|
3953
|
+
inputElement,
|
3920
3954
|
placeholder,
|
3921
3955
|
toggle,
|
3922
3956
|
label: label$2,
|
@@ -3926,6 +3960,7 @@ const {
|
|
3926
3960
|
} = {
|
3927
3961
|
host: { selector: () => ':host' },
|
3928
3962
|
inputField: { selector: '::part(input-field)' },
|
3963
|
+
inputElement: { selector: 'input' },
|
3929
3964
|
placeholder: { selector: '> input:placeholder-shown' },
|
3930
3965
|
toggle: { selector: '::part(toggle-button)' },
|
3931
3966
|
label: { selector: '::part(label)' },
|
@@ -3945,8 +3980,8 @@ const ComboBoxClass = compose(
|
|
3945
3980
|
hostWidth: { ...host$2, property: 'width' },
|
3946
3981
|
// we apply font-size also on the host so we can set its width with em
|
3947
3982
|
fontSize: [
|
3948
|
-
{
|
3949
|
-
|
3983
|
+
{},
|
3984
|
+
host$2,
|
3950
3985
|
],
|
3951
3986
|
fontFamily: [
|
3952
3987
|
label$2,
|
@@ -3970,10 +4005,19 @@ const ComboBoxClass = compose(
|
|
3970
4005
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
3971
4006
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
3972
4007
|
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
4008
|
+
inputDropdownButtonSize: { ...toggle, property: 'font-size' },
|
4009
|
+
inputDropdownButtonOffset: [
|
4010
|
+
{ ...toggle, property: 'margin-right' },
|
4011
|
+
{ ...toggle, property: 'margin-left' },
|
4012
|
+
],
|
3973
4013
|
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
3974
4014
|
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
3975
4015
|
inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
|
3976
4016
|
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
4017
|
+
inputHorizontalPadding: [
|
4018
|
+
{ ...inputElement, property: 'padding-left' },
|
4019
|
+
{ ...inputElement, property: 'padding-right' }
|
4020
|
+
],
|
3977
4021
|
|
3978
4022
|
// we need to use the variables from the portal mixin
|
3979
4023
|
// so we need to use an arrow function on the selector
|
@@ -4011,24 +4055,29 @@ const ComboBoxClass = compose(
|
|
4011
4055
|
display: inline-flex;
|
4012
4056
|
box-sizing: border-box;
|
4013
4057
|
-webkit-mask-image: none;
|
4014
|
-
padding: calc(var(${ComboBoxClass.cssVarList.inputOutlineWidth}) + var(${ComboBoxClass.cssVarList.inputOutlineOffset}))
|
4015
4058
|
}
|
4059
|
+
${useHostExternalPadding(ComboBoxClass.cssVarList)}
|
4060
|
+
${resetInputReadonlyStyle('vaadin-combo-box')}
|
4061
|
+
${resetInputPlaceholder('vaadin-combo-box')}
|
4062
|
+
${resetInputCursor('vaadin-combo-box')}
|
4063
|
+
|
4016
4064
|
vaadin-combo-box {
|
4017
4065
|
padding: 0;
|
4018
4066
|
width: 100%;
|
4019
4067
|
}
|
4068
|
+
vaadin-combo-box::before {
|
4069
|
+
height: initial;
|
4070
|
+
}
|
4020
4071
|
vaadin-combo-box [slot="input"] {
|
4021
4072
|
-webkit-mask-image: none;
|
4022
4073
|
min-height: 0;
|
4074
|
+
box-sizing: border-box;
|
4023
4075
|
}
|
4024
4076
|
|
4025
4077
|
vaadin-combo-box::part(input-field) {
|
4026
4078
|
padding: 0;
|
4079
|
+
box-shadow: none;
|
4027
4080
|
}
|
4028
|
-
|
4029
|
-
${resetInputReadonlyStyle('vaadin-combo-box')}
|
4030
|
-
${resetInputPlaceholder('vaadin-combo-box')}
|
4031
|
-
${resetInputCursor('vaadin-combo-box')}
|
4032
4081
|
`,
|
4033
4082
|
// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
|
4034
4083
|
// with the same name. Including it will cause Vaadin to calculate NaN size,
|
@@ -4060,9 +4109,12 @@ const comboBox = {
|
|
4060
4109
|
[vars$4.inputValueTextColor]: refs.valueTextColor,
|
4061
4110
|
[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
4062
4111
|
[vars$4.inputBackgroundColor]: refs.backgroundColor,
|
4112
|
+
[vars$4.inputHorizontalPadding]: refs.horizontalPadding,
|
4063
4113
|
[vars$4.inputHeight]: refs.inputHeight,
|
4064
4114
|
[vars$4.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
|
4065
4115
|
[vars$4.inputDropdownButtonCursor]: 'pointer',
|
4116
|
+
[vars$4.inputDropdownButtonSize]: refs.toggleButtonSize,
|
4117
|
+
[vars$4.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
4066
4118
|
|
4067
4119
|
_readonly: {
|
4068
4120
|
[vars$4.inputDropdownButtonCursor]: 'default'
|
@@ -5426,8 +5478,8 @@ const PhoneFieldClass = compose(
|
|
5426
5478
|
createStyleMixin({
|
5427
5479
|
mappings: {
|
5428
5480
|
fontSize: [
|
5429
|
-
|
5430
|
-
|
5481
|
+
host$1,
|
5482
|
+
inputField,
|
5431
5483
|
{
|
5432
5484
|
selector: TextFieldClass.componentName,
|
5433
5485
|
property: TextFieldClass.cssVarList.fontSize
|
@@ -5466,8 +5518,6 @@ const PhoneFieldClass = compose(
|
|
5466
5518
|
],
|
5467
5519
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
5468
5520
|
|
5469
|
-
inputHeight: { ...inputField, property: 'height' },
|
5470
|
-
|
5471
5521
|
countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
|
5472
5522
|
countryCodeDropdownWidth: {
|
5473
5523
|
...countryCodeInput,
|
@@ -5508,12 +5558,15 @@ const PhoneFieldClass = compose(
|
|
5508
5558
|
wrappedEleName: 'vaadin-text-field',
|
5509
5559
|
style: () => `
|
5510
5560
|
:host {
|
5511
|
-
display: inline-
|
5561
|
+
display: inline-flex;
|
5512
5562
|
max-width: 100%;
|
5513
5563
|
min-width: 15em;
|
5514
5564
|
box-sizing: border-box;
|
5515
|
-
padding: calc(var(${PhoneFieldClass.cssVarList.inputOutlineWidth}) + var(${PhoneFieldClass.cssVarList.inputOutlineOffset}))
|
5516
5565
|
}
|
5566
|
+
${useHostExternalPadding(PhoneFieldClass.cssVarList)}
|
5567
|
+
${resetInputCursor('vaadin-text-field')}
|
5568
|
+
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
5569
|
+
|
5517
5570
|
div {
|
5518
5571
|
display: inline-flex;
|
5519
5572
|
}
|
@@ -5552,7 +5605,7 @@ const PhoneFieldClass = compose(
|
|
5552
5605
|
}
|
5553
5606
|
descope-combo-box {
|
5554
5607
|
flex-shrink: 0;
|
5555
|
-
|
5608
|
+
min-width: 5.75em;
|
5556
5609
|
${comboVars.inputOutlineWidth}: 0;
|
5557
5610
|
${comboVars.inputOutlineOffset}: 0;
|
5558
5611
|
${comboVars.inputBorderWidth}: 0;
|
@@ -5560,9 +5613,8 @@ const PhoneFieldClass = compose(
|
|
5560
5613
|
}
|
5561
5614
|
descope-text-field {
|
5562
5615
|
flex-grow: 1;
|
5563
|
-
min-height: 0;
|
5564
|
-
height: 100%;
|
5565
5616
|
${textVars.inputOutlineWidth}: 0;
|
5617
|
+
${comboVars.inputOutlineOffset}: 0;
|
5566
5618
|
${textVars.inputBorderWidth}: 0;
|
5567
5619
|
${textVars.inputBorderRadius}: 0;
|
5568
5620
|
}
|
@@ -5572,11 +5624,6 @@ const PhoneFieldClass = compose(
|
|
5572
5624
|
vaadin-text-field::part(input-field)::after {
|
5573
5625
|
border: none;
|
5574
5626
|
}
|
5575
|
-
|
5576
|
-
${resetInputFieldDefaultWidth()}
|
5577
|
-
${resetInputCursor('vaadin-text-field')}
|
5578
|
-
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
5579
|
-
|
5580
5627
|
`,
|
5581
5628
|
excludeAttrsSync: ['tabindex'],
|
5582
5629
|
componentName: componentName$2
|
@@ -5602,7 +5649,7 @@ const phoneField = {
|
|
5602
5649
|
[vars$2.inputOutlineColor]: refs.outlineColor,
|
5603
5650
|
[vars$2.inputOutlineOffset]: refs.outlineOffset,
|
5604
5651
|
[vars$2.inputHeight]: refs.inputHeight,
|
5605
|
-
[vars$2.phoneInputWidth]:
|
5652
|
+
[vars$2.phoneInputWidth]: refs.minWidth,
|
5606
5653
|
[vars$2.countryCodeInputWidth]: '5em',
|
5607
5654
|
[vars$2.countryCodeDropdownWidth]: '20em',
|
5608
5655
|
|
@@ -5682,6 +5729,7 @@ const NewPasswordClass = compose(
|
|
5682
5729
|
mappings: {
|
5683
5730
|
fontSize: [
|
5684
5731
|
host,
|
5732
|
+
{},
|
5685
5733
|
{
|
5686
5734
|
selector: PasswordClass.componentName,
|
5687
5735
|
property: PasswordClass.cssVarList.fontSize
|
@@ -5693,6 +5741,7 @@ const NewPasswordClass = compose(
|
|
5693
5741
|
helperText
|
5694
5742
|
],
|
5695
5743
|
hostWidth: { ...host, property: 'width' },
|
5744
|
+
hostMinWidth: { ...host, property: 'min-width' },
|
5696
5745
|
inputsRequiredIndicator: { ...host, property: 'content' },
|
5697
5746
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
5698
5747
|
}
|
@@ -5708,10 +5757,9 @@ const NewPasswordClass = compose(
|
|
5708
5757
|
:host {
|
5709
5758
|
display: inline-block;
|
5710
5759
|
max-width: 100%;
|
5711
|
-
min-width: 10em;
|
5712
5760
|
box-sizing: border-box;
|
5713
5761
|
}
|
5714
|
-
${
|
5762
|
+
${useHostExternalPadding(PasswordClass.cssVarList)}
|
5715
5763
|
vaadin-text-field {
|
5716
5764
|
padding: 0;
|
5717
5765
|
width: 100%;
|
@@ -5720,7 +5768,6 @@ const NewPasswordClass = compose(
|
|
5720
5768
|
vaadin-text-field::part(input-field) {
|
5721
5769
|
min-height: 0;
|
5722
5770
|
background: transparent;
|
5723
|
-
overflow: hidden;
|
5724
5771
|
box-shadow: none;
|
5725
5772
|
padding: 0;
|
5726
5773
|
}
|
@@ -5739,7 +5786,7 @@ const NewPasswordClass = compose(
|
|
5739
5786
|
width: 100%;
|
5740
5787
|
height: 100%;
|
5741
5788
|
display: flex;
|
5742
|
-
|
5789
|
+
flex-direction: column;
|
5743
5790
|
}
|
5744
5791
|
descope-password {
|
5745
5792
|
display: block;
|
@@ -5758,6 +5805,7 @@ const vars$1 = NewPasswordClass.cssVarList;
|
|
5758
5805
|
|
5759
5806
|
const newPassword = {
|
5760
5807
|
[vars$1.hostWidth]: refs.width,
|
5808
|
+
[vars$1.hostMinWidth]: refs.minWidth,
|
5761
5809
|
[vars$1.fontSize]: refs.fontSize,
|
5762
5810
|
[vars$1.fontFamily]: refs.fontFamily,
|
5763
5811
|
[vars$1.spaceBetweenInputs]: '1em',
|