@descope/web-components-ui 1.0.177 → 1.0.179
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1082 -687
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1166 -772
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/2481.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-date-picker-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-single-select-descope-select-item-index-js.js +1 -0
- package/dist/umd/descope-single-select-descope-single-select-internal-index-js.js +1 -0
- package/dist/umd/descope-single-select-index-js.js +1 -0
- package/dist/umd/descope-upload-file-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +4 -4
- package/src/components/descope-button/ButtonClass.js +1 -1
- package/src/components/descope-combo-box/ComboBoxClass.js +1 -1
- package/src/components/descope-date-picker/index.js +1 -1
- package/src/components/descope-email-field/EmailFieldClass.js +2 -2
- package/src/components/descope-number-field/NumberFieldClass.js +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +1 -1
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +0 -4
- package/src/components/descope-password/PasswordClass.js +2 -2
- package/src/components/descope-single-select/SingleSelectClass.js +130 -0
- package/src/components/descope-single-select/descope-select-item/SelectItemClass.js +102 -0
- package/src/components/descope-single-select/descope-select-item/index.js +6 -0
- package/src/components/descope-single-select/descope-single-select-internal/SingleSelectInternalClass.js +137 -0
- package/src/components/descope-single-select/descope-single-select-internal/index.js +6 -0
- package/src/components/descope-single-select/index.js +6 -0
- package/src/index.cjs.js +3 -0
- package/src/index.js +2 -0
- package/src/mixins/createProxy.js +7 -2
- package/src/theme/components/index.js +4 -0
- package/src/theme/components/single-select/selectItem.js +27 -0
- package/src/theme/components/single-select/singleSelect.js +19 -0
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -496,7 +496,7 @@ const globals = {
|
|
|
496
496
|
shadow,
|
|
497
497
|
fonts,
|
|
498
498
|
};
|
|
499
|
-
const vars$
|
|
499
|
+
const vars$r = getThemeVars(globals);
|
|
500
500
|
|
|
501
501
|
const createCssVarFallback = (first, ...rest) =>
|
|
502
502
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
|
@@ -992,8 +992,13 @@ const createProxy = ({
|
|
|
992
992
|
super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
|
|
993
993
|
<style id="create-proxy">${isFunction(style) ? style() : style}</style>
|
|
994
994
|
<${wrappedEleName}>
|
|
995
|
-
|
|
996
|
-
|
|
995
|
+
${slots
|
|
996
|
+
.map(
|
|
997
|
+
(
|
|
998
|
+
slot // when slot is an empty string, we will create the default slot (without a name)
|
|
999
|
+
) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
|
|
1000
|
+
)
|
|
1001
|
+
.join('')}
|
|
997
1002
|
</${wrappedEleName}>
|
|
998
1003
|
`;
|
|
999
1004
|
}
|
|
@@ -1507,7 +1512,7 @@ const clickableMixin = (superclass) =>
|
|
|
1507
1512
|
}
|
|
1508
1513
|
};
|
|
1509
1514
|
|
|
1510
|
-
const componentName$
|
|
1515
|
+
const componentName$w = getComponentName('button');
|
|
1511
1516
|
|
|
1512
1517
|
const resetStyles = `
|
|
1513
1518
|
:host {
|
|
@@ -1545,7 +1550,7 @@ const iconStyles = `
|
|
|
1545
1550
|
|
|
1546
1551
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
1547
1552
|
|
|
1548
|
-
const { host: host$
|
|
1553
|
+
const { host: host$f, label: label$b } = {
|
|
1549
1554
|
host: { selector: () => ':host' },
|
|
1550
1555
|
label: { selector: '::part(label)' },
|
|
1551
1556
|
};
|
|
@@ -1555,7 +1560,7 @@ let loadingIndicatorStyles;
|
|
|
1555
1560
|
const ButtonClass = compose(
|
|
1556
1561
|
createStyleMixin({
|
|
1557
1562
|
mappings: {
|
|
1558
|
-
hostWidth: { ...host$
|
|
1563
|
+
hostWidth: { ...host$f, property: 'width' },
|
|
1559
1564
|
hostHeight: { property: 'height' },
|
|
1560
1565
|
fontSize: {},
|
|
1561
1566
|
fontFamily: {},
|
|
@@ -1576,8 +1581,8 @@ const ButtonClass = compose(
|
|
|
1576
1581
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
|
1577
1582
|
|
|
1578
1583
|
labelTextColor: { property: 'color' },
|
|
1579
|
-
labelTextDecoration: { ...label$
|
|
1580
|
-
labelSpacing: { ...label$
|
|
1584
|
+
labelTextDecoration: { ...label$b, property: 'text-decoration' },
|
|
1585
|
+
labelSpacing: { ...label$b, property: 'gap' },
|
|
1581
1586
|
},
|
|
1582
1587
|
}),
|
|
1583
1588
|
clickableMixin,
|
|
@@ -1585,7 +1590,7 @@ const ButtonClass = compose(
|
|
|
1585
1590
|
componentNameValidationMixin
|
|
1586
1591
|
)(
|
|
1587
1592
|
createProxy({
|
|
1588
|
-
slots: ['prefix', 'label', 'suffix'],
|
|
1593
|
+
slots: ['', 'prefix', 'label', 'suffix'],
|
|
1589
1594
|
wrappedEleName: 'vaadin-button',
|
|
1590
1595
|
style: () => `
|
|
1591
1596
|
${resetStyles}
|
|
@@ -1604,7 +1609,7 @@ const ButtonClass = compose(
|
|
|
1604
1609
|
}
|
|
1605
1610
|
`,
|
|
1606
1611
|
excludeAttrsSync: ['tabindex'],
|
|
1607
|
-
componentName: componentName$
|
|
1612
|
+
componentName: componentName$w,
|
|
1608
1613
|
})
|
|
1609
1614
|
);
|
|
1610
1615
|
|
|
@@ -1641,30 +1646,30 @@ loadingIndicatorStyles = `
|
|
|
1641
1646
|
}
|
|
1642
1647
|
`;
|
|
1643
1648
|
|
|
1644
|
-
const globalRefs$
|
|
1649
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
1645
1650
|
const compVars$3 = ButtonClass.cssVarList;
|
|
1646
1651
|
|
|
1647
1652
|
const mode = {
|
|
1648
|
-
primary: globalRefs$
|
|
1649
|
-
secondary: globalRefs$
|
|
1650
|
-
success: globalRefs$
|
|
1651
|
-
error: globalRefs$
|
|
1652
|
-
surface: globalRefs$
|
|
1653
|
+
primary: globalRefs$d.colors.primary,
|
|
1654
|
+
secondary: globalRefs$d.colors.secondary,
|
|
1655
|
+
success: globalRefs$d.colors.success,
|
|
1656
|
+
error: globalRefs$d.colors.error,
|
|
1657
|
+
surface: globalRefs$d.colors.surface,
|
|
1653
1658
|
};
|
|
1654
1659
|
|
|
1655
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
1660
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$w);
|
|
1656
1661
|
|
|
1657
1662
|
const button = {
|
|
1658
1663
|
...helperTheme$3,
|
|
1659
1664
|
|
|
1660
|
-
[compVars$3.fontFamily]: globalRefs$
|
|
1665
|
+
[compVars$3.fontFamily]: globalRefs$d.fonts.font1.family,
|
|
1661
1666
|
|
|
1662
1667
|
[compVars$3.cursor]: 'pointer',
|
|
1663
1668
|
[compVars$3.hostHeight]: '3em',
|
|
1664
1669
|
[compVars$3.hostWidth]: 'auto',
|
|
1665
1670
|
|
|
1666
|
-
[compVars$3.borderRadius]: globalRefs$
|
|
1667
|
-
[compVars$3.borderWidth]: globalRefs$
|
|
1671
|
+
[compVars$3.borderRadius]: globalRefs$d.radius.sm,
|
|
1672
|
+
[compVars$3.borderWidth]: globalRefs$d.border.xs,
|
|
1668
1673
|
[compVars$3.borderStyle]: 'solid',
|
|
1669
1674
|
[compVars$3.borderColor]: 'transparent',
|
|
1670
1675
|
|
|
@@ -1738,11 +1743,11 @@ const button = {
|
|
|
1738
1743
|
},
|
|
1739
1744
|
|
|
1740
1745
|
_focused: {
|
|
1741
|
-
[compVars$3.outlineColor]: globalRefs$
|
|
1746
|
+
[compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
|
|
1742
1747
|
},
|
|
1743
1748
|
};
|
|
1744
1749
|
|
|
1745
|
-
const vars$
|
|
1750
|
+
const vars$q = {
|
|
1746
1751
|
...compVars$3,
|
|
1747
1752
|
...helperVars$3,
|
|
1748
1753
|
};
|
|
@@ -1750,10 +1755,10 @@ const vars$o = {
|
|
|
1750
1755
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
1751
1756
|
__proto__: null,
|
|
1752
1757
|
default: button,
|
|
1753
|
-
vars: vars$
|
|
1758
|
+
vars: vars$q
|
|
1754
1759
|
});
|
|
1755
1760
|
|
|
1756
|
-
const { host: host$
|
|
1761
|
+
const { host: host$e, label: label$a, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
|
|
1757
1762
|
{
|
|
1758
1763
|
host: { selector: () => ':host' },
|
|
1759
1764
|
label: { selector: '::part(label)' },
|
|
@@ -1767,24 +1772,24 @@ const { host: host$d, label: label$9, placeholder: placeholder$2, requiredIndica
|
|
|
1767
1772
|
|
|
1768
1773
|
var textFieldMappings = {
|
|
1769
1774
|
// we apply font-size also on the host so we can set its width with em
|
|
1770
|
-
fontSize: [{}, host$
|
|
1771
|
-
fontFamily: [label$
|
|
1775
|
+
fontSize: [{}, host$e],
|
|
1776
|
+
fontFamily: [label$a, inputField$5, helperText$8, errorMessage$a],
|
|
1772
1777
|
|
|
1773
|
-
hostWidth: { ...host$
|
|
1774
|
-
hostMinWidth: { ...host$
|
|
1778
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
1779
|
+
hostMinWidth: { ...host$e, property: 'min-width' },
|
|
1775
1780
|
|
|
1776
1781
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
|
1777
1782
|
|
|
1778
1783
|
labelTextColor: [
|
|
1779
|
-
{ ...label$
|
|
1780
|
-
{ ...requiredIndicator$
|
|
1784
|
+
{ ...label$a, property: 'color' },
|
|
1785
|
+
{ ...requiredIndicator$a, property: 'color' },
|
|
1781
1786
|
],
|
|
1782
|
-
errorMessageTextColor: { ...errorMessage$
|
|
1787
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
|
1783
1788
|
|
|
1784
1789
|
inputValueTextColor: { ...inputField$5, property: 'color' },
|
|
1785
1790
|
inputCaretTextColor: { ...input, property: 'color' },
|
|
1786
1791
|
|
|
1787
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
1792
|
+
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
|
1788
1793
|
|
|
1789
1794
|
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
|
1790
1795
|
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
|
@@ -1908,11 +1913,11 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
|
1908
1913
|
${resetInputFieldUnderlayingBorder(name)}
|
|
1909
1914
|
`;
|
|
1910
1915
|
|
|
1911
|
-
const componentName$
|
|
1916
|
+
const componentName$v = getComponentName('text-field');
|
|
1912
1917
|
|
|
1913
1918
|
const observedAttrs = ['type'];
|
|
1914
1919
|
|
|
1915
|
-
const customMixin$
|
|
1920
|
+
const customMixin$6 = (superclass) =>
|
|
1916
1921
|
class TextFieldClass extends superclass {
|
|
1917
1922
|
static get observedAttributes() {
|
|
1918
1923
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -1939,7 +1944,7 @@ const TextFieldClass = compose(
|
|
|
1939
1944
|
draggableMixin,
|
|
1940
1945
|
composedProxyInputMixin,
|
|
1941
1946
|
componentNameValidationMixin,
|
|
1942
|
-
customMixin$
|
|
1947
|
+
customMixin$6
|
|
1943
1948
|
)(
|
|
1944
1949
|
createProxy({
|
|
1945
1950
|
slots: ['prefix', 'suffix'],
|
|
@@ -1956,26 +1961,26 @@ const TextFieldClass = compose(
|
|
|
1956
1961
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
1957
1962
|
`,
|
|
1958
1963
|
excludeAttrsSync: ['tabindex'],
|
|
1959
|
-
componentName: componentName$
|
|
1964
|
+
componentName: componentName$v,
|
|
1960
1965
|
})
|
|
1961
1966
|
);
|
|
1962
1967
|
|
|
1963
|
-
const componentName$
|
|
1964
|
-
const globalRefs$
|
|
1968
|
+
const componentName$u = getComponentName('input-wrapper');
|
|
1969
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
1965
1970
|
|
|
1966
|
-
const [theme$1, refs, vars$
|
|
1971
|
+
const [theme$1, refs, vars$p] = createHelperVars(
|
|
1967
1972
|
{
|
|
1968
|
-
labelTextColor: globalRefs$
|
|
1969
|
-
valueTextColor: globalRefs$
|
|
1970
|
-
placeholderTextColor: globalRefs$
|
|
1973
|
+
labelTextColor: globalRefs$c.colors.surface.contrast,
|
|
1974
|
+
valueTextColor: globalRefs$c.colors.surface.contrast,
|
|
1975
|
+
placeholderTextColor: globalRefs$c.colors.surface.main,
|
|
1971
1976
|
requiredIndicator: "'*'",
|
|
1972
|
-
errorMessageTextColor: globalRefs$
|
|
1977
|
+
errorMessageTextColor: globalRefs$c.colors.error.main,
|
|
1973
1978
|
|
|
1974
|
-
borderWidth: globalRefs$
|
|
1975
|
-
borderRadius: globalRefs$
|
|
1979
|
+
borderWidth: globalRefs$c.border.xs,
|
|
1980
|
+
borderRadius: globalRefs$c.radius.xs,
|
|
1976
1981
|
borderColor: 'transparent',
|
|
1977
1982
|
|
|
1978
|
-
outlineWidth: globalRefs$
|
|
1983
|
+
outlineWidth: globalRefs$c.border.sm,
|
|
1979
1984
|
outlineStyle: 'solid',
|
|
1980
1985
|
outlineColor: 'transparent',
|
|
1981
1986
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
|
@@ -1986,9 +1991,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
|
1986
1991
|
horizontalPadding: '0.5em',
|
|
1987
1992
|
verticalPadding: '0.5em',
|
|
1988
1993
|
|
|
1989
|
-
backgroundColor: globalRefs$
|
|
1994
|
+
backgroundColor: globalRefs$c.colors.surface.light,
|
|
1990
1995
|
|
|
1991
|
-
fontFamily: globalRefs$
|
|
1996
|
+
fontFamily: globalRefs$c.fonts.font1.family,
|
|
1992
1997
|
|
|
1993
1998
|
size: {
|
|
1994
1999
|
xs: { fontSize: '12px' },
|
|
@@ -2002,69 +2007,69 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
|
2002
2007
|
},
|
|
2003
2008
|
|
|
2004
2009
|
_focused: {
|
|
2005
|
-
outlineColor: globalRefs$
|
|
2010
|
+
outlineColor: globalRefs$c.colors.surface.main,
|
|
2006
2011
|
_invalid: {
|
|
2007
|
-
outlineColor: globalRefs$
|
|
2012
|
+
outlineColor: globalRefs$c.colors.error.main,
|
|
2008
2013
|
},
|
|
2009
2014
|
},
|
|
2010
2015
|
|
|
2011
2016
|
_bordered: {
|
|
2012
|
-
outlineWidth: globalRefs$
|
|
2013
|
-
borderColor: globalRefs$
|
|
2017
|
+
outlineWidth: globalRefs$c.border.xs,
|
|
2018
|
+
borderColor: globalRefs$c.colors.surface.main,
|
|
2014
2019
|
borderStyle: 'solid',
|
|
2015
2020
|
_invalid: {
|
|
2016
|
-
borderColor: globalRefs$
|
|
2021
|
+
borderColor: globalRefs$c.colors.error.main,
|
|
2017
2022
|
},
|
|
2018
2023
|
},
|
|
2019
2024
|
|
|
2020
2025
|
_disabled: {
|
|
2021
|
-
labelTextColor: globalRefs$
|
|
2022
|
-
borderColor: globalRefs$
|
|
2023
|
-
valueTextColor: globalRefs$
|
|
2024
|
-
placeholderTextColor: globalRefs$
|
|
2025
|
-
backgroundColor: globalRefs$
|
|
2026
|
+
labelTextColor: globalRefs$c.colors.surface.main,
|
|
2027
|
+
borderColor: globalRefs$c.colors.surface.main,
|
|
2028
|
+
valueTextColor: globalRefs$c.colors.surface.dark,
|
|
2029
|
+
placeholderTextColor: globalRefs$c.colors.surface.dark,
|
|
2030
|
+
backgroundColor: globalRefs$c.colors.surface.main,
|
|
2026
2031
|
},
|
|
2027
2032
|
},
|
|
2028
|
-
componentName$
|
|
2033
|
+
componentName$u
|
|
2029
2034
|
);
|
|
2030
2035
|
|
|
2031
2036
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
2032
2037
|
__proto__: null,
|
|
2033
2038
|
default: theme$1,
|
|
2034
2039
|
refs: refs,
|
|
2035
|
-
vars: vars$
|
|
2040
|
+
vars: vars$p
|
|
2036
2041
|
});
|
|
2037
2042
|
|
|
2038
|
-
const vars$
|
|
2043
|
+
const vars$o = TextFieldClass.cssVarList;
|
|
2039
2044
|
|
|
2040
2045
|
const textField = {
|
|
2041
|
-
[vars$
|
|
2042
|
-
[vars$
|
|
2043
|
-
[vars$
|
|
2044
|
-
[vars$
|
|
2045
|
-
[vars$
|
|
2046
|
-
[vars$
|
|
2047
|
-
[vars$
|
|
2048
|
-
[vars$
|
|
2049
|
-
[vars$
|
|
2050
|
-
[vars$
|
|
2051
|
-
[vars$
|
|
2052
|
-
[vars$
|
|
2053
|
-
[vars$
|
|
2054
|
-
[vars$
|
|
2055
|
-
[vars$
|
|
2056
|
-
[vars$
|
|
2057
|
-
[vars$
|
|
2058
|
-
[vars$
|
|
2059
|
-
[vars$
|
|
2060
|
-
[vars$
|
|
2046
|
+
[vars$o.hostWidth]: refs.width,
|
|
2047
|
+
[vars$o.hostMinWidth]: refs.minWidth,
|
|
2048
|
+
[vars$o.fontSize]: refs.fontSize,
|
|
2049
|
+
[vars$o.fontFamily]: refs.fontFamily,
|
|
2050
|
+
[vars$o.labelTextColor]: refs.labelTextColor,
|
|
2051
|
+
[vars$o.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2052
|
+
[vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2053
|
+
[vars$o.inputValueTextColor]: refs.valueTextColor,
|
|
2054
|
+
[vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2055
|
+
[vars$o.inputBorderWidth]: refs.borderWidth,
|
|
2056
|
+
[vars$o.inputBorderStyle]: refs.borderStyle,
|
|
2057
|
+
[vars$o.inputBorderColor]: refs.borderColor,
|
|
2058
|
+
[vars$o.inputBorderRadius]: refs.borderRadius,
|
|
2059
|
+
[vars$o.inputOutlineWidth]: refs.outlineWidth,
|
|
2060
|
+
[vars$o.inputOutlineStyle]: refs.outlineStyle,
|
|
2061
|
+
[vars$o.inputOutlineColor]: refs.outlineColor,
|
|
2062
|
+
[vars$o.inputOutlineOffset]: refs.outlineOffset,
|
|
2063
|
+
[vars$o.inputBackgroundColor]: refs.backgroundColor,
|
|
2064
|
+
[vars$o.inputHeight]: refs.inputHeight,
|
|
2065
|
+
[vars$o.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2061
2066
|
};
|
|
2062
2067
|
|
|
2063
2068
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
|
2064
2069
|
__proto__: null,
|
|
2065
2070
|
default: textField,
|
|
2066
2071
|
textField: textField,
|
|
2067
|
-
vars: vars$
|
|
2072
|
+
vars: vars$o
|
|
2068
2073
|
});
|
|
2069
2074
|
|
|
2070
2075
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -2101,18 +2106,18 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
2101
2106
|
}
|
|
2102
2107
|
};
|
|
2103
2108
|
|
|
2104
|
-
const componentName$
|
|
2109
|
+
const componentName$t = getComponentName('password');
|
|
2105
2110
|
|
|
2106
2111
|
const {
|
|
2107
|
-
host: host$
|
|
2112
|
+
host: host$d,
|
|
2108
2113
|
inputField: inputField$4,
|
|
2109
2114
|
inputElement: inputElement$1,
|
|
2110
2115
|
inputElementPlaceholder,
|
|
2111
2116
|
revealButtonContainer,
|
|
2112
2117
|
revealButtonIcon,
|
|
2113
|
-
label: label$
|
|
2114
|
-
requiredIndicator: requiredIndicator$
|
|
2115
|
-
errorMessage: errorMessage$
|
|
2118
|
+
label: label$9,
|
|
2119
|
+
requiredIndicator: requiredIndicator$9,
|
|
2120
|
+
errorMessage: errorMessage$9,
|
|
2116
2121
|
helperText: helperText$7,
|
|
2117
2122
|
} = {
|
|
2118
2123
|
host: { selector: () => ':host' },
|
|
@@ -2130,10 +2135,10 @@ const {
|
|
|
2130
2135
|
const PasswordClass = compose(
|
|
2131
2136
|
createStyleMixin({
|
|
2132
2137
|
mappings: {
|
|
2133
|
-
hostWidth: { ...host$
|
|
2134
|
-
hostMinWidth: { ...host$
|
|
2135
|
-
fontSize: [{}, host$
|
|
2136
|
-
fontFamily: [label$
|
|
2138
|
+
hostWidth: { ...host$d, property: 'width' },
|
|
2139
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
|
2140
|
+
fontSize: [{}, host$d],
|
|
2141
|
+
fontFamily: [label$9, inputField$4, errorMessage$9, helperText$7],
|
|
2137
2142
|
inputHeight: { ...inputField$4, property: 'height' },
|
|
2138
2143
|
inputHorizontalPadding: [
|
|
2139
2144
|
{ ...inputElement$1, property: 'padding-left' },
|
|
@@ -2152,11 +2157,11 @@ const PasswordClass = compose(
|
|
|
2152
2157
|
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
|
2153
2158
|
|
|
2154
2159
|
labelTextColor: [
|
|
2155
|
-
{ ...label$
|
|
2156
|
-
{ ...requiredIndicator$
|
|
2160
|
+
{ ...label$9, property: 'color' },
|
|
2161
|
+
{ ...requiredIndicator$9, property: 'color' },
|
|
2157
2162
|
],
|
|
2158
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2159
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2163
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
|
2164
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
|
2160
2165
|
|
|
2161
2166
|
inputValueTextColor: [
|
|
2162
2167
|
{ ...inputElement$1, property: 'color' },
|
|
@@ -2177,7 +2182,7 @@ const PasswordClass = compose(
|
|
|
2177
2182
|
passwordDraggableMixin
|
|
2178
2183
|
)(
|
|
2179
2184
|
createProxy({
|
|
2180
|
-
slots: ['suffix'],
|
|
2185
|
+
slots: ['', 'suffix'],
|
|
2181
2186
|
wrappedEleName: 'vaadin-password-field',
|
|
2182
2187
|
style: () => `
|
|
2183
2188
|
:host {
|
|
@@ -2202,7 +2207,7 @@ const PasswordClass = compose(
|
|
|
2202
2207
|
}
|
|
2203
2208
|
vaadin-password-field[focus-ring]::part(input-field) {
|
|
2204
2209
|
box-shadow: none;
|
|
2205
|
-
}
|
|
2210
|
+
}
|
|
2206
2211
|
vaadin-password-field > input {
|
|
2207
2212
|
min-height: 0;
|
|
2208
2213
|
-webkit-mask-image: none;
|
|
@@ -2229,44 +2234,44 @@ const PasswordClass = compose(
|
|
|
2229
2234
|
}
|
|
2230
2235
|
`,
|
|
2231
2236
|
excludeAttrsSync: ['tabindex'],
|
|
2232
|
-
componentName: componentName$
|
|
2237
|
+
componentName: componentName$t,
|
|
2233
2238
|
})
|
|
2234
2239
|
);
|
|
2235
2240
|
|
|
2236
|
-
const globalRefs$
|
|
2237
|
-
const vars$
|
|
2241
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
2242
|
+
const vars$n = PasswordClass.cssVarList;
|
|
2238
2243
|
|
|
2239
2244
|
const password = {
|
|
2240
|
-
[vars$
|
|
2241
|
-
[vars$
|
|
2242
|
-
[vars$
|
|
2243
|
-
[vars$
|
|
2244
|
-
[vars$
|
|
2245
|
-
[vars$
|
|
2246
|
-
[vars$
|
|
2247
|
-
[vars$
|
|
2248
|
-
[vars$
|
|
2249
|
-
[vars$
|
|
2250
|
-
[vars$
|
|
2251
|
-
[vars$
|
|
2252
|
-
[vars$
|
|
2253
|
-
[vars$
|
|
2254
|
-
[vars$
|
|
2255
|
-
[vars$
|
|
2256
|
-
[vars$
|
|
2257
|
-
[vars$
|
|
2258
|
-
[vars$
|
|
2259
|
-
[vars$
|
|
2260
|
-
[vars$
|
|
2245
|
+
[vars$n.hostWidth]: refs.width,
|
|
2246
|
+
[vars$n.fontSize]: refs.fontSize,
|
|
2247
|
+
[vars$n.fontFamily]: refs.fontFamily,
|
|
2248
|
+
[vars$n.labelTextColor]: refs.labelTextColor,
|
|
2249
|
+
[vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2250
|
+
[vars$n.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2251
|
+
[vars$n.inputHeight]: refs.inputHeight,
|
|
2252
|
+
[vars$n.inputBackgroundColor]: refs.backgroundColor,
|
|
2253
|
+
[vars$n.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2254
|
+
[vars$n.inputValueTextColor]: refs.valueTextColor,
|
|
2255
|
+
[vars$n.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
2256
|
+
[vars$n.inputBorderWidth]: refs.borderWidth,
|
|
2257
|
+
[vars$n.inputBorderStyle]: refs.borderStyle,
|
|
2258
|
+
[vars$n.inputBorderColor]: refs.borderColor,
|
|
2259
|
+
[vars$n.inputBorderRadius]: refs.borderRadius,
|
|
2260
|
+
[vars$n.inputOutlineWidth]: refs.outlineWidth,
|
|
2261
|
+
[vars$n.inputOutlineStyle]: refs.outlineStyle,
|
|
2262
|
+
[vars$n.inputOutlineColor]: refs.outlineColor,
|
|
2263
|
+
[vars$n.inputOutlineOffset]: refs.outlineOffset,
|
|
2264
|
+
[vars$n.revealButtonOffset]: globalRefs$b.spacing.md,
|
|
2265
|
+
[vars$n.revealButtonSize]: refs.toggleButtonSize,
|
|
2261
2266
|
};
|
|
2262
2267
|
|
|
2263
2268
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
2264
2269
|
__proto__: null,
|
|
2265
2270
|
default: password,
|
|
2266
|
-
vars: vars$
|
|
2271
|
+
vars: vars$n
|
|
2267
2272
|
});
|
|
2268
2273
|
|
|
2269
|
-
const componentName$
|
|
2274
|
+
const componentName$s = getComponentName('number-field');
|
|
2270
2275
|
|
|
2271
2276
|
const NumberFieldClass = compose(
|
|
2272
2277
|
createStyleMixin({
|
|
@@ -2277,7 +2282,7 @@ const NumberFieldClass = compose(
|
|
|
2277
2282
|
componentNameValidationMixin
|
|
2278
2283
|
)(
|
|
2279
2284
|
createProxy({
|
|
2280
|
-
slots: ['prefix', 'suffix'],
|
|
2285
|
+
slots: ['', 'prefix', 'suffix'],
|
|
2281
2286
|
wrappedEleName: 'vaadin-number-field',
|
|
2282
2287
|
style: () => `
|
|
2283
2288
|
:host {
|
|
@@ -2291,44 +2296,44 @@ const NumberFieldClass = compose(
|
|
|
2291
2296
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
2292
2297
|
`,
|
|
2293
2298
|
excludeAttrsSync: ['tabindex'],
|
|
2294
|
-
componentName: componentName$
|
|
2299
|
+
componentName: componentName$s,
|
|
2295
2300
|
})
|
|
2296
2301
|
);
|
|
2297
2302
|
|
|
2298
|
-
const vars$
|
|
2303
|
+
const vars$m = NumberFieldClass.cssVarList;
|
|
2299
2304
|
|
|
2300
2305
|
const numberField = {
|
|
2301
|
-
[vars$
|
|
2302
|
-
[vars$
|
|
2303
|
-
[vars$
|
|
2304
|
-
[vars$
|
|
2305
|
-
[vars$
|
|
2306
|
-
[vars$
|
|
2307
|
-
[vars$
|
|
2308
|
-
[vars$
|
|
2309
|
-
[vars$
|
|
2310
|
-
[vars$
|
|
2311
|
-
[vars$
|
|
2312
|
-
[vars$
|
|
2313
|
-
[vars$
|
|
2314
|
-
[vars$
|
|
2315
|
-
[vars$
|
|
2316
|
-
[vars$
|
|
2317
|
-
[vars$
|
|
2318
|
-
[vars$
|
|
2319
|
-
[vars$
|
|
2320
|
-
[vars$
|
|
2306
|
+
[vars$m.hostWidth]: refs.width,
|
|
2307
|
+
[vars$m.hostMinWidth]: refs.minWidth,
|
|
2308
|
+
[vars$m.fontSize]: refs.fontSize,
|
|
2309
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
|
2310
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
|
2311
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2312
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
|
2313
|
+
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2314
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
|
2315
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
|
2316
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
|
2317
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
|
2318
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
|
2319
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
|
2320
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
|
2321
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
|
2322
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
|
2323
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2324
|
+
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2325
|
+
[vars$m.inputHeight]: refs.inputHeight,
|
|
2321
2326
|
};
|
|
2322
2327
|
|
|
2323
2328
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
2324
2329
|
__proto__: null,
|
|
2325
2330
|
default: numberField,
|
|
2326
|
-
vars: vars$
|
|
2331
|
+
vars: vars$m
|
|
2327
2332
|
});
|
|
2328
2333
|
|
|
2329
|
-
const componentName$
|
|
2334
|
+
const componentName$r = getComponentName('email-field');
|
|
2330
2335
|
|
|
2331
|
-
const customMixin$
|
|
2336
|
+
const customMixin$5 = (superclass) =>
|
|
2332
2337
|
class EmailFieldMixinClass extends superclass {
|
|
2333
2338
|
init() {
|
|
2334
2339
|
super.init?.();
|
|
@@ -2342,10 +2347,10 @@ const EmailFieldClass = compose(
|
|
|
2342
2347
|
draggableMixin,
|
|
2343
2348
|
composedProxyInputMixin,
|
|
2344
2349
|
componentNameValidationMixin,
|
|
2345
|
-
customMixin$
|
|
2350
|
+
customMixin$5
|
|
2346
2351
|
)(
|
|
2347
2352
|
createProxy({
|
|
2348
|
-
slots: ['suffix'],
|
|
2353
|
+
slots: ['', 'suffix'],
|
|
2349
2354
|
wrappedEleName: 'vaadin-email-field',
|
|
2350
2355
|
style: () => `
|
|
2351
2356
|
:host {
|
|
@@ -2356,55 +2361,55 @@ const EmailFieldClass = compose(
|
|
|
2356
2361
|
}))
|
|
2357
2362
|
}
|
|
2358
2363
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
|
2359
|
-
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
2364
|
+
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
2360
2365
|
`,
|
|
2361
2366
|
excludeAttrsSync: ['tabindex'],
|
|
2362
|
-
componentName: componentName$
|
|
2367
|
+
componentName: componentName$r,
|
|
2363
2368
|
})
|
|
2364
2369
|
);
|
|
2365
2370
|
|
|
2366
|
-
const vars$
|
|
2371
|
+
const vars$l = EmailFieldClass.cssVarList;
|
|
2367
2372
|
|
|
2368
2373
|
const emailField = {
|
|
2369
|
-
[vars$
|
|
2370
|
-
[vars$
|
|
2371
|
-
[vars$
|
|
2372
|
-
[vars$
|
|
2373
|
-
[vars$
|
|
2374
|
-
[vars$
|
|
2375
|
-
[vars$
|
|
2376
|
-
[vars$
|
|
2377
|
-
[vars$
|
|
2378
|
-
[vars$
|
|
2379
|
-
[vars$
|
|
2380
|
-
[vars$
|
|
2381
|
-
[vars$
|
|
2382
|
-
[vars$
|
|
2383
|
-
[vars$
|
|
2384
|
-
[vars$
|
|
2385
|
-
[vars$
|
|
2386
|
-
[vars$
|
|
2387
|
-
[vars$
|
|
2388
|
-
[vars$
|
|
2374
|
+
[vars$l.hostWidth]: refs.width,
|
|
2375
|
+
[vars$l.hostMinWidth]: refs.minWidth,
|
|
2376
|
+
[vars$l.fontSize]: refs.fontSize,
|
|
2377
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
|
2378
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
|
2379
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2380
|
+
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
|
2381
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2382
|
+
[vars$l.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2383
|
+
[vars$l.inputBorderWidth]: refs.borderWidth,
|
|
2384
|
+
[vars$l.inputBorderStyle]: refs.borderStyle,
|
|
2385
|
+
[vars$l.inputBorderColor]: refs.borderColor,
|
|
2386
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
|
2387
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
|
2388
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
|
2389
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
|
2390
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
|
2391
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
|
2392
|
+
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2393
|
+
[vars$l.inputHeight]: refs.inputHeight,
|
|
2389
2394
|
};
|
|
2390
2395
|
|
|
2391
2396
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
2392
2397
|
__proto__: null,
|
|
2393
2398
|
default: emailField,
|
|
2394
|
-
vars: vars$
|
|
2399
|
+
vars: vars$l
|
|
2395
2400
|
});
|
|
2396
2401
|
|
|
2397
|
-
const componentName$
|
|
2402
|
+
const componentName$q = getComponentName('text-area');
|
|
2398
2403
|
|
|
2399
2404
|
const {
|
|
2400
|
-
host: host$
|
|
2401
|
-
label: label$
|
|
2405
|
+
host: host$c,
|
|
2406
|
+
label: label$8,
|
|
2402
2407
|
placeholder: placeholder$1,
|
|
2403
2408
|
inputField: inputField$3,
|
|
2404
2409
|
textArea: textArea$2,
|
|
2405
|
-
requiredIndicator: requiredIndicator$
|
|
2410
|
+
requiredIndicator: requiredIndicator$8,
|
|
2406
2411
|
helperText: helperText$6,
|
|
2407
|
-
errorMessage: errorMessage$
|
|
2412
|
+
errorMessage: errorMessage$8,
|
|
2408
2413
|
} = {
|
|
2409
2414
|
host: { selector: () => ':host' },
|
|
2410
2415
|
label: { selector: '::part(label)' },
|
|
@@ -2419,16 +2424,16 @@ const {
|
|
|
2419
2424
|
const TextAreaClass = compose(
|
|
2420
2425
|
createStyleMixin({
|
|
2421
2426
|
mappings: {
|
|
2422
|
-
hostWidth: { ...host$
|
|
2423
|
-
hostMinWidth: { ...host$
|
|
2424
|
-
fontSize: [host$
|
|
2425
|
-
fontFamily: [label$
|
|
2427
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
2428
|
+
hostMinWidth: { ...host$c, property: 'min-width' },
|
|
2429
|
+
fontSize: [host$c, textArea$2],
|
|
2430
|
+
fontFamily: [label$8, inputField$3, helperText$6, errorMessage$8],
|
|
2426
2431
|
labelTextColor: [
|
|
2427
|
-
{ ...label$
|
|
2428
|
-
{ ...requiredIndicator$
|
|
2432
|
+
{ ...label$8, property: 'color' },
|
|
2433
|
+
{ ...requiredIndicator$8, property: 'color' },
|
|
2429
2434
|
],
|
|
2430
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2431
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2435
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
|
2436
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
|
2432
2437
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
|
2433
2438
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
|
2434
2439
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
|
@@ -2466,48 +2471,48 @@ const TextAreaClass = compose(
|
|
|
2466
2471
|
${resetInputCursor('vaadin-text-area')}
|
|
2467
2472
|
`,
|
|
2468
2473
|
excludeAttrsSync: ['tabindex'],
|
|
2469
|
-
componentName: componentName$
|
|
2474
|
+
componentName: componentName$q,
|
|
2470
2475
|
})
|
|
2471
2476
|
);
|
|
2472
2477
|
|
|
2473
|
-
const globalRefs$
|
|
2474
|
-
const vars$
|
|
2478
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
2479
|
+
const vars$k = TextAreaClass.cssVarList;
|
|
2475
2480
|
|
|
2476
2481
|
const textArea = {
|
|
2477
|
-
[vars$
|
|
2478
|
-
[vars$
|
|
2479
|
-
[vars$
|
|
2480
|
-
[vars$
|
|
2481
|
-
[vars$
|
|
2482
|
-
[vars$
|
|
2483
|
-
[vars$
|
|
2484
|
-
[vars$
|
|
2485
|
-
[vars$
|
|
2486
|
-
[vars$
|
|
2487
|
-
[vars$
|
|
2488
|
-
[vars$
|
|
2489
|
-
[vars$
|
|
2490
|
-
[vars$
|
|
2491
|
-
[vars$
|
|
2492
|
-
[vars$
|
|
2493
|
-
[vars$
|
|
2494
|
-
[vars$
|
|
2495
|
-
[vars$
|
|
2496
|
-
[vars$
|
|
2482
|
+
[vars$k.hostWidth]: refs.width,
|
|
2483
|
+
[vars$k.hostMinWidth]: refs.minWidth,
|
|
2484
|
+
[vars$k.fontSize]: globalRefs$a.typography.body2.size,
|
|
2485
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
|
2486
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
|
2487
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2488
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2489
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
|
2490
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
|
2491
|
+
[vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
2492
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
|
2493
|
+
[vars$k.inputBorderWidth]: refs.borderWidth,
|
|
2494
|
+
[vars$k.inputBorderStyle]: refs.borderStyle,
|
|
2495
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
|
2496
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
|
2497
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
|
2498
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
|
2499
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
|
2500
|
+
[vars$k.inputResizeType]: 'vertical',
|
|
2501
|
+
[vars$k.inputMinHeight]: '5em',
|
|
2497
2502
|
|
|
2498
2503
|
_disabled: {
|
|
2499
|
-
[vars$
|
|
2504
|
+
[vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
|
2500
2505
|
},
|
|
2501
2506
|
|
|
2502
2507
|
_readonly: {
|
|
2503
|
-
[vars$
|
|
2508
|
+
[vars$k.inputResizeType]: 'none',
|
|
2504
2509
|
},
|
|
2505
2510
|
};
|
|
2506
2511
|
|
|
2507
2512
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
2508
2513
|
__proto__: null,
|
|
2509
2514
|
default: textArea,
|
|
2510
|
-
vars: vars$
|
|
2515
|
+
vars: vars$k
|
|
2511
2516
|
});
|
|
2512
2517
|
|
|
2513
2518
|
const createBaseInputClass = (...args) =>
|
|
@@ -2518,9 +2523,9 @@ const createBaseInputClass = (...args) =>
|
|
|
2518
2523
|
inputEventsDispatchingMixin
|
|
2519
2524
|
)(createBaseClass(...args));
|
|
2520
2525
|
|
|
2521
|
-
const componentName$
|
|
2526
|
+
const componentName$p = getComponentName('boolean-field-internal');
|
|
2522
2527
|
|
|
2523
|
-
createBaseInputClass({ componentName: componentName$
|
|
2528
|
+
createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
|
2524
2529
|
|
|
2525
2530
|
const booleanFieldMixin = (superclass) =>
|
|
2526
2531
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -2529,14 +2534,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
2529
2534
|
|
|
2530
2535
|
const template = document.createElement('template');
|
|
2531
2536
|
template.innerHTML = `
|
|
2532
|
-
<${componentName$
|
|
2537
|
+
<${componentName$p}
|
|
2533
2538
|
tabindex="-1"
|
|
2534
2539
|
slot="input"
|
|
2535
|
-
></${componentName$
|
|
2540
|
+
></${componentName$p}>
|
|
2536
2541
|
`;
|
|
2537
2542
|
|
|
2538
2543
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
2539
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
2544
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
|
2540
2545
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
2541
2546
|
|
|
2542
2547
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -2615,18 +2620,18 @@ vaadin-checkbox::part(checkbox) {
|
|
|
2615
2620
|
}
|
|
2616
2621
|
`;
|
|
2617
2622
|
|
|
2618
|
-
const componentName$
|
|
2623
|
+
const componentName$o = getComponentName('checkbox');
|
|
2619
2624
|
|
|
2620
2625
|
const {
|
|
2621
|
-
host: host$
|
|
2626
|
+
host: host$b,
|
|
2622
2627
|
component: component$1,
|
|
2623
2628
|
checkboxElement,
|
|
2624
2629
|
checkboxSurface,
|
|
2625
2630
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
|
2626
|
-
label: label$
|
|
2627
|
-
requiredIndicator: requiredIndicator$
|
|
2631
|
+
label: label$7,
|
|
2632
|
+
requiredIndicator: requiredIndicator$7,
|
|
2628
2633
|
helperText: helperText$5,
|
|
2629
|
-
errorMessage: errorMessage$
|
|
2634
|
+
errorMessage: errorMessage$7,
|
|
2630
2635
|
} = {
|
|
2631
2636
|
host: { selector: () => ':host' },
|
|
2632
2637
|
label: { selector: '::part(label)' },
|
|
@@ -2642,25 +2647,25 @@ const {
|
|
|
2642
2647
|
const CheckboxClass = compose(
|
|
2643
2648
|
createStyleMixin({
|
|
2644
2649
|
mappings: {
|
|
2645
|
-
hostWidth: { ...host$
|
|
2650
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
2646
2651
|
|
|
2647
|
-
fontSize: [host$
|
|
2648
|
-
fontFamily: [label$
|
|
2652
|
+
fontSize: [host$b, checkboxElement, label$7, checkboxHiddenLabel$1],
|
|
2653
|
+
fontFamily: [label$7, checkboxHiddenLabel$1, helperText$5, errorMessage$7],
|
|
2649
2654
|
|
|
2650
2655
|
labelTextColor: [
|
|
2651
|
-
{ ...label$
|
|
2652
|
-
{ ...requiredIndicator$
|
|
2653
|
-
{ ...label$
|
|
2656
|
+
{ ...label$7, property: 'color' },
|
|
2657
|
+
{ ...requiredIndicator$7, property: 'color' },
|
|
2658
|
+
{ ...label$7, property: '-webkit-text-fill-color' },
|
|
2654
2659
|
],
|
|
2655
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2656
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2660
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
|
2661
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
|
2657
2662
|
|
|
2658
2663
|
labelFontWeight: [
|
|
2659
|
-
{ ...label$
|
|
2664
|
+
{ ...label$7, property: 'font-weight' },
|
|
2660
2665
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
|
2661
2666
|
],
|
|
2662
2667
|
labelSpacing: [
|
|
2663
|
-
{ ...label$
|
|
2668
|
+
{ ...label$7, property: 'left' },
|
|
2664
2669
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
|
2665
2670
|
],
|
|
2666
2671
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
|
@@ -2683,8 +2688,8 @@ const CheckboxClass = compose(
|
|
|
2683
2688
|
{ ...checkboxSurface, property: 'font-size' },
|
|
2684
2689
|
{ ...component$1, property: 'font-size' },
|
|
2685
2690
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
|
2686
|
-
{ ...label$
|
|
2687
|
-
{ ...label$
|
|
2691
|
+
{ ...label$7, property: 'margin-left' },
|
|
2692
|
+
{ ...label$7, property: 'line-height' },
|
|
2688
2693
|
],
|
|
2689
2694
|
},
|
|
2690
2695
|
}),
|
|
@@ -2705,60 +2710,60 @@ const CheckboxClass = compose(
|
|
|
2705
2710
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
|
2706
2711
|
`,
|
|
2707
2712
|
excludeAttrsSync: ['tabindex'],
|
|
2708
|
-
componentName: componentName$
|
|
2713
|
+
componentName: componentName$o,
|
|
2709
2714
|
})
|
|
2710
2715
|
);
|
|
2711
2716
|
|
|
2712
|
-
const vars$
|
|
2717
|
+
const vars$j = CheckboxClass.cssVarList;
|
|
2713
2718
|
|
|
2714
2719
|
const checkbox = {
|
|
2715
|
-
[vars$
|
|
2716
|
-
[vars$
|
|
2717
|
-
[vars$
|
|
2718
|
-
[vars$
|
|
2719
|
-
[vars$
|
|
2720
|
-
[vars$
|
|
2721
|
-
[vars$
|
|
2722
|
-
[vars$
|
|
2723
|
-
[vars$
|
|
2724
|
-
[vars$
|
|
2725
|
-
[vars$
|
|
2726
|
-
[vars$
|
|
2727
|
-
[vars$
|
|
2728
|
-
[vars$
|
|
2729
|
-
[vars$
|
|
2730
|
-
[vars$
|
|
2731
|
-
[vars$
|
|
2732
|
-
[vars$
|
|
2720
|
+
[vars$j.hostWidth]: refs.width,
|
|
2721
|
+
[vars$j.fontSize]: refs.fontSize,
|
|
2722
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
|
2723
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
2724
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2725
|
+
[vars$j.labelFontWeight]: '400',
|
|
2726
|
+
[vars$j.labelSpacing]: '0.75em',
|
|
2727
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2728
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
|
2729
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
|
2730
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
|
2731
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
|
2732
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
|
2733
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
|
2734
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
|
2735
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
|
2736
|
+
[vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
|
|
2737
|
+
[vars$j.inputSize]: '2em',
|
|
2733
2738
|
|
|
2734
2739
|
_checked: {
|
|
2735
|
-
[vars$
|
|
2736
|
-
[vars$
|
|
2740
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
|
2741
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
|
2737
2742
|
},
|
|
2738
2743
|
|
|
2739
2744
|
_disabled: {
|
|
2740
|
-
[vars$
|
|
2745
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
2741
2746
|
},
|
|
2742
2747
|
};
|
|
2743
2748
|
|
|
2744
2749
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
2745
2750
|
__proto__: null,
|
|
2746
2751
|
default: checkbox,
|
|
2747
|
-
vars: vars$
|
|
2752
|
+
vars: vars$j
|
|
2748
2753
|
});
|
|
2749
2754
|
|
|
2750
|
-
const componentName$
|
|
2755
|
+
const componentName$n = getComponentName('switch-toggle');
|
|
2751
2756
|
|
|
2752
2757
|
const {
|
|
2753
|
-
host: host$
|
|
2758
|
+
host: host$a,
|
|
2754
2759
|
component,
|
|
2755
2760
|
checkboxElement: track,
|
|
2756
2761
|
checkboxSurface: knob,
|
|
2757
2762
|
checkboxHiddenLabel,
|
|
2758
|
-
label: label$
|
|
2759
|
-
requiredIndicator: requiredIndicator$
|
|
2763
|
+
label: label$6,
|
|
2764
|
+
requiredIndicator: requiredIndicator$6,
|
|
2760
2765
|
helperText: helperText$4,
|
|
2761
|
-
errorMessage: errorMessage$
|
|
2766
|
+
errorMessage: errorMessage$6,
|
|
2762
2767
|
} = {
|
|
2763
2768
|
host: { selector: () => ':host' },
|
|
2764
2769
|
label: { selector: '::part(label)' },
|
|
@@ -2774,9 +2779,9 @@ const {
|
|
|
2774
2779
|
const SwitchToggleClass = compose(
|
|
2775
2780
|
createStyleMixin({
|
|
2776
2781
|
mappings: {
|
|
2777
|
-
hostWidth: { ...host$
|
|
2778
|
-
fontSize: [component, label$
|
|
2779
|
-
fontFamily: [label$
|
|
2782
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
2783
|
+
fontSize: [component, label$6, checkboxHiddenLabel],
|
|
2784
|
+
fontFamily: [label$6, helperText$4, errorMessage$6],
|
|
2780
2785
|
trackBorderWidth: { ...track, property: 'border-width' },
|
|
2781
2786
|
trackBorderStyle: { ...track, property: 'border-style' },
|
|
2782
2787
|
trackBorderColor: { ...track, property: 'border-color' },
|
|
@@ -2800,24 +2805,24 @@ const SwitchToggleClass = compose(
|
|
|
2800
2805
|
knobLeftOffset: { ...knob, property: 'left' },
|
|
2801
2806
|
|
|
2802
2807
|
labelSpacing: [
|
|
2803
|
-
{ ...label$
|
|
2808
|
+
{ ...label$6, property: 'padding-left' },
|
|
2804
2809
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
|
2805
2810
|
],
|
|
2806
2811
|
labelLineHeight: [
|
|
2807
|
-
{ ...label$
|
|
2812
|
+
{ ...label$6, property: 'line-height' },
|
|
2808
2813
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
|
2809
2814
|
],
|
|
2810
2815
|
labelFontWeight: [
|
|
2811
|
-
{ ...label$
|
|
2816
|
+
{ ...label$6, property: 'font-weight' },
|
|
2812
2817
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
|
2813
2818
|
],
|
|
2814
2819
|
labelTextColor: [
|
|
2815
|
-
{ ...label$
|
|
2816
|
-
{ ...requiredIndicator$
|
|
2817
|
-
{ ...label$
|
|
2820
|
+
{ ...label$6, property: 'color' },
|
|
2821
|
+
{ ...requiredIndicator$6, property: 'color' },
|
|
2822
|
+
{ ...label$6, property: '-webkit-text-fill-color' },
|
|
2818
2823
|
],
|
|
2819
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2820
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2824
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
|
2825
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
|
2821
2826
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
|
2822
2827
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
|
2823
2828
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
|
@@ -2850,83 +2855,83 @@ const SwitchToggleClass = compose(
|
|
|
2850
2855
|
}
|
|
2851
2856
|
`,
|
|
2852
2857
|
excludeAttrsSync: ['tabindex'],
|
|
2853
|
-
componentName: componentName$
|
|
2858
|
+
componentName: componentName$n,
|
|
2854
2859
|
})
|
|
2855
2860
|
);
|
|
2856
2861
|
|
|
2857
2862
|
const knobMargin = '2px';
|
|
2858
2863
|
const checkboxHeight = '1.25em';
|
|
2859
2864
|
|
|
2860
|
-
const globalRefs$
|
|
2861
|
-
const vars$
|
|
2865
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
2866
|
+
const vars$i = SwitchToggleClass.cssVarList;
|
|
2862
2867
|
|
|
2863
2868
|
const switchToggle = {
|
|
2864
|
-
[vars$
|
|
2865
|
-
[vars$
|
|
2866
|
-
|
|
2867
|
-
[vars$
|
|
2868
|
-
[vars$
|
|
2869
|
-
[vars$
|
|
2870
|
-
[vars$
|
|
2871
|
-
|
|
2872
|
-
[vars$
|
|
2873
|
-
[vars$
|
|
2874
|
-
[vars$
|
|
2875
|
-
[vars$
|
|
2876
|
-
[vars$
|
|
2877
|
-
[vars$
|
|
2878
|
-
[vars$
|
|
2879
|
-
|
|
2880
|
-
[vars$
|
|
2881
|
-
[vars$
|
|
2882
|
-
[vars$
|
|
2883
|
-
[vars$
|
|
2884
|
-
[vars$
|
|
2885
|
-
[vars$
|
|
2886
|
-
|
|
2887
|
-
[vars$
|
|
2888
|
-
[vars$
|
|
2889
|
-
[vars$
|
|
2890
|
-
[vars$
|
|
2891
|
-
[vars$
|
|
2892
|
-
[vars$
|
|
2893
|
-
|
|
2894
|
-
[vars$
|
|
2869
|
+
[vars$i.fontSize]: refs.fontSize,
|
|
2870
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
|
2871
|
+
|
|
2872
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
|
2873
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
|
2874
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
|
2875
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
|
2876
|
+
|
|
2877
|
+
[vars$i.trackBorderStyle]: refs.borderStyle,
|
|
2878
|
+
[vars$i.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
2879
|
+
[vars$i.trackBorderColor]: refs.borderColor,
|
|
2880
|
+
[vars$i.trackBackgroundColor]: 'none',
|
|
2881
|
+
[vars$i.trackBorderRadius]: globalRefs$9.radius.md,
|
|
2882
|
+
[vars$i.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
2883
|
+
[vars$i.trackHeight]: checkboxHeight,
|
|
2884
|
+
|
|
2885
|
+
[vars$i.knobSize]: `calc(1em - ${knobMargin})`,
|
|
2886
|
+
[vars$i.knobRadius]: '50%',
|
|
2887
|
+
[vars$i.knobTopOffset]: '1px',
|
|
2888
|
+
[vars$i.knobLeftOffset]: knobMargin,
|
|
2889
|
+
[vars$i.knobColor]: refs.valueTextColor,
|
|
2890
|
+
[vars$i.knobTransitionDuration]: '0.3s',
|
|
2891
|
+
|
|
2892
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
|
2893
|
+
[vars$i.labelFontWeight]: '400',
|
|
2894
|
+
[vars$i.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
|
2895
|
+
[vars$i.labelSpacing]: '0.25em',
|
|
2896
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2897
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2898
|
+
|
|
2899
|
+
[vars$i.hostWidth]: refs.width,
|
|
2895
2900
|
|
|
2896
2901
|
_checked: {
|
|
2897
|
-
[vars$
|
|
2898
|
-
[vars$
|
|
2899
|
-
[vars$
|
|
2900
|
-
[vars$
|
|
2901
|
-
[vars$
|
|
2902
|
+
[vars$i.trackBorderColor]: refs.borderColor,
|
|
2903
|
+
[vars$i.trackBackgroundColor]: refs.backgroundColor,
|
|
2904
|
+
[vars$i.knobLeftOffset]: `calc(100% - var(${vars$i.knobSize}) - ${knobMargin})`,
|
|
2905
|
+
[vars$i.knobColor]: refs.valueTextColor,
|
|
2906
|
+
[vars$i.knobTextColor]: refs.valueTextColor,
|
|
2902
2907
|
},
|
|
2903
2908
|
|
|
2904
2909
|
_disabled: {
|
|
2905
|
-
[vars$
|
|
2906
|
-
[vars$
|
|
2907
|
-
[vars$
|
|
2908
|
-
[vars$
|
|
2910
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
|
2911
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.surface.main,
|
|
2912
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
|
2913
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
|
2909
2914
|
_checked: {
|
|
2910
|
-
[vars$
|
|
2911
|
-
[vars$
|
|
2915
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
|
2916
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
|
2912
2917
|
},
|
|
2913
2918
|
},
|
|
2914
2919
|
|
|
2915
2920
|
_invalid: {
|
|
2916
|
-
[vars$
|
|
2917
|
-
[vars$
|
|
2921
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
|
|
2922
|
+
[vars$i.knobColor]: globalRefs$9.colors.error.main,
|
|
2918
2923
|
},
|
|
2919
2924
|
};
|
|
2920
2925
|
|
|
2921
2926
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
2922
2927
|
__proto__: null,
|
|
2923
2928
|
default: switchToggle,
|
|
2924
|
-
vars: vars$
|
|
2929
|
+
vars: vars$i
|
|
2925
2930
|
});
|
|
2926
2931
|
|
|
2927
|
-
const componentName$
|
|
2932
|
+
const componentName$m = getComponentName('container');
|
|
2928
2933
|
|
|
2929
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
2934
|
+
class RawContainer extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > slot' }) {
|
|
2930
2935
|
constructor() {
|
|
2931
2936
|
super();
|
|
2932
2937
|
|
|
@@ -2978,7 +2983,7 @@ const ContainerClass = compose(
|
|
|
2978
2983
|
componentNameValidationMixin
|
|
2979
2984
|
)(RawContainer);
|
|
2980
2985
|
|
|
2981
|
-
const globalRefs$
|
|
2986
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
2982
2987
|
|
|
2983
2988
|
const compVars$2 = ContainerClass.cssVarList;
|
|
2984
2989
|
|
|
@@ -3000,7 +3005,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
3000
3005
|
horizontalAlignment,
|
|
3001
3006
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
3002
3007
|
},
|
|
3003
|
-
componentName$
|
|
3008
|
+
componentName$m
|
|
3004
3009
|
);
|
|
3005
3010
|
|
|
3006
3011
|
const { shadowColor } = helperRefs$2;
|
|
@@ -3010,8 +3015,8 @@ const container = {
|
|
|
3010
3015
|
|
|
3011
3016
|
[compVars$2.hostWidth]: '100%',
|
|
3012
3017
|
[compVars$2.boxShadow]: 'none',
|
|
3013
|
-
[compVars$2.backgroundColor]: globalRefs$
|
|
3014
|
-
[compVars$2.color]: globalRefs$
|
|
3018
|
+
[compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
|
|
3019
|
+
[compVars$2.color]: globalRefs$8.colors.surface.contrast,
|
|
3015
3020
|
|
|
3016
3021
|
verticalPadding: {
|
|
3017
3022
|
sm: { [compVars$2.verticalPadding]: '5px' },
|
|
@@ -3057,34 +3062,34 @@ const container = {
|
|
|
3057
3062
|
|
|
3058
3063
|
shadow: {
|
|
3059
3064
|
sm: {
|
|
3060
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3065
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
|
3061
3066
|
},
|
|
3062
3067
|
md: {
|
|
3063
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3068
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
|
3064
3069
|
},
|
|
3065
3070
|
lg: {
|
|
3066
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3071
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
|
3067
3072
|
},
|
|
3068
3073
|
xl: {
|
|
3069
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3074
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
|
|
3070
3075
|
},
|
|
3071
3076
|
'2xl': {
|
|
3072
3077
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
3073
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3078
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
|
|
3074
3079
|
},
|
|
3075
3080
|
},
|
|
3076
3081
|
|
|
3077
3082
|
borderRadius: {
|
|
3078
|
-
sm: { [compVars$2.borderRadius]: globalRefs$
|
|
3079
|
-
md: { [compVars$2.borderRadius]: globalRefs$
|
|
3080
|
-
lg: { [compVars$2.borderRadius]: globalRefs$
|
|
3081
|
-
xl: { [compVars$2.borderRadius]: globalRefs$
|
|
3082
|
-
'2xl': { [compVars$2.borderRadius]: globalRefs$
|
|
3083
|
-
'3xl': { [compVars$2.borderRadius]: globalRefs$
|
|
3083
|
+
sm: { [compVars$2.borderRadius]: globalRefs$8.radius.sm },
|
|
3084
|
+
md: { [compVars$2.borderRadius]: globalRefs$8.radius.md },
|
|
3085
|
+
lg: { [compVars$2.borderRadius]: globalRefs$8.radius.lg },
|
|
3086
|
+
xl: { [compVars$2.borderRadius]: globalRefs$8.radius.xl },
|
|
3087
|
+
'2xl': { [compVars$2.borderRadius]: globalRefs$8.radius['2xl'] },
|
|
3088
|
+
'3xl': { [compVars$2.borderRadius]: globalRefs$8.radius['3xl'] },
|
|
3084
3089
|
},
|
|
3085
3090
|
};
|
|
3086
3091
|
|
|
3087
|
-
const vars$
|
|
3092
|
+
const vars$h = {
|
|
3088
3093
|
...compVars$2,
|
|
3089
3094
|
...helperVars$2,
|
|
3090
3095
|
};
|
|
@@ -3092,7 +3097,7 @@ const vars$f = {
|
|
|
3092
3097
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
3093
3098
|
__proto__: null,
|
|
3094
3099
|
default: container,
|
|
3095
|
-
vars: vars$
|
|
3100
|
+
vars: vars$h
|
|
3096
3101
|
});
|
|
3097
3102
|
|
|
3098
3103
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -3145,49 +3150,49 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
3145
3150
|
return CssVarImageClass;
|
|
3146
3151
|
};
|
|
3147
3152
|
|
|
3148
|
-
const componentName$
|
|
3153
|
+
const componentName$l = getComponentName('logo');
|
|
3149
3154
|
|
|
3150
3155
|
const LogoClass = createCssVarImageClass({
|
|
3151
|
-
componentName: componentName$
|
|
3156
|
+
componentName: componentName$l,
|
|
3152
3157
|
varName: 'url',
|
|
3153
3158
|
fallbackVarName: 'fallbackUrl',
|
|
3154
3159
|
});
|
|
3155
3160
|
|
|
3156
|
-
const vars$
|
|
3161
|
+
const vars$g = LogoClass.cssVarList;
|
|
3157
3162
|
|
|
3158
3163
|
const logo$1 = {
|
|
3159
|
-
[vars$
|
|
3164
|
+
[vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
3160
3165
|
};
|
|
3161
3166
|
|
|
3162
3167
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
|
3163
3168
|
__proto__: null,
|
|
3164
3169
|
default: logo$1,
|
|
3165
|
-
vars: vars$
|
|
3170
|
+
vars: vars$g
|
|
3166
3171
|
});
|
|
3167
3172
|
|
|
3168
|
-
const componentName$
|
|
3173
|
+
const componentName$k = getComponentName('totp-image');
|
|
3169
3174
|
|
|
3170
3175
|
const TotpImageClass = createCssVarImageClass({
|
|
3171
|
-
componentName: componentName$
|
|
3176
|
+
componentName: componentName$k,
|
|
3172
3177
|
varName: 'url',
|
|
3173
3178
|
fallbackVarName: 'fallbackUrl',
|
|
3174
3179
|
});
|
|
3175
3180
|
|
|
3176
|
-
const vars$
|
|
3181
|
+
const vars$f = TotpImageClass.cssVarList;
|
|
3177
3182
|
|
|
3178
3183
|
const logo = {
|
|
3179
|
-
[vars$
|
|
3184
|
+
[vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
3180
3185
|
};
|
|
3181
3186
|
|
|
3182
3187
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
3183
3188
|
__proto__: null,
|
|
3184
3189
|
default: logo,
|
|
3185
|
-
vars: vars$
|
|
3190
|
+
vars: vars$f
|
|
3186
3191
|
});
|
|
3187
3192
|
|
|
3188
|
-
const componentName$
|
|
3193
|
+
const componentName$j = getComponentName('text');
|
|
3189
3194
|
|
|
3190
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
3195
|
+
class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
|
|
3191
3196
|
constructor() {
|
|
3192
3197
|
super();
|
|
3193
3198
|
|
|
@@ -3229,98 +3234,98 @@ const TextClass = compose(
|
|
|
3229
3234
|
componentNameValidationMixin
|
|
3230
3235
|
)(RawText);
|
|
3231
3236
|
|
|
3232
|
-
const globalRefs$
|
|
3233
|
-
const vars$
|
|
3237
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
3238
|
+
const vars$e = TextClass.cssVarList;
|
|
3234
3239
|
|
|
3235
3240
|
const text$2 = {
|
|
3236
|
-
[vars$
|
|
3237
|
-
[vars$
|
|
3238
|
-
[vars$
|
|
3241
|
+
[vars$e.textLineHeight]: '1em',
|
|
3242
|
+
[vars$e.textAlign]: 'left',
|
|
3243
|
+
[vars$e.textColor]: globalRefs$7.colors.surface.dark,
|
|
3239
3244
|
variant: {
|
|
3240
3245
|
h1: {
|
|
3241
|
-
[vars$
|
|
3242
|
-
[vars$
|
|
3243
|
-
[vars$
|
|
3246
|
+
[vars$e.fontSize]: globalRefs$7.typography.h1.size,
|
|
3247
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h1.weight,
|
|
3248
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h1.font,
|
|
3244
3249
|
},
|
|
3245
3250
|
h2: {
|
|
3246
|
-
[vars$
|
|
3247
|
-
[vars$
|
|
3248
|
-
[vars$
|
|
3251
|
+
[vars$e.fontSize]: globalRefs$7.typography.h2.size,
|
|
3252
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h2.weight,
|
|
3253
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h2.font,
|
|
3249
3254
|
},
|
|
3250
3255
|
h3: {
|
|
3251
|
-
[vars$
|
|
3252
|
-
[vars$
|
|
3253
|
-
[vars$
|
|
3256
|
+
[vars$e.fontSize]: globalRefs$7.typography.h3.size,
|
|
3257
|
+
[vars$e.fontWeight]: globalRefs$7.typography.h3.weight,
|
|
3258
|
+
[vars$e.fontFamily]: globalRefs$7.typography.h3.font,
|
|
3254
3259
|
},
|
|
3255
3260
|
subtitle1: {
|
|
3256
|
-
[vars$
|
|
3257
|
-
[vars$
|
|
3258
|
-
[vars$
|
|
3261
|
+
[vars$e.fontSize]: globalRefs$7.typography.subtitle1.size,
|
|
3262
|
+
[vars$e.fontWeight]: globalRefs$7.typography.subtitle1.weight,
|
|
3263
|
+
[vars$e.fontFamily]: globalRefs$7.typography.subtitle1.font,
|
|
3259
3264
|
},
|
|
3260
3265
|
subtitle2: {
|
|
3261
|
-
[vars$
|
|
3262
|
-
[vars$
|
|
3263
|
-
[vars$
|
|
3266
|
+
[vars$e.fontSize]: globalRefs$7.typography.subtitle2.size,
|
|
3267
|
+
[vars$e.fontWeight]: globalRefs$7.typography.subtitle2.weight,
|
|
3268
|
+
[vars$e.fontFamily]: globalRefs$7.typography.subtitle2.font,
|
|
3264
3269
|
},
|
|
3265
3270
|
body1: {
|
|
3266
|
-
[vars$
|
|
3267
|
-
[vars$
|
|
3268
|
-
[vars$
|
|
3271
|
+
[vars$e.fontSize]: globalRefs$7.typography.body1.size,
|
|
3272
|
+
[vars$e.fontWeight]: globalRefs$7.typography.body1.weight,
|
|
3273
|
+
[vars$e.fontFamily]: globalRefs$7.typography.body1.font,
|
|
3269
3274
|
},
|
|
3270
3275
|
body2: {
|
|
3271
|
-
[vars$
|
|
3272
|
-
[vars$
|
|
3273
|
-
[vars$
|
|
3276
|
+
[vars$e.fontSize]: globalRefs$7.typography.body2.size,
|
|
3277
|
+
[vars$e.fontWeight]: globalRefs$7.typography.body2.weight,
|
|
3278
|
+
[vars$e.fontFamily]: globalRefs$7.typography.body2.font,
|
|
3274
3279
|
},
|
|
3275
3280
|
},
|
|
3276
3281
|
|
|
3277
3282
|
mode: {
|
|
3278
3283
|
primary: {
|
|
3279
|
-
[vars$
|
|
3284
|
+
[vars$e.textColor]: globalRefs$7.colors.primary.main,
|
|
3280
3285
|
},
|
|
3281
3286
|
secondary: {
|
|
3282
|
-
[vars$
|
|
3287
|
+
[vars$e.textColor]: globalRefs$7.colors.secondary.main,
|
|
3283
3288
|
},
|
|
3284
3289
|
error: {
|
|
3285
|
-
[vars$
|
|
3290
|
+
[vars$e.textColor]: globalRefs$7.colors.error.main,
|
|
3286
3291
|
},
|
|
3287
3292
|
success: {
|
|
3288
|
-
[vars$
|
|
3293
|
+
[vars$e.textColor]: globalRefs$7.colors.success.main,
|
|
3289
3294
|
},
|
|
3290
3295
|
},
|
|
3291
3296
|
|
|
3292
3297
|
textAlign: {
|
|
3293
|
-
right: { [vars$
|
|
3294
|
-
left: { [vars$
|
|
3295
|
-
center: { [vars$
|
|
3298
|
+
right: { [vars$e.textAlign]: 'right' },
|
|
3299
|
+
left: { [vars$e.textAlign]: 'left' },
|
|
3300
|
+
center: { [vars$e.textAlign]: 'center' },
|
|
3296
3301
|
},
|
|
3297
3302
|
|
|
3298
3303
|
_fullWidth: {
|
|
3299
|
-
[vars$
|
|
3304
|
+
[vars$e.hostWidth]: '100%',
|
|
3300
3305
|
},
|
|
3301
3306
|
|
|
3302
3307
|
_italic: {
|
|
3303
|
-
[vars$
|
|
3308
|
+
[vars$e.fontStyle]: 'italic',
|
|
3304
3309
|
},
|
|
3305
3310
|
|
|
3306
3311
|
_uppercase: {
|
|
3307
|
-
[vars$
|
|
3312
|
+
[vars$e.textTransform]: 'uppercase',
|
|
3308
3313
|
},
|
|
3309
3314
|
|
|
3310
3315
|
_lowercase: {
|
|
3311
|
-
[vars$
|
|
3316
|
+
[vars$e.textTransform]: 'lowercase',
|
|
3312
3317
|
},
|
|
3313
3318
|
};
|
|
3314
3319
|
|
|
3315
3320
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
3316
3321
|
__proto__: null,
|
|
3317
3322
|
default: text$2,
|
|
3318
|
-
vars: vars$
|
|
3323
|
+
vars: vars$e
|
|
3319
3324
|
});
|
|
3320
3325
|
|
|
3321
|
-
const componentName$
|
|
3326
|
+
const componentName$i = getComponentName('link');
|
|
3322
3327
|
|
|
3323
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
3328
|
+
class RawLink extends createBaseClass({ componentName: componentName$i, baseSelector: ':host a' }) {
|
|
3324
3329
|
constructor() {
|
|
3325
3330
|
super();
|
|
3326
3331
|
|
|
@@ -3366,12 +3371,12 @@ const selectors$1 = {
|
|
|
3366
3371
|
text: { selector: () => TextClass.componentName },
|
|
3367
3372
|
};
|
|
3368
3373
|
|
|
3369
|
-
const { anchor, text: text$1, host: host$
|
|
3374
|
+
const { anchor, text: text$1, host: host$9, wrapper: wrapper$1 } = selectors$1;
|
|
3370
3375
|
|
|
3371
3376
|
const LinkClass = compose(
|
|
3372
3377
|
createStyleMixin({
|
|
3373
3378
|
mappings: {
|
|
3374
|
-
hostWidth: { ...host$
|
|
3379
|
+
hostWidth: { ...host$9, property: 'width' },
|
|
3375
3380
|
textAlign: wrapper$1,
|
|
3376
3381
|
textColor: [
|
|
3377
3382
|
{ ...anchor, property: 'color' },
|
|
@@ -3384,36 +3389,36 @@ const LinkClass = compose(
|
|
|
3384
3389
|
componentNameValidationMixin
|
|
3385
3390
|
)(RawLink);
|
|
3386
3391
|
|
|
3387
|
-
const globalRefs$
|
|
3388
|
-
const vars$
|
|
3392
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
3393
|
+
const vars$d = LinkClass.cssVarList;
|
|
3389
3394
|
|
|
3390
3395
|
const link = {
|
|
3391
|
-
[vars$
|
|
3396
|
+
[vars$d.cursor]: 'pointer',
|
|
3392
3397
|
|
|
3393
|
-
[vars$
|
|
3398
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
|
3394
3399
|
|
|
3395
3400
|
textAlign: {
|
|
3396
|
-
right: { [vars$
|
|
3397
|
-
left: { [vars$
|
|
3398
|
-
center: { [vars$
|
|
3401
|
+
right: { [vars$d.textAlign]: 'right' },
|
|
3402
|
+
left: { [vars$d.textAlign]: 'left' },
|
|
3403
|
+
center: { [vars$d.textAlign]: 'center' },
|
|
3399
3404
|
},
|
|
3400
3405
|
|
|
3401
3406
|
_fullWidth: {
|
|
3402
|
-
[vars$
|
|
3407
|
+
[vars$d.hostWidth]: '100%',
|
|
3403
3408
|
},
|
|
3404
3409
|
|
|
3405
3410
|
mode: {
|
|
3406
3411
|
primary: {
|
|
3407
|
-
[vars$
|
|
3412
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
|
3408
3413
|
},
|
|
3409
3414
|
secondary: {
|
|
3410
|
-
[vars$
|
|
3415
|
+
[vars$d.textColor]: globalRefs$6.colors.secondary.main,
|
|
3411
3416
|
},
|
|
3412
3417
|
error: {
|
|
3413
|
-
[vars$
|
|
3418
|
+
[vars$d.textColor]: globalRefs$6.colors.error.main,
|
|
3414
3419
|
},
|
|
3415
3420
|
success: {
|
|
3416
|
-
[vars$
|
|
3421
|
+
[vars$d.textColor]: globalRefs$6.colors.success.main,
|
|
3417
3422
|
},
|
|
3418
3423
|
},
|
|
3419
3424
|
};
|
|
@@ -3421,11 +3426,11 @@ const link = {
|
|
|
3421
3426
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
3422
3427
|
__proto__: null,
|
|
3423
3428
|
default: link,
|
|
3424
|
-
vars: vars$
|
|
3429
|
+
vars: vars$d
|
|
3425
3430
|
});
|
|
3426
3431
|
|
|
3427
|
-
const componentName$
|
|
3428
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
3432
|
+
const componentName$h = getComponentName('divider');
|
|
3433
|
+
class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
|
3429
3434
|
constructor() {
|
|
3430
3435
|
super();
|
|
3431
3436
|
|
|
@@ -3470,7 +3475,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$e, baseS
|
|
|
3470
3475
|
}
|
|
3471
3476
|
}
|
|
3472
3477
|
|
|
3473
|
-
const { host: host$
|
|
3478
|
+
const { host: host$8, before, after: after$1, text } = {
|
|
3474
3479
|
host: { selector: () => ':host' },
|
|
3475
3480
|
before: { selector: '::before' },
|
|
3476
3481
|
after: { selector: '::after' },
|
|
@@ -3480,8 +3485,8 @@ const { host: host$7, before, after: after$1, text } = {
|
|
|
3480
3485
|
const DividerClass = compose(
|
|
3481
3486
|
createStyleMixin({
|
|
3482
3487
|
mappings: {
|
|
3483
|
-
hostWidth: { ...host$
|
|
3484
|
-
hostPadding: { ...host$
|
|
3488
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
3489
|
+
hostPadding: { ...host$8, property: 'padding' },
|
|
3485
3490
|
|
|
3486
3491
|
minHeight: {},
|
|
3487
3492
|
alignItems: {},
|
|
@@ -3521,7 +3526,7 @@ const DividerClass = compose(
|
|
|
3521
3526
|
componentNameValidationMixin
|
|
3522
3527
|
)(RawDivider);
|
|
3523
3528
|
|
|
3524
|
-
const globalRefs$
|
|
3529
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
3525
3530
|
const compVars$1 = DividerClass.cssVarList;
|
|
3526
3531
|
|
|
3527
3532
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -3529,7 +3534,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
3529
3534
|
thickness: '2px',
|
|
3530
3535
|
spacing: '10px',
|
|
3531
3536
|
},
|
|
3532
|
-
componentName$
|
|
3537
|
+
componentName$h
|
|
3533
3538
|
);
|
|
3534
3539
|
|
|
3535
3540
|
const divider = {
|
|
@@ -3539,7 +3544,7 @@ const divider = {
|
|
|
3539
3544
|
[compVars$1.flexDirection]: 'row',
|
|
3540
3545
|
[compVars$1.alignSelf]: 'stretch',
|
|
3541
3546
|
[compVars$1.hostWidth]: '100%',
|
|
3542
|
-
[compVars$1.stripeColor]: globalRefs$
|
|
3547
|
+
[compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
|
|
3543
3548
|
[compVars$1.stripeColorOpacity]: '0.5',
|
|
3544
3549
|
[compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
3545
3550
|
[compVars$1.labelTextWidth]: 'fit-content',
|
|
@@ -3558,7 +3563,7 @@ const divider = {
|
|
|
3558
3563
|
},
|
|
3559
3564
|
};
|
|
3560
3565
|
|
|
3561
|
-
const vars$
|
|
3566
|
+
const vars$c = {
|
|
3562
3567
|
...compVars$1,
|
|
3563
3568
|
...helperVars$1,
|
|
3564
3569
|
};
|
|
@@ -3566,20 +3571,20 @@ const vars$a = {
|
|
|
3566
3571
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
3567
3572
|
__proto__: null,
|
|
3568
3573
|
default: divider,
|
|
3569
|
-
vars: vars$
|
|
3574
|
+
vars: vars$c
|
|
3570
3575
|
});
|
|
3571
3576
|
|
|
3572
3577
|
/* eslint-disable no-param-reassign */
|
|
3573
3578
|
|
|
3574
|
-
const componentName$
|
|
3579
|
+
const componentName$g = getComponentName('passcode-internal');
|
|
3575
3580
|
|
|
3576
|
-
createBaseInputClass({ componentName: componentName$
|
|
3581
|
+
createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
|
|
3577
3582
|
|
|
3578
|
-
const componentName$
|
|
3583
|
+
const componentName$f = getComponentName('passcode');
|
|
3579
3584
|
|
|
3580
3585
|
const observedAttributes$3 = ['digits'];
|
|
3581
3586
|
|
|
3582
|
-
const customMixin$
|
|
3587
|
+
const customMixin$4 = (superclass) =>
|
|
3583
3588
|
class PasscodeMixinClass extends superclass {
|
|
3584
3589
|
static get observedAttributes() {
|
|
3585
3590
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -3594,17 +3599,17 @@ const customMixin$3 = (superclass) =>
|
|
|
3594
3599
|
const template = document.createElement('template');
|
|
3595
3600
|
|
|
3596
3601
|
template.innerHTML = `
|
|
3597
|
-
<${componentName$
|
|
3602
|
+
<${componentName$g}
|
|
3598
3603
|
bordered="true"
|
|
3599
3604
|
name="code"
|
|
3600
3605
|
tabindex="-1"
|
|
3601
3606
|
slot="input"
|
|
3602
|
-
></${componentName$
|
|
3607
|
+
><slot></slot></${componentName$g}>
|
|
3603
3608
|
`;
|
|
3604
3609
|
|
|
3605
3610
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3606
3611
|
|
|
3607
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3612
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
|
3608
3613
|
|
|
3609
3614
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
|
3610
3615
|
}
|
|
@@ -3619,13 +3624,13 @@ const customMixin$3 = (superclass) =>
|
|
|
3619
3624
|
};
|
|
3620
3625
|
|
|
3621
3626
|
const {
|
|
3622
|
-
host: host$
|
|
3627
|
+
host: host$7,
|
|
3623
3628
|
digitField,
|
|
3624
|
-
label: label$
|
|
3625
|
-
requiredIndicator: requiredIndicator$
|
|
3626
|
-
internalWrapper,
|
|
3629
|
+
label: label$5,
|
|
3630
|
+
requiredIndicator: requiredIndicator$5,
|
|
3631
|
+
internalWrapper: internalWrapper$1,
|
|
3627
3632
|
focusedDigitField,
|
|
3628
|
-
errorMessage: errorMessage$
|
|
3633
|
+
errorMessage: errorMessage$5,
|
|
3629
3634
|
} = {
|
|
3630
3635
|
host: { selector: () => ':host' },
|
|
3631
3636
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
|
@@ -3641,15 +3646,15 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
|
3641
3646
|
const PasscodeClass = compose(
|
|
3642
3647
|
createStyleMixin({
|
|
3643
3648
|
mappings: {
|
|
3644
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
3649
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
|
|
3645
3650
|
hostWidth: { property: 'width' },
|
|
3646
|
-
fontFamily: host$
|
|
3651
|
+
fontFamily: host$7,
|
|
3647
3652
|
labelTextColor: [
|
|
3648
|
-
{ ...label$
|
|
3649
|
-
{ ...requiredIndicator$
|
|
3653
|
+
{ ...label$5, property: 'color' },
|
|
3654
|
+
{ ...requiredIndicator$5, property: 'color' },
|
|
3650
3655
|
],
|
|
3651
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
3652
|
-
errorMessageTextColor: { ...errorMessage$
|
|
3656
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
|
3657
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
|
3653
3658
|
digitValueTextColor: {
|
|
3654
3659
|
selector: TextFieldClass.componentName,
|
|
3655
3660
|
property: textVars$2.inputValueTextColor,
|
|
@@ -3661,7 +3666,7 @@ const PasscodeClass = compose(
|
|
|
3661
3666
|
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
|
3662
3667
|
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
|
3663
3668
|
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
|
3664
|
-
digitSpacing: { ...internalWrapper, property: 'gap' },
|
|
3669
|
+
digitSpacing: { ...internalWrapper$1, property: 'gap' },
|
|
3665
3670
|
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
|
3666
3671
|
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
|
3667
3672
|
|
|
@@ -3671,7 +3676,7 @@ const PasscodeClass = compose(
|
|
|
3671
3676
|
draggableMixin,
|
|
3672
3677
|
composedProxyInputMixin,
|
|
3673
3678
|
componentNameValidationMixin,
|
|
3674
|
-
customMixin$
|
|
3679
|
+
customMixin$4
|
|
3675
3680
|
)(
|
|
3676
3681
|
createProxy({
|
|
3677
3682
|
slots: [],
|
|
@@ -3742,44 +3747,44 @@ const PasscodeClass = compose(
|
|
|
3742
3747
|
${resetInputCursor('vaadin-text-field')}
|
|
3743
3748
|
`,
|
|
3744
3749
|
excludeAttrsSync: ['tabindex'],
|
|
3745
|
-
componentName: componentName$
|
|
3750
|
+
componentName: componentName$f,
|
|
3746
3751
|
})
|
|
3747
3752
|
);
|
|
3748
3753
|
|
|
3749
|
-
const vars$
|
|
3754
|
+
const vars$b = PasscodeClass.cssVarList;
|
|
3750
3755
|
|
|
3751
3756
|
const passcode = {
|
|
3752
|
-
[vars$
|
|
3753
|
-
[vars$
|
|
3754
|
-
[vars$
|
|
3755
|
-
[vars$
|
|
3756
|
-
[vars$
|
|
3757
|
-
[vars$
|
|
3758
|
-
[vars$
|
|
3759
|
-
[vars$
|
|
3760
|
-
[vars$
|
|
3761
|
-
[vars$
|
|
3762
|
-
[vars$
|
|
3763
|
-
[vars$
|
|
3764
|
-
[vars$
|
|
3765
|
-
[vars$
|
|
3757
|
+
[vars$b.fontFamily]: refs.fontFamily,
|
|
3758
|
+
[vars$b.fontSize]: refs.fontSize,
|
|
3759
|
+
[vars$b.labelTextColor]: refs.labelTextColor,
|
|
3760
|
+
[vars$b.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3761
|
+
[vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3762
|
+
[vars$b.digitValueTextColor]: refs.valueTextColor,
|
|
3763
|
+
[vars$b.digitPadding]: '0',
|
|
3764
|
+
[vars$b.digitTextAlign]: 'center',
|
|
3765
|
+
[vars$b.digitSpacing]: '4px',
|
|
3766
|
+
[vars$b.hostWidth]: refs.width,
|
|
3767
|
+
[vars$b.digitOutlineColor]: 'transparent',
|
|
3768
|
+
[vars$b.digitOutlineWidth]: refs.outlineWidth,
|
|
3769
|
+
[vars$b.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
3770
|
+
[vars$b.digitSize]: refs.inputHeight,
|
|
3766
3771
|
|
|
3767
3772
|
_hideCursor: {
|
|
3768
|
-
[vars$
|
|
3773
|
+
[vars$b.digitCaretTextColor]: 'transparent',
|
|
3769
3774
|
},
|
|
3770
3775
|
};
|
|
3771
3776
|
|
|
3772
3777
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
3773
3778
|
__proto__: null,
|
|
3774
3779
|
default: passcode,
|
|
3775
|
-
vars: vars$
|
|
3780
|
+
vars: vars$b
|
|
3776
3781
|
});
|
|
3777
3782
|
|
|
3778
|
-
const componentName$
|
|
3783
|
+
const componentName$e = getComponentName('loader-linear');
|
|
3779
3784
|
|
|
3780
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
3785
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
|
|
3781
3786
|
static get componentName() {
|
|
3782
|
-
return componentName$
|
|
3787
|
+
return componentName$e;
|
|
3783
3788
|
}
|
|
3784
3789
|
|
|
3785
3790
|
constructor() {
|
|
@@ -3815,18 +3820,18 @@ const selectors = {
|
|
|
3815
3820
|
host: { selector: () => ':host' },
|
|
3816
3821
|
};
|
|
3817
3822
|
|
|
3818
|
-
const { after, host: host$
|
|
3823
|
+
const { after, host: host$6 } = selectors;
|
|
3819
3824
|
|
|
3820
3825
|
const LoaderLinearClass = compose(
|
|
3821
3826
|
createStyleMixin({
|
|
3822
3827
|
mappings: {
|
|
3823
3828
|
hostDisplay: {},
|
|
3824
|
-
hostWidth: { ...host$
|
|
3829
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
3825
3830
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
3826
3831
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
3827
3832
|
verticalPadding: [
|
|
3828
|
-
{ ...host$
|
|
3829
|
-
{ ...host$
|
|
3833
|
+
{ ...host$6, property: 'padding-top' },
|
|
3834
|
+
{ ...host$6, property: 'padding-bottom' },
|
|
3830
3835
|
],
|
|
3831
3836
|
barBackgroundColor: { property: 'background-color' },
|
|
3832
3837
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -3840,54 +3845,54 @@ const LoaderLinearClass = compose(
|
|
|
3840
3845
|
componentNameValidationMixin
|
|
3841
3846
|
)(RawLoaderLinear);
|
|
3842
3847
|
|
|
3843
|
-
const globalRefs$
|
|
3844
|
-
const vars$
|
|
3848
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
3849
|
+
const vars$a = LoaderLinearClass.cssVarList;
|
|
3845
3850
|
|
|
3846
3851
|
const loaderLinear = {
|
|
3847
|
-
[vars$
|
|
3848
|
-
[vars$
|
|
3852
|
+
[vars$a.hostDisplay]: 'inline-block',
|
|
3853
|
+
[vars$a.hostWidth]: '100%',
|
|
3849
3854
|
|
|
3850
|
-
[vars$
|
|
3851
|
-
[vars$
|
|
3855
|
+
[vars$a.barColor]: globalRefs$4.colors.surface.contrast,
|
|
3856
|
+
[vars$a.barWidth]: '20%',
|
|
3852
3857
|
|
|
3853
|
-
[vars$
|
|
3854
|
-
[vars$
|
|
3858
|
+
[vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
|
3859
|
+
[vars$a.barBorderRadius]: '4px',
|
|
3855
3860
|
|
|
3856
|
-
[vars$
|
|
3857
|
-
[vars$
|
|
3858
|
-
[vars$
|
|
3859
|
-
[vars$
|
|
3861
|
+
[vars$a.animationDuration]: '2s',
|
|
3862
|
+
[vars$a.animationTimingFunction]: 'linear',
|
|
3863
|
+
[vars$a.animationIterationCount]: 'infinite',
|
|
3864
|
+
[vars$a.verticalPadding]: '0.25em',
|
|
3860
3865
|
|
|
3861
3866
|
size: {
|
|
3862
|
-
xs: { [vars$
|
|
3863
|
-
sm: { [vars$
|
|
3864
|
-
md: { [vars$
|
|
3865
|
-
lg: { [vars$
|
|
3867
|
+
xs: { [vars$a.barHeight]: '2px' },
|
|
3868
|
+
sm: { [vars$a.barHeight]: '4px' },
|
|
3869
|
+
md: { [vars$a.barHeight]: '6px' },
|
|
3870
|
+
lg: { [vars$a.barHeight]: '8px' },
|
|
3866
3871
|
},
|
|
3867
3872
|
|
|
3868
3873
|
mode: {
|
|
3869
3874
|
primary: {
|
|
3870
|
-
[vars$
|
|
3875
|
+
[vars$a.barColor]: globalRefs$4.colors.primary.main,
|
|
3871
3876
|
},
|
|
3872
3877
|
secondary: {
|
|
3873
|
-
[vars$
|
|
3878
|
+
[vars$a.barColor]: globalRefs$4.colors.secondary.main,
|
|
3874
3879
|
},
|
|
3875
3880
|
},
|
|
3876
3881
|
|
|
3877
3882
|
_hidden: {
|
|
3878
|
-
[vars$
|
|
3883
|
+
[vars$a.hostDisplay]: 'none',
|
|
3879
3884
|
},
|
|
3880
3885
|
};
|
|
3881
3886
|
|
|
3882
3887
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
3883
3888
|
__proto__: null,
|
|
3884
3889
|
default: loaderLinear,
|
|
3885
|
-
vars: vars$
|
|
3890
|
+
vars: vars$a
|
|
3886
3891
|
});
|
|
3887
3892
|
|
|
3888
|
-
const componentName$
|
|
3893
|
+
const componentName$d = getComponentName('loader-radial');
|
|
3889
3894
|
|
|
3890
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
3895
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
|
|
3891
3896
|
constructor() {
|
|
3892
3897
|
super();
|
|
3893
3898
|
|
|
@@ -3931,22 +3936,22 @@ const LoaderRadialClass = compose(
|
|
|
3931
3936
|
componentNameValidationMixin
|
|
3932
3937
|
)(RawLoaderRadial);
|
|
3933
3938
|
|
|
3934
|
-
const globalRefs$
|
|
3939
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
3935
3940
|
const compVars = LoaderRadialClass.cssVarList;
|
|
3936
3941
|
|
|
3937
3942
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
3938
3943
|
{
|
|
3939
|
-
spinnerColor: globalRefs$
|
|
3944
|
+
spinnerColor: globalRefs$3.colors.surface.contrast,
|
|
3940
3945
|
mode: {
|
|
3941
3946
|
primary: {
|
|
3942
|
-
spinnerColor: globalRefs$
|
|
3947
|
+
spinnerColor: globalRefs$3.colors.primary.main,
|
|
3943
3948
|
},
|
|
3944
3949
|
secondary: {
|
|
3945
|
-
spinnerColor: globalRefs$
|
|
3950
|
+
spinnerColor: globalRefs$3.colors.secondary.main,
|
|
3946
3951
|
},
|
|
3947
3952
|
},
|
|
3948
3953
|
},
|
|
3949
|
-
componentName$
|
|
3954
|
+
componentName$d
|
|
3950
3955
|
);
|
|
3951
3956
|
|
|
3952
3957
|
const loaderRadial = {
|
|
@@ -3975,7 +3980,7 @@ const loaderRadial = {
|
|
|
3975
3980
|
[compVars.hostDisplay]: 'none',
|
|
3976
3981
|
},
|
|
3977
3982
|
};
|
|
3978
|
-
const vars$
|
|
3983
|
+
const vars$9 = {
|
|
3979
3984
|
...compVars,
|
|
3980
3985
|
...helperVars,
|
|
3981
3986
|
};
|
|
@@ -3983,10 +3988,10 @@ const vars$7 = {
|
|
|
3983
3988
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
3984
3989
|
__proto__: null,
|
|
3985
3990
|
default: loaderRadial,
|
|
3986
|
-
vars: vars$
|
|
3991
|
+
vars: vars$9
|
|
3987
3992
|
});
|
|
3988
3993
|
|
|
3989
|
-
const componentName$
|
|
3994
|
+
const componentName$c = getComponentName('combo-box');
|
|
3990
3995
|
|
|
3991
3996
|
const ComboBoxMixin = (superclass) =>
|
|
3992
3997
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -4038,15 +4043,15 @@ const ComboBoxMixin = (superclass) =>
|
|
|
4038
4043
|
};
|
|
4039
4044
|
|
|
4040
4045
|
const {
|
|
4041
|
-
host: host$
|
|
4046
|
+
host: host$5,
|
|
4042
4047
|
inputField: inputField$2,
|
|
4043
4048
|
inputElement,
|
|
4044
4049
|
placeholder,
|
|
4045
4050
|
toggle,
|
|
4046
|
-
label: label$
|
|
4047
|
-
requiredIndicator: requiredIndicator$
|
|
4051
|
+
label: label$4,
|
|
4052
|
+
requiredIndicator: requiredIndicator$4,
|
|
4048
4053
|
helperText: helperText$3,
|
|
4049
|
-
errorMessage: errorMessage$
|
|
4054
|
+
errorMessage: errorMessage$4,
|
|
4050
4055
|
} = {
|
|
4051
4056
|
host: { selector: () => ':host' },
|
|
4052
4057
|
inputField: { selector: '::part(input-field)' },
|
|
@@ -4067,22 +4072,22 @@ const {
|
|
|
4067
4072
|
const ComboBoxClass = compose(
|
|
4068
4073
|
createStyleMixin({
|
|
4069
4074
|
mappings: {
|
|
4070
|
-
hostWidth: { ...host$
|
|
4075
|
+
hostWidth: { ...host$5, property: 'width' },
|
|
4071
4076
|
// we apply font-size also on the host so we can set its width with em
|
|
4072
|
-
fontSize: [{}, host$
|
|
4073
|
-
fontFamily: [label$
|
|
4077
|
+
fontSize: [{}, host$5],
|
|
4078
|
+
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
|
4074
4079
|
labelTextColor: [
|
|
4075
|
-
{ ...label$
|
|
4076
|
-
{ ...requiredIndicator$
|
|
4080
|
+
{ ...label$4, property: 'color' },
|
|
4081
|
+
{ ...requiredIndicator$4, property: 'color' },
|
|
4077
4082
|
],
|
|
4078
|
-
errorMessageTextColor: { ...errorMessage$
|
|
4083
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
|
4079
4084
|
inputHeight: { ...inputField$2, property: 'height' },
|
|
4080
4085
|
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
|
4081
4086
|
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
|
4082
4087
|
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
|
4083
4088
|
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
|
4084
4089
|
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
|
4085
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
4090
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
|
4086
4091
|
inputValueTextColor: { ...inputField$2, property: 'color' },
|
|
4087
4092
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
|
4088
4093
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
|
@@ -4130,7 +4135,7 @@ const ComboBoxClass = compose(
|
|
|
4130
4135
|
ComboBoxMixin
|
|
4131
4136
|
)(
|
|
4132
4137
|
createProxy({
|
|
4133
|
-
slots: ['prefix'],
|
|
4138
|
+
slots: ['', 'prefix'],
|
|
4134
4139
|
wrappedEleName: 'vaadin-combo-box',
|
|
4135
4140
|
style: () => `
|
|
4136
4141
|
:host {
|
|
@@ -4166,45 +4171,45 @@ const ComboBoxClass = compose(
|
|
|
4166
4171
|
// and reset items to an empty array, and opening the list box with no items
|
|
4167
4172
|
// to display.
|
|
4168
4173
|
excludeAttrsSync: ['tabindex', 'size'],
|
|
4169
|
-
componentName: componentName$
|
|
4174
|
+
componentName: componentName$c,
|
|
4170
4175
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
4171
4176
|
})
|
|
4172
4177
|
);
|
|
4173
4178
|
|
|
4174
|
-
const globalRefs = getThemeRefs(globals);
|
|
4175
|
-
const vars$
|
|
4179
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
4180
|
+
const vars$8 = ComboBoxClass.cssVarList;
|
|
4176
4181
|
|
|
4177
4182
|
const comboBox = {
|
|
4178
|
-
[vars$
|
|
4179
|
-
[vars$
|
|
4180
|
-
[vars$
|
|
4181
|
-
[vars$
|
|
4182
|
-
[vars$
|
|
4183
|
-
[vars$
|
|
4184
|
-
[vars$
|
|
4185
|
-
[vars$
|
|
4186
|
-
[vars$
|
|
4187
|
-
[vars$
|
|
4188
|
-
[vars$
|
|
4189
|
-
[vars$
|
|
4190
|
-
[vars$
|
|
4191
|
-
[vars$
|
|
4192
|
-
[vars$
|
|
4193
|
-
[vars$
|
|
4194
|
-
[vars$
|
|
4195
|
-
[vars$
|
|
4196
|
-
[vars$
|
|
4197
|
-
[vars$
|
|
4198
|
-
[vars$
|
|
4199
|
-
[vars$
|
|
4200
|
-
[vars$
|
|
4183
|
+
[vars$8.hostWidth]: refs.width,
|
|
4184
|
+
[vars$8.fontSize]: refs.fontSize,
|
|
4185
|
+
[vars$8.fontFamily]: refs.fontFamily,
|
|
4186
|
+
[vars$8.labelTextColor]: refs.labelTextColor,
|
|
4187
|
+
[vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4188
|
+
[vars$8.inputBorderColor]: refs.borderColor,
|
|
4189
|
+
[vars$8.inputBorderWidth]: refs.borderWidth,
|
|
4190
|
+
[vars$8.inputBorderStyle]: refs.borderStyle,
|
|
4191
|
+
[vars$8.inputBorderRadius]: refs.borderRadius,
|
|
4192
|
+
[vars$8.inputOutlineColor]: refs.outlineColor,
|
|
4193
|
+
[vars$8.inputOutlineOffset]: refs.outlineOffset,
|
|
4194
|
+
[vars$8.inputOutlineWidth]: refs.outlineWidth,
|
|
4195
|
+
[vars$8.inputOutlineStyle]: refs.outlineStyle,
|
|
4196
|
+
[vars$8.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4197
|
+
[vars$8.inputValueTextColor]: refs.valueTextColor,
|
|
4198
|
+
[vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
4199
|
+
[vars$8.inputBackgroundColor]: refs.backgroundColor,
|
|
4200
|
+
[vars$8.inputHorizontalPadding]: refs.horizontalPadding,
|
|
4201
|
+
[vars$8.inputHeight]: refs.inputHeight,
|
|
4202
|
+
[vars$8.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
|
|
4203
|
+
[vars$8.inputDropdownButtonCursor]: 'pointer',
|
|
4204
|
+
[vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
4205
|
+
[vars$8.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
|
|
4201
4206
|
|
|
4202
4207
|
_readonly: {
|
|
4203
|
-
[vars$
|
|
4208
|
+
[vars$8.inputDropdownButtonCursor]: 'default',
|
|
4204
4209
|
},
|
|
4205
4210
|
|
|
4206
|
-
[vars$
|
|
4207
|
-
[vars$
|
|
4211
|
+
[vars$8.overlay.minHeight]: '400px',
|
|
4212
|
+
[vars$8.overlay.margin]: '0 auto',
|
|
4208
4213
|
|
|
4209
4214
|
// [vars.overlayCursor]: 'pointer',
|
|
4210
4215
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
|
@@ -4215,14 +4220,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
|
4215
4220
|
__proto__: null,
|
|
4216
4221
|
comboBox: comboBox,
|
|
4217
4222
|
default: comboBox,
|
|
4218
|
-
vars: vars$
|
|
4223
|
+
vars: vars$8
|
|
4219
4224
|
});
|
|
4220
4225
|
|
|
4221
4226
|
const observedAttributes$2 = ['src', 'alt'];
|
|
4222
4227
|
|
|
4223
|
-
const componentName$
|
|
4228
|
+
const componentName$b = getComponentName('image');
|
|
4224
4229
|
|
|
4225
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
4230
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$b, baseSelector: ':host > img' });
|
|
4226
4231
|
class RawImage extends BaseClass$1 {
|
|
4227
4232
|
static get observedAttributes() {
|
|
4228
4233
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -4262,14 +4267,14 @@ const ImageClass = compose(
|
|
|
4262
4267
|
draggableMixin
|
|
4263
4268
|
)(RawImage);
|
|
4264
4269
|
|
|
4265
|
-
const vars$
|
|
4270
|
+
const vars$7 = ImageClass.cssVarList;
|
|
4266
4271
|
|
|
4267
4272
|
const image = {};
|
|
4268
4273
|
|
|
4269
4274
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
4270
4275
|
__proto__: null,
|
|
4271
4276
|
default: image,
|
|
4272
|
-
vars: vars$
|
|
4277
|
+
vars: vars$7
|
|
4273
4278
|
});
|
|
4274
4279
|
|
|
4275
4280
|
var CountryCodes = [
|
|
@@ -5485,16 +5490,16 @@ var CountryCodes = [
|
|
|
5485
5490
|
},
|
|
5486
5491
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
|
5487
5492
|
|
|
5488
|
-
const componentName$
|
|
5493
|
+
const componentName$a = getComponentName('phone-field-internal');
|
|
5489
5494
|
|
|
5490
|
-
createBaseInputClass({ componentName: componentName$
|
|
5495
|
+
createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
|
|
5491
5496
|
|
|
5492
5497
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
5493
5498
|
const comboVars = ComboBoxClass.cssVarList;
|
|
5494
5499
|
|
|
5495
|
-
const componentName$
|
|
5500
|
+
const componentName$9 = getComponentName('phone-field');
|
|
5496
5501
|
|
|
5497
|
-
const customMixin$
|
|
5502
|
+
const customMixin$3 = (superclass) =>
|
|
5498
5503
|
class PhoneFieldMixinClass extends superclass {
|
|
5499
5504
|
static get CountryCodes() {
|
|
5500
5505
|
return CountryCodes;
|
|
@@ -5506,15 +5511,15 @@ const customMixin$2 = (superclass) =>
|
|
|
5506
5511
|
const template = document.createElement('template');
|
|
5507
5512
|
|
|
5508
5513
|
template.innerHTML = `
|
|
5509
|
-
<${componentName$
|
|
5514
|
+
<${componentName$a}
|
|
5510
5515
|
tabindex="-1"
|
|
5511
5516
|
slot="input"
|
|
5512
|
-
></${componentName$
|
|
5517
|
+
></${componentName$a}>
|
|
5513
5518
|
`;
|
|
5514
5519
|
|
|
5515
5520
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5516
5521
|
|
|
5517
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5522
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
|
5518
5523
|
|
|
5519
5524
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5520
5525
|
includeAttrs: [
|
|
@@ -5534,14 +5539,14 @@ const customMixin$2 = (superclass) =>
|
|
|
5534
5539
|
};
|
|
5535
5540
|
|
|
5536
5541
|
const {
|
|
5537
|
-
host: host$
|
|
5538
|
-
label: label$
|
|
5539
|
-
requiredIndicator: requiredIndicator$
|
|
5542
|
+
host: host$4,
|
|
5543
|
+
label: label$3,
|
|
5544
|
+
requiredIndicator: requiredIndicator$3,
|
|
5540
5545
|
inputField: inputField$1,
|
|
5541
5546
|
countryCodeInput,
|
|
5542
5547
|
phoneInput: phoneInput$1,
|
|
5543
5548
|
separator,
|
|
5544
|
-
errorMessage: errorMessage$
|
|
5549
|
+
errorMessage: errorMessage$3,
|
|
5545
5550
|
helperText: helperText$2,
|
|
5546
5551
|
} = {
|
|
5547
5552
|
host: { selector: () => ':host' },
|
|
@@ -5559,7 +5564,7 @@ const PhoneFieldClass = compose(
|
|
|
5559
5564
|
createStyleMixin({
|
|
5560
5565
|
mappings: {
|
|
5561
5566
|
fontSize: [
|
|
5562
|
-
host$
|
|
5567
|
+
host$4,
|
|
5563
5568
|
inputField$1,
|
|
5564
5569
|
{
|
|
5565
5570
|
selector: TextFieldClass.componentName,
|
|
@@ -5571,8 +5576,8 @@ const PhoneFieldClass = compose(
|
|
|
5571
5576
|
},
|
|
5572
5577
|
],
|
|
5573
5578
|
fontFamily: [
|
|
5574
|
-
label$
|
|
5575
|
-
errorMessage$
|
|
5579
|
+
label$3,
|
|
5580
|
+
errorMessage$3,
|
|
5576
5581
|
helperText$2,
|
|
5577
5582
|
{
|
|
5578
5583
|
...countryCodeInput,
|
|
@@ -5580,7 +5585,7 @@ const PhoneFieldClass = compose(
|
|
|
5580
5585
|
},
|
|
5581
5586
|
],
|
|
5582
5587
|
hostWidth: [
|
|
5583
|
-
{ ...host$
|
|
5588
|
+
{ ...host$4, property: 'width' },
|
|
5584
5589
|
{ ...phoneInput$1, property: 'width' },
|
|
5585
5590
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
5586
5591
|
],
|
|
@@ -5607,11 +5612,11 @@ const PhoneFieldClass = compose(
|
|
|
5607
5612
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
|
5608
5613
|
|
|
5609
5614
|
labelTextColor: [
|
|
5610
|
-
{ ...label$
|
|
5611
|
-
{ ...requiredIndicator$
|
|
5615
|
+
{ ...label$3, property: 'color' },
|
|
5616
|
+
{ ...requiredIndicator$3, property: 'color' },
|
|
5612
5617
|
],
|
|
5613
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
5614
|
-
errorMessageTextColor: { ...errorMessage$
|
|
5618
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
|
5619
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
5615
5620
|
|
|
5616
5621
|
inputValueTextColor: [
|
|
5617
5622
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
|
@@ -5633,7 +5638,7 @@ const PhoneFieldClass = compose(
|
|
|
5633
5638
|
}),
|
|
5634
5639
|
draggableMixin,
|
|
5635
5640
|
composedProxyInputMixin,
|
|
5636
|
-
customMixin$
|
|
5641
|
+
customMixin$3
|
|
5637
5642
|
)(
|
|
5638
5643
|
createProxy({
|
|
5639
5644
|
slots: [],
|
|
@@ -5709,32 +5714,32 @@ const PhoneFieldClass = compose(
|
|
|
5709
5714
|
}
|
|
5710
5715
|
`,
|
|
5711
5716
|
excludeAttrsSync: ['tabindex'],
|
|
5712
|
-
componentName: componentName$
|
|
5717
|
+
componentName: componentName$9,
|
|
5713
5718
|
})
|
|
5714
5719
|
);
|
|
5715
5720
|
|
|
5716
|
-
const vars$
|
|
5721
|
+
const vars$6 = PhoneFieldClass.cssVarList;
|
|
5717
5722
|
|
|
5718
5723
|
const phoneField = {
|
|
5719
|
-
[vars$
|
|
5720
|
-
[vars$
|
|
5721
|
-
[vars$
|
|
5722
|
-
[vars$
|
|
5723
|
-
[vars$
|
|
5724
|
-
[vars$
|
|
5725
|
-
[vars$
|
|
5726
|
-
[vars$
|
|
5727
|
-
[vars$
|
|
5728
|
-
[vars$
|
|
5729
|
-
[vars$
|
|
5730
|
-
[vars$
|
|
5731
|
-
[vars$
|
|
5732
|
-
[vars$
|
|
5733
|
-
[vars$
|
|
5734
|
-
[vars$
|
|
5735
|
-
[vars$
|
|
5736
|
-
[vars$
|
|
5737
|
-
[vars$
|
|
5724
|
+
[vars$6.hostWidth]: refs.width,
|
|
5725
|
+
[vars$6.fontSize]: refs.fontSize,
|
|
5726
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
|
5727
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
|
5728
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5729
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5730
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
|
5731
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5732
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
|
5733
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
|
5734
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
|
5735
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
|
5736
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
|
5737
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
|
5738
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
|
5739
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
|
5740
|
+
[vars$6.phoneInputWidth]: refs.minWidth,
|
|
5741
|
+
[vars$6.countryCodeInputWidth]: '5em',
|
|
5742
|
+
[vars$6.countryCodeDropdownWidth]: '20em',
|
|
5738
5743
|
|
|
5739
5744
|
// '@overlay': {
|
|
5740
5745
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -5744,18 +5749,18 @@ const phoneField = {
|
|
|
5744
5749
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
5745
5750
|
__proto__: null,
|
|
5746
5751
|
default: phoneField,
|
|
5747
|
-
vars: vars$
|
|
5752
|
+
vars: vars$6
|
|
5748
5753
|
});
|
|
5749
5754
|
|
|
5750
|
-
const componentName$
|
|
5755
|
+
const componentName$8 = getComponentName('phone-field-internal-input-box');
|
|
5751
5756
|
|
|
5752
|
-
createBaseInputClass({ componentName: componentName$
|
|
5757
|
+
createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
|
|
5753
5758
|
|
|
5754
5759
|
const textVars = TextFieldClass.cssVarList;
|
|
5755
5760
|
|
|
5756
|
-
const componentName$
|
|
5761
|
+
const componentName$7 = getComponentName('phone-input-box-field');
|
|
5757
5762
|
|
|
5758
|
-
const customMixin$
|
|
5763
|
+
const customMixin$2 = (superclass) =>
|
|
5759
5764
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
5760
5765
|
static get CountryCodes() {
|
|
5761
5766
|
return CountryCodes;
|
|
@@ -5767,15 +5772,15 @@ const customMixin$1 = (superclass) =>
|
|
|
5767
5772
|
const template = document.createElement('template');
|
|
5768
5773
|
|
|
5769
5774
|
template.innerHTML = `
|
|
5770
|
-
<${componentName$
|
|
5775
|
+
<${componentName$8}
|
|
5771
5776
|
tabindex="-1"
|
|
5772
5777
|
slot="input"
|
|
5773
|
-
></${componentName$
|
|
5778
|
+
></${componentName$8}>
|
|
5774
5779
|
`;
|
|
5775
5780
|
|
|
5776
5781
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5777
5782
|
|
|
5778
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5783
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
|
5779
5784
|
|
|
5780
5785
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5781
5786
|
includeAttrs: [
|
|
@@ -5792,7 +5797,7 @@ const customMixin$1 = (superclass) =>
|
|
|
5792
5797
|
}
|
|
5793
5798
|
};
|
|
5794
5799
|
|
|
5795
|
-
const { host: host$
|
|
5800
|
+
const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
|
5796
5801
|
host: { selector: () => ':host' },
|
|
5797
5802
|
label: { selector: '::part(label)' },
|
|
5798
5803
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -5806,16 +5811,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5806
5811
|
createStyleMixin({
|
|
5807
5812
|
mappings: {
|
|
5808
5813
|
fontSize: [
|
|
5809
|
-
host$
|
|
5814
|
+
host$3,
|
|
5810
5815
|
inputField,
|
|
5811
5816
|
{
|
|
5812
5817
|
selector: TextFieldClass.componentName,
|
|
5813
5818
|
property: TextFieldClass.cssVarList.fontSize,
|
|
5814
5819
|
},
|
|
5815
5820
|
],
|
|
5816
|
-
fontFamily: [label$
|
|
5817
|
-
hostWidth: { ...host$
|
|
5818
|
-
hostMinWidth: { ...host$
|
|
5821
|
+
fontFamily: [label$2, errorMessage$2, helperText$1],
|
|
5822
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
5823
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
|
5819
5824
|
|
|
5820
5825
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
|
5821
5826
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
|
@@ -5823,11 +5828,11 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5823
5828
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
|
5824
5829
|
|
|
5825
5830
|
labelTextColor: [
|
|
5826
|
-
{ ...label$
|
|
5827
|
-
{ ...requiredIndicator$
|
|
5831
|
+
{ ...label$2, property: 'color' },
|
|
5832
|
+
{ ...requiredIndicator$2, property: 'color' },
|
|
5828
5833
|
],
|
|
5829
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
5830
|
-
errorMessageTextColor: { ...errorMessage$
|
|
5834
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
|
5835
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
|
5831
5836
|
|
|
5832
5837
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
|
5833
5838
|
|
|
@@ -5841,7 +5846,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5841
5846
|
}),
|
|
5842
5847
|
draggableMixin,
|
|
5843
5848
|
composedProxyInputMixin,
|
|
5844
|
-
customMixin$
|
|
5849
|
+
customMixin$2
|
|
5845
5850
|
)(
|
|
5846
5851
|
createProxy({
|
|
5847
5852
|
slots: [],
|
|
@@ -5907,46 +5912,46 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5907
5912
|
}
|
|
5908
5913
|
`,
|
|
5909
5914
|
excludeAttrsSync: ['tabindex'],
|
|
5910
|
-
componentName: componentName$
|
|
5915
|
+
componentName: componentName$7,
|
|
5911
5916
|
})
|
|
5912
5917
|
);
|
|
5913
5918
|
|
|
5914
|
-
const vars$
|
|
5919
|
+
const vars$5 = PhoneFieldInputBoxClass.cssVarList;
|
|
5915
5920
|
|
|
5916
5921
|
const phoneInputBoxField = {
|
|
5917
|
-
[vars$
|
|
5918
|
-
[vars$
|
|
5919
|
-
[vars$
|
|
5920
|
-
[vars$
|
|
5921
|
-
[vars$
|
|
5922
|
-
[vars$
|
|
5923
|
-
[vars$
|
|
5924
|
-
[vars$
|
|
5925
|
-
[vars$
|
|
5926
|
-
[vars$
|
|
5927
|
-
[vars$
|
|
5928
|
-
[vars$
|
|
5929
|
-
[vars$
|
|
5930
|
-
[vars$
|
|
5931
|
-
[vars$
|
|
5932
|
-
[vars$
|
|
5933
|
-
[vars$
|
|
5922
|
+
[vars$5.hostWidth]: '16em',
|
|
5923
|
+
[vars$5.hostMinWidth]: refs.minWidth,
|
|
5924
|
+
[vars$5.fontSize]: refs.fontSize,
|
|
5925
|
+
[vars$5.fontFamily]: refs.fontFamily,
|
|
5926
|
+
[vars$5.labelTextColor]: refs.labelTextColor,
|
|
5927
|
+
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5928
|
+
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5929
|
+
[vars$5.inputValueTextColor]: refs.valueTextColor,
|
|
5930
|
+
[vars$5.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5931
|
+
[vars$5.inputBorderStyle]: refs.borderStyle,
|
|
5932
|
+
[vars$5.inputBorderWidth]: refs.borderWidth,
|
|
5933
|
+
[vars$5.inputBorderColor]: refs.borderColor,
|
|
5934
|
+
[vars$5.inputBorderRadius]: refs.borderRadius,
|
|
5935
|
+
[vars$5.inputOutlineStyle]: refs.outlineStyle,
|
|
5936
|
+
[vars$5.inputOutlineWidth]: refs.outlineWidth,
|
|
5937
|
+
[vars$5.inputOutlineColor]: refs.outlineColor,
|
|
5938
|
+
[vars$5.inputOutlineOffset]: refs.outlineOffset,
|
|
5934
5939
|
_fullWidth: {
|
|
5935
|
-
[vars$
|
|
5940
|
+
[vars$5.hostWidth]: refs.width,
|
|
5936
5941
|
},
|
|
5937
5942
|
};
|
|
5938
5943
|
|
|
5939
5944
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
5940
5945
|
__proto__: null,
|
|
5941
5946
|
default: phoneInputBoxField,
|
|
5942
|
-
vars: vars$
|
|
5947
|
+
vars: vars$5
|
|
5943
5948
|
});
|
|
5944
5949
|
|
|
5945
|
-
const componentName$
|
|
5950
|
+
const componentName$6 = getComponentName('new-password-internal');
|
|
5946
5951
|
|
|
5947
|
-
const componentName$
|
|
5952
|
+
const componentName$5 = getComponentName('new-password');
|
|
5948
5953
|
|
|
5949
|
-
const customMixin = (superclass) =>
|
|
5954
|
+
const customMixin$1 = (superclass) =>
|
|
5950
5955
|
class NewPasswordMixinClass extends superclass {
|
|
5951
5956
|
init() {
|
|
5952
5957
|
super.init?.();
|
|
@@ -5954,16 +5959,16 @@ const customMixin = (superclass) =>
|
|
|
5954
5959
|
const template = document.createElement('template');
|
|
5955
5960
|
|
|
5956
5961
|
template.innerHTML = `
|
|
5957
|
-
<${componentName$
|
|
5962
|
+
<${componentName$6}
|
|
5958
5963
|
name="new-password"
|
|
5959
5964
|
tabindex="-1"
|
|
5960
5965
|
slot="input"
|
|
5961
|
-
></${componentName$
|
|
5966
|
+
></${componentName$6}>
|
|
5962
5967
|
`;
|
|
5963
5968
|
|
|
5964
5969
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5965
5970
|
|
|
5966
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5971
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
|
5967
5972
|
|
|
5968
5973
|
forwardAttrs(this, this.inputElement, {
|
|
5969
5974
|
includeAttrs: [
|
|
@@ -5984,7 +5989,7 @@ const customMixin = (superclass) =>
|
|
|
5984
5989
|
}
|
|
5985
5990
|
};
|
|
5986
5991
|
|
|
5987
|
-
const { host: host$
|
|
5992
|
+
const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
|
5988
5993
|
host: { selector: () => ':host' },
|
|
5989
5994
|
label: { selector: '::part(label)' },
|
|
5990
5995
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
@@ -5996,24 +6001,24 @@ const NewPasswordClass = compose(
|
|
|
5996
6001
|
createStyleMixin({
|
|
5997
6002
|
mappings: {
|
|
5998
6003
|
fontSize: [
|
|
5999
|
-
host$
|
|
6004
|
+
host$2,
|
|
6000
6005
|
{},
|
|
6001
6006
|
{
|
|
6002
6007
|
selector: PasswordClass.componentName,
|
|
6003
6008
|
property: PasswordClass.cssVarList.fontSize,
|
|
6004
6009
|
},
|
|
6005
6010
|
],
|
|
6006
|
-
fontFamily: [label, errorMessage, helperText],
|
|
6007
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
6008
|
-
hostWidth: { ...host$
|
|
6009
|
-
hostMinWidth: { ...host$
|
|
6010
|
-
inputsRequiredIndicator: { ...host$
|
|
6011
|
+
fontFamily: [label$1, errorMessage$1, helperText],
|
|
6012
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
|
6013
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
6014
|
+
hostMinWidth: { ...host$2, property: 'min-width' },
|
|
6015
|
+
inputsRequiredIndicator: { ...host$2, property: 'content' },
|
|
6011
6016
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
6012
6017
|
},
|
|
6013
6018
|
}),
|
|
6014
6019
|
draggableMixin,
|
|
6015
6020
|
composedProxyInputMixin,
|
|
6016
|
-
customMixin
|
|
6021
|
+
customMixin$1
|
|
6017
6022
|
)(
|
|
6018
6023
|
createProxy({
|
|
6019
6024
|
slots: [],
|
|
@@ -6062,32 +6067,32 @@ const NewPasswordClass = compose(
|
|
|
6062
6067
|
},
|
|
6063
6068
|
`,
|
|
6064
6069
|
excludeAttrsSync: ['tabindex'],
|
|
6065
|
-
componentName: componentName$
|
|
6070
|
+
componentName: componentName$5,
|
|
6066
6071
|
})
|
|
6067
6072
|
);
|
|
6068
6073
|
|
|
6069
|
-
const vars$
|
|
6074
|
+
const vars$4 = NewPasswordClass.cssVarList;
|
|
6070
6075
|
|
|
6071
6076
|
const newPassword = {
|
|
6072
|
-
[vars$
|
|
6073
|
-
[vars$
|
|
6074
|
-
[vars$
|
|
6075
|
-
[vars$
|
|
6076
|
-
[vars$
|
|
6077
|
-
[vars$
|
|
6077
|
+
[vars$4.hostWidth]: refs.width,
|
|
6078
|
+
[vars$4.hostMinWidth]: refs.minWidth,
|
|
6079
|
+
[vars$4.fontSize]: refs.fontSize,
|
|
6080
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
|
6081
|
+
[vars$4.spaceBetweenInputs]: '1em',
|
|
6082
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
6078
6083
|
|
|
6079
6084
|
_required: {
|
|
6080
6085
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
6081
6086
|
// That's why we fake the required indicator on each input.
|
|
6082
6087
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
6083
|
-
[vars$
|
|
6088
|
+
[vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
6084
6089
|
},
|
|
6085
6090
|
};
|
|
6086
6091
|
|
|
6087
6092
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
6088
6093
|
__proto__: null,
|
|
6089
6094
|
default: newPassword,
|
|
6090
|
-
vars: vars$
|
|
6095
|
+
vars: vars$4
|
|
6091
6096
|
});
|
|
6092
6097
|
|
|
6093
6098
|
const getFileBase64 = (fileObj) => {
|
|
@@ -6102,7 +6107,7 @@ const getFilename = (fileObj) => {
|
|
|
6102
6107
|
return fileObj.name.replace(/^.*\\/, '');
|
|
6103
6108
|
};
|
|
6104
6109
|
|
|
6105
|
-
const componentName$
|
|
6110
|
+
const componentName$4 = getComponentName('upload-file');
|
|
6106
6111
|
|
|
6107
6112
|
const observedAttributes$1 = [
|
|
6108
6113
|
'title',
|
|
@@ -6117,7 +6122,7 @@ const observedAttributes$1 = [
|
|
|
6117
6122
|
'icon',
|
|
6118
6123
|
];
|
|
6119
6124
|
|
|
6120
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
6125
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
|
|
6121
6126
|
|
|
6122
6127
|
class RawUploadFile extends BaseInputClass {
|
|
6123
6128
|
static get observedAttributes() {
|
|
@@ -6279,7 +6284,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
6279
6284
|
}
|
|
6280
6285
|
}
|
|
6281
6286
|
|
|
6282
|
-
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
|
6287
|
+
const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
|
6283
6288
|
host: { selector: () => ':host' },
|
|
6284
6289
|
wrapper: { selector: () => ':host > div' },
|
|
6285
6290
|
icon: { selector: () => '.icon' },
|
|
@@ -6298,8 +6303,8 @@ const UploadFileClass = compose(
|
|
|
6298
6303
|
borderWidth: {},
|
|
6299
6304
|
borderStyle: {},
|
|
6300
6305
|
borderRadius: {},
|
|
6301
|
-
hostHeight: { ...host, property: 'height' },
|
|
6302
|
-
hostWidth: { ...host, property: 'width' },
|
|
6306
|
+
hostHeight: { ...host$1, property: 'height' },
|
|
6307
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
6303
6308
|
hostPadding: { property: 'padding' },
|
|
6304
6309
|
gap: { ...wrapper },
|
|
6305
6310
|
lineHeight: { ...wrapper, property: 'line-height' },
|
|
@@ -6311,76 +6316,461 @@ const UploadFileClass = compose(
|
|
|
6311
6316
|
{ ...description, property: 'color' },
|
|
6312
6317
|
],
|
|
6313
6318
|
iconSize: { ...icon, property: 'width' },
|
|
6314
|
-
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
6319
|
+
requiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
|
6315
6320
|
},
|
|
6316
6321
|
}),
|
|
6317
6322
|
draggableMixin,
|
|
6318
6323
|
componentNameValidationMixin
|
|
6319
6324
|
)(RawUploadFile);
|
|
6320
6325
|
|
|
6321
|
-
const vars$
|
|
6326
|
+
const vars$3 = UploadFileClass.cssVarList;
|
|
6322
6327
|
|
|
6323
6328
|
const uploadFile = {
|
|
6324
|
-
[vars$
|
|
6325
|
-
[vars$
|
|
6329
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
|
6330
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
|
6326
6331
|
|
|
6327
|
-
[vars$
|
|
6332
|
+
[vars$3.iconSize]: '2em',
|
|
6328
6333
|
|
|
6329
|
-
[vars$
|
|
6330
|
-
[vars$
|
|
6334
|
+
[vars$3.hostPadding]: '0.75em',
|
|
6335
|
+
[vars$3.gap]: '0.5em',
|
|
6331
6336
|
|
|
6332
|
-
[vars$
|
|
6333
|
-
[vars$
|
|
6334
|
-
[vars$
|
|
6337
|
+
[vars$3.fontSize]: '16px',
|
|
6338
|
+
[vars$3.titleFontWeight]: '500',
|
|
6339
|
+
[vars$3.lineHeight]: '1em',
|
|
6335
6340
|
|
|
6336
|
-
[vars$
|
|
6337
|
-
[vars$
|
|
6338
|
-
[vars$
|
|
6339
|
-
[vars$
|
|
6341
|
+
[vars$3.borderWidth]: refs.borderWidth,
|
|
6342
|
+
[vars$3.borderColor]: refs.borderColor,
|
|
6343
|
+
[vars$3.borderRadius]: refs.borderRadius,
|
|
6344
|
+
[vars$3.borderStyle]: 'dashed',
|
|
6340
6345
|
|
|
6341
6346
|
_required: {
|
|
6342
|
-
[vars$
|
|
6347
|
+
[vars$3.requiredIndicator]: refs.requiredIndicator,
|
|
6343
6348
|
},
|
|
6344
6349
|
|
|
6345
6350
|
size: {
|
|
6346
6351
|
xs: {
|
|
6347
|
-
[vars$
|
|
6348
|
-
[vars$
|
|
6349
|
-
[vars$
|
|
6350
|
-
[vars$
|
|
6351
|
-
[vars$
|
|
6352
|
+
[vars$3.hostHeight]: '196px',
|
|
6353
|
+
[vars$3.hostWidth]: '200px',
|
|
6354
|
+
[vars$3.titleFontSize]: '0.875em',
|
|
6355
|
+
[vars$3.descriptionFontSize]: '0.875em',
|
|
6356
|
+
[vars$3.lineHeight]: '1.25em',
|
|
6352
6357
|
},
|
|
6353
6358
|
sm: {
|
|
6354
|
-
[vars$
|
|
6355
|
-
[vars$
|
|
6356
|
-
[vars$
|
|
6357
|
-
[vars$
|
|
6358
|
-
[vars$
|
|
6359
|
+
[vars$3.hostHeight]: '216px',
|
|
6360
|
+
[vars$3.hostWidth]: '230px',
|
|
6361
|
+
[vars$3.titleFontSize]: '1em',
|
|
6362
|
+
[vars$3.descriptionFontSize]: '0.875em',
|
|
6363
|
+
[vars$3.lineHeight]: '1.25em',
|
|
6359
6364
|
},
|
|
6360
6365
|
md: {
|
|
6361
|
-
[vars$
|
|
6362
|
-
[vars$
|
|
6363
|
-
[vars$
|
|
6364
|
-
[vars$
|
|
6365
|
-
[vars$
|
|
6366
|
+
[vars$3.hostHeight]: '256px',
|
|
6367
|
+
[vars$3.hostWidth]: '312px',
|
|
6368
|
+
[vars$3.titleFontSize]: '1.125em',
|
|
6369
|
+
[vars$3.descriptionFontSize]: '1em',
|
|
6370
|
+
[vars$3.lineHeight]: '1.5em',
|
|
6366
6371
|
},
|
|
6367
6372
|
lg: {
|
|
6368
|
-
[vars$
|
|
6369
|
-
[vars$
|
|
6370
|
-
[vars$
|
|
6371
|
-
[vars$
|
|
6372
|
-
[vars$
|
|
6373
|
+
[vars$3.hostHeight]: '280px',
|
|
6374
|
+
[vars$3.hostWidth]: '336px',
|
|
6375
|
+
[vars$3.titleFontSize]: '1.125em',
|
|
6376
|
+
[vars$3.descriptionFontSize]: '1.125em',
|
|
6377
|
+
[vars$3.lineHeight]: '1.75em',
|
|
6373
6378
|
},
|
|
6374
6379
|
},
|
|
6375
6380
|
|
|
6376
6381
|
_fullWidth: {
|
|
6377
|
-
[vars$
|
|
6382
|
+
[vars$3.hostWidth]: refs.width,
|
|
6378
6383
|
},
|
|
6379
6384
|
};
|
|
6380
6385
|
|
|
6381
6386
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
6382
6387
|
__proto__: null,
|
|
6383
6388
|
default: uploadFile,
|
|
6389
|
+
vars: vars$3
|
|
6390
|
+
});
|
|
6391
|
+
|
|
6392
|
+
const componentName$3 = getComponentName('select-item');
|
|
6393
|
+
|
|
6394
|
+
class RawSelectItem extends createBaseClass({
|
|
6395
|
+
componentName: componentName$3,
|
|
6396
|
+
baseSelector: ':host > descope-button',
|
|
6397
|
+
}) {
|
|
6398
|
+
get size() {
|
|
6399
|
+
return this.getAttribute('size') || 'md';
|
|
6400
|
+
}
|
|
6401
|
+
|
|
6402
|
+
get variant() {
|
|
6403
|
+
return this.getAttribute('variant') || 'contained';
|
|
6404
|
+
}
|
|
6405
|
+
|
|
6406
|
+
get value() {
|
|
6407
|
+
return this.getAttribute('value') || '';
|
|
6408
|
+
}
|
|
6409
|
+
|
|
6410
|
+
set value(value) {
|
|
6411
|
+
this.setAttribute('value', value);
|
|
6412
|
+
}
|
|
6413
|
+
|
|
6414
|
+
constructor() {
|
|
6415
|
+
super();
|
|
6416
|
+
|
|
6417
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
|
6418
|
+
<style>
|
|
6419
|
+
descope-button {
|
|
6420
|
+
max-width: 100%;
|
|
6421
|
+
}
|
|
6422
|
+
descope-button > slot {
|
|
6423
|
+
width: 100%;
|
|
6424
|
+
overflow: hidden;
|
|
6425
|
+
text-overflow: ellipsis;
|
|
6426
|
+
display: inline-block;
|
|
6427
|
+
}
|
|
6428
|
+
:host {
|
|
6429
|
+
display: inline-block;
|
|
6430
|
+
max-width: 100%
|
|
6431
|
+
}
|
|
6432
|
+
</style>
|
|
6433
|
+
<descope-button variant="${this.variant}" size="${this.size}" mode="primary">
|
|
6434
|
+
<slot></slot>
|
|
6435
|
+
</descope-button>
|
|
6436
|
+
`;
|
|
6437
|
+
|
|
6438
|
+
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
|
6439
|
+
}
|
|
6440
|
+
|
|
6441
|
+
handleFocus() {
|
|
6442
|
+
this.shadowRoot.querySelector('descope-button')?.focus();
|
|
6443
|
+
}
|
|
6444
|
+
|
|
6445
|
+
focus() {
|
|
6446
|
+
this.handleFocus();
|
|
6447
|
+
}
|
|
6448
|
+
|
|
6449
|
+
init() {
|
|
6450
|
+
super.init();
|
|
6451
|
+
this.addEventListener('focus', (e) => {
|
|
6452
|
+
// we want to ignore focus events we are dispatching
|
|
6453
|
+
if (e.isTrusted) {
|
|
6454
|
+
this.handleFocus();
|
|
6455
|
+
}
|
|
6456
|
+
});
|
|
6457
|
+
}
|
|
6458
|
+
}
|
|
6459
|
+
|
|
6460
|
+
const SelectItemClass = compose(
|
|
6461
|
+
createStyleMixin({
|
|
6462
|
+
mappings: {
|
|
6463
|
+
backgroundColor: {
|
|
6464
|
+
selector: () => ButtonClass.componentName,
|
|
6465
|
+
property: ButtonClass.cssVarList.backgroundColor,
|
|
6466
|
+
},
|
|
6467
|
+
labelTextColor: {
|
|
6468
|
+
selector: () => ButtonClass.componentName,
|
|
6469
|
+
property: ButtonClass.cssVarList.labelTextColor,
|
|
6470
|
+
},
|
|
6471
|
+
borderColor: {
|
|
6472
|
+
selector: () => ButtonClass.componentName,
|
|
6473
|
+
property: ButtonClass.cssVarList.borderColor,
|
|
6474
|
+
},
|
|
6475
|
+
borderStyle: {
|
|
6476
|
+
selector: () => ButtonClass.componentName,
|
|
6477
|
+
property: ButtonClass.cssVarList.borderStyle,
|
|
6478
|
+
},
|
|
6479
|
+
borderRadius: {
|
|
6480
|
+
selector: () => ButtonClass.componentName,
|
|
6481
|
+
property: ButtonClass.cssVarList.borderRadius,
|
|
6482
|
+
},
|
|
6483
|
+
},
|
|
6484
|
+
}),
|
|
6485
|
+
draggableMixin,
|
|
6486
|
+
componentNameValidationMixin
|
|
6487
|
+
)(RawSelectItem);
|
|
6488
|
+
|
|
6489
|
+
const globalRefs$1 = getThemeRefs(globals);
|
|
6490
|
+
|
|
6491
|
+
const vars$2 = SelectItemClass.cssVarList;
|
|
6492
|
+
|
|
6493
|
+
const selectItem = {
|
|
6494
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.light,
|
|
6495
|
+
[vars$2.labelTextColor]: globalRefs$1.colors.surface.contrast,
|
|
6496
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.main,
|
|
6497
|
+
[vars$2.borderStyle]: 'solid',
|
|
6498
|
+
[vars$2.borderRadius]: globalRefs$1.radius.sm,
|
|
6499
|
+
|
|
6500
|
+
_hover: {
|
|
6501
|
+
[vars$2.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
|
6502
|
+
},
|
|
6503
|
+
|
|
6504
|
+
_selected: {
|
|
6505
|
+
[vars$2.borderColor]: globalRefs$1.colors.surface.contrast,
|
|
6506
|
+
[vars$2.backgroundColor]: globalRefs$1.colors.surface.contrast,
|
|
6507
|
+
[vars$2.labelTextColor]: globalRefs$1.colors.surface.light,
|
|
6508
|
+
},
|
|
6509
|
+
};
|
|
6510
|
+
|
|
6511
|
+
var selectItem$1 = /*#__PURE__*/Object.freeze({
|
|
6512
|
+
__proto__: null,
|
|
6513
|
+
default: selectItem,
|
|
6514
|
+
vars: vars$2
|
|
6515
|
+
});
|
|
6516
|
+
|
|
6517
|
+
const componentName$2 = getComponentName('single-select-internal');
|
|
6518
|
+
|
|
6519
|
+
class SingleSelectInternalClass extends createBaseInputClass({
|
|
6520
|
+
componentName: componentName$2,
|
|
6521
|
+
baseSelector: 'slot',
|
|
6522
|
+
}) {
|
|
6523
|
+
constructor() {
|
|
6524
|
+
super();
|
|
6525
|
+
|
|
6526
|
+
this.innerHTML = `
|
|
6527
|
+
<style>
|
|
6528
|
+
slot {
|
|
6529
|
+
box-sizing: border-box;
|
|
6530
|
+
width: 100%;
|
|
6531
|
+
display: flex;
|
|
6532
|
+
flex-wrap: wrap;
|
|
6533
|
+
}
|
|
6534
|
+
</style>
|
|
6535
|
+
<slot part="wrapper"></slot>
|
|
6536
|
+
`;
|
|
6537
|
+
}
|
|
6538
|
+
|
|
6539
|
+
#dispatchChange = createDispatchEvent.bind(this, 'change');
|
|
6540
|
+
|
|
6541
|
+
get items() {
|
|
6542
|
+
return this.querySelector('slot').assignedElements();
|
|
6543
|
+
}
|
|
6544
|
+
|
|
6545
|
+
get isReadonly() {
|
|
6546
|
+
return this.getAttribute('readonly') === 'true';
|
|
6547
|
+
}
|
|
6548
|
+
|
|
6549
|
+
getSelectedNode() {
|
|
6550
|
+
return this.items.find((item) => item.hasAttribute('selected'));
|
|
6551
|
+
}
|
|
6552
|
+
|
|
6553
|
+
get size() {
|
|
6554
|
+
return this.getAttribute('size') || 'md';
|
|
6555
|
+
}
|
|
6556
|
+
|
|
6557
|
+
removeSelected() {
|
|
6558
|
+
this.getSelectedNode()?.removeAttribute('selected');
|
|
6559
|
+
}
|
|
6560
|
+
|
|
6561
|
+
onNodeClick(e) {
|
|
6562
|
+
if (!this.isReadonly) {
|
|
6563
|
+
this.setSelected(e.target);
|
|
6564
|
+
this.#dispatchChange();
|
|
6565
|
+
}
|
|
6566
|
+
}
|
|
6567
|
+
|
|
6568
|
+
setSelected(node) {
|
|
6569
|
+
if (node !== this.getSelectedNode()) {
|
|
6570
|
+
this.removeSelected();
|
|
6571
|
+
node?.setAttribute('selected', 'true');
|
|
6572
|
+
}
|
|
6573
|
+
}
|
|
6574
|
+
|
|
6575
|
+
get value() {
|
|
6576
|
+
return this.getSelectedNode()?.value;
|
|
6577
|
+
}
|
|
6578
|
+
|
|
6579
|
+
set value(value) {
|
|
6580
|
+
const node = this.items.find((child) => child.value === value);
|
|
6581
|
+
this.setSelected(node);
|
|
6582
|
+
}
|
|
6583
|
+
|
|
6584
|
+
get defaultValue() {
|
|
6585
|
+
return this.getAttribute('default-value');
|
|
6586
|
+
}
|
|
6587
|
+
|
|
6588
|
+
setDefaultValue() {
|
|
6589
|
+
// we want to defer this action until all attributes are synched
|
|
6590
|
+
setTimeout(() => {
|
|
6591
|
+
if (this.defaultValue) {
|
|
6592
|
+
this.value = this.defaultValue;
|
|
6593
|
+
this.setCustomValidity();
|
|
6594
|
+
}
|
|
6595
|
+
});
|
|
6596
|
+
}
|
|
6597
|
+
|
|
6598
|
+
onSizeChange() {
|
|
6599
|
+
this.items.forEach((item) => {
|
|
6600
|
+
item.setAttribute('size', this.size);
|
|
6601
|
+
});
|
|
6602
|
+
}
|
|
6603
|
+
|
|
6604
|
+
getValidity() {
|
|
6605
|
+
if (this.isRequired && !this.value) {
|
|
6606
|
+
return { valueMissing: true };
|
|
6607
|
+
}
|
|
6608
|
+
|
|
6609
|
+
return {};
|
|
6610
|
+
}
|
|
6611
|
+
|
|
6612
|
+
onObservedAttributeChange(attrs) {
|
|
6613
|
+
attrs.forEach((attr) => {
|
|
6614
|
+
switch (attr) {
|
|
6615
|
+
case 'size':
|
|
6616
|
+
this.onSizeChange();
|
|
6617
|
+
break;
|
|
6618
|
+
}
|
|
6619
|
+
});
|
|
6620
|
+
}
|
|
6621
|
+
|
|
6622
|
+
init() {
|
|
6623
|
+
// we are adding listeners before calling to super because it's stopping the events
|
|
6624
|
+
this.addEventListener('focus', (e) => {
|
|
6625
|
+
// we want to ignore focus events we are dispatching
|
|
6626
|
+
if (e.isTrusted) {
|
|
6627
|
+
this.items[0].focus();
|
|
6628
|
+
}
|
|
6629
|
+
});
|
|
6630
|
+
|
|
6631
|
+
super.init?.();
|
|
6632
|
+
this.setDefaultValue();
|
|
6633
|
+
|
|
6634
|
+
observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
|
|
6635
|
+
|
|
6636
|
+
observeChildren(this, ({ addedNodes }) => {
|
|
6637
|
+
addedNodes.forEach((node) => {
|
|
6638
|
+
node.addEventListener('click', this.onNodeClick.bind(this));
|
|
6639
|
+
node.setAttribute('size', this.size);
|
|
6640
|
+
});
|
|
6641
|
+
});
|
|
6642
|
+
}
|
|
6643
|
+
}
|
|
6644
|
+
|
|
6645
|
+
const componentName$1 = getComponentName('single-select');
|
|
6646
|
+
|
|
6647
|
+
const customMixin = (superclass) =>
|
|
6648
|
+
class SingleSelectMixinClass extends superclass {
|
|
6649
|
+
init() {
|
|
6650
|
+
super.init?.();
|
|
6651
|
+
const template = document.createElement('template');
|
|
6652
|
+
|
|
6653
|
+
template.innerHTML = `
|
|
6654
|
+
<${componentName$2}
|
|
6655
|
+
name="single-select"
|
|
6656
|
+
slot="input"
|
|
6657
|
+
tabindex="-1"
|
|
6658
|
+
>
|
|
6659
|
+
<slot></slot>
|
|
6660
|
+
</${componentName$2}>
|
|
6661
|
+
`;
|
|
6662
|
+
|
|
6663
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
6664
|
+
|
|
6665
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$2);
|
|
6666
|
+
|
|
6667
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
|
|
6668
|
+
}
|
|
6669
|
+
};
|
|
6670
|
+
|
|
6671
|
+
const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
|
|
6672
|
+
host: { selector: () => ':host' },
|
|
6673
|
+
label: { selector: '::part(label)' },
|
|
6674
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
6675
|
+
internalWrapper: { selector: 'descope-single-select-internal slot' },
|
|
6676
|
+
errorMessage: { selector: '::part(error-message)' },
|
|
6677
|
+
};
|
|
6678
|
+
|
|
6679
|
+
const SingleSelectClass = compose(
|
|
6680
|
+
createStyleMixin({
|
|
6681
|
+
mappings: {
|
|
6682
|
+
hostWidth: { ...host, property: 'width' },
|
|
6683
|
+
fontFamily: host,
|
|
6684
|
+
labelTextColor: [
|
|
6685
|
+
{ ...label, property: 'color' },
|
|
6686
|
+
{ ...requiredIndicator, property: 'color' },
|
|
6687
|
+
],
|
|
6688
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
6689
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
6690
|
+
itemsSpacing: { ...internalWrapper, property: 'gap' },
|
|
6691
|
+
},
|
|
6692
|
+
}),
|
|
6693
|
+
draggableMixin,
|
|
6694
|
+
composedProxyInputMixin,
|
|
6695
|
+
componentNameValidationMixin,
|
|
6696
|
+
customMixin
|
|
6697
|
+
)(
|
|
6698
|
+
createProxy({
|
|
6699
|
+
slots: [],
|
|
6700
|
+
wrappedEleName: 'vaadin-text-field',
|
|
6701
|
+
style: () => `
|
|
6702
|
+
:host {
|
|
6703
|
+
display: inline-flex;
|
|
6704
|
+
max-width: 100%;
|
|
6705
|
+
}
|
|
6706
|
+
${resetInputFieldDefaultWidth()}
|
|
6707
|
+
:host::after {
|
|
6708
|
+
background-color: transparent;
|
|
6709
|
+
}
|
|
6710
|
+
:host::part(input-field)::after {
|
|
6711
|
+
background-color: transparent;
|
|
6712
|
+
}
|
|
6713
|
+
|
|
6714
|
+
descope-single-select-internal {
|
|
6715
|
+
-webkit-mask-image: none;
|
|
6716
|
+
padding: 0;
|
|
6717
|
+
width: 100%;
|
|
6718
|
+
height: 100%;
|
|
6719
|
+
display:inline-block;
|
|
6720
|
+
min-height: initial;
|
|
6721
|
+
}
|
|
6722
|
+
|
|
6723
|
+
vaadin-text-field::part(input-field) {
|
|
6724
|
+
background-color: transparent;
|
|
6725
|
+
padding: 0;
|
|
6726
|
+
overflow: hidden;
|
|
6727
|
+
-webkit-mask-image: none;
|
|
6728
|
+
}
|
|
6729
|
+
|
|
6730
|
+
vaadin-text-field {
|
|
6731
|
+
margin: 0;
|
|
6732
|
+
padding: 0;
|
|
6733
|
+
width: 100%
|
|
6734
|
+
}
|
|
6735
|
+
|
|
6736
|
+
vaadin-text-field::before {
|
|
6737
|
+
height: 0;
|
|
6738
|
+
}
|
|
6739
|
+
|
|
6740
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
|
6741
|
+
opacity: 1;
|
|
6742
|
+
}
|
|
6743
|
+
|
|
6744
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
|
6745
|
+
border: 0 solid;
|
|
6746
|
+
}
|
|
6747
|
+
|
|
6748
|
+
vaadin-text-field::part(input-field) {
|
|
6749
|
+
box-shadow: none;
|
|
6750
|
+
}
|
|
6751
|
+
|
|
6752
|
+
${resetInputCursor('vaadin-text-field')}
|
|
6753
|
+
`,
|
|
6754
|
+
excludeAttrsSync: ['tabindex'],
|
|
6755
|
+
componentName: componentName$1,
|
|
6756
|
+
})
|
|
6757
|
+
);
|
|
6758
|
+
|
|
6759
|
+
const globalRefs = getThemeRefs(globals);
|
|
6760
|
+
const vars$1 = SingleSelectClass.cssVarList;
|
|
6761
|
+
|
|
6762
|
+
const singleSelect = {
|
|
6763
|
+
[vars$1.fontFamily]: refs.fontFamily,
|
|
6764
|
+
[vars$1.labelTextColor]: refs.labelTextColor,
|
|
6765
|
+
[vars$1.labelRequiredIndicator]: refs.requiredIndicator,
|
|
6766
|
+
[vars$1.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
6767
|
+
[vars$1.itemsSpacing]: globalRefs.spacing.sm,
|
|
6768
|
+
[vars$1.hostWidth]: refs.width,
|
|
6769
|
+
};
|
|
6770
|
+
|
|
6771
|
+
var singleSelect$1 = /*#__PURE__*/Object.freeze({
|
|
6772
|
+
__proto__: null,
|
|
6773
|
+
default: singleSelect,
|
|
6384
6774
|
vars: vars$1
|
|
6385
6775
|
});
|
|
6386
6776
|
|
|
@@ -6409,6 +6799,8 @@ const components = {
|
|
|
6409
6799
|
newPassword: newPassword$1,
|
|
6410
6800
|
inputWrapper,
|
|
6411
6801
|
uploadFile: uploadFile$1,
|
|
6802
|
+
selectItem: selectItem$1,
|
|
6803
|
+
singleSelect: singleSelect$1,
|
|
6412
6804
|
};
|
|
6413
6805
|
|
|
6414
6806
|
const theme = Object.keys(components).reduce(
|
|
@@ -6421,7 +6813,7 @@ const vars = Object.keys(components).reduce(
|
|
|
6421
6813
|
);
|
|
6422
6814
|
|
|
6423
6815
|
const defaultTheme = { globals, components: theme };
|
|
6424
|
-
const themeVars = { globals: vars$
|
|
6816
|
+
const themeVars = { globals: vars$r, components: vars };
|
|
6425
6817
|
|
|
6426
6818
|
const componentName = getComponentName('recaptcha');
|
|
6427
6819
|
|
|
@@ -6595,11 +6987,14 @@ exports.PasswordClass = PasswordClass;
|
|
|
6595
6987
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
6596
6988
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
6597
6989
|
exports.RecaptchaClass = RecaptchaClass;
|
|
6990
|
+
exports.SelectItemClass = SelectItemClass;
|
|
6991
|
+
exports.SingleSelectClass = SingleSelectClass;
|
|
6598
6992
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
6599
6993
|
exports.TextAreaClass = TextAreaClass;
|
|
6600
6994
|
exports.TextClass = TextClass;
|
|
6601
6995
|
exports.TextFieldClass = TextFieldClass;
|
|
6602
6996
|
exports.TotpImageClass = TotpImageClass;
|
|
6997
|
+
exports.UploadFileClass = UploadFileClass;
|
|
6603
6998
|
exports.componentsThemeManager = componentsThemeManager;
|
|
6604
6999
|
exports.createComponentsTheme = createComponentsTheme;
|
|
6605
7000
|
exports.createHelperVars = createHelperVars;
|