@descope/web-components-ui 1.0.176 → 1.0.178
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 +1094 -693
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +1179 -779
- 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 +1 -1
- package/src/components/descope-button/ButtonClass.js +5 -2
- 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.d.ts +0 -1
- package/src/index.js +2 -0
- package/src/mixins/createProxy.js +7 -2
- package/src/theme/components/button.js +8 -5
- 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: {},
|
|
@@ -1574,11 +1579,10 @@ const ButtonClass = compose(
|
|
|
1574
1579
|
borderWidth: {},
|
|
1575
1580
|
|
|
1576
1581
|
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
|
1577
|
-
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
|
1578
1582
|
|
|
1579
1583
|
labelTextColor: { property: 'color' },
|
|
1580
|
-
labelTextDecoration: { ...label$
|
|
1581
|
-
labelSpacing: { ...label$
|
|
1584
|
+
labelTextDecoration: { ...label$b, property: 'text-decoration' },
|
|
1585
|
+
labelSpacing: { ...label$b, property: 'gap' },
|
|
1582
1586
|
},
|
|
1583
1587
|
}),
|
|
1584
1588
|
clickableMixin,
|
|
@@ -1586,7 +1590,7 @@ const ButtonClass = compose(
|
|
|
1586
1590
|
componentNameValidationMixin
|
|
1587
1591
|
)(
|
|
1588
1592
|
createProxy({
|
|
1589
|
-
slots: ['prefix', 'label', 'suffix'],
|
|
1593
|
+
slots: ['', 'prefix', 'label', 'suffix'],
|
|
1590
1594
|
wrappedEleName: 'vaadin-button',
|
|
1591
1595
|
style: () => `
|
|
1592
1596
|
${resetStyles}
|
|
@@ -1599,9 +1603,13 @@ const ButtonClass = compose(
|
|
|
1599
1603
|
vaadin-button {
|
|
1600
1604
|
height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
1601
1605
|
}
|
|
1606
|
+
[square="true"]:not([full-width="true"]) {
|
|
1607
|
+
width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
|
|
1608
|
+
padding: 0;
|
|
1609
|
+
}
|
|
1602
1610
|
`,
|
|
1603
1611
|
excludeAttrsSync: ['tabindex'],
|
|
1604
|
-
componentName: componentName$
|
|
1612
|
+
componentName: componentName$w,
|
|
1605
1613
|
})
|
|
1606
1614
|
);
|
|
1607
1615
|
|
|
@@ -1638,39 +1646,36 @@ loadingIndicatorStyles = `
|
|
|
1638
1646
|
}
|
|
1639
1647
|
`;
|
|
1640
1648
|
|
|
1641
|
-
const globalRefs$
|
|
1649
|
+
const globalRefs$d = getThemeRefs(globals);
|
|
1642
1650
|
const compVars$3 = ButtonClass.cssVarList;
|
|
1643
1651
|
|
|
1644
1652
|
const mode = {
|
|
1645
|
-
primary: globalRefs$
|
|
1646
|
-
secondary: globalRefs$
|
|
1647
|
-
success: globalRefs$
|
|
1648
|
-
error: globalRefs$
|
|
1649
|
-
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,
|
|
1650
1658
|
};
|
|
1651
1659
|
|
|
1652
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
1653
|
-
|
|
1654
|
-
const verticalPaddingRatio = 3;
|
|
1655
|
-
const horizontalPaddingRatio = 2;
|
|
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',
|
|
1669
|
+
[compVars$3.hostWidth]: 'auto',
|
|
1664
1670
|
|
|
1665
|
-
[compVars$3.borderRadius]: globalRefs$
|
|
1666
|
-
[compVars$3.borderWidth]: globalRefs$
|
|
1671
|
+
[compVars$3.borderRadius]: globalRefs$d.radius.sm,
|
|
1672
|
+
[compVars$3.borderWidth]: globalRefs$d.border.xs,
|
|
1667
1673
|
[compVars$3.borderStyle]: 'solid',
|
|
1668
1674
|
[compVars$3.borderColor]: 'transparent',
|
|
1669
1675
|
|
|
1670
1676
|
[compVars$3.labelSpacing]: '0.25em',
|
|
1671
1677
|
|
|
1672
|
-
[compVars$3.verticalPadding]:
|
|
1673
|
-
[compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
|
|
1678
|
+
[compVars$3.verticalPadding]: '1em',
|
|
1674
1679
|
|
|
1675
1680
|
[compVars$3.outlineWidth]: globals.border.sm,
|
|
1676
1681
|
[compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
|
|
@@ -1684,6 +1689,12 @@ const button = {
|
|
|
1684
1689
|
lg: { [compVars$3.fontSize]: '18px' },
|
|
1685
1690
|
},
|
|
1686
1691
|
|
|
1692
|
+
_square: {
|
|
1693
|
+
[compVars$3.hostHeight]: '3em',
|
|
1694
|
+
[compVars$3.hostWidth]: '3em',
|
|
1695
|
+
[compVars$3.verticalPadding]: '0',
|
|
1696
|
+
},
|
|
1697
|
+
|
|
1687
1698
|
_fullWidth: {
|
|
1688
1699
|
[compVars$3.hostWidth]: '100%',
|
|
1689
1700
|
},
|
|
@@ -1732,11 +1743,11 @@ const button = {
|
|
|
1732
1743
|
},
|
|
1733
1744
|
|
|
1734
1745
|
_focused: {
|
|
1735
|
-
[compVars$3.outlineColor]: globalRefs$
|
|
1746
|
+
[compVars$3.outlineColor]: globalRefs$d.colors.surface.main,
|
|
1736
1747
|
},
|
|
1737
1748
|
};
|
|
1738
1749
|
|
|
1739
|
-
const vars$
|
|
1750
|
+
const vars$q = {
|
|
1740
1751
|
...compVars$3,
|
|
1741
1752
|
...helperVars$3,
|
|
1742
1753
|
};
|
|
@@ -1744,10 +1755,10 @@ const vars$o = {
|
|
|
1744
1755
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
1745
1756
|
__proto__: null,
|
|
1746
1757
|
default: button,
|
|
1747
|
-
vars: vars$
|
|
1758
|
+
vars: vars$q
|
|
1748
1759
|
});
|
|
1749
1760
|
|
|
1750
|
-
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 } =
|
|
1751
1762
|
{
|
|
1752
1763
|
host: { selector: () => ':host' },
|
|
1753
1764
|
label: { selector: '::part(label)' },
|
|
@@ -1761,24 +1772,24 @@ const { host: host$d, label: label$9, placeholder: placeholder$2, requiredIndica
|
|
|
1761
1772
|
|
|
1762
1773
|
var textFieldMappings = {
|
|
1763
1774
|
// we apply font-size also on the host so we can set its width with em
|
|
1764
|
-
fontSize: [{}, host$
|
|
1765
|
-
fontFamily: [label$
|
|
1775
|
+
fontSize: [{}, host$e],
|
|
1776
|
+
fontFamily: [label$a, inputField$5, helperText$8, errorMessage$a],
|
|
1766
1777
|
|
|
1767
|
-
hostWidth: { ...host$
|
|
1768
|
-
hostMinWidth: { ...host$
|
|
1778
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
1779
|
+
hostMinWidth: { ...host$e, property: 'min-width' },
|
|
1769
1780
|
|
|
1770
1781
|
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
|
1771
1782
|
|
|
1772
1783
|
labelTextColor: [
|
|
1773
|
-
{ ...label$
|
|
1774
|
-
{ ...requiredIndicator$
|
|
1784
|
+
{ ...label$a, property: 'color' },
|
|
1785
|
+
{ ...requiredIndicator$a, property: 'color' },
|
|
1775
1786
|
],
|
|
1776
|
-
errorMessageTextColor: { ...errorMessage$
|
|
1787
|
+
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
|
1777
1788
|
|
|
1778
1789
|
inputValueTextColor: { ...inputField$5, property: 'color' },
|
|
1779
1790
|
inputCaretTextColor: { ...input, property: 'color' },
|
|
1780
1791
|
|
|
1781
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
1792
|
+
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
|
1782
1793
|
|
|
1783
1794
|
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
|
1784
1795
|
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
|
@@ -1902,11 +1913,11 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
|
1902
1913
|
${resetInputFieldUnderlayingBorder(name)}
|
|
1903
1914
|
`;
|
|
1904
1915
|
|
|
1905
|
-
const componentName$
|
|
1916
|
+
const componentName$v = getComponentName('text-field');
|
|
1906
1917
|
|
|
1907
1918
|
const observedAttrs = ['type'];
|
|
1908
1919
|
|
|
1909
|
-
const customMixin$
|
|
1920
|
+
const customMixin$6 = (superclass) =>
|
|
1910
1921
|
class TextFieldClass extends superclass {
|
|
1911
1922
|
static get observedAttributes() {
|
|
1912
1923
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -1933,7 +1944,7 @@ const TextFieldClass = compose(
|
|
|
1933
1944
|
draggableMixin,
|
|
1934
1945
|
composedProxyInputMixin,
|
|
1935
1946
|
componentNameValidationMixin,
|
|
1936
|
-
customMixin$
|
|
1947
|
+
customMixin$6
|
|
1937
1948
|
)(
|
|
1938
1949
|
createProxy({
|
|
1939
1950
|
slots: ['prefix', 'suffix'],
|
|
@@ -1950,26 +1961,26 @@ const TextFieldClass = compose(
|
|
|
1950
1961
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
1951
1962
|
`,
|
|
1952
1963
|
excludeAttrsSync: ['tabindex'],
|
|
1953
|
-
componentName: componentName$
|
|
1964
|
+
componentName: componentName$v,
|
|
1954
1965
|
})
|
|
1955
1966
|
);
|
|
1956
1967
|
|
|
1957
|
-
const componentName$
|
|
1958
|
-
const globalRefs$
|
|
1968
|
+
const componentName$u = getComponentName('input-wrapper');
|
|
1969
|
+
const globalRefs$c = getThemeRefs(globals);
|
|
1959
1970
|
|
|
1960
|
-
const [theme$1, refs, vars$
|
|
1971
|
+
const [theme$1, refs, vars$p] = createHelperVars(
|
|
1961
1972
|
{
|
|
1962
|
-
labelTextColor: globalRefs$
|
|
1963
|
-
valueTextColor: globalRefs$
|
|
1964
|
-
placeholderTextColor: globalRefs$
|
|
1973
|
+
labelTextColor: globalRefs$c.colors.surface.contrast,
|
|
1974
|
+
valueTextColor: globalRefs$c.colors.surface.contrast,
|
|
1975
|
+
placeholderTextColor: globalRefs$c.colors.surface.main,
|
|
1965
1976
|
requiredIndicator: "'*'",
|
|
1966
|
-
errorMessageTextColor: globalRefs$
|
|
1977
|
+
errorMessageTextColor: globalRefs$c.colors.error.main,
|
|
1967
1978
|
|
|
1968
|
-
borderWidth: globalRefs$
|
|
1969
|
-
borderRadius: globalRefs$
|
|
1979
|
+
borderWidth: globalRefs$c.border.xs,
|
|
1980
|
+
borderRadius: globalRefs$c.radius.xs,
|
|
1970
1981
|
borderColor: 'transparent',
|
|
1971
1982
|
|
|
1972
|
-
outlineWidth: globalRefs$
|
|
1983
|
+
outlineWidth: globalRefs$c.border.sm,
|
|
1973
1984
|
outlineStyle: 'solid',
|
|
1974
1985
|
outlineColor: 'transparent',
|
|
1975
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
|
|
@@ -1980,9 +1991,9 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
|
1980
1991
|
horizontalPadding: '0.5em',
|
|
1981
1992
|
verticalPadding: '0.5em',
|
|
1982
1993
|
|
|
1983
|
-
backgroundColor: globalRefs$
|
|
1994
|
+
backgroundColor: globalRefs$c.colors.surface.light,
|
|
1984
1995
|
|
|
1985
|
-
fontFamily: globalRefs$
|
|
1996
|
+
fontFamily: globalRefs$c.fonts.font1.family,
|
|
1986
1997
|
|
|
1987
1998
|
size: {
|
|
1988
1999
|
xs: { fontSize: '12px' },
|
|
@@ -1996,69 +2007,69 @@ const [theme$1, refs, vars$n] = createHelperVars(
|
|
|
1996
2007
|
},
|
|
1997
2008
|
|
|
1998
2009
|
_focused: {
|
|
1999
|
-
outlineColor: globalRefs$
|
|
2010
|
+
outlineColor: globalRefs$c.colors.surface.main,
|
|
2000
2011
|
_invalid: {
|
|
2001
|
-
outlineColor: globalRefs$
|
|
2012
|
+
outlineColor: globalRefs$c.colors.error.main,
|
|
2002
2013
|
},
|
|
2003
2014
|
},
|
|
2004
2015
|
|
|
2005
2016
|
_bordered: {
|
|
2006
|
-
outlineWidth: globalRefs$
|
|
2007
|
-
borderColor: globalRefs$
|
|
2017
|
+
outlineWidth: globalRefs$c.border.xs,
|
|
2018
|
+
borderColor: globalRefs$c.colors.surface.main,
|
|
2008
2019
|
borderStyle: 'solid',
|
|
2009
2020
|
_invalid: {
|
|
2010
|
-
borderColor: globalRefs$
|
|
2021
|
+
borderColor: globalRefs$c.colors.error.main,
|
|
2011
2022
|
},
|
|
2012
2023
|
},
|
|
2013
2024
|
|
|
2014
2025
|
_disabled: {
|
|
2015
|
-
labelTextColor: globalRefs$
|
|
2016
|
-
borderColor: globalRefs$
|
|
2017
|
-
valueTextColor: globalRefs$
|
|
2018
|
-
placeholderTextColor: globalRefs$
|
|
2019
|
-
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,
|
|
2020
2031
|
},
|
|
2021
2032
|
},
|
|
2022
|
-
componentName$
|
|
2033
|
+
componentName$u
|
|
2023
2034
|
);
|
|
2024
2035
|
|
|
2025
2036
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
2026
2037
|
__proto__: null,
|
|
2027
2038
|
default: theme$1,
|
|
2028
2039
|
refs: refs,
|
|
2029
|
-
vars: vars$
|
|
2040
|
+
vars: vars$p
|
|
2030
2041
|
});
|
|
2031
2042
|
|
|
2032
|
-
const vars$
|
|
2043
|
+
const vars$o = TextFieldClass.cssVarList;
|
|
2033
2044
|
|
|
2034
2045
|
const textField = {
|
|
2035
|
-
[vars$
|
|
2036
|
-
[vars$
|
|
2037
|
-
[vars$
|
|
2038
|
-
[vars$
|
|
2039
|
-
[vars$
|
|
2040
|
-
[vars$
|
|
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$
|
|
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,
|
|
2055
2066
|
};
|
|
2056
2067
|
|
|
2057
2068
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
|
2058
2069
|
__proto__: null,
|
|
2059
2070
|
default: textField,
|
|
2060
2071
|
textField: textField,
|
|
2061
|
-
vars: vars$
|
|
2072
|
+
vars: vars$o
|
|
2062
2073
|
});
|
|
2063
2074
|
|
|
2064
2075
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -2095,18 +2106,18 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
2095
2106
|
}
|
|
2096
2107
|
};
|
|
2097
2108
|
|
|
2098
|
-
const componentName$
|
|
2109
|
+
const componentName$t = getComponentName('password');
|
|
2099
2110
|
|
|
2100
2111
|
const {
|
|
2101
|
-
host: host$
|
|
2112
|
+
host: host$d,
|
|
2102
2113
|
inputField: inputField$4,
|
|
2103
2114
|
inputElement: inputElement$1,
|
|
2104
2115
|
inputElementPlaceholder,
|
|
2105
2116
|
revealButtonContainer,
|
|
2106
2117
|
revealButtonIcon,
|
|
2107
|
-
label: label$
|
|
2108
|
-
requiredIndicator: requiredIndicator$
|
|
2109
|
-
errorMessage: errorMessage$
|
|
2118
|
+
label: label$9,
|
|
2119
|
+
requiredIndicator: requiredIndicator$9,
|
|
2120
|
+
errorMessage: errorMessage$9,
|
|
2110
2121
|
helperText: helperText$7,
|
|
2111
2122
|
} = {
|
|
2112
2123
|
host: { selector: () => ':host' },
|
|
@@ -2124,10 +2135,10 @@ const {
|
|
|
2124
2135
|
const PasswordClass = compose(
|
|
2125
2136
|
createStyleMixin({
|
|
2126
2137
|
mappings: {
|
|
2127
|
-
hostWidth: { ...host$
|
|
2128
|
-
hostMinWidth: { ...host$
|
|
2129
|
-
fontSize: [{}, host$
|
|
2130
|
-
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],
|
|
2131
2142
|
inputHeight: { ...inputField$4, property: 'height' },
|
|
2132
2143
|
inputHorizontalPadding: [
|
|
2133
2144
|
{ ...inputElement$1, property: 'padding-left' },
|
|
@@ -2146,11 +2157,11 @@ const PasswordClass = compose(
|
|
|
2146
2157
|
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
|
2147
2158
|
|
|
2148
2159
|
labelTextColor: [
|
|
2149
|
-
{ ...label$
|
|
2150
|
-
{ ...requiredIndicator$
|
|
2160
|
+
{ ...label$9, property: 'color' },
|
|
2161
|
+
{ ...requiredIndicator$9, property: 'color' },
|
|
2151
2162
|
],
|
|
2152
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2153
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2163
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
|
2164
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
|
2154
2165
|
|
|
2155
2166
|
inputValueTextColor: [
|
|
2156
2167
|
{ ...inputElement$1, property: 'color' },
|
|
@@ -2171,7 +2182,7 @@ const PasswordClass = compose(
|
|
|
2171
2182
|
passwordDraggableMixin
|
|
2172
2183
|
)(
|
|
2173
2184
|
createProxy({
|
|
2174
|
-
slots: ['suffix'],
|
|
2185
|
+
slots: ['', 'suffix'],
|
|
2175
2186
|
wrappedEleName: 'vaadin-password-field',
|
|
2176
2187
|
style: () => `
|
|
2177
2188
|
:host {
|
|
@@ -2196,7 +2207,7 @@ const PasswordClass = compose(
|
|
|
2196
2207
|
}
|
|
2197
2208
|
vaadin-password-field[focus-ring]::part(input-field) {
|
|
2198
2209
|
box-shadow: none;
|
|
2199
|
-
}
|
|
2210
|
+
}
|
|
2200
2211
|
vaadin-password-field > input {
|
|
2201
2212
|
min-height: 0;
|
|
2202
2213
|
-webkit-mask-image: none;
|
|
@@ -2223,44 +2234,44 @@ const PasswordClass = compose(
|
|
|
2223
2234
|
}
|
|
2224
2235
|
`,
|
|
2225
2236
|
excludeAttrsSync: ['tabindex'],
|
|
2226
|
-
componentName: componentName$
|
|
2237
|
+
componentName: componentName$t,
|
|
2227
2238
|
})
|
|
2228
2239
|
);
|
|
2229
2240
|
|
|
2230
|
-
const globalRefs$
|
|
2231
|
-
const vars$
|
|
2241
|
+
const globalRefs$b = getThemeRefs(globals);
|
|
2242
|
+
const vars$n = PasswordClass.cssVarList;
|
|
2232
2243
|
|
|
2233
2244
|
const password = {
|
|
2234
|
-
[vars$
|
|
2235
|
-
[vars$
|
|
2236
|
-
[vars$
|
|
2237
|
-
[vars$
|
|
2238
|
-
[vars$
|
|
2239
|
-
[vars$
|
|
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$
|
|
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,
|
|
2255
2266
|
};
|
|
2256
2267
|
|
|
2257
2268
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
2258
2269
|
__proto__: null,
|
|
2259
2270
|
default: password,
|
|
2260
|
-
vars: vars$
|
|
2271
|
+
vars: vars$n
|
|
2261
2272
|
});
|
|
2262
2273
|
|
|
2263
|
-
const componentName$
|
|
2274
|
+
const componentName$s = getComponentName('number-field');
|
|
2264
2275
|
|
|
2265
2276
|
const NumberFieldClass = compose(
|
|
2266
2277
|
createStyleMixin({
|
|
@@ -2271,7 +2282,7 @@ const NumberFieldClass = compose(
|
|
|
2271
2282
|
componentNameValidationMixin
|
|
2272
2283
|
)(
|
|
2273
2284
|
createProxy({
|
|
2274
|
-
slots: ['prefix', 'suffix'],
|
|
2285
|
+
slots: ['', 'prefix', 'suffix'],
|
|
2275
2286
|
wrappedEleName: 'vaadin-number-field',
|
|
2276
2287
|
style: () => `
|
|
2277
2288
|
:host {
|
|
@@ -2285,44 +2296,44 @@ const NumberFieldClass = compose(
|
|
|
2285
2296
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
2286
2297
|
`,
|
|
2287
2298
|
excludeAttrsSync: ['tabindex'],
|
|
2288
|
-
componentName: componentName$
|
|
2299
|
+
componentName: componentName$s,
|
|
2289
2300
|
})
|
|
2290
2301
|
);
|
|
2291
2302
|
|
|
2292
|
-
const vars$
|
|
2303
|
+
const vars$m = NumberFieldClass.cssVarList;
|
|
2293
2304
|
|
|
2294
2305
|
const numberField = {
|
|
2295
|
-
[vars$
|
|
2296
|
-
[vars$
|
|
2297
|
-
[vars$
|
|
2298
|
-
[vars$
|
|
2299
|
-
[vars$
|
|
2300
|
-
[vars$
|
|
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$
|
|
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,
|
|
2315
2326
|
};
|
|
2316
2327
|
|
|
2317
2328
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
2318
2329
|
__proto__: null,
|
|
2319
2330
|
default: numberField,
|
|
2320
|
-
vars: vars$
|
|
2331
|
+
vars: vars$m
|
|
2321
2332
|
});
|
|
2322
2333
|
|
|
2323
|
-
const componentName$
|
|
2334
|
+
const componentName$r = getComponentName('email-field');
|
|
2324
2335
|
|
|
2325
|
-
const customMixin$
|
|
2336
|
+
const customMixin$5 = (superclass) =>
|
|
2326
2337
|
class EmailFieldMixinClass extends superclass {
|
|
2327
2338
|
init() {
|
|
2328
2339
|
super.init?.();
|
|
@@ -2336,10 +2347,10 @@ const EmailFieldClass = compose(
|
|
|
2336
2347
|
draggableMixin,
|
|
2337
2348
|
composedProxyInputMixin,
|
|
2338
2349
|
componentNameValidationMixin,
|
|
2339
|
-
customMixin$
|
|
2350
|
+
customMixin$5
|
|
2340
2351
|
)(
|
|
2341
2352
|
createProxy({
|
|
2342
|
-
slots: ['suffix'],
|
|
2353
|
+
slots: ['', 'suffix'],
|
|
2343
2354
|
wrappedEleName: 'vaadin-email-field',
|
|
2344
2355
|
style: () => `
|
|
2345
2356
|
:host {
|
|
@@ -2350,55 +2361,55 @@ const EmailFieldClass = compose(
|
|
|
2350
2361
|
}))
|
|
2351
2362
|
}
|
|
2352
2363
|
${useHostExternalPadding(EmailFieldClass.cssVarList)}
|
|
2353
|
-
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
2364
|
+
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
2354
2365
|
`,
|
|
2355
2366
|
excludeAttrsSync: ['tabindex'],
|
|
2356
|
-
componentName: componentName$
|
|
2367
|
+
componentName: componentName$r,
|
|
2357
2368
|
})
|
|
2358
2369
|
);
|
|
2359
2370
|
|
|
2360
|
-
const vars$
|
|
2371
|
+
const vars$l = EmailFieldClass.cssVarList;
|
|
2361
2372
|
|
|
2362
2373
|
const emailField = {
|
|
2363
|
-
[vars$
|
|
2364
|
-
[vars$
|
|
2365
|
-
[vars$
|
|
2366
|
-
[vars$
|
|
2367
|
-
[vars$
|
|
2368
|
-
[vars$
|
|
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$
|
|
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,
|
|
2383
2394
|
};
|
|
2384
2395
|
|
|
2385
2396
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
2386
2397
|
__proto__: null,
|
|
2387
2398
|
default: emailField,
|
|
2388
|
-
vars: vars$
|
|
2399
|
+
vars: vars$l
|
|
2389
2400
|
});
|
|
2390
2401
|
|
|
2391
|
-
const componentName$
|
|
2402
|
+
const componentName$q = getComponentName('text-area');
|
|
2392
2403
|
|
|
2393
2404
|
const {
|
|
2394
|
-
host: host$
|
|
2395
|
-
label: label$
|
|
2405
|
+
host: host$c,
|
|
2406
|
+
label: label$8,
|
|
2396
2407
|
placeholder: placeholder$1,
|
|
2397
2408
|
inputField: inputField$3,
|
|
2398
2409
|
textArea: textArea$2,
|
|
2399
|
-
requiredIndicator: requiredIndicator$
|
|
2410
|
+
requiredIndicator: requiredIndicator$8,
|
|
2400
2411
|
helperText: helperText$6,
|
|
2401
|
-
errorMessage: errorMessage$
|
|
2412
|
+
errorMessage: errorMessage$8,
|
|
2402
2413
|
} = {
|
|
2403
2414
|
host: { selector: () => ':host' },
|
|
2404
2415
|
label: { selector: '::part(label)' },
|
|
@@ -2413,16 +2424,16 @@ const {
|
|
|
2413
2424
|
const TextAreaClass = compose(
|
|
2414
2425
|
createStyleMixin({
|
|
2415
2426
|
mappings: {
|
|
2416
|
-
hostWidth: { ...host$
|
|
2417
|
-
hostMinWidth: { ...host$
|
|
2418
|
-
fontSize: [host$
|
|
2419
|
-
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],
|
|
2420
2431
|
labelTextColor: [
|
|
2421
|
-
{ ...label$
|
|
2422
|
-
{ ...requiredIndicator$
|
|
2432
|
+
{ ...label$8, property: 'color' },
|
|
2433
|
+
{ ...requiredIndicator$8, property: 'color' },
|
|
2423
2434
|
],
|
|
2424
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2425
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2435
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
|
2436
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
|
2426
2437
|
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
|
2427
2438
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
|
2428
2439
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
|
@@ -2460,48 +2471,48 @@ const TextAreaClass = compose(
|
|
|
2460
2471
|
${resetInputCursor('vaadin-text-area')}
|
|
2461
2472
|
`,
|
|
2462
2473
|
excludeAttrsSync: ['tabindex'],
|
|
2463
|
-
componentName: componentName$
|
|
2474
|
+
componentName: componentName$q,
|
|
2464
2475
|
})
|
|
2465
2476
|
);
|
|
2466
2477
|
|
|
2467
|
-
const globalRefs$
|
|
2468
|
-
const vars$
|
|
2478
|
+
const globalRefs$a = getThemeRefs(globals);
|
|
2479
|
+
const vars$k = TextAreaClass.cssVarList;
|
|
2469
2480
|
|
|
2470
2481
|
const textArea = {
|
|
2471
|
-
[vars$
|
|
2472
|
-
[vars$
|
|
2473
|
-
[vars$
|
|
2474
|
-
[vars$
|
|
2475
|
-
[vars$
|
|
2476
|
-
[vars$
|
|
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$
|
|
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',
|
|
2491
2502
|
|
|
2492
2503
|
_disabled: {
|
|
2493
|
-
[vars$
|
|
2504
|
+
[vars$k.inputBackgroundColor]: globalRefs$a.colors.surface.light,
|
|
2494
2505
|
},
|
|
2495
2506
|
|
|
2496
2507
|
_readonly: {
|
|
2497
|
-
[vars$
|
|
2508
|
+
[vars$k.inputResizeType]: 'none',
|
|
2498
2509
|
},
|
|
2499
2510
|
};
|
|
2500
2511
|
|
|
2501
2512
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
2502
2513
|
__proto__: null,
|
|
2503
2514
|
default: textArea,
|
|
2504
|
-
vars: vars$
|
|
2515
|
+
vars: vars$k
|
|
2505
2516
|
});
|
|
2506
2517
|
|
|
2507
2518
|
const createBaseInputClass = (...args) =>
|
|
@@ -2512,9 +2523,9 @@ const createBaseInputClass = (...args) =>
|
|
|
2512
2523
|
inputEventsDispatchingMixin
|
|
2513
2524
|
)(createBaseClass(...args));
|
|
2514
2525
|
|
|
2515
|
-
const componentName$
|
|
2526
|
+
const componentName$p = getComponentName('boolean-field-internal');
|
|
2516
2527
|
|
|
2517
|
-
createBaseInputClass({ componentName: componentName$
|
|
2528
|
+
createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
|
|
2518
2529
|
|
|
2519
2530
|
const booleanFieldMixin = (superclass) =>
|
|
2520
2531
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -2523,14 +2534,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
2523
2534
|
|
|
2524
2535
|
const template = document.createElement('template');
|
|
2525
2536
|
template.innerHTML = `
|
|
2526
|
-
<${componentName$
|
|
2537
|
+
<${componentName$p}
|
|
2527
2538
|
tabindex="-1"
|
|
2528
2539
|
slot="input"
|
|
2529
|
-
></${componentName$
|
|
2540
|
+
></${componentName$p}>
|
|
2530
2541
|
`;
|
|
2531
2542
|
|
|
2532
2543
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
2533
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
2544
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$p);
|
|
2534
2545
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
2535
2546
|
|
|
2536
2547
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -2609,18 +2620,18 @@ vaadin-checkbox::part(checkbox) {
|
|
|
2609
2620
|
}
|
|
2610
2621
|
`;
|
|
2611
2622
|
|
|
2612
|
-
const componentName$
|
|
2623
|
+
const componentName$o = getComponentName('checkbox');
|
|
2613
2624
|
|
|
2614
2625
|
const {
|
|
2615
|
-
host: host$
|
|
2626
|
+
host: host$b,
|
|
2616
2627
|
component: component$1,
|
|
2617
2628
|
checkboxElement,
|
|
2618
2629
|
checkboxSurface,
|
|
2619
2630
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
|
2620
|
-
label: label$
|
|
2621
|
-
requiredIndicator: requiredIndicator$
|
|
2631
|
+
label: label$7,
|
|
2632
|
+
requiredIndicator: requiredIndicator$7,
|
|
2622
2633
|
helperText: helperText$5,
|
|
2623
|
-
errorMessage: errorMessage$
|
|
2634
|
+
errorMessage: errorMessage$7,
|
|
2624
2635
|
} = {
|
|
2625
2636
|
host: { selector: () => ':host' },
|
|
2626
2637
|
label: { selector: '::part(label)' },
|
|
@@ -2636,25 +2647,25 @@ const {
|
|
|
2636
2647
|
const CheckboxClass = compose(
|
|
2637
2648
|
createStyleMixin({
|
|
2638
2649
|
mappings: {
|
|
2639
|
-
hostWidth: { ...host$
|
|
2650
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
2640
2651
|
|
|
2641
|
-
fontSize: [host$
|
|
2642
|
-
fontFamily: [label$
|
|
2652
|
+
fontSize: [host$b, checkboxElement, label$7, checkboxHiddenLabel$1],
|
|
2653
|
+
fontFamily: [label$7, checkboxHiddenLabel$1, helperText$5, errorMessage$7],
|
|
2643
2654
|
|
|
2644
2655
|
labelTextColor: [
|
|
2645
|
-
{ ...label$
|
|
2646
|
-
{ ...requiredIndicator$
|
|
2647
|
-
{ ...label$
|
|
2656
|
+
{ ...label$7, property: 'color' },
|
|
2657
|
+
{ ...requiredIndicator$7, property: 'color' },
|
|
2658
|
+
{ ...label$7, property: '-webkit-text-fill-color' },
|
|
2648
2659
|
],
|
|
2649
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2650
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2660
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
|
2661
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
|
2651
2662
|
|
|
2652
2663
|
labelFontWeight: [
|
|
2653
|
-
{ ...label$
|
|
2664
|
+
{ ...label$7, property: 'font-weight' },
|
|
2654
2665
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
|
2655
2666
|
],
|
|
2656
2667
|
labelSpacing: [
|
|
2657
|
-
{ ...label$
|
|
2668
|
+
{ ...label$7, property: 'left' },
|
|
2658
2669
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
|
2659
2670
|
],
|
|
2660
2671
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
|
@@ -2677,8 +2688,8 @@ const CheckboxClass = compose(
|
|
|
2677
2688
|
{ ...checkboxSurface, property: 'font-size' },
|
|
2678
2689
|
{ ...component$1, property: 'font-size' },
|
|
2679
2690
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
|
2680
|
-
{ ...label$
|
|
2681
|
-
{ ...label$
|
|
2691
|
+
{ ...label$7, property: 'margin-left' },
|
|
2692
|
+
{ ...label$7, property: 'line-height' },
|
|
2682
2693
|
],
|
|
2683
2694
|
},
|
|
2684
2695
|
}),
|
|
@@ -2699,60 +2710,60 @@ const CheckboxClass = compose(
|
|
|
2699
2710
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
|
2700
2711
|
`,
|
|
2701
2712
|
excludeAttrsSync: ['tabindex'],
|
|
2702
|
-
componentName: componentName$
|
|
2713
|
+
componentName: componentName$o,
|
|
2703
2714
|
})
|
|
2704
2715
|
);
|
|
2705
2716
|
|
|
2706
|
-
const vars$
|
|
2717
|
+
const vars$j = CheckboxClass.cssVarList;
|
|
2707
2718
|
|
|
2708
2719
|
const checkbox = {
|
|
2709
|
-
[vars$
|
|
2710
|
-
[vars$
|
|
2711
|
-
[vars$
|
|
2712
|
-
[vars$
|
|
2713
|
-
[vars$
|
|
2714
|
-
[vars$
|
|
2715
|
-
[vars$
|
|
2716
|
-
[vars$
|
|
2717
|
-
[vars$
|
|
2718
|
-
[vars$
|
|
2719
|
-
[vars$
|
|
2720
|
-
[vars$
|
|
2721
|
-
[vars$
|
|
2722
|
-
[vars$
|
|
2723
|
-
[vars$
|
|
2724
|
-
[vars$
|
|
2725
|
-
[vars$
|
|
2726
|
-
[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',
|
|
2727
2738
|
|
|
2728
2739
|
_checked: {
|
|
2729
|
-
[vars$
|
|
2730
|
-
[vars$
|
|
2740
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
|
2741
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
|
2731
2742
|
},
|
|
2732
2743
|
|
|
2733
2744
|
_disabled: {
|
|
2734
|
-
[vars$
|
|
2745
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
2735
2746
|
},
|
|
2736
2747
|
};
|
|
2737
2748
|
|
|
2738
2749
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
2739
2750
|
__proto__: null,
|
|
2740
2751
|
default: checkbox,
|
|
2741
|
-
vars: vars$
|
|
2752
|
+
vars: vars$j
|
|
2742
2753
|
});
|
|
2743
2754
|
|
|
2744
|
-
const componentName$
|
|
2755
|
+
const componentName$n = getComponentName('switch-toggle');
|
|
2745
2756
|
|
|
2746
2757
|
const {
|
|
2747
|
-
host: host$
|
|
2758
|
+
host: host$a,
|
|
2748
2759
|
component,
|
|
2749
2760
|
checkboxElement: track,
|
|
2750
2761
|
checkboxSurface: knob,
|
|
2751
2762
|
checkboxHiddenLabel,
|
|
2752
|
-
label: label$
|
|
2753
|
-
requiredIndicator: requiredIndicator$
|
|
2763
|
+
label: label$6,
|
|
2764
|
+
requiredIndicator: requiredIndicator$6,
|
|
2754
2765
|
helperText: helperText$4,
|
|
2755
|
-
errorMessage: errorMessage$
|
|
2766
|
+
errorMessage: errorMessage$6,
|
|
2756
2767
|
} = {
|
|
2757
2768
|
host: { selector: () => ':host' },
|
|
2758
2769
|
label: { selector: '::part(label)' },
|
|
@@ -2768,9 +2779,9 @@ const {
|
|
|
2768
2779
|
const SwitchToggleClass = compose(
|
|
2769
2780
|
createStyleMixin({
|
|
2770
2781
|
mappings: {
|
|
2771
|
-
hostWidth: { ...host$
|
|
2772
|
-
fontSize: [component, label$
|
|
2773
|
-
fontFamily: [label$
|
|
2782
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
2783
|
+
fontSize: [component, label$6, checkboxHiddenLabel],
|
|
2784
|
+
fontFamily: [label$6, helperText$4, errorMessage$6],
|
|
2774
2785
|
trackBorderWidth: { ...track, property: 'border-width' },
|
|
2775
2786
|
trackBorderStyle: { ...track, property: 'border-style' },
|
|
2776
2787
|
trackBorderColor: { ...track, property: 'border-color' },
|
|
@@ -2794,24 +2805,24 @@ const SwitchToggleClass = compose(
|
|
|
2794
2805
|
knobLeftOffset: { ...knob, property: 'left' },
|
|
2795
2806
|
|
|
2796
2807
|
labelSpacing: [
|
|
2797
|
-
{ ...label$
|
|
2808
|
+
{ ...label$6, property: 'padding-left' },
|
|
2798
2809
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
|
2799
2810
|
],
|
|
2800
2811
|
labelLineHeight: [
|
|
2801
|
-
{ ...label$
|
|
2812
|
+
{ ...label$6, property: 'line-height' },
|
|
2802
2813
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
|
2803
2814
|
],
|
|
2804
2815
|
labelFontWeight: [
|
|
2805
|
-
{ ...label$
|
|
2816
|
+
{ ...label$6, property: 'font-weight' },
|
|
2806
2817
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
|
2807
2818
|
],
|
|
2808
2819
|
labelTextColor: [
|
|
2809
|
-
{ ...label$
|
|
2810
|
-
{ ...requiredIndicator$
|
|
2811
|
-
{ ...label$
|
|
2820
|
+
{ ...label$6, property: 'color' },
|
|
2821
|
+
{ ...requiredIndicator$6, property: 'color' },
|
|
2822
|
+
{ ...label$6, property: '-webkit-text-fill-color' },
|
|
2812
2823
|
],
|
|
2813
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2814
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2824
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
|
2825
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
|
2815
2826
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
|
2816
2827
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
|
2817
2828
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
|
@@ -2844,83 +2855,83 @@ const SwitchToggleClass = compose(
|
|
|
2844
2855
|
}
|
|
2845
2856
|
`,
|
|
2846
2857
|
excludeAttrsSync: ['tabindex'],
|
|
2847
|
-
componentName: componentName$
|
|
2858
|
+
componentName: componentName$n,
|
|
2848
2859
|
})
|
|
2849
2860
|
);
|
|
2850
2861
|
|
|
2851
2862
|
const knobMargin = '2px';
|
|
2852
2863
|
const checkboxHeight = '1.25em';
|
|
2853
2864
|
|
|
2854
|
-
const globalRefs$
|
|
2855
|
-
const vars$
|
|
2865
|
+
const globalRefs$9 = getThemeRefs(globals);
|
|
2866
|
+
const vars$i = SwitchToggleClass.cssVarList;
|
|
2856
2867
|
|
|
2857
2868
|
const switchToggle = {
|
|
2858
|
-
[vars$
|
|
2859
|
-
[vars$
|
|
2860
|
-
|
|
2861
|
-
[vars$
|
|
2862
|
-
[vars$
|
|
2863
|
-
[vars$
|
|
2864
|
-
[vars$
|
|
2865
|
-
|
|
2866
|
-
[vars$
|
|
2867
|
-
[vars$
|
|
2868
|
-
[vars$
|
|
2869
|
-
[vars$
|
|
2870
|
-
[vars$
|
|
2871
|
-
[vars$
|
|
2872
|
-
[vars$
|
|
2873
|
-
|
|
2874
|
-
[vars$
|
|
2875
|
-
[vars$
|
|
2876
|
-
[vars$
|
|
2877
|
-
[vars$
|
|
2878
|
-
[vars$
|
|
2879
|
-
[vars$
|
|
2880
|
-
|
|
2881
|
-
[vars$
|
|
2882
|
-
[vars$
|
|
2883
|
-
[vars$
|
|
2884
|
-
[vars$
|
|
2885
|
-
[vars$
|
|
2886
|
-
[vars$
|
|
2887
|
-
|
|
2888
|
-
[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,
|
|
2889
2900
|
|
|
2890
2901
|
_checked: {
|
|
2891
|
-
[vars$
|
|
2892
|
-
[vars$
|
|
2893
|
-
[vars$
|
|
2894
|
-
[vars$
|
|
2895
|
-
[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,
|
|
2896
2907
|
},
|
|
2897
2908
|
|
|
2898
2909
|
_disabled: {
|
|
2899
|
-
[vars$
|
|
2900
|
-
[vars$
|
|
2901
|
-
[vars$
|
|
2902
|
-
[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,
|
|
2903
2914
|
_checked: {
|
|
2904
|
-
[vars$
|
|
2905
|
-
[vars$
|
|
2915
|
+
[vars$i.knobColor]: globalRefs$9.colors.surface.light,
|
|
2916
|
+
[vars$i.trackBackgroundColor]: globalRefs$9.colors.surface.main,
|
|
2906
2917
|
},
|
|
2907
2918
|
},
|
|
2908
2919
|
|
|
2909
2920
|
_invalid: {
|
|
2910
|
-
[vars$
|
|
2911
|
-
[vars$
|
|
2921
|
+
[vars$i.trackBorderColor]: globalRefs$9.colors.error.main,
|
|
2922
|
+
[vars$i.knobColor]: globalRefs$9.colors.error.main,
|
|
2912
2923
|
},
|
|
2913
2924
|
};
|
|
2914
2925
|
|
|
2915
2926
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
2916
2927
|
__proto__: null,
|
|
2917
2928
|
default: switchToggle,
|
|
2918
|
-
vars: vars$
|
|
2929
|
+
vars: vars$i
|
|
2919
2930
|
});
|
|
2920
2931
|
|
|
2921
|
-
const componentName$
|
|
2932
|
+
const componentName$m = getComponentName('container');
|
|
2922
2933
|
|
|
2923
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
2934
|
+
class RawContainer extends createBaseClass({ componentName: componentName$m, baseSelector: ':host > slot' }) {
|
|
2924
2935
|
constructor() {
|
|
2925
2936
|
super();
|
|
2926
2937
|
|
|
@@ -2972,7 +2983,7 @@ const ContainerClass = compose(
|
|
|
2972
2983
|
componentNameValidationMixin
|
|
2973
2984
|
)(RawContainer);
|
|
2974
2985
|
|
|
2975
|
-
const globalRefs$
|
|
2986
|
+
const globalRefs$8 = getThemeRefs(globals);
|
|
2976
2987
|
|
|
2977
2988
|
const compVars$2 = ContainerClass.cssVarList;
|
|
2978
2989
|
|
|
@@ -2994,7 +3005,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
2994
3005
|
horizontalAlignment,
|
|
2995
3006
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
2996
3007
|
},
|
|
2997
|
-
componentName$
|
|
3008
|
+
componentName$m
|
|
2998
3009
|
);
|
|
2999
3010
|
|
|
3000
3011
|
const { shadowColor } = helperRefs$2;
|
|
@@ -3004,8 +3015,8 @@ const container = {
|
|
|
3004
3015
|
|
|
3005
3016
|
[compVars$2.hostWidth]: '100%',
|
|
3006
3017
|
[compVars$2.boxShadow]: 'none',
|
|
3007
|
-
[compVars$2.backgroundColor]: globalRefs$
|
|
3008
|
-
[compVars$2.color]: globalRefs$
|
|
3018
|
+
[compVars$2.backgroundColor]: globalRefs$8.colors.surface.light,
|
|
3019
|
+
[compVars$2.color]: globalRefs$8.colors.surface.contrast,
|
|
3009
3020
|
|
|
3010
3021
|
verticalPadding: {
|
|
3011
3022
|
sm: { [compVars$2.verticalPadding]: '5px' },
|
|
@@ -3051,34 +3062,34 @@ const container = {
|
|
|
3051
3062
|
|
|
3052
3063
|
shadow: {
|
|
3053
3064
|
sm: {
|
|
3054
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3065
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
|
|
3055
3066
|
},
|
|
3056
3067
|
md: {
|
|
3057
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3068
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
|
|
3058
3069
|
},
|
|
3059
3070
|
lg: {
|
|
3060
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3071
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
|
|
3061
3072
|
},
|
|
3062
3073
|
xl: {
|
|
3063
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3074
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
|
|
3064
3075
|
},
|
|
3065
3076
|
'2xl': {
|
|
3066
3077
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
|
3067
|
-
[compVars$2.boxShadow]: `${globalRefs$
|
|
3078
|
+
[compVars$2.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
|
|
3068
3079
|
},
|
|
3069
3080
|
},
|
|
3070
3081
|
|
|
3071
3082
|
borderRadius: {
|
|
3072
|
-
sm: { [compVars$2.borderRadius]: globalRefs$
|
|
3073
|
-
md: { [compVars$2.borderRadius]: globalRefs$
|
|
3074
|
-
lg: { [compVars$2.borderRadius]: globalRefs$
|
|
3075
|
-
xl: { [compVars$2.borderRadius]: globalRefs$
|
|
3076
|
-
'2xl': { [compVars$2.borderRadius]: globalRefs$
|
|
3077
|
-
'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'] },
|
|
3078
3089
|
},
|
|
3079
3090
|
};
|
|
3080
3091
|
|
|
3081
|
-
const vars$
|
|
3092
|
+
const vars$h = {
|
|
3082
3093
|
...compVars$2,
|
|
3083
3094
|
...helperVars$2,
|
|
3084
3095
|
};
|
|
@@ -3086,7 +3097,7 @@ const vars$f = {
|
|
|
3086
3097
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
3087
3098
|
__proto__: null,
|
|
3088
3099
|
default: container,
|
|
3089
|
-
vars: vars$
|
|
3100
|
+
vars: vars$h
|
|
3090
3101
|
});
|
|
3091
3102
|
|
|
3092
3103
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -3139,49 +3150,49 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
3139
3150
|
return CssVarImageClass;
|
|
3140
3151
|
};
|
|
3141
3152
|
|
|
3142
|
-
const componentName$
|
|
3153
|
+
const componentName$l = getComponentName('logo');
|
|
3143
3154
|
|
|
3144
3155
|
const LogoClass = createCssVarImageClass({
|
|
3145
|
-
componentName: componentName$
|
|
3156
|
+
componentName: componentName$l,
|
|
3146
3157
|
varName: 'url',
|
|
3147
3158
|
fallbackVarName: 'fallbackUrl',
|
|
3148
3159
|
});
|
|
3149
3160
|
|
|
3150
|
-
const vars$
|
|
3161
|
+
const vars$g = LogoClass.cssVarList;
|
|
3151
3162
|
|
|
3152
3163
|
const logo$1 = {
|
|
3153
|
-
[vars$
|
|
3164
|
+
[vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
3154
3165
|
};
|
|
3155
3166
|
|
|
3156
3167
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
|
3157
3168
|
__proto__: null,
|
|
3158
3169
|
default: logo$1,
|
|
3159
|
-
vars: vars$
|
|
3170
|
+
vars: vars$g
|
|
3160
3171
|
});
|
|
3161
3172
|
|
|
3162
|
-
const componentName$
|
|
3173
|
+
const componentName$k = getComponentName('totp-image');
|
|
3163
3174
|
|
|
3164
3175
|
const TotpImageClass = createCssVarImageClass({
|
|
3165
|
-
componentName: componentName$
|
|
3176
|
+
componentName: componentName$k,
|
|
3166
3177
|
varName: 'url',
|
|
3167
3178
|
fallbackVarName: 'fallbackUrl',
|
|
3168
3179
|
});
|
|
3169
3180
|
|
|
3170
|
-
const vars$
|
|
3181
|
+
const vars$f = TotpImageClass.cssVarList;
|
|
3171
3182
|
|
|
3172
3183
|
const logo = {
|
|
3173
|
-
[vars$
|
|
3184
|
+
[vars$f.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
3174
3185
|
};
|
|
3175
3186
|
|
|
3176
3187
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
3177
3188
|
__proto__: null,
|
|
3178
3189
|
default: logo,
|
|
3179
|
-
vars: vars$
|
|
3190
|
+
vars: vars$f
|
|
3180
3191
|
});
|
|
3181
3192
|
|
|
3182
|
-
const componentName$
|
|
3193
|
+
const componentName$j = getComponentName('text');
|
|
3183
3194
|
|
|
3184
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
3195
|
+
class RawText extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
|
|
3185
3196
|
constructor() {
|
|
3186
3197
|
super();
|
|
3187
3198
|
|
|
@@ -3223,98 +3234,98 @@ const TextClass = compose(
|
|
|
3223
3234
|
componentNameValidationMixin
|
|
3224
3235
|
)(RawText);
|
|
3225
3236
|
|
|
3226
|
-
const globalRefs$
|
|
3227
|
-
const vars$
|
|
3237
|
+
const globalRefs$7 = getThemeRefs(globals);
|
|
3238
|
+
const vars$e = TextClass.cssVarList;
|
|
3228
3239
|
|
|
3229
3240
|
const text$2 = {
|
|
3230
|
-
[vars$
|
|
3231
|
-
[vars$
|
|
3232
|
-
[vars$
|
|
3241
|
+
[vars$e.textLineHeight]: '1em',
|
|
3242
|
+
[vars$e.textAlign]: 'left',
|
|
3243
|
+
[vars$e.textColor]: globalRefs$7.colors.surface.dark,
|
|
3233
3244
|
variant: {
|
|
3234
3245
|
h1: {
|
|
3235
|
-
[vars$
|
|
3236
|
-
[vars$
|
|
3237
|
-
[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,
|
|
3238
3249
|
},
|
|
3239
3250
|
h2: {
|
|
3240
|
-
[vars$
|
|
3241
|
-
[vars$
|
|
3242
|
-
[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,
|
|
3243
3254
|
},
|
|
3244
3255
|
h3: {
|
|
3245
|
-
[vars$
|
|
3246
|
-
[vars$
|
|
3247
|
-
[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,
|
|
3248
3259
|
},
|
|
3249
3260
|
subtitle1: {
|
|
3250
|
-
[vars$
|
|
3251
|
-
[vars$
|
|
3252
|
-
[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,
|
|
3253
3264
|
},
|
|
3254
3265
|
subtitle2: {
|
|
3255
|
-
[vars$
|
|
3256
|
-
[vars$
|
|
3257
|
-
[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,
|
|
3258
3269
|
},
|
|
3259
3270
|
body1: {
|
|
3260
|
-
[vars$
|
|
3261
|
-
[vars$
|
|
3262
|
-
[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,
|
|
3263
3274
|
},
|
|
3264
3275
|
body2: {
|
|
3265
|
-
[vars$
|
|
3266
|
-
[vars$
|
|
3267
|
-
[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,
|
|
3268
3279
|
},
|
|
3269
3280
|
},
|
|
3270
3281
|
|
|
3271
3282
|
mode: {
|
|
3272
3283
|
primary: {
|
|
3273
|
-
[vars$
|
|
3284
|
+
[vars$e.textColor]: globalRefs$7.colors.primary.main,
|
|
3274
3285
|
},
|
|
3275
3286
|
secondary: {
|
|
3276
|
-
[vars$
|
|
3287
|
+
[vars$e.textColor]: globalRefs$7.colors.secondary.main,
|
|
3277
3288
|
},
|
|
3278
3289
|
error: {
|
|
3279
|
-
[vars$
|
|
3290
|
+
[vars$e.textColor]: globalRefs$7.colors.error.main,
|
|
3280
3291
|
},
|
|
3281
3292
|
success: {
|
|
3282
|
-
[vars$
|
|
3293
|
+
[vars$e.textColor]: globalRefs$7.colors.success.main,
|
|
3283
3294
|
},
|
|
3284
3295
|
},
|
|
3285
3296
|
|
|
3286
3297
|
textAlign: {
|
|
3287
|
-
right: { [vars$
|
|
3288
|
-
left: { [vars$
|
|
3289
|
-
center: { [vars$
|
|
3298
|
+
right: { [vars$e.textAlign]: 'right' },
|
|
3299
|
+
left: { [vars$e.textAlign]: 'left' },
|
|
3300
|
+
center: { [vars$e.textAlign]: 'center' },
|
|
3290
3301
|
},
|
|
3291
3302
|
|
|
3292
3303
|
_fullWidth: {
|
|
3293
|
-
[vars$
|
|
3304
|
+
[vars$e.hostWidth]: '100%',
|
|
3294
3305
|
},
|
|
3295
3306
|
|
|
3296
3307
|
_italic: {
|
|
3297
|
-
[vars$
|
|
3308
|
+
[vars$e.fontStyle]: 'italic',
|
|
3298
3309
|
},
|
|
3299
3310
|
|
|
3300
3311
|
_uppercase: {
|
|
3301
|
-
[vars$
|
|
3312
|
+
[vars$e.textTransform]: 'uppercase',
|
|
3302
3313
|
},
|
|
3303
3314
|
|
|
3304
3315
|
_lowercase: {
|
|
3305
|
-
[vars$
|
|
3316
|
+
[vars$e.textTransform]: 'lowercase',
|
|
3306
3317
|
},
|
|
3307
3318
|
};
|
|
3308
3319
|
|
|
3309
3320
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
3310
3321
|
__proto__: null,
|
|
3311
3322
|
default: text$2,
|
|
3312
|
-
vars: vars$
|
|
3323
|
+
vars: vars$e
|
|
3313
3324
|
});
|
|
3314
3325
|
|
|
3315
|
-
const componentName$
|
|
3326
|
+
const componentName$i = getComponentName('link');
|
|
3316
3327
|
|
|
3317
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
3328
|
+
class RawLink extends createBaseClass({ componentName: componentName$i, baseSelector: ':host a' }) {
|
|
3318
3329
|
constructor() {
|
|
3319
3330
|
super();
|
|
3320
3331
|
|
|
@@ -3360,12 +3371,12 @@ const selectors$1 = {
|
|
|
3360
3371
|
text: { selector: () => TextClass.componentName },
|
|
3361
3372
|
};
|
|
3362
3373
|
|
|
3363
|
-
const { anchor, text: text$1, host: host$
|
|
3374
|
+
const { anchor, text: text$1, host: host$9, wrapper: wrapper$1 } = selectors$1;
|
|
3364
3375
|
|
|
3365
3376
|
const LinkClass = compose(
|
|
3366
3377
|
createStyleMixin({
|
|
3367
3378
|
mappings: {
|
|
3368
|
-
hostWidth: { ...host$
|
|
3379
|
+
hostWidth: { ...host$9, property: 'width' },
|
|
3369
3380
|
textAlign: wrapper$1,
|
|
3370
3381
|
textColor: [
|
|
3371
3382
|
{ ...anchor, property: 'color' },
|
|
@@ -3378,36 +3389,36 @@ const LinkClass = compose(
|
|
|
3378
3389
|
componentNameValidationMixin
|
|
3379
3390
|
)(RawLink);
|
|
3380
3391
|
|
|
3381
|
-
const globalRefs$
|
|
3382
|
-
const vars$
|
|
3392
|
+
const globalRefs$6 = getThemeRefs(globals);
|
|
3393
|
+
const vars$d = LinkClass.cssVarList;
|
|
3383
3394
|
|
|
3384
3395
|
const link = {
|
|
3385
|
-
[vars$
|
|
3396
|
+
[vars$d.cursor]: 'pointer',
|
|
3386
3397
|
|
|
3387
|
-
[vars$
|
|
3398
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
|
3388
3399
|
|
|
3389
3400
|
textAlign: {
|
|
3390
|
-
right: { [vars$
|
|
3391
|
-
left: { [vars$
|
|
3392
|
-
center: { [vars$
|
|
3401
|
+
right: { [vars$d.textAlign]: 'right' },
|
|
3402
|
+
left: { [vars$d.textAlign]: 'left' },
|
|
3403
|
+
center: { [vars$d.textAlign]: 'center' },
|
|
3393
3404
|
},
|
|
3394
3405
|
|
|
3395
3406
|
_fullWidth: {
|
|
3396
|
-
[vars$
|
|
3407
|
+
[vars$d.hostWidth]: '100%',
|
|
3397
3408
|
},
|
|
3398
3409
|
|
|
3399
3410
|
mode: {
|
|
3400
3411
|
primary: {
|
|
3401
|
-
[vars$
|
|
3412
|
+
[vars$d.textColor]: globalRefs$6.colors.primary.main,
|
|
3402
3413
|
},
|
|
3403
3414
|
secondary: {
|
|
3404
|
-
[vars$
|
|
3415
|
+
[vars$d.textColor]: globalRefs$6.colors.secondary.main,
|
|
3405
3416
|
},
|
|
3406
3417
|
error: {
|
|
3407
|
-
[vars$
|
|
3418
|
+
[vars$d.textColor]: globalRefs$6.colors.error.main,
|
|
3408
3419
|
},
|
|
3409
3420
|
success: {
|
|
3410
|
-
[vars$
|
|
3421
|
+
[vars$d.textColor]: globalRefs$6.colors.success.main,
|
|
3411
3422
|
},
|
|
3412
3423
|
},
|
|
3413
3424
|
};
|
|
@@ -3415,11 +3426,11 @@ const link = {
|
|
|
3415
3426
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
3416
3427
|
__proto__: null,
|
|
3417
3428
|
default: link,
|
|
3418
|
-
vars: vars$
|
|
3429
|
+
vars: vars$d
|
|
3419
3430
|
});
|
|
3420
3431
|
|
|
3421
|
-
const componentName$
|
|
3422
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
3432
|
+
const componentName$h = getComponentName('divider');
|
|
3433
|
+
class RawDivider extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
|
|
3423
3434
|
constructor() {
|
|
3424
3435
|
super();
|
|
3425
3436
|
|
|
@@ -3464,7 +3475,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$e, baseS
|
|
|
3464
3475
|
}
|
|
3465
3476
|
}
|
|
3466
3477
|
|
|
3467
|
-
const { host: host$
|
|
3478
|
+
const { host: host$8, before, after: after$1, text } = {
|
|
3468
3479
|
host: { selector: () => ':host' },
|
|
3469
3480
|
before: { selector: '::before' },
|
|
3470
3481
|
after: { selector: '::after' },
|
|
@@ -3474,8 +3485,8 @@ const { host: host$7, before, after: after$1, text } = {
|
|
|
3474
3485
|
const DividerClass = compose(
|
|
3475
3486
|
createStyleMixin({
|
|
3476
3487
|
mappings: {
|
|
3477
|
-
hostWidth: { ...host$
|
|
3478
|
-
hostPadding: { ...host$
|
|
3488
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
3489
|
+
hostPadding: { ...host$8, property: 'padding' },
|
|
3479
3490
|
|
|
3480
3491
|
minHeight: {},
|
|
3481
3492
|
alignItems: {},
|
|
@@ -3515,7 +3526,7 @@ const DividerClass = compose(
|
|
|
3515
3526
|
componentNameValidationMixin
|
|
3516
3527
|
)(RawDivider);
|
|
3517
3528
|
|
|
3518
|
-
const globalRefs$
|
|
3529
|
+
const globalRefs$5 = getThemeRefs(globals);
|
|
3519
3530
|
const compVars$1 = DividerClass.cssVarList;
|
|
3520
3531
|
|
|
3521
3532
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
@@ -3523,7 +3534,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
3523
3534
|
thickness: '2px',
|
|
3524
3535
|
spacing: '10px',
|
|
3525
3536
|
},
|
|
3526
|
-
componentName$
|
|
3537
|
+
componentName$h
|
|
3527
3538
|
);
|
|
3528
3539
|
|
|
3529
3540
|
const divider = {
|
|
@@ -3533,7 +3544,7 @@ const divider = {
|
|
|
3533
3544
|
[compVars$1.flexDirection]: 'row',
|
|
3534
3545
|
[compVars$1.alignSelf]: 'stretch',
|
|
3535
3546
|
[compVars$1.hostWidth]: '100%',
|
|
3536
|
-
[compVars$1.stripeColor]: globalRefs$
|
|
3547
|
+
[compVars$1.stripeColor]: globalRefs$5.colors.surface.main,
|
|
3537
3548
|
[compVars$1.stripeColorOpacity]: '0.5',
|
|
3538
3549
|
[compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
|
|
3539
3550
|
[compVars$1.labelTextWidth]: 'fit-content',
|
|
@@ -3552,7 +3563,7 @@ const divider = {
|
|
|
3552
3563
|
},
|
|
3553
3564
|
};
|
|
3554
3565
|
|
|
3555
|
-
const vars$
|
|
3566
|
+
const vars$c = {
|
|
3556
3567
|
...compVars$1,
|
|
3557
3568
|
...helperVars$1,
|
|
3558
3569
|
};
|
|
@@ -3560,20 +3571,20 @@ const vars$a = {
|
|
|
3560
3571
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
3561
3572
|
__proto__: null,
|
|
3562
3573
|
default: divider,
|
|
3563
|
-
vars: vars$
|
|
3574
|
+
vars: vars$c
|
|
3564
3575
|
});
|
|
3565
3576
|
|
|
3566
3577
|
/* eslint-disable no-param-reassign */
|
|
3567
3578
|
|
|
3568
|
-
const componentName$
|
|
3579
|
+
const componentName$g = getComponentName('passcode-internal');
|
|
3569
3580
|
|
|
3570
|
-
createBaseInputClass({ componentName: componentName$
|
|
3581
|
+
createBaseInputClass({ componentName: componentName$g, baseSelector: 'div' });
|
|
3571
3582
|
|
|
3572
|
-
const componentName$
|
|
3583
|
+
const componentName$f = getComponentName('passcode');
|
|
3573
3584
|
|
|
3574
3585
|
const observedAttributes$3 = ['digits'];
|
|
3575
3586
|
|
|
3576
|
-
const customMixin$
|
|
3587
|
+
const customMixin$4 = (superclass) =>
|
|
3577
3588
|
class PasscodeMixinClass extends superclass {
|
|
3578
3589
|
static get observedAttributes() {
|
|
3579
3590
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -3588,17 +3599,17 @@ const customMixin$3 = (superclass) =>
|
|
|
3588
3599
|
const template = document.createElement('template');
|
|
3589
3600
|
|
|
3590
3601
|
template.innerHTML = `
|
|
3591
|
-
<${componentName$
|
|
3602
|
+
<${componentName$g}
|
|
3592
3603
|
bordered="true"
|
|
3593
3604
|
name="code"
|
|
3594
3605
|
tabindex="-1"
|
|
3595
3606
|
slot="input"
|
|
3596
|
-
></${componentName$
|
|
3607
|
+
><slot></slot></${componentName$g}>
|
|
3597
3608
|
`;
|
|
3598
3609
|
|
|
3599
3610
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3600
3611
|
|
|
3601
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3612
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$g);
|
|
3602
3613
|
|
|
3603
3614
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
|
3604
3615
|
}
|
|
@@ -3613,13 +3624,13 @@ const customMixin$3 = (superclass) =>
|
|
|
3613
3624
|
};
|
|
3614
3625
|
|
|
3615
3626
|
const {
|
|
3616
|
-
host: host$
|
|
3627
|
+
host: host$7,
|
|
3617
3628
|
digitField,
|
|
3618
|
-
label: label$
|
|
3619
|
-
requiredIndicator: requiredIndicator$
|
|
3620
|
-
internalWrapper,
|
|
3629
|
+
label: label$5,
|
|
3630
|
+
requiredIndicator: requiredIndicator$5,
|
|
3631
|
+
internalWrapper: internalWrapper$1,
|
|
3621
3632
|
focusedDigitField,
|
|
3622
|
-
errorMessage: errorMessage$
|
|
3633
|
+
errorMessage: errorMessage$5,
|
|
3623
3634
|
} = {
|
|
3624
3635
|
host: { selector: () => ':host' },
|
|
3625
3636
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
|
@@ -3635,15 +3646,15 @@ const textVars$2 = TextFieldClass.cssVarList;
|
|
|
3635
3646
|
const PasscodeClass = compose(
|
|
3636
3647
|
createStyleMixin({
|
|
3637
3648
|
mappings: {
|
|
3638
|
-
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$
|
|
3649
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
|
|
3639
3650
|
hostWidth: { property: 'width' },
|
|
3640
|
-
fontFamily: host$
|
|
3651
|
+
fontFamily: host$7,
|
|
3641
3652
|
labelTextColor: [
|
|
3642
|
-
{ ...label$
|
|
3643
|
-
{ ...requiredIndicator$
|
|
3653
|
+
{ ...label$5, property: 'color' },
|
|
3654
|
+
{ ...requiredIndicator$5, property: 'color' },
|
|
3644
3655
|
],
|
|
3645
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
3646
|
-
errorMessageTextColor: { ...errorMessage$
|
|
3656
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
|
3657
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
|
3647
3658
|
digitValueTextColor: {
|
|
3648
3659
|
selector: TextFieldClass.componentName,
|
|
3649
3660
|
property: textVars$2.inputValueTextColor,
|
|
@@ -3655,7 +3666,7 @@ const PasscodeClass = compose(
|
|
|
3655
3666
|
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
|
3656
3667
|
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
|
3657
3668
|
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
|
3658
|
-
digitSpacing: { ...internalWrapper, property: 'gap' },
|
|
3669
|
+
digitSpacing: { ...internalWrapper$1, property: 'gap' },
|
|
3659
3670
|
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
|
3660
3671
|
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
|
3661
3672
|
|
|
@@ -3665,7 +3676,7 @@ const PasscodeClass = compose(
|
|
|
3665
3676
|
draggableMixin,
|
|
3666
3677
|
composedProxyInputMixin,
|
|
3667
3678
|
componentNameValidationMixin,
|
|
3668
|
-
customMixin$
|
|
3679
|
+
customMixin$4
|
|
3669
3680
|
)(
|
|
3670
3681
|
createProxy({
|
|
3671
3682
|
slots: [],
|
|
@@ -3736,44 +3747,44 @@ const PasscodeClass = compose(
|
|
|
3736
3747
|
${resetInputCursor('vaadin-text-field')}
|
|
3737
3748
|
`,
|
|
3738
3749
|
excludeAttrsSync: ['tabindex'],
|
|
3739
|
-
componentName: componentName$
|
|
3750
|
+
componentName: componentName$f,
|
|
3740
3751
|
})
|
|
3741
3752
|
);
|
|
3742
3753
|
|
|
3743
|
-
const vars$
|
|
3754
|
+
const vars$b = PasscodeClass.cssVarList;
|
|
3744
3755
|
|
|
3745
3756
|
const passcode = {
|
|
3746
|
-
[vars$
|
|
3747
|
-
[vars$
|
|
3748
|
-
[vars$
|
|
3749
|
-
[vars$
|
|
3750
|
-
[vars$
|
|
3751
|
-
[vars$
|
|
3752
|
-
[vars$
|
|
3753
|
-
[vars$
|
|
3754
|
-
[vars$
|
|
3755
|
-
[vars$
|
|
3756
|
-
[vars$
|
|
3757
|
-
[vars$
|
|
3758
|
-
[vars$
|
|
3759
|
-
[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,
|
|
3760
3771
|
|
|
3761
3772
|
_hideCursor: {
|
|
3762
|
-
[vars$
|
|
3773
|
+
[vars$b.digitCaretTextColor]: 'transparent',
|
|
3763
3774
|
},
|
|
3764
3775
|
};
|
|
3765
3776
|
|
|
3766
3777
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
3767
3778
|
__proto__: null,
|
|
3768
3779
|
default: passcode,
|
|
3769
|
-
vars: vars$
|
|
3780
|
+
vars: vars$b
|
|
3770
3781
|
});
|
|
3771
3782
|
|
|
3772
|
-
const componentName$
|
|
3783
|
+
const componentName$e = getComponentName('loader-linear');
|
|
3773
3784
|
|
|
3774
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
3785
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
|
|
3775
3786
|
static get componentName() {
|
|
3776
|
-
return componentName$
|
|
3787
|
+
return componentName$e;
|
|
3777
3788
|
}
|
|
3778
3789
|
|
|
3779
3790
|
constructor() {
|
|
@@ -3809,18 +3820,18 @@ const selectors = {
|
|
|
3809
3820
|
host: { selector: () => ':host' },
|
|
3810
3821
|
};
|
|
3811
3822
|
|
|
3812
|
-
const { after, host: host$
|
|
3823
|
+
const { after, host: host$6 } = selectors;
|
|
3813
3824
|
|
|
3814
3825
|
const LoaderLinearClass = compose(
|
|
3815
3826
|
createStyleMixin({
|
|
3816
3827
|
mappings: {
|
|
3817
3828
|
hostDisplay: {},
|
|
3818
|
-
hostWidth: { ...host$
|
|
3829
|
+
hostWidth: { ...host$6, property: 'width' },
|
|
3819
3830
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
3820
3831
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
3821
3832
|
verticalPadding: [
|
|
3822
|
-
{ ...host$
|
|
3823
|
-
{ ...host$
|
|
3833
|
+
{ ...host$6, property: 'padding-top' },
|
|
3834
|
+
{ ...host$6, property: 'padding-bottom' },
|
|
3824
3835
|
],
|
|
3825
3836
|
barBackgroundColor: { property: 'background-color' },
|
|
3826
3837
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -3834,54 +3845,54 @@ const LoaderLinearClass = compose(
|
|
|
3834
3845
|
componentNameValidationMixin
|
|
3835
3846
|
)(RawLoaderLinear);
|
|
3836
3847
|
|
|
3837
|
-
const globalRefs$
|
|
3838
|
-
const vars$
|
|
3848
|
+
const globalRefs$4 = getThemeRefs(globals);
|
|
3849
|
+
const vars$a = LoaderLinearClass.cssVarList;
|
|
3839
3850
|
|
|
3840
3851
|
const loaderLinear = {
|
|
3841
|
-
[vars$
|
|
3842
|
-
[vars$
|
|
3852
|
+
[vars$a.hostDisplay]: 'inline-block',
|
|
3853
|
+
[vars$a.hostWidth]: '100%',
|
|
3843
3854
|
|
|
3844
|
-
[vars$
|
|
3845
|
-
[vars$
|
|
3855
|
+
[vars$a.barColor]: globalRefs$4.colors.surface.contrast,
|
|
3856
|
+
[vars$a.barWidth]: '20%',
|
|
3846
3857
|
|
|
3847
|
-
[vars$
|
|
3848
|
-
[vars$
|
|
3858
|
+
[vars$a.barBackgroundColor]: globalRefs$4.colors.surface.main,
|
|
3859
|
+
[vars$a.barBorderRadius]: '4px',
|
|
3849
3860
|
|
|
3850
|
-
[vars$
|
|
3851
|
-
[vars$
|
|
3852
|
-
[vars$
|
|
3853
|
-
[vars$
|
|
3861
|
+
[vars$a.animationDuration]: '2s',
|
|
3862
|
+
[vars$a.animationTimingFunction]: 'linear',
|
|
3863
|
+
[vars$a.animationIterationCount]: 'infinite',
|
|
3864
|
+
[vars$a.verticalPadding]: '0.25em',
|
|
3854
3865
|
|
|
3855
3866
|
size: {
|
|
3856
|
-
xs: { [vars$
|
|
3857
|
-
sm: { [vars$
|
|
3858
|
-
md: { [vars$
|
|
3859
|
-
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' },
|
|
3860
3871
|
},
|
|
3861
3872
|
|
|
3862
3873
|
mode: {
|
|
3863
3874
|
primary: {
|
|
3864
|
-
[vars$
|
|
3875
|
+
[vars$a.barColor]: globalRefs$4.colors.primary.main,
|
|
3865
3876
|
},
|
|
3866
3877
|
secondary: {
|
|
3867
|
-
[vars$
|
|
3878
|
+
[vars$a.barColor]: globalRefs$4.colors.secondary.main,
|
|
3868
3879
|
},
|
|
3869
3880
|
},
|
|
3870
3881
|
|
|
3871
3882
|
_hidden: {
|
|
3872
|
-
[vars$
|
|
3883
|
+
[vars$a.hostDisplay]: 'none',
|
|
3873
3884
|
},
|
|
3874
3885
|
};
|
|
3875
3886
|
|
|
3876
3887
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
3877
3888
|
__proto__: null,
|
|
3878
3889
|
default: loaderLinear,
|
|
3879
|
-
vars: vars$
|
|
3890
|
+
vars: vars$a
|
|
3880
3891
|
});
|
|
3881
3892
|
|
|
3882
|
-
const componentName$
|
|
3893
|
+
const componentName$d = getComponentName('loader-radial');
|
|
3883
3894
|
|
|
3884
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
3895
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
|
|
3885
3896
|
constructor() {
|
|
3886
3897
|
super();
|
|
3887
3898
|
|
|
@@ -3925,22 +3936,22 @@ const LoaderRadialClass = compose(
|
|
|
3925
3936
|
componentNameValidationMixin
|
|
3926
3937
|
)(RawLoaderRadial);
|
|
3927
3938
|
|
|
3928
|
-
const globalRefs$
|
|
3939
|
+
const globalRefs$3 = getThemeRefs(globals);
|
|
3929
3940
|
const compVars = LoaderRadialClass.cssVarList;
|
|
3930
3941
|
|
|
3931
3942
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
3932
3943
|
{
|
|
3933
|
-
spinnerColor: globalRefs$
|
|
3944
|
+
spinnerColor: globalRefs$3.colors.surface.contrast,
|
|
3934
3945
|
mode: {
|
|
3935
3946
|
primary: {
|
|
3936
|
-
spinnerColor: globalRefs$
|
|
3947
|
+
spinnerColor: globalRefs$3.colors.primary.main,
|
|
3937
3948
|
},
|
|
3938
3949
|
secondary: {
|
|
3939
|
-
spinnerColor: globalRefs$
|
|
3950
|
+
spinnerColor: globalRefs$3.colors.secondary.main,
|
|
3940
3951
|
},
|
|
3941
3952
|
},
|
|
3942
3953
|
},
|
|
3943
|
-
componentName$
|
|
3954
|
+
componentName$d
|
|
3944
3955
|
);
|
|
3945
3956
|
|
|
3946
3957
|
const loaderRadial = {
|
|
@@ -3969,7 +3980,7 @@ const loaderRadial = {
|
|
|
3969
3980
|
[compVars.hostDisplay]: 'none',
|
|
3970
3981
|
},
|
|
3971
3982
|
};
|
|
3972
|
-
const vars$
|
|
3983
|
+
const vars$9 = {
|
|
3973
3984
|
...compVars,
|
|
3974
3985
|
...helperVars,
|
|
3975
3986
|
};
|
|
@@ -3977,10 +3988,10 @@ const vars$7 = {
|
|
|
3977
3988
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
3978
3989
|
__proto__: null,
|
|
3979
3990
|
default: loaderRadial,
|
|
3980
|
-
vars: vars$
|
|
3991
|
+
vars: vars$9
|
|
3981
3992
|
});
|
|
3982
3993
|
|
|
3983
|
-
const componentName$
|
|
3994
|
+
const componentName$c = getComponentName('combo-box');
|
|
3984
3995
|
|
|
3985
3996
|
const ComboBoxMixin = (superclass) =>
|
|
3986
3997
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -4032,15 +4043,15 @@ const ComboBoxMixin = (superclass) =>
|
|
|
4032
4043
|
};
|
|
4033
4044
|
|
|
4034
4045
|
const {
|
|
4035
|
-
host: host$
|
|
4046
|
+
host: host$5,
|
|
4036
4047
|
inputField: inputField$2,
|
|
4037
4048
|
inputElement,
|
|
4038
4049
|
placeholder,
|
|
4039
4050
|
toggle,
|
|
4040
|
-
label: label$
|
|
4041
|
-
requiredIndicator: requiredIndicator$
|
|
4051
|
+
label: label$4,
|
|
4052
|
+
requiredIndicator: requiredIndicator$4,
|
|
4042
4053
|
helperText: helperText$3,
|
|
4043
|
-
errorMessage: errorMessage$
|
|
4054
|
+
errorMessage: errorMessage$4,
|
|
4044
4055
|
} = {
|
|
4045
4056
|
host: { selector: () => ':host' },
|
|
4046
4057
|
inputField: { selector: '::part(input-field)' },
|
|
@@ -4061,22 +4072,22 @@ const {
|
|
|
4061
4072
|
const ComboBoxClass = compose(
|
|
4062
4073
|
createStyleMixin({
|
|
4063
4074
|
mappings: {
|
|
4064
|
-
hostWidth: { ...host$
|
|
4075
|
+
hostWidth: { ...host$5, property: 'width' },
|
|
4065
4076
|
// we apply font-size also on the host so we can set its width with em
|
|
4066
|
-
fontSize: [{}, host$
|
|
4067
|
-
fontFamily: [label$
|
|
4077
|
+
fontSize: [{}, host$5],
|
|
4078
|
+
fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
|
|
4068
4079
|
labelTextColor: [
|
|
4069
|
-
{ ...label$
|
|
4070
|
-
{ ...requiredIndicator$
|
|
4080
|
+
{ ...label$4, property: 'color' },
|
|
4081
|
+
{ ...requiredIndicator$4, property: 'color' },
|
|
4071
4082
|
],
|
|
4072
|
-
errorMessageTextColor: { ...errorMessage$
|
|
4083
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
|
4073
4084
|
inputHeight: { ...inputField$2, property: 'height' },
|
|
4074
4085
|
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
|
4075
4086
|
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
|
4076
4087
|
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
|
4077
4088
|
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
|
4078
4089
|
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
|
4079
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
4090
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
|
4080
4091
|
inputValueTextColor: { ...inputField$2, property: 'color' },
|
|
4081
4092
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
|
4082
4093
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
|
@@ -4124,7 +4135,7 @@ const ComboBoxClass = compose(
|
|
|
4124
4135
|
ComboBoxMixin
|
|
4125
4136
|
)(
|
|
4126
4137
|
createProxy({
|
|
4127
|
-
slots: ['prefix'],
|
|
4138
|
+
slots: ['', 'prefix'],
|
|
4128
4139
|
wrappedEleName: 'vaadin-combo-box',
|
|
4129
4140
|
style: () => `
|
|
4130
4141
|
:host {
|
|
@@ -4160,45 +4171,45 @@ const ComboBoxClass = compose(
|
|
|
4160
4171
|
// and reset items to an empty array, and opening the list box with no items
|
|
4161
4172
|
// to display.
|
|
4162
4173
|
excludeAttrsSync: ['tabindex', 'size'],
|
|
4163
|
-
componentName: componentName$
|
|
4174
|
+
componentName: componentName$c,
|
|
4164
4175
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
4165
4176
|
})
|
|
4166
4177
|
);
|
|
4167
4178
|
|
|
4168
|
-
const globalRefs = getThemeRefs(globals);
|
|
4169
|
-
const vars$
|
|
4179
|
+
const globalRefs$2 = getThemeRefs(globals);
|
|
4180
|
+
const vars$8 = ComboBoxClass.cssVarList;
|
|
4170
4181
|
|
|
4171
4182
|
const comboBox = {
|
|
4172
|
-
[vars$
|
|
4173
|
-
[vars$
|
|
4174
|
-
[vars$
|
|
4175
|
-
[vars$
|
|
4176
|
-
[vars$
|
|
4177
|
-
[vars$
|
|
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$
|
|
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,
|
|
4195
4206
|
|
|
4196
4207
|
_readonly: {
|
|
4197
|
-
[vars$
|
|
4208
|
+
[vars$8.inputDropdownButtonCursor]: 'default',
|
|
4198
4209
|
},
|
|
4199
4210
|
|
|
4200
|
-
[vars$
|
|
4201
|
-
[vars$
|
|
4211
|
+
[vars$8.overlay.minHeight]: '400px',
|
|
4212
|
+
[vars$8.overlay.margin]: '0 auto',
|
|
4202
4213
|
|
|
4203
4214
|
// [vars.overlayCursor]: 'pointer',
|
|
4204
4215
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
|
@@ -4209,14 +4220,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
|
4209
4220
|
__proto__: null,
|
|
4210
4221
|
comboBox: comboBox,
|
|
4211
4222
|
default: comboBox,
|
|
4212
|
-
vars: vars$
|
|
4223
|
+
vars: vars$8
|
|
4213
4224
|
});
|
|
4214
4225
|
|
|
4215
4226
|
const observedAttributes$2 = ['src', 'alt'];
|
|
4216
4227
|
|
|
4217
|
-
const componentName$
|
|
4228
|
+
const componentName$b = getComponentName('image');
|
|
4218
4229
|
|
|
4219
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
4230
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$b, baseSelector: ':host > img' });
|
|
4220
4231
|
class RawImage extends BaseClass$1 {
|
|
4221
4232
|
static get observedAttributes() {
|
|
4222
4233
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -4256,14 +4267,14 @@ const ImageClass = compose(
|
|
|
4256
4267
|
draggableMixin
|
|
4257
4268
|
)(RawImage);
|
|
4258
4269
|
|
|
4259
|
-
const vars$
|
|
4270
|
+
const vars$7 = ImageClass.cssVarList;
|
|
4260
4271
|
|
|
4261
4272
|
const image = {};
|
|
4262
4273
|
|
|
4263
4274
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
4264
4275
|
__proto__: null,
|
|
4265
4276
|
default: image,
|
|
4266
|
-
vars: vars$
|
|
4277
|
+
vars: vars$7
|
|
4267
4278
|
});
|
|
4268
4279
|
|
|
4269
4280
|
var CountryCodes = [
|
|
@@ -5479,16 +5490,16 @@ var CountryCodes = [
|
|
|
5479
5490
|
},
|
|
5480
5491
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
|
5481
5492
|
|
|
5482
|
-
const componentName$
|
|
5493
|
+
const componentName$a = getComponentName('phone-field-internal');
|
|
5483
5494
|
|
|
5484
|
-
createBaseInputClass({ componentName: componentName$
|
|
5495
|
+
createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
|
|
5485
5496
|
|
|
5486
5497
|
const textVars$1 = TextFieldClass.cssVarList;
|
|
5487
5498
|
const comboVars = ComboBoxClass.cssVarList;
|
|
5488
5499
|
|
|
5489
|
-
const componentName$
|
|
5500
|
+
const componentName$9 = getComponentName('phone-field');
|
|
5490
5501
|
|
|
5491
|
-
const customMixin$
|
|
5502
|
+
const customMixin$3 = (superclass) =>
|
|
5492
5503
|
class PhoneFieldMixinClass extends superclass {
|
|
5493
5504
|
static get CountryCodes() {
|
|
5494
5505
|
return CountryCodes;
|
|
@@ -5500,15 +5511,15 @@ const customMixin$2 = (superclass) =>
|
|
|
5500
5511
|
const template = document.createElement('template');
|
|
5501
5512
|
|
|
5502
5513
|
template.innerHTML = `
|
|
5503
|
-
<${componentName$
|
|
5514
|
+
<${componentName$a}
|
|
5504
5515
|
tabindex="-1"
|
|
5505
5516
|
slot="input"
|
|
5506
|
-
></${componentName$
|
|
5517
|
+
></${componentName$a}>
|
|
5507
5518
|
`;
|
|
5508
5519
|
|
|
5509
5520
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5510
5521
|
|
|
5511
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5522
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$a);
|
|
5512
5523
|
|
|
5513
5524
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5514
5525
|
includeAttrs: [
|
|
@@ -5528,14 +5539,14 @@ const customMixin$2 = (superclass) =>
|
|
|
5528
5539
|
};
|
|
5529
5540
|
|
|
5530
5541
|
const {
|
|
5531
|
-
host: host$
|
|
5532
|
-
label: label$
|
|
5533
|
-
requiredIndicator: requiredIndicator$
|
|
5542
|
+
host: host$4,
|
|
5543
|
+
label: label$3,
|
|
5544
|
+
requiredIndicator: requiredIndicator$3,
|
|
5534
5545
|
inputField: inputField$1,
|
|
5535
5546
|
countryCodeInput,
|
|
5536
5547
|
phoneInput: phoneInput$1,
|
|
5537
5548
|
separator,
|
|
5538
|
-
errorMessage: errorMessage$
|
|
5549
|
+
errorMessage: errorMessage$3,
|
|
5539
5550
|
helperText: helperText$2,
|
|
5540
5551
|
} = {
|
|
5541
5552
|
host: { selector: () => ':host' },
|
|
@@ -5553,7 +5564,7 @@ const PhoneFieldClass = compose(
|
|
|
5553
5564
|
createStyleMixin({
|
|
5554
5565
|
mappings: {
|
|
5555
5566
|
fontSize: [
|
|
5556
|
-
host$
|
|
5567
|
+
host$4,
|
|
5557
5568
|
inputField$1,
|
|
5558
5569
|
{
|
|
5559
5570
|
selector: TextFieldClass.componentName,
|
|
@@ -5565,8 +5576,8 @@ const PhoneFieldClass = compose(
|
|
|
5565
5576
|
},
|
|
5566
5577
|
],
|
|
5567
5578
|
fontFamily: [
|
|
5568
|
-
label$
|
|
5569
|
-
errorMessage$
|
|
5579
|
+
label$3,
|
|
5580
|
+
errorMessage$3,
|
|
5570
5581
|
helperText$2,
|
|
5571
5582
|
{
|
|
5572
5583
|
...countryCodeInput,
|
|
@@ -5574,7 +5585,7 @@ const PhoneFieldClass = compose(
|
|
|
5574
5585
|
},
|
|
5575
5586
|
],
|
|
5576
5587
|
hostWidth: [
|
|
5577
|
-
{ ...host$
|
|
5588
|
+
{ ...host$4, property: 'width' },
|
|
5578
5589
|
{ ...phoneInput$1, property: 'width' },
|
|
5579
5590
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
5580
5591
|
],
|
|
@@ -5601,11 +5612,11 @@ const PhoneFieldClass = compose(
|
|
|
5601
5612
|
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
|
5602
5613
|
|
|
5603
5614
|
labelTextColor: [
|
|
5604
|
-
{ ...label$
|
|
5605
|
-
{ ...requiredIndicator$
|
|
5615
|
+
{ ...label$3, property: 'color' },
|
|
5616
|
+
{ ...requiredIndicator$3, property: 'color' },
|
|
5606
5617
|
],
|
|
5607
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
5608
|
-
errorMessageTextColor: { ...errorMessage$
|
|
5618
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
|
5619
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
5609
5620
|
|
|
5610
5621
|
inputValueTextColor: [
|
|
5611
5622
|
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
|
@@ -5627,7 +5638,7 @@ const PhoneFieldClass = compose(
|
|
|
5627
5638
|
}),
|
|
5628
5639
|
draggableMixin,
|
|
5629
5640
|
composedProxyInputMixin,
|
|
5630
|
-
customMixin$
|
|
5641
|
+
customMixin$3
|
|
5631
5642
|
)(
|
|
5632
5643
|
createProxy({
|
|
5633
5644
|
slots: [],
|
|
@@ -5703,32 +5714,32 @@ const PhoneFieldClass = compose(
|
|
|
5703
5714
|
}
|
|
5704
5715
|
`,
|
|
5705
5716
|
excludeAttrsSync: ['tabindex'],
|
|
5706
|
-
componentName: componentName$
|
|
5717
|
+
componentName: componentName$9,
|
|
5707
5718
|
})
|
|
5708
5719
|
);
|
|
5709
5720
|
|
|
5710
|
-
const vars$
|
|
5721
|
+
const vars$6 = PhoneFieldClass.cssVarList;
|
|
5711
5722
|
|
|
5712
5723
|
const phoneField = {
|
|
5713
|
-
[vars$
|
|
5714
|
-
[vars$
|
|
5715
|
-
[vars$
|
|
5716
|
-
[vars$
|
|
5717
|
-
[vars$
|
|
5718
|
-
[vars$
|
|
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$
|
|
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',
|
|
5732
5743
|
|
|
5733
5744
|
// '@overlay': {
|
|
5734
5745
|
// overlayItemBackgroundColor: 'red'
|
|
@@ -5738,18 +5749,18 @@ const phoneField = {
|
|
|
5738
5749
|
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
5739
5750
|
__proto__: null,
|
|
5740
5751
|
default: phoneField,
|
|
5741
|
-
vars: vars$
|
|
5752
|
+
vars: vars$6
|
|
5742
5753
|
});
|
|
5743
5754
|
|
|
5744
|
-
const componentName$
|
|
5755
|
+
const componentName$8 = getComponentName('phone-field-internal-input-box');
|
|
5745
5756
|
|
|
5746
|
-
createBaseInputClass({ componentName: componentName$
|
|
5757
|
+
createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
|
|
5747
5758
|
|
|
5748
5759
|
const textVars = TextFieldClass.cssVarList;
|
|
5749
5760
|
|
|
5750
|
-
const componentName$
|
|
5761
|
+
const componentName$7 = getComponentName('phone-input-box-field');
|
|
5751
5762
|
|
|
5752
|
-
const customMixin$
|
|
5763
|
+
const customMixin$2 = (superclass) =>
|
|
5753
5764
|
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
5754
5765
|
static get CountryCodes() {
|
|
5755
5766
|
return CountryCodes;
|
|
@@ -5761,15 +5772,15 @@ const customMixin$1 = (superclass) =>
|
|
|
5761
5772
|
const template = document.createElement('template');
|
|
5762
5773
|
|
|
5763
5774
|
template.innerHTML = `
|
|
5764
|
-
<${componentName$
|
|
5775
|
+
<${componentName$8}
|
|
5765
5776
|
tabindex="-1"
|
|
5766
5777
|
slot="input"
|
|
5767
|
-
></${componentName$
|
|
5778
|
+
></${componentName$8}>
|
|
5768
5779
|
`;
|
|
5769
5780
|
|
|
5770
5781
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5771
5782
|
|
|
5772
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5783
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$8);
|
|
5773
5784
|
|
|
5774
5785
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5775
5786
|
includeAttrs: [
|
|
@@ -5786,7 +5797,7 @@ const customMixin$1 = (superclass) =>
|
|
|
5786
5797
|
}
|
|
5787
5798
|
};
|
|
5788
5799
|
|
|
5789
|
-
const { host: host$
|
|
5800
|
+
const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
|
|
5790
5801
|
host: { selector: () => ':host' },
|
|
5791
5802
|
label: { selector: '::part(label)' },
|
|
5792
5803
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
@@ -5800,16 +5811,16 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5800
5811
|
createStyleMixin({
|
|
5801
5812
|
mappings: {
|
|
5802
5813
|
fontSize: [
|
|
5803
|
-
host$
|
|
5814
|
+
host$3,
|
|
5804
5815
|
inputField,
|
|
5805
5816
|
{
|
|
5806
5817
|
selector: TextFieldClass.componentName,
|
|
5807
5818
|
property: TextFieldClass.cssVarList.fontSize,
|
|
5808
5819
|
},
|
|
5809
5820
|
],
|
|
5810
|
-
fontFamily: [label$
|
|
5811
|
-
hostWidth: { ...host$
|
|
5812
|
-
hostMinWidth: { ...host$
|
|
5821
|
+
fontFamily: [label$2, errorMessage$2, helperText$1],
|
|
5822
|
+
hostWidth: { ...host$3, property: 'width' },
|
|
5823
|
+
hostMinWidth: { ...host$3, property: 'min-width' },
|
|
5813
5824
|
|
|
5814
5825
|
inputBorderStyle: { ...inputField, property: 'border-style' },
|
|
5815
5826
|
inputBorderWidth: { ...inputField, property: 'border-width' },
|
|
@@ -5817,11 +5828,11 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5817
5828
|
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
|
5818
5829
|
|
|
5819
5830
|
labelTextColor: [
|
|
5820
|
-
{ ...label$
|
|
5821
|
-
{ ...requiredIndicator$
|
|
5831
|
+
{ ...label$2, property: 'color' },
|
|
5832
|
+
{ ...requiredIndicator$2, property: 'color' },
|
|
5822
5833
|
],
|
|
5823
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
5824
|
-
errorMessageTextColor: { ...errorMessage$
|
|
5834
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
|
5835
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
|
5825
5836
|
|
|
5826
5837
|
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
|
5827
5838
|
|
|
@@ -5835,7 +5846,7 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5835
5846
|
}),
|
|
5836
5847
|
draggableMixin,
|
|
5837
5848
|
composedProxyInputMixin,
|
|
5838
|
-
customMixin$
|
|
5849
|
+
customMixin$2
|
|
5839
5850
|
)(
|
|
5840
5851
|
createProxy({
|
|
5841
5852
|
slots: [],
|
|
@@ -5901,46 +5912,46 @@ const PhoneFieldInputBoxClass = compose(
|
|
|
5901
5912
|
}
|
|
5902
5913
|
`,
|
|
5903
5914
|
excludeAttrsSync: ['tabindex'],
|
|
5904
|
-
componentName: componentName$
|
|
5915
|
+
componentName: componentName$7,
|
|
5905
5916
|
})
|
|
5906
5917
|
);
|
|
5907
5918
|
|
|
5908
|
-
const vars$
|
|
5919
|
+
const vars$5 = PhoneFieldInputBoxClass.cssVarList;
|
|
5909
5920
|
|
|
5910
5921
|
const phoneInputBoxField = {
|
|
5911
|
-
[vars$
|
|
5912
|
-
[vars$
|
|
5913
|
-
[vars$
|
|
5914
|
-
[vars$
|
|
5915
|
-
[vars$
|
|
5916
|
-
[vars$
|
|
5917
|
-
[vars$
|
|
5918
|
-
[vars$
|
|
5919
|
-
[vars$
|
|
5920
|
-
[vars$
|
|
5921
|
-
[vars$
|
|
5922
|
-
[vars$
|
|
5923
|
-
[vars$
|
|
5924
|
-
[vars$
|
|
5925
|
-
[vars$
|
|
5926
|
-
[vars$
|
|
5927
|
-
[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,
|
|
5928
5939
|
_fullWidth: {
|
|
5929
|
-
[vars$
|
|
5940
|
+
[vars$5.hostWidth]: refs.width,
|
|
5930
5941
|
},
|
|
5931
5942
|
};
|
|
5932
5943
|
|
|
5933
5944
|
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
5934
5945
|
__proto__: null,
|
|
5935
5946
|
default: phoneInputBoxField,
|
|
5936
|
-
vars: vars$
|
|
5947
|
+
vars: vars$5
|
|
5937
5948
|
});
|
|
5938
5949
|
|
|
5939
|
-
const componentName$
|
|
5950
|
+
const componentName$6 = getComponentName('new-password-internal');
|
|
5940
5951
|
|
|
5941
|
-
const componentName$
|
|
5952
|
+
const componentName$5 = getComponentName('new-password');
|
|
5942
5953
|
|
|
5943
|
-
const customMixin = (superclass) =>
|
|
5954
|
+
const customMixin$1 = (superclass) =>
|
|
5944
5955
|
class NewPasswordMixinClass extends superclass {
|
|
5945
5956
|
init() {
|
|
5946
5957
|
super.init?.();
|
|
@@ -5948,16 +5959,16 @@ const customMixin = (superclass) =>
|
|
|
5948
5959
|
const template = document.createElement('template');
|
|
5949
5960
|
|
|
5950
5961
|
template.innerHTML = `
|
|
5951
|
-
<${componentName$
|
|
5962
|
+
<${componentName$6}
|
|
5952
5963
|
name="new-password"
|
|
5953
5964
|
tabindex="-1"
|
|
5954
5965
|
slot="input"
|
|
5955
|
-
></${componentName$
|
|
5966
|
+
></${componentName$6}>
|
|
5956
5967
|
`;
|
|
5957
5968
|
|
|
5958
5969
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5959
5970
|
|
|
5960
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5971
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$6);
|
|
5961
5972
|
|
|
5962
5973
|
forwardAttrs(this, this.inputElement, {
|
|
5963
5974
|
includeAttrs: [
|
|
@@ -5978,7 +5989,7 @@ const customMixin = (superclass) =>
|
|
|
5978
5989
|
}
|
|
5979
5990
|
};
|
|
5980
5991
|
|
|
5981
|
-
const { host: host$
|
|
5992
|
+
const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
|
|
5982
5993
|
host: { selector: () => ':host' },
|
|
5983
5994
|
label: { selector: '::part(label)' },
|
|
5984
5995
|
internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
|
|
@@ -5990,24 +6001,24 @@ const NewPasswordClass = compose(
|
|
|
5990
6001
|
createStyleMixin({
|
|
5991
6002
|
mappings: {
|
|
5992
6003
|
fontSize: [
|
|
5993
|
-
host$
|
|
6004
|
+
host$2,
|
|
5994
6005
|
{},
|
|
5995
6006
|
{
|
|
5996
6007
|
selector: PasswordClass.componentName,
|
|
5997
6008
|
property: PasswordClass.cssVarList.fontSize,
|
|
5998
6009
|
},
|
|
5999
6010
|
],
|
|
6000
|
-
fontFamily: [label, errorMessage, helperText],
|
|
6001
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
6002
|
-
hostWidth: { ...host$
|
|
6003
|
-
hostMinWidth: { ...host$
|
|
6004
|
-
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' },
|
|
6005
6016
|
spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
|
|
6006
6017
|
},
|
|
6007
6018
|
}),
|
|
6008
6019
|
draggableMixin,
|
|
6009
6020
|
composedProxyInputMixin,
|
|
6010
|
-
customMixin
|
|
6021
|
+
customMixin$1
|
|
6011
6022
|
)(
|
|
6012
6023
|
createProxy({
|
|
6013
6024
|
slots: [],
|
|
@@ -6056,32 +6067,32 @@ const NewPasswordClass = compose(
|
|
|
6056
6067
|
},
|
|
6057
6068
|
`,
|
|
6058
6069
|
excludeAttrsSync: ['tabindex'],
|
|
6059
|
-
componentName: componentName$
|
|
6070
|
+
componentName: componentName$5,
|
|
6060
6071
|
})
|
|
6061
6072
|
);
|
|
6062
6073
|
|
|
6063
|
-
const vars$
|
|
6074
|
+
const vars$4 = NewPasswordClass.cssVarList;
|
|
6064
6075
|
|
|
6065
6076
|
const newPassword = {
|
|
6066
|
-
[vars$
|
|
6067
|
-
[vars$
|
|
6068
|
-
[vars$
|
|
6069
|
-
[vars$
|
|
6070
|
-
[vars$
|
|
6071
|
-
[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,
|
|
6072
6083
|
|
|
6073
6084
|
_required: {
|
|
6074
6085
|
// NewPassword doesn't pass `required` attribute to its Password components.
|
|
6075
6086
|
// That's why we fake the required indicator on each input.
|
|
6076
6087
|
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
|
6077
|
-
[vars$
|
|
6088
|
+
[vars$4.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
|
6078
6089
|
},
|
|
6079
6090
|
};
|
|
6080
6091
|
|
|
6081
6092
|
var newPassword$1 = /*#__PURE__*/Object.freeze({
|
|
6082
6093
|
__proto__: null,
|
|
6083
6094
|
default: newPassword,
|
|
6084
|
-
vars: vars$
|
|
6095
|
+
vars: vars$4
|
|
6085
6096
|
});
|
|
6086
6097
|
|
|
6087
6098
|
const getFileBase64 = (fileObj) => {
|
|
@@ -6096,7 +6107,7 @@ const getFilename = (fileObj) => {
|
|
|
6096
6107
|
return fileObj.name.replace(/^.*\\/, '');
|
|
6097
6108
|
};
|
|
6098
6109
|
|
|
6099
|
-
const componentName$
|
|
6110
|
+
const componentName$4 = getComponentName('upload-file');
|
|
6100
6111
|
|
|
6101
6112
|
const observedAttributes$1 = [
|
|
6102
6113
|
'title',
|
|
@@ -6111,7 +6122,7 @@ const observedAttributes$1 = [
|
|
|
6111
6122
|
'icon',
|
|
6112
6123
|
];
|
|
6113
6124
|
|
|
6114
|
-
const BaseInputClass = createBaseInputClass({ componentName: componentName$
|
|
6125
|
+
const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
|
|
6115
6126
|
|
|
6116
6127
|
class RawUploadFile extends BaseInputClass {
|
|
6117
6128
|
static get observedAttributes() {
|
|
@@ -6273,7 +6284,7 @@ class RawUploadFile extends BaseInputClass {
|
|
|
6273
6284
|
}
|
|
6274
6285
|
}
|
|
6275
6286
|
|
|
6276
|
-
const { host, wrapper, icon, title, description, requiredIndicator } = {
|
|
6287
|
+
const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
|
|
6277
6288
|
host: { selector: () => ':host' },
|
|
6278
6289
|
wrapper: { selector: () => ':host > div' },
|
|
6279
6290
|
icon: { selector: () => '.icon' },
|
|
@@ -6292,8 +6303,8 @@ const UploadFileClass = compose(
|
|
|
6292
6303
|
borderWidth: {},
|
|
6293
6304
|
borderStyle: {},
|
|
6294
6305
|
borderRadius: {},
|
|
6295
|
-
hostHeight: { ...host, property: 'height' },
|
|
6296
|
-
hostWidth: { ...host, property: 'width' },
|
|
6306
|
+
hostHeight: { ...host$1, property: 'height' },
|
|
6307
|
+
hostWidth: { ...host$1, property: 'width' },
|
|
6297
6308
|
hostPadding: { property: 'padding' },
|
|
6298
6309
|
gap: { ...wrapper },
|
|
6299
6310
|
lineHeight: { ...wrapper, property: 'line-height' },
|
|
@@ -6305,76 +6316,461 @@ const UploadFileClass = compose(
|
|
|
6305
6316
|
{ ...description, property: 'color' },
|
|
6306
6317
|
],
|
|
6307
6318
|
iconSize: { ...icon, property: 'width' },
|
|
6308
|
-
requiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
6319
|
+
requiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
|
6309
6320
|
},
|
|
6310
6321
|
}),
|
|
6311
6322
|
draggableMixin,
|
|
6312
6323
|
componentNameValidationMixin
|
|
6313
6324
|
)(RawUploadFile);
|
|
6314
6325
|
|
|
6315
|
-
const vars$
|
|
6326
|
+
const vars$3 = UploadFileClass.cssVarList;
|
|
6316
6327
|
|
|
6317
6328
|
const uploadFile = {
|
|
6318
|
-
[vars$
|
|
6319
|
-
[vars$
|
|
6329
|
+
[vars$3.labelTextColor]: refs.labelTextColor,
|
|
6330
|
+
[vars$3.fontFamily]: refs.fontFamily,
|
|
6320
6331
|
|
|
6321
|
-
[vars$
|
|
6332
|
+
[vars$3.iconSize]: '2em',
|
|
6322
6333
|
|
|
6323
|
-
[vars$
|
|
6324
|
-
[vars$
|
|
6334
|
+
[vars$3.hostPadding]: '0.75em',
|
|
6335
|
+
[vars$3.gap]: '0.5em',
|
|
6325
6336
|
|
|
6326
|
-
[vars$
|
|
6327
|
-
[vars$
|
|
6328
|
-
[vars$
|
|
6337
|
+
[vars$3.fontSize]: '16px',
|
|
6338
|
+
[vars$3.titleFontWeight]: '500',
|
|
6339
|
+
[vars$3.lineHeight]: '1em',
|
|
6329
6340
|
|
|
6330
|
-
[vars$
|
|
6331
|
-
[vars$
|
|
6332
|
-
[vars$
|
|
6333
|
-
[vars$
|
|
6341
|
+
[vars$3.borderWidth]: refs.borderWidth,
|
|
6342
|
+
[vars$3.borderColor]: refs.borderColor,
|
|
6343
|
+
[vars$3.borderRadius]: refs.borderRadius,
|
|
6344
|
+
[vars$3.borderStyle]: 'dashed',
|
|
6334
6345
|
|
|
6335
6346
|
_required: {
|
|
6336
|
-
[vars$
|
|
6347
|
+
[vars$3.requiredIndicator]: refs.requiredIndicator,
|
|
6337
6348
|
},
|
|
6338
6349
|
|
|
6339
6350
|
size: {
|
|
6340
6351
|
xs: {
|
|
6341
|
-
[vars$
|
|
6342
|
-
[vars$
|
|
6343
|
-
[vars$
|
|
6344
|
-
[vars$
|
|
6345
|
-
[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',
|
|
6346
6357
|
},
|
|
6347
6358
|
sm: {
|
|
6348
|
-
[vars$
|
|
6349
|
-
[vars$
|
|
6350
|
-
[vars$
|
|
6351
|
-
[vars$
|
|
6352
|
-
[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',
|
|
6353
6364
|
},
|
|
6354
6365
|
md: {
|
|
6355
|
-
[vars$
|
|
6356
|
-
[vars$
|
|
6357
|
-
[vars$
|
|
6358
|
-
[vars$
|
|
6359
|
-
[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',
|
|
6360
6371
|
},
|
|
6361
6372
|
lg: {
|
|
6362
|
-
[vars$
|
|
6363
|
-
[vars$
|
|
6364
|
-
[vars$
|
|
6365
|
-
[vars$
|
|
6366
|
-
[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',
|
|
6367
6378
|
},
|
|
6368
6379
|
},
|
|
6369
6380
|
|
|
6370
6381
|
_fullWidth: {
|
|
6371
|
-
[vars$
|
|
6382
|
+
[vars$3.hostWidth]: refs.width,
|
|
6372
6383
|
},
|
|
6373
6384
|
};
|
|
6374
6385
|
|
|
6375
6386
|
var uploadFile$1 = /*#__PURE__*/Object.freeze({
|
|
6376
6387
|
__proto__: null,
|
|
6377
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,
|
|
6378
6774
|
vars: vars$1
|
|
6379
6775
|
});
|
|
6380
6776
|
|
|
@@ -6403,6 +6799,8 @@ const components = {
|
|
|
6403
6799
|
newPassword: newPassword$1,
|
|
6404
6800
|
inputWrapper,
|
|
6405
6801
|
uploadFile: uploadFile$1,
|
|
6802
|
+
selectItem: selectItem$1,
|
|
6803
|
+
singleSelect: singleSelect$1,
|
|
6406
6804
|
};
|
|
6407
6805
|
|
|
6408
6806
|
const theme = Object.keys(components).reduce(
|
|
@@ -6415,7 +6813,7 @@ const vars = Object.keys(components).reduce(
|
|
|
6415
6813
|
);
|
|
6416
6814
|
|
|
6417
6815
|
const defaultTheme = { globals, components: theme };
|
|
6418
|
-
const themeVars = { globals: vars$
|
|
6816
|
+
const themeVars = { globals: vars$r, components: vars };
|
|
6419
6817
|
|
|
6420
6818
|
const componentName = getComponentName('recaptcha');
|
|
6421
6819
|
|
|
@@ -6589,11 +6987,14 @@ exports.PasswordClass = PasswordClass;
|
|
|
6589
6987
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
6590
6988
|
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
6591
6989
|
exports.RecaptchaClass = RecaptchaClass;
|
|
6990
|
+
exports.SelectItemClass = SelectItemClass;
|
|
6991
|
+
exports.SingleSelectClass = SingleSelectClass;
|
|
6592
6992
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
6593
6993
|
exports.TextAreaClass = TextAreaClass;
|
|
6594
6994
|
exports.TextClass = TextClass;
|
|
6595
6995
|
exports.TextFieldClass = TextFieldClass;
|
|
6596
6996
|
exports.TotpImageClass = TotpImageClass;
|
|
6997
|
+
exports.UploadFileClass = UploadFileClass;
|
|
6597
6998
|
exports.componentsThemeManager = componentsThemeManager;
|
|
6598
6999
|
exports.createComponentsTheme = createComponentsTheme;
|
|
6599
7000
|
exports.createHelperVars = createHelperVars;
|