@descope/web-components-ui 1.0.173 → 1.0.175
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 +784 -587
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +989 -630
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/{descope-phone-field-descope-phone-field-internal-index-js.js → 7262.js} +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -0
- package/dist/umd/{descope-phone-field-index-js.js → phone-fields-descope-phone-field-index-js.js} +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js +1 -0
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -0
- package/package.json +1 -1
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/PhoneFieldClass.js +8 -7
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/PhoneFieldInternal.js +36 -19
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/descope-phone-field-internal/index.js +2 -2
- package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/index.js +2 -2
- package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js +173 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js +147 -0
- package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js +5 -0
- package/src/components/phone-fields/descope-phone-input-box-field/index.js +9 -0
- package/src/components/phone-fields/helpers.js +5 -0
- package/src/index.cjs.js +2 -1
- package/src/index.d.ts +2 -1
- package/src/index.js +2 -1
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/phoneField.js +1 -1
- package/src/theme/components/phoneInputBoxField.js +30 -0
- /package/src/components/{descope-phone-field → phone-fields}/CountryCodes.js +0 -0
- /package/src/components/{descope-phone-field → phone-fields/descope-phone-field}/helpers.js +0 -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$p = getThemeVars(globals);
|
|
500
500
|
|
|
501
501
|
const createCssVarFallback = (first, ...rest) =>
|
|
502
502
|
`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
|
|
@@ -1507,7 +1507,7 @@ const clickableMixin = (superclass) =>
|
|
|
1507
1507
|
}
|
|
1508
1508
|
};
|
|
1509
1509
|
|
|
1510
|
-
const componentName$
|
|
1510
|
+
const componentName$t = getComponentName('button');
|
|
1511
1511
|
|
|
1512
1512
|
const resetStyles = `
|
|
1513
1513
|
:host {
|
|
@@ -1545,7 +1545,7 @@ const iconStyles = `
|
|
|
1545
1545
|
|
|
1546
1546
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
|
1547
1547
|
|
|
1548
|
-
const { host: host$
|
|
1548
|
+
const { host: host$e, label: label$a } = {
|
|
1549
1549
|
host: { selector: () => ':host' },
|
|
1550
1550
|
label: { selector: '::part(label)' },
|
|
1551
1551
|
};
|
|
@@ -1555,7 +1555,7 @@ let loadingIndicatorStyles;
|
|
|
1555
1555
|
const ButtonClass = compose(
|
|
1556
1556
|
createStyleMixin({
|
|
1557
1557
|
mappings: {
|
|
1558
|
-
hostWidth: { ...host$
|
|
1558
|
+
hostWidth: { ...host$e, property: 'width' },
|
|
1559
1559
|
hostHeight: { property: 'height' },
|
|
1560
1560
|
fontSize: {},
|
|
1561
1561
|
fontFamily: {},
|
|
@@ -1577,8 +1577,8 @@ const ButtonClass = compose(
|
|
|
1577
1577
|
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
|
1578
1578
|
|
|
1579
1579
|
labelTextColor: { property: 'color' },
|
|
1580
|
-
labelTextDecoration: { ...label$
|
|
1581
|
-
labelSpacing: { ...label$
|
|
1580
|
+
labelTextDecoration: { ...label$a, property: 'text-decoration' },
|
|
1581
|
+
labelSpacing: { ...label$a, property: 'gap' },
|
|
1582
1582
|
},
|
|
1583
1583
|
}),
|
|
1584
1584
|
clickableMixin,
|
|
@@ -1601,7 +1601,7 @@ const ButtonClass = compose(
|
|
|
1601
1601
|
}
|
|
1602
1602
|
`,
|
|
1603
1603
|
excludeAttrsSync: ['tabindex'],
|
|
1604
|
-
componentName: componentName$
|
|
1604
|
+
componentName: componentName$t,
|
|
1605
1605
|
})
|
|
1606
1606
|
);
|
|
1607
1607
|
|
|
@@ -1649,7 +1649,7 @@ const mode = {
|
|
|
1649
1649
|
surface: globalRefs$b.colors.surface,
|
|
1650
1650
|
};
|
|
1651
1651
|
|
|
1652
|
-
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$
|
|
1652
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$t);
|
|
1653
1653
|
|
|
1654
1654
|
const verticalPaddingRatio = 3;
|
|
1655
1655
|
const horizontalPaddingRatio = 2;
|
|
@@ -1736,7 +1736,7 @@ const button = {
|
|
|
1736
1736
|
},
|
|
1737
1737
|
};
|
|
1738
1738
|
|
|
1739
|
-
const vars$
|
|
1739
|
+
const vars$o = {
|
|
1740
1740
|
...compVars$3,
|
|
1741
1741
|
...helperVars$3,
|
|
1742
1742
|
};
|
|
@@ -1744,10 +1744,10 @@ const vars$n = {
|
|
|
1744
1744
|
var button$1 = /*#__PURE__*/Object.freeze({
|
|
1745
1745
|
__proto__: null,
|
|
1746
1746
|
default: button,
|
|
1747
|
-
vars: vars$
|
|
1747
|
+
vars: vars$o
|
|
1748
1748
|
});
|
|
1749
1749
|
|
|
1750
|
-
const { host: host$
|
|
1750
|
+
const { host: host$d, label: label$9, placeholder: placeholder$2, requiredIndicator: requiredIndicator$9, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$9 } =
|
|
1751
1751
|
{
|
|
1752
1752
|
host: { selector: () => ':host' },
|
|
1753
1753
|
label: { selector: '::part(label)' },
|
|
@@ -1761,40 +1761,40 @@ const { host: host$c, label: label$8, placeholder: placeholder$2, requiredIndica
|
|
|
1761
1761
|
|
|
1762
1762
|
var textFieldMappings = {
|
|
1763
1763
|
// we apply font-size also on the host so we can set its width with em
|
|
1764
|
-
fontSize: [{}, host$
|
|
1765
|
-
fontFamily: [label$
|
|
1764
|
+
fontSize: [{}, host$d],
|
|
1765
|
+
fontFamily: [label$9, inputField$5, helperText$8, errorMessage$9],
|
|
1766
1766
|
|
|
1767
|
-
hostWidth: { ...host$
|
|
1768
|
-
hostMinWidth: { ...host$
|
|
1767
|
+
hostWidth: { ...host$d, property: 'width' },
|
|
1768
|
+
hostMinWidth: { ...host$d, property: 'min-width' },
|
|
1769
1769
|
|
|
1770
|
-
inputBackgroundColor: { ...inputField$
|
|
1770
|
+
inputBackgroundColor: { ...inputField$5, property: 'background-color' },
|
|
1771
1771
|
|
|
1772
1772
|
labelTextColor: [
|
|
1773
|
-
{ ...label$
|
|
1774
|
-
{ ...requiredIndicator$
|
|
1773
|
+
{ ...label$9, property: 'color' },
|
|
1774
|
+
{ ...requiredIndicator$9, property: 'color' },
|
|
1775
1775
|
],
|
|
1776
|
-
errorMessageTextColor: { ...errorMessage$
|
|
1776
|
+
errorMessageTextColor: { ...errorMessage$9, property: 'color' },
|
|
1777
1777
|
|
|
1778
|
-
inputValueTextColor: { ...inputField$
|
|
1778
|
+
inputValueTextColor: { ...inputField$5, property: 'color' },
|
|
1779
1779
|
inputCaretTextColor: { ...input, property: 'color' },
|
|
1780
1780
|
|
|
1781
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
1781
|
+
labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
|
|
1782
1782
|
|
|
1783
|
-
inputBorderColor: { ...inputField$
|
|
1784
|
-
inputBorderWidth: { ...inputField$
|
|
1785
|
-
inputBorderStyle: { ...inputField$
|
|
1786
|
-
inputBorderRadius: { ...inputField$
|
|
1783
|
+
inputBorderColor: { ...inputField$5, property: 'border-color' },
|
|
1784
|
+
inputBorderWidth: { ...inputField$5, property: 'border-width' },
|
|
1785
|
+
inputBorderStyle: { ...inputField$5, property: 'border-style' },
|
|
1786
|
+
inputBorderRadius: { ...inputField$5, property: 'border-radius' },
|
|
1787
1787
|
|
|
1788
|
-
inputHeight: { ...inputField$
|
|
1788
|
+
inputHeight: { ...inputField$5, property: 'height' },
|
|
1789
1789
|
inputHorizontalPadding: [
|
|
1790
1790
|
{ ...input, property: 'padding-left' },
|
|
1791
1791
|
{ ...input, property: 'padding-right' },
|
|
1792
1792
|
],
|
|
1793
1793
|
|
|
1794
|
-
inputOutlineColor: { ...inputField$
|
|
1795
|
-
inputOutlineStyle: { ...inputField$
|
|
1796
|
-
inputOutlineWidth: { ...inputField$
|
|
1797
|
-
inputOutlineOffset: { ...inputField$
|
|
1794
|
+
inputOutlineColor: { ...inputField$5, property: 'outline-color' },
|
|
1795
|
+
inputOutlineStyle: { ...inputField$5, property: 'outline-style' },
|
|
1796
|
+
inputOutlineWidth: { ...inputField$5, property: 'outline-width' },
|
|
1797
|
+
inputOutlineOffset: { ...inputField$5, property: 'outline-offset' },
|
|
1798
1798
|
|
|
1799
1799
|
inputTextAlign: { ...input, property: 'text-align' },
|
|
1800
1800
|
|
|
@@ -1902,11 +1902,11 @@ const resetInputOverrides = (name, cssVarList) => `
|
|
|
1902
1902
|
${resetInputFieldUnderlayingBorder(name)}
|
|
1903
1903
|
`;
|
|
1904
1904
|
|
|
1905
|
-
const componentName$
|
|
1905
|
+
const componentName$s = getComponentName('text-field');
|
|
1906
1906
|
|
|
1907
1907
|
const observedAttrs = ['type'];
|
|
1908
1908
|
|
|
1909
|
-
const customMixin$
|
|
1909
|
+
const customMixin$5 = (superclass) =>
|
|
1910
1910
|
class TextFieldClass extends superclass {
|
|
1911
1911
|
static get observedAttributes() {
|
|
1912
1912
|
return observedAttrs.concat(superclass.observedAttributes || []);
|
|
@@ -1933,7 +1933,7 @@ const TextFieldClass = compose(
|
|
|
1933
1933
|
draggableMixin,
|
|
1934
1934
|
composedProxyInputMixin,
|
|
1935
1935
|
componentNameValidationMixin,
|
|
1936
|
-
customMixin$
|
|
1936
|
+
customMixin$5
|
|
1937
1937
|
)(
|
|
1938
1938
|
createProxy({
|
|
1939
1939
|
slots: ['prefix', 'suffix'],
|
|
@@ -1950,14 +1950,14 @@ const TextFieldClass = compose(
|
|
|
1950
1950
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
|
1951
1951
|
`,
|
|
1952
1952
|
excludeAttrsSync: ['tabindex'],
|
|
1953
|
-
componentName: componentName$
|
|
1953
|
+
componentName: componentName$s,
|
|
1954
1954
|
})
|
|
1955
1955
|
);
|
|
1956
1956
|
|
|
1957
|
-
const componentName$
|
|
1957
|
+
const componentName$r = getComponentName('input-wrapper');
|
|
1958
1958
|
const globalRefs$a = getThemeRefs(globals);
|
|
1959
1959
|
|
|
1960
|
-
const [theme$1, refs, vars$
|
|
1960
|
+
const [theme$1, refs, vars$n] = createHelperVars(
|
|
1961
1961
|
{
|
|
1962
1962
|
labelTextColor: globalRefs$a.colors.surface.contrast,
|
|
1963
1963
|
valueTextColor: globalRefs$a.colors.surface.contrast,
|
|
@@ -2019,46 +2019,46 @@ const [theme$1, refs, vars$m] = createHelperVars(
|
|
|
2019
2019
|
backgroundColor: globalRefs$a.colors.surface.main,
|
|
2020
2020
|
},
|
|
2021
2021
|
},
|
|
2022
|
-
componentName$
|
|
2022
|
+
componentName$r
|
|
2023
2023
|
);
|
|
2024
2024
|
|
|
2025
2025
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
|
2026
2026
|
__proto__: null,
|
|
2027
2027
|
default: theme$1,
|
|
2028
2028
|
refs: refs,
|
|
2029
|
-
vars: vars$
|
|
2029
|
+
vars: vars$n
|
|
2030
2030
|
});
|
|
2031
2031
|
|
|
2032
|
-
const vars$
|
|
2032
|
+
const vars$m = TextFieldClass.cssVarList;
|
|
2033
2033
|
|
|
2034
2034
|
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$
|
|
2035
|
+
[vars$m.hostWidth]: refs.width,
|
|
2036
|
+
[vars$m.hostMinWidth]: refs.minWidth,
|
|
2037
|
+
[vars$m.fontSize]: refs.fontSize,
|
|
2038
|
+
[vars$m.fontFamily]: refs.fontFamily,
|
|
2039
|
+
[vars$m.labelTextColor]: refs.labelTextColor,
|
|
2040
|
+
[vars$m.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2041
|
+
[vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2042
|
+
[vars$m.inputValueTextColor]: refs.valueTextColor,
|
|
2043
|
+
[vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2044
|
+
[vars$m.inputBorderWidth]: refs.borderWidth,
|
|
2045
|
+
[vars$m.inputBorderStyle]: refs.borderStyle,
|
|
2046
|
+
[vars$m.inputBorderColor]: refs.borderColor,
|
|
2047
|
+
[vars$m.inputBorderRadius]: refs.borderRadius,
|
|
2048
|
+
[vars$m.inputOutlineWidth]: refs.outlineWidth,
|
|
2049
|
+
[vars$m.inputOutlineStyle]: refs.outlineStyle,
|
|
2050
|
+
[vars$m.inputOutlineColor]: refs.outlineColor,
|
|
2051
|
+
[vars$m.inputOutlineOffset]: refs.outlineOffset,
|
|
2052
|
+
[vars$m.inputBackgroundColor]: refs.backgroundColor,
|
|
2053
|
+
[vars$m.inputHeight]: refs.inputHeight,
|
|
2054
|
+
[vars$m.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2055
2055
|
};
|
|
2056
2056
|
|
|
2057
2057
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
|
2058
2058
|
__proto__: null,
|
|
2059
2059
|
default: textField,
|
|
2060
2060
|
textField: textField,
|
|
2061
|
-
vars: vars$
|
|
2061
|
+
vars: vars$m
|
|
2062
2062
|
});
|
|
2063
2063
|
|
|
2064
2064
|
const passwordDraggableMixin = (superclass) =>
|
|
@@ -2095,19 +2095,19 @@ const passwordDraggableMixin = (superclass) =>
|
|
|
2095
2095
|
}
|
|
2096
2096
|
};
|
|
2097
2097
|
|
|
2098
|
-
const componentName$
|
|
2098
|
+
const componentName$q = getComponentName('password');
|
|
2099
2099
|
|
|
2100
2100
|
const {
|
|
2101
|
-
host: host$
|
|
2102
|
-
inputField: inputField$
|
|
2101
|
+
host: host$c,
|
|
2102
|
+
inputField: inputField$4,
|
|
2103
2103
|
inputElement: inputElement$1,
|
|
2104
2104
|
inputElementPlaceholder,
|
|
2105
2105
|
revealButtonContainer,
|
|
2106
2106
|
revealButtonIcon,
|
|
2107
|
-
label: label$
|
|
2108
|
-
requiredIndicator: requiredIndicator$
|
|
2109
|
-
errorMessage: errorMessage$
|
|
2110
|
-
helperText: helperText$
|
|
2107
|
+
label: label$8,
|
|
2108
|
+
requiredIndicator: requiredIndicator$8,
|
|
2109
|
+
errorMessage: errorMessage$8,
|
|
2110
|
+
helperText: helperText$7,
|
|
2111
2111
|
} = {
|
|
2112
2112
|
host: { selector: () => ':host' },
|
|
2113
2113
|
inputField: { selector: '::part(input-field)' },
|
|
@@ -2124,33 +2124,33 @@ const {
|
|
|
2124
2124
|
const PasswordClass = compose(
|
|
2125
2125
|
createStyleMixin({
|
|
2126
2126
|
mappings: {
|
|
2127
|
-
hostWidth: { ...host$
|
|
2128
|
-
hostMinWidth: { ...host$
|
|
2129
|
-
fontSize: [{}, host$
|
|
2130
|
-
fontFamily: [label$
|
|
2131
|
-
inputHeight: { ...inputField$
|
|
2127
|
+
hostWidth: { ...host$c, property: 'width' },
|
|
2128
|
+
hostMinWidth: { ...host$c, property: 'min-width' },
|
|
2129
|
+
fontSize: [{}, host$c],
|
|
2130
|
+
fontFamily: [label$8, inputField$4, errorMessage$8, helperText$7],
|
|
2131
|
+
inputHeight: { ...inputField$4, property: 'height' },
|
|
2132
2132
|
inputHorizontalPadding: [
|
|
2133
2133
|
{ ...inputElement$1, property: 'padding-left' },
|
|
2134
2134
|
{ ...inputElement$1, property: 'padding-right' },
|
|
2135
2135
|
],
|
|
2136
|
-
inputBackgroundColor: { ...inputField$
|
|
2136
|
+
inputBackgroundColor: { ...inputField$4, property: 'background-color' },
|
|
2137
2137
|
|
|
2138
|
-
inputBorderStyle: { ...inputField$
|
|
2139
|
-
inputBorderWidth: { ...inputField$
|
|
2140
|
-
inputBorderColor: { ...inputField$
|
|
2141
|
-
inputBorderRadius: { ...inputField$
|
|
2138
|
+
inputBorderStyle: { ...inputField$4, property: 'border-style' },
|
|
2139
|
+
inputBorderWidth: { ...inputField$4, property: 'border-width' },
|
|
2140
|
+
inputBorderColor: { ...inputField$4, property: 'border-color' },
|
|
2141
|
+
inputBorderRadius: { ...inputField$4, property: 'border-radius' },
|
|
2142
2142
|
|
|
2143
|
-
inputOutlineColor: { ...inputField$
|
|
2144
|
-
inputOutlineStyle: { ...inputField$
|
|
2145
|
-
inputOutlineOffset: { ...inputField$
|
|
2146
|
-
inputOutlineWidth: { ...inputField$
|
|
2143
|
+
inputOutlineColor: { ...inputField$4, property: 'outline-color' },
|
|
2144
|
+
inputOutlineStyle: { ...inputField$4, property: 'outline-style' },
|
|
2145
|
+
inputOutlineOffset: { ...inputField$4, property: 'outline-offset' },
|
|
2146
|
+
inputOutlineWidth: { ...inputField$4, property: 'outline-width' },
|
|
2147
2147
|
|
|
2148
2148
|
labelTextColor: [
|
|
2149
|
-
{ ...label$
|
|
2150
|
-
{ ...requiredIndicator$
|
|
2149
|
+
{ ...label$8, property: 'color' },
|
|
2150
|
+
{ ...requiredIndicator$8, property: 'color' },
|
|
2151
2151
|
],
|
|
2152
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2153
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2152
|
+
labelRequiredIndicator: { ...requiredIndicator$8, property: 'content' },
|
|
2153
|
+
errorMessageTextColor: { ...errorMessage$8, property: 'color' },
|
|
2154
2154
|
|
|
2155
2155
|
inputValueTextColor: [
|
|
2156
2156
|
{ ...inputElement$1, property: 'color' },
|
|
@@ -2223,44 +2223,44 @@ const PasswordClass = compose(
|
|
|
2223
2223
|
}
|
|
2224
2224
|
`,
|
|
2225
2225
|
excludeAttrsSync: ['tabindex'],
|
|
2226
|
-
componentName: componentName$
|
|
2226
|
+
componentName: componentName$q,
|
|
2227
2227
|
})
|
|
2228
2228
|
);
|
|
2229
2229
|
|
|
2230
2230
|
const globalRefs$9 = getThemeRefs(globals);
|
|
2231
|
-
const vars$
|
|
2231
|
+
const vars$l = PasswordClass.cssVarList;
|
|
2232
2232
|
|
|
2233
2233
|
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$
|
|
2234
|
+
[vars$l.hostWidth]: refs.width,
|
|
2235
|
+
[vars$l.fontSize]: refs.fontSize,
|
|
2236
|
+
[vars$l.fontFamily]: refs.fontFamily,
|
|
2237
|
+
[vars$l.labelTextColor]: refs.labelTextColor,
|
|
2238
|
+
[vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2239
|
+
[vars$l.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2240
|
+
[vars$l.inputHeight]: refs.inputHeight,
|
|
2241
|
+
[vars$l.inputBackgroundColor]: refs.backgroundColor,
|
|
2242
|
+
[vars$l.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2243
|
+
[vars$l.inputValueTextColor]: refs.valueTextColor,
|
|
2244
|
+
[vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
2245
|
+
[vars$l.inputBorderWidth]: refs.borderWidth,
|
|
2246
|
+
[vars$l.inputBorderStyle]: refs.borderStyle,
|
|
2247
|
+
[vars$l.inputBorderColor]: refs.borderColor,
|
|
2248
|
+
[vars$l.inputBorderRadius]: refs.borderRadius,
|
|
2249
|
+
[vars$l.inputOutlineWidth]: refs.outlineWidth,
|
|
2250
|
+
[vars$l.inputOutlineStyle]: refs.outlineStyle,
|
|
2251
|
+
[vars$l.inputOutlineColor]: refs.outlineColor,
|
|
2252
|
+
[vars$l.inputOutlineOffset]: refs.outlineOffset,
|
|
2253
|
+
[vars$l.revealButtonOffset]: globalRefs$9.spacing.md,
|
|
2254
|
+
[vars$l.revealButtonSize]: refs.toggleButtonSize,
|
|
2255
2255
|
};
|
|
2256
2256
|
|
|
2257
2257
|
var password$1 = /*#__PURE__*/Object.freeze({
|
|
2258
2258
|
__proto__: null,
|
|
2259
2259
|
default: password,
|
|
2260
|
-
vars: vars$
|
|
2260
|
+
vars: vars$l
|
|
2261
2261
|
});
|
|
2262
2262
|
|
|
2263
|
-
const componentName$
|
|
2263
|
+
const componentName$p = getComponentName('number-field');
|
|
2264
2264
|
|
|
2265
2265
|
const NumberFieldClass = compose(
|
|
2266
2266
|
createStyleMixin({
|
|
@@ -2285,44 +2285,44 @@ const NumberFieldClass = compose(
|
|
|
2285
2285
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
|
2286
2286
|
`,
|
|
2287
2287
|
excludeAttrsSync: ['tabindex'],
|
|
2288
|
-
componentName: componentName$
|
|
2288
|
+
componentName: componentName$p,
|
|
2289
2289
|
})
|
|
2290
2290
|
);
|
|
2291
2291
|
|
|
2292
|
-
const vars$
|
|
2292
|
+
const vars$k = NumberFieldClass.cssVarList;
|
|
2293
2293
|
|
|
2294
2294
|
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$
|
|
2295
|
+
[vars$k.hostWidth]: refs.width,
|
|
2296
|
+
[vars$k.hostMinWidth]: refs.minWidth,
|
|
2297
|
+
[vars$k.fontSize]: refs.fontSize,
|
|
2298
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
|
2299
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
|
2300
|
+
[vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2301
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
|
2302
|
+
[vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2303
|
+
[vars$k.inputBorderWidth]: refs.borderWidth,
|
|
2304
|
+
[vars$k.inputBorderStyle]: refs.borderStyle,
|
|
2305
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
|
2306
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
|
2307
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
|
2308
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
|
2309
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
|
2310
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
|
2311
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
|
2312
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2313
|
+
[vars$k.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2314
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
|
2315
2315
|
};
|
|
2316
2316
|
|
|
2317
2317
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
|
2318
2318
|
__proto__: null,
|
|
2319
2319
|
default: numberField,
|
|
2320
|
-
vars: vars$
|
|
2320
|
+
vars: vars$k
|
|
2321
2321
|
});
|
|
2322
2322
|
|
|
2323
|
-
const componentName$
|
|
2323
|
+
const componentName$o = getComponentName('email-field');
|
|
2324
2324
|
|
|
2325
|
-
const customMixin$
|
|
2325
|
+
const customMixin$4 = (superclass) =>
|
|
2326
2326
|
class EmailFieldMixinClass extends superclass {
|
|
2327
2327
|
init() {
|
|
2328
2328
|
super.init?.();
|
|
@@ -2336,7 +2336,7 @@ const EmailFieldClass = compose(
|
|
|
2336
2336
|
draggableMixin,
|
|
2337
2337
|
composedProxyInputMixin,
|
|
2338
2338
|
componentNameValidationMixin,
|
|
2339
|
-
customMixin$
|
|
2339
|
+
customMixin$4
|
|
2340
2340
|
)(
|
|
2341
2341
|
createProxy({
|
|
2342
2342
|
slots: ['suffix'],
|
|
@@ -2353,52 +2353,52 @@ const EmailFieldClass = compose(
|
|
|
2353
2353
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
|
2354
2354
|
`,
|
|
2355
2355
|
excludeAttrsSync: ['tabindex'],
|
|
2356
|
-
componentName: componentName$
|
|
2356
|
+
componentName: componentName$o,
|
|
2357
2357
|
})
|
|
2358
2358
|
);
|
|
2359
2359
|
|
|
2360
|
-
const vars$
|
|
2360
|
+
const vars$j = EmailFieldClass.cssVarList;
|
|
2361
2361
|
|
|
2362
2362
|
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$
|
|
2363
|
+
[vars$j.hostWidth]: refs.width,
|
|
2364
|
+
[vars$j.hostMinWidth]: refs.minWidth,
|
|
2365
|
+
[vars$j.fontSize]: refs.fontSize,
|
|
2366
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
|
2367
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
|
2368
|
+
[vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2369
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
|
2370
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2371
|
+
[vars$j.inputPlaceholderColor]: refs.placeholderTextColor,
|
|
2372
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
|
2373
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
|
2374
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
|
2375
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
|
2376
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
|
2377
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
|
2378
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
|
2379
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
|
2380
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
|
2381
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
|
2382
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
|
2383
2383
|
};
|
|
2384
2384
|
|
|
2385
2385
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
2386
2386
|
__proto__: null,
|
|
2387
2387
|
default: emailField,
|
|
2388
|
-
vars: vars$
|
|
2388
|
+
vars: vars$j
|
|
2389
2389
|
});
|
|
2390
2390
|
|
|
2391
|
-
const componentName$
|
|
2391
|
+
const componentName$n = getComponentName('text-area');
|
|
2392
2392
|
|
|
2393
2393
|
const {
|
|
2394
|
-
host: host$
|
|
2395
|
-
label: label$
|
|
2394
|
+
host: host$b,
|
|
2395
|
+
label: label$7,
|
|
2396
2396
|
placeholder: placeholder$1,
|
|
2397
|
-
inputField: inputField$
|
|
2397
|
+
inputField: inputField$3,
|
|
2398
2398
|
textArea: textArea$2,
|
|
2399
|
-
requiredIndicator: requiredIndicator$
|
|
2400
|
-
helperText: helperText$
|
|
2401
|
-
errorMessage: errorMessage$
|
|
2399
|
+
requiredIndicator: requiredIndicator$7,
|
|
2400
|
+
helperText: helperText$6,
|
|
2401
|
+
errorMessage: errorMessage$7,
|
|
2402
2402
|
} = {
|
|
2403
2403
|
host: { selector: () => ':host' },
|
|
2404
2404
|
label: { selector: '::part(label)' },
|
|
@@ -2413,27 +2413,27 @@ const {
|
|
|
2413
2413
|
const TextAreaClass = compose(
|
|
2414
2414
|
createStyleMixin({
|
|
2415
2415
|
mappings: {
|
|
2416
|
-
hostWidth: { ...host$
|
|
2417
|
-
hostMinWidth: { ...host$
|
|
2418
|
-
fontSize: [host$
|
|
2419
|
-
fontFamily: [label$
|
|
2416
|
+
hostWidth: { ...host$b, property: 'width' },
|
|
2417
|
+
hostMinWidth: { ...host$b, property: 'min-width' },
|
|
2418
|
+
fontSize: [host$b, textArea$2],
|
|
2419
|
+
fontFamily: [label$7, inputField$3, helperText$6, errorMessage$7],
|
|
2420
2420
|
labelTextColor: [
|
|
2421
|
-
{ ...label$
|
|
2422
|
-
{ ...requiredIndicator$
|
|
2421
|
+
{ ...label$7, property: 'color' },
|
|
2422
|
+
{ ...requiredIndicator$7, property: 'color' },
|
|
2423
2423
|
],
|
|
2424
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2425
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2426
|
-
inputBackgroundColor: { ...inputField$
|
|
2424
|
+
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
|
2425
|
+
errorMessageTextColor: { ...errorMessage$7, property: 'color' },
|
|
2426
|
+
inputBackgroundColor: { ...inputField$3, property: 'background-color' },
|
|
2427
2427
|
inputValueTextColor: { ...textArea$2, property: 'color' },
|
|
2428
2428
|
inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
|
|
2429
|
-
inputBorderWidth: { ...inputField$
|
|
2430
|
-
inputBorderStyle: { ...inputField$
|
|
2431
|
-
inputBorderColor: { ...inputField$
|
|
2432
|
-
inputBorderRadius: { ...inputField$
|
|
2433
|
-
inputOutlineStyle: { ...inputField$
|
|
2434
|
-
inputOutlineColor: { ...inputField$
|
|
2435
|
-
inputOutlineOffset: { ...inputField$
|
|
2436
|
-
inputOutlineWidth: { ...inputField$
|
|
2429
|
+
inputBorderWidth: { ...inputField$3, property: 'border-width' },
|
|
2430
|
+
inputBorderStyle: { ...inputField$3, property: 'border-style' },
|
|
2431
|
+
inputBorderColor: { ...inputField$3, property: 'border-color' },
|
|
2432
|
+
inputBorderRadius: { ...inputField$3, property: 'border-radius' },
|
|
2433
|
+
inputOutlineStyle: { ...inputField$3, property: 'outline-Style' },
|
|
2434
|
+
inputOutlineColor: { ...inputField$3, property: 'outline-color' },
|
|
2435
|
+
inputOutlineOffset: { ...inputField$3, property: 'outline-offset' },
|
|
2436
|
+
inputOutlineWidth: { ...inputField$3, property: 'outline-width' },
|
|
2437
2437
|
inputResizeType: { ...textArea$2, property: 'resize' },
|
|
2438
2438
|
inputMinHeight: { ...textArea$2, property: 'min-height' },
|
|
2439
2439
|
},
|
|
@@ -2460,48 +2460,48 @@ const TextAreaClass = compose(
|
|
|
2460
2460
|
${resetInputCursor('vaadin-text-area')}
|
|
2461
2461
|
`,
|
|
2462
2462
|
excludeAttrsSync: ['tabindex'],
|
|
2463
|
-
componentName: componentName$
|
|
2463
|
+
componentName: componentName$n,
|
|
2464
2464
|
})
|
|
2465
2465
|
);
|
|
2466
2466
|
|
|
2467
2467
|
const globalRefs$8 = getThemeRefs(globals);
|
|
2468
|
-
const vars$
|
|
2468
|
+
const vars$i = TextAreaClass.cssVarList;
|
|
2469
2469
|
|
|
2470
2470
|
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$
|
|
2471
|
+
[vars$i.hostWidth]: refs.width,
|
|
2472
|
+
[vars$i.hostMinWidth]: refs.minWidth,
|
|
2473
|
+
[vars$i.fontSize]: globalRefs$8.typography.body2.size,
|
|
2474
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
|
2475
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
|
2476
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2477
|
+
[vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2478
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
|
2479
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
|
2480
|
+
[vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
2481
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
|
2482
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
|
2483
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
|
2484
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
|
2485
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
|
2486
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
|
2487
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
|
2488
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
|
2489
|
+
[vars$i.inputResizeType]: 'vertical',
|
|
2490
|
+
[vars$i.inputMinHeight]: '5em',
|
|
2491
2491
|
|
|
2492
2492
|
_disabled: {
|
|
2493
|
-
[vars$
|
|
2493
|
+
[vars$i.inputBackgroundColor]: globalRefs$8.colors.surface.light,
|
|
2494
2494
|
},
|
|
2495
2495
|
|
|
2496
2496
|
_readonly: {
|
|
2497
|
-
[vars$
|
|
2497
|
+
[vars$i.inputResizeType]: 'none',
|
|
2498
2498
|
},
|
|
2499
2499
|
};
|
|
2500
2500
|
|
|
2501
2501
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
2502
2502
|
__proto__: null,
|
|
2503
2503
|
default: textArea,
|
|
2504
|
-
vars: vars$
|
|
2504
|
+
vars: vars$i
|
|
2505
2505
|
});
|
|
2506
2506
|
|
|
2507
2507
|
const createBaseInputClass = (...args) =>
|
|
@@ -2512,9 +2512,9 @@ const createBaseInputClass = (...args) =>
|
|
|
2512
2512
|
inputEventsDispatchingMixin
|
|
2513
2513
|
)(createBaseClass(...args));
|
|
2514
2514
|
|
|
2515
|
-
const componentName$
|
|
2515
|
+
const componentName$m = getComponentName('boolean-field-internal');
|
|
2516
2516
|
|
|
2517
|
-
createBaseInputClass({ componentName: componentName$
|
|
2517
|
+
createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
|
|
2518
2518
|
|
|
2519
2519
|
const booleanFieldMixin = (superclass) =>
|
|
2520
2520
|
class BooleanFieldMixinClass extends superclass {
|
|
@@ -2523,14 +2523,14 @@ const booleanFieldMixin = (superclass) =>
|
|
|
2523
2523
|
|
|
2524
2524
|
const template = document.createElement('template');
|
|
2525
2525
|
template.innerHTML = `
|
|
2526
|
-
<${componentName$
|
|
2526
|
+
<${componentName$m}
|
|
2527
2527
|
tabindex="-1"
|
|
2528
2528
|
slot="input"
|
|
2529
|
-
></${componentName$
|
|
2529
|
+
></${componentName$m}>
|
|
2530
2530
|
`;
|
|
2531
2531
|
|
|
2532
2532
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
2533
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
2533
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$m);
|
|
2534
2534
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
|
2535
2535
|
|
|
2536
2536
|
forwardAttrs(this, this.inputElement, {
|
|
@@ -2609,18 +2609,18 @@ vaadin-checkbox::part(checkbox) {
|
|
|
2609
2609
|
}
|
|
2610
2610
|
`;
|
|
2611
2611
|
|
|
2612
|
-
const componentName$
|
|
2612
|
+
const componentName$l = getComponentName('checkbox');
|
|
2613
2613
|
|
|
2614
2614
|
const {
|
|
2615
|
-
host: host$
|
|
2615
|
+
host: host$a,
|
|
2616
2616
|
component: component$1,
|
|
2617
2617
|
checkboxElement,
|
|
2618
2618
|
checkboxSurface,
|
|
2619
2619
|
checkboxHiddenLabel: checkboxHiddenLabel$1,
|
|
2620
|
-
label: label$
|
|
2621
|
-
requiredIndicator: requiredIndicator$
|
|
2622
|
-
helperText: helperText$
|
|
2623
|
-
errorMessage: errorMessage$
|
|
2620
|
+
label: label$6,
|
|
2621
|
+
requiredIndicator: requiredIndicator$6,
|
|
2622
|
+
helperText: helperText$5,
|
|
2623
|
+
errorMessage: errorMessage$6,
|
|
2624
2624
|
} = {
|
|
2625
2625
|
host: { selector: () => ':host' },
|
|
2626
2626
|
label: { selector: '::part(label)' },
|
|
@@ -2636,25 +2636,25 @@ const {
|
|
|
2636
2636
|
const CheckboxClass = compose(
|
|
2637
2637
|
createStyleMixin({
|
|
2638
2638
|
mappings: {
|
|
2639
|
-
hostWidth: { ...host$
|
|
2639
|
+
hostWidth: { ...host$a, property: 'width' },
|
|
2640
2640
|
|
|
2641
|
-
fontSize: [host$
|
|
2642
|
-
fontFamily: [label$
|
|
2641
|
+
fontSize: [host$a, checkboxElement, label$6, checkboxHiddenLabel$1],
|
|
2642
|
+
fontFamily: [label$6, checkboxHiddenLabel$1, helperText$5, errorMessage$6],
|
|
2643
2643
|
|
|
2644
2644
|
labelTextColor: [
|
|
2645
|
-
{ ...label$
|
|
2646
|
-
{ ...requiredIndicator$
|
|
2647
|
-
{ ...label$
|
|
2645
|
+
{ ...label$6, property: 'color' },
|
|
2646
|
+
{ ...requiredIndicator$6, property: 'color' },
|
|
2647
|
+
{ ...label$6, property: '-webkit-text-fill-color' },
|
|
2648
2648
|
],
|
|
2649
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2650
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2649
|
+
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
|
2650
|
+
errorMessageTextColor: { ...errorMessage$6, property: 'color' },
|
|
2651
2651
|
|
|
2652
2652
|
labelFontWeight: [
|
|
2653
|
-
{ ...label$
|
|
2653
|
+
{ ...label$6, property: 'font-weight' },
|
|
2654
2654
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' },
|
|
2655
2655
|
],
|
|
2656
2656
|
labelSpacing: [
|
|
2657
|
-
{ ...label$
|
|
2657
|
+
{ ...label$6, property: 'left' },
|
|
2658
2658
|
{ ...checkboxHiddenLabel$1, property: 'padding-left' },
|
|
2659
2659
|
],
|
|
2660
2660
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
|
@@ -2677,8 +2677,8 @@ const CheckboxClass = compose(
|
|
|
2677
2677
|
{ ...checkboxSurface, property: 'font-size' },
|
|
2678
2678
|
{ ...component$1, property: 'font-size' },
|
|
2679
2679
|
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
|
2680
|
-
{ ...label$
|
|
2681
|
-
{ ...label$
|
|
2680
|
+
{ ...label$6, property: 'margin-left' },
|
|
2681
|
+
{ ...label$6, property: 'line-height' },
|
|
2682
2682
|
],
|
|
2683
2683
|
},
|
|
2684
2684
|
}),
|
|
@@ -2699,60 +2699,60 @@ const CheckboxClass = compose(
|
|
|
2699
2699
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
|
2700
2700
|
`,
|
|
2701
2701
|
excludeAttrsSync: ['tabindex'],
|
|
2702
|
-
componentName: componentName$
|
|
2702
|
+
componentName: componentName$l,
|
|
2703
2703
|
})
|
|
2704
2704
|
);
|
|
2705
2705
|
|
|
2706
|
-
const vars$
|
|
2706
|
+
const vars$h = CheckboxClass.cssVarList;
|
|
2707
2707
|
|
|
2708
2708
|
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$
|
|
2709
|
+
[vars$h.hostWidth]: refs.width,
|
|
2710
|
+
[vars$h.fontSize]: refs.fontSize,
|
|
2711
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
|
2712
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
|
2713
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2714
|
+
[vars$h.labelFontWeight]: '400',
|
|
2715
|
+
[vars$h.labelSpacing]: '0.75em',
|
|
2716
|
+
[vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2717
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
|
2718
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
|
2719
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
|
2720
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
|
2721
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
|
2722
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
|
2723
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
|
2724
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
|
2725
|
+
[vars$h.inputBackgroundColor]: refs.inputBackgroundColor,
|
|
2726
|
+
[vars$h.inputSize]: '2em',
|
|
2727
2727
|
|
|
2728
2728
|
_checked: {
|
|
2729
|
-
[vars$
|
|
2730
|
-
[vars$
|
|
2729
|
+
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
|
2730
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
|
2731
2731
|
},
|
|
2732
2732
|
|
|
2733
2733
|
_disabled: {
|
|
2734
|
-
[vars$
|
|
2734
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
|
2735
2735
|
},
|
|
2736
2736
|
};
|
|
2737
2737
|
|
|
2738
2738
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
|
2739
2739
|
__proto__: null,
|
|
2740
2740
|
default: checkbox,
|
|
2741
|
-
vars: vars$
|
|
2741
|
+
vars: vars$h
|
|
2742
2742
|
});
|
|
2743
2743
|
|
|
2744
|
-
const componentName$
|
|
2744
|
+
const componentName$k = getComponentName('switch-toggle');
|
|
2745
2745
|
|
|
2746
2746
|
const {
|
|
2747
|
-
host: host$
|
|
2747
|
+
host: host$9,
|
|
2748
2748
|
component,
|
|
2749
2749
|
checkboxElement: track,
|
|
2750
2750
|
checkboxSurface: knob,
|
|
2751
2751
|
checkboxHiddenLabel,
|
|
2752
|
-
label: label$
|
|
2753
|
-
requiredIndicator: requiredIndicator$
|
|
2754
|
-
helperText: helperText$
|
|
2755
|
-
errorMessage: errorMessage$
|
|
2752
|
+
label: label$5,
|
|
2753
|
+
requiredIndicator: requiredIndicator$5,
|
|
2754
|
+
helperText: helperText$4,
|
|
2755
|
+
errorMessage: errorMessage$5,
|
|
2756
2756
|
} = {
|
|
2757
2757
|
host: { selector: () => ':host' },
|
|
2758
2758
|
label: { selector: '::part(label)' },
|
|
@@ -2768,9 +2768,9 @@ const {
|
|
|
2768
2768
|
const SwitchToggleClass = compose(
|
|
2769
2769
|
createStyleMixin({
|
|
2770
2770
|
mappings: {
|
|
2771
|
-
hostWidth: { ...host$
|
|
2772
|
-
fontSize: [component, label$
|
|
2773
|
-
fontFamily: [label$
|
|
2771
|
+
hostWidth: { ...host$9, property: 'width' },
|
|
2772
|
+
fontSize: [component, label$5, checkboxHiddenLabel],
|
|
2773
|
+
fontFamily: [label$5, helperText$4, errorMessage$5],
|
|
2774
2774
|
trackBorderWidth: { ...track, property: 'border-width' },
|
|
2775
2775
|
trackBorderStyle: { ...track, property: 'border-style' },
|
|
2776
2776
|
trackBorderColor: { ...track, property: 'border-color' },
|
|
@@ -2794,24 +2794,24 @@ const SwitchToggleClass = compose(
|
|
|
2794
2794
|
knobLeftOffset: { ...knob, property: 'left' },
|
|
2795
2795
|
|
|
2796
2796
|
labelSpacing: [
|
|
2797
|
-
{ ...label$
|
|
2797
|
+
{ ...label$5, property: 'padding-left' },
|
|
2798
2798
|
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
|
2799
2799
|
],
|
|
2800
2800
|
labelLineHeight: [
|
|
2801
|
-
{ ...label$
|
|
2801
|
+
{ ...label$5, property: 'line-height' },
|
|
2802
2802
|
{ ...checkboxHiddenLabel, property: 'line-height' },
|
|
2803
2803
|
],
|
|
2804
2804
|
labelFontWeight: [
|
|
2805
|
-
{ ...label$
|
|
2805
|
+
{ ...label$5, property: 'font-weight' },
|
|
2806
2806
|
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
|
2807
2807
|
],
|
|
2808
2808
|
labelTextColor: [
|
|
2809
|
-
{ ...label$
|
|
2810
|
-
{ ...requiredIndicator$
|
|
2811
|
-
{ ...label$
|
|
2809
|
+
{ ...label$5, property: 'color' },
|
|
2810
|
+
{ ...requiredIndicator$5, property: 'color' },
|
|
2811
|
+
{ ...label$5, property: '-webkit-text-fill-color' },
|
|
2812
2812
|
],
|
|
2813
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
2814
|
-
errorMessageTextColor: { ...errorMessage$
|
|
2813
|
+
labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
|
|
2814
|
+
errorMessageTextColor: { ...errorMessage$5, property: 'color' },
|
|
2815
2815
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
|
2816
2816
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
|
2817
2817
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
|
@@ -2844,7 +2844,7 @@ const SwitchToggleClass = compose(
|
|
|
2844
2844
|
}
|
|
2845
2845
|
`,
|
|
2846
2846
|
excludeAttrsSync: ['tabindex'],
|
|
2847
|
-
componentName: componentName$
|
|
2847
|
+
componentName: componentName$k,
|
|
2848
2848
|
})
|
|
2849
2849
|
);
|
|
2850
2850
|
|
|
@@ -2852,75 +2852,75 @@ const knobMargin = '2px';
|
|
|
2852
2852
|
const checkboxHeight = '1.25em';
|
|
2853
2853
|
|
|
2854
2854
|
const globalRefs$7 = getThemeRefs(globals);
|
|
2855
|
-
const vars$
|
|
2855
|
+
const vars$g = SwitchToggleClass.cssVarList;
|
|
2856
|
+
|
|
2857
|
+
const switchToggle = {
|
|
2858
|
+
[vars$g.fontSize]: refs.fontSize,
|
|
2859
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
|
2860
|
+
|
|
2861
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
|
2862
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
|
2863
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
|
2864
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
|
2865
|
+
|
|
2866
|
+
[vars$g.trackBorderStyle]: refs.borderStyle,
|
|
2867
|
+
[vars$g.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
2868
|
+
[vars$g.trackBorderColor]: refs.borderColor,
|
|
2869
|
+
[vars$g.trackBackgroundColor]: 'none',
|
|
2870
|
+
[vars$g.trackBorderRadius]: globalRefs$7.radius.md,
|
|
2871
|
+
[vars$g.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
2872
|
+
[vars$g.trackHeight]: checkboxHeight,
|
|
2873
|
+
|
|
2874
|
+
[vars$g.knobSize]: `calc(1em - ${knobMargin})`,
|
|
2875
|
+
[vars$g.knobRadius]: '50%',
|
|
2876
|
+
[vars$g.knobTopOffset]: '1px',
|
|
2877
|
+
[vars$g.knobLeftOffset]: knobMargin,
|
|
2878
|
+
[vars$g.knobColor]: refs.valueTextColor,
|
|
2879
|
+
[vars$g.knobTransitionDuration]: '0.3s',
|
|
2880
|
+
|
|
2881
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
2882
|
+
[vars$g.labelFontWeight]: '400',
|
|
2883
|
+
[vars$g.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
|
2884
|
+
[vars$g.labelSpacing]: '0.25em',
|
|
2885
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2886
|
+
[vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2856
2887
|
|
|
2857
|
-
|
|
2858
|
-
[vars$f.fontSize]: refs.fontSize,
|
|
2859
|
-
[vars$f.fontFamily]: refs.fontFamily,
|
|
2860
|
-
|
|
2861
|
-
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
|
2862
|
-
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
|
2863
|
-
[vars$f.inputOutlineColor]: refs.outlineColor,
|
|
2864
|
-
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
|
2865
|
-
|
|
2866
|
-
[vars$f.trackBorderStyle]: refs.borderStyle,
|
|
2867
|
-
[vars$f.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
|
2868
|
-
[vars$f.trackBorderColor]: refs.borderColor,
|
|
2869
|
-
[vars$f.trackBackgroundColor]: 'none',
|
|
2870
|
-
[vars$f.trackBorderRadius]: globalRefs$7.radius.md,
|
|
2871
|
-
[vars$f.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
|
2872
|
-
[vars$f.trackHeight]: checkboxHeight,
|
|
2873
|
-
|
|
2874
|
-
[vars$f.knobSize]: `calc(1em - ${knobMargin})`,
|
|
2875
|
-
[vars$f.knobRadius]: '50%',
|
|
2876
|
-
[vars$f.knobTopOffset]: '1px',
|
|
2877
|
-
[vars$f.knobLeftOffset]: knobMargin,
|
|
2878
|
-
[vars$f.knobColor]: refs.valueTextColor,
|
|
2879
|
-
[vars$f.knobTransitionDuration]: '0.3s',
|
|
2880
|
-
|
|
2881
|
-
[vars$f.labelTextColor]: refs.labelTextColor,
|
|
2882
|
-
[vars$f.labelFontWeight]: '400',
|
|
2883
|
-
[vars$f.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
|
2884
|
-
[vars$f.labelSpacing]: '0.25em',
|
|
2885
|
-
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
|
2886
|
-
[vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
2887
|
-
|
|
2888
|
-
[vars$f.hostWidth]: refs.width,
|
|
2888
|
+
[vars$g.hostWidth]: refs.width,
|
|
2889
2889
|
|
|
2890
2890
|
_checked: {
|
|
2891
|
-
[vars$
|
|
2892
|
-
[vars$
|
|
2893
|
-
[vars$
|
|
2894
|
-
[vars$
|
|
2895
|
-
[vars$
|
|
2891
|
+
[vars$g.trackBorderColor]: refs.borderColor,
|
|
2892
|
+
[vars$g.trackBackgroundColor]: refs.backgroundColor,
|
|
2893
|
+
[vars$g.knobLeftOffset]: `calc(100% - var(${vars$g.knobSize}) - ${knobMargin})`,
|
|
2894
|
+
[vars$g.knobColor]: refs.valueTextColor,
|
|
2895
|
+
[vars$g.knobTextColor]: refs.valueTextColor,
|
|
2896
2896
|
},
|
|
2897
2897
|
|
|
2898
2898
|
_disabled: {
|
|
2899
|
-
[vars$
|
|
2900
|
-
[vars$
|
|
2901
|
-
[vars$
|
|
2902
|
-
[vars$
|
|
2899
|
+
[vars$g.knobColor]: globalRefs$7.colors.surface.light,
|
|
2900
|
+
[vars$g.trackBorderColor]: globalRefs$7.colors.surface.main,
|
|
2901
|
+
[vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
|
2902
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
|
2903
2903
|
_checked: {
|
|
2904
|
-
[vars$
|
|
2905
|
-
[vars$
|
|
2904
|
+
[vars$g.knobColor]: globalRefs$7.colors.surface.light,
|
|
2905
|
+
[vars$g.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
|
2906
2906
|
},
|
|
2907
2907
|
},
|
|
2908
2908
|
|
|
2909
2909
|
_invalid: {
|
|
2910
|
-
[vars$
|
|
2911
|
-
[vars$
|
|
2910
|
+
[vars$g.trackBorderColor]: globalRefs$7.colors.error.main,
|
|
2911
|
+
[vars$g.knobColor]: globalRefs$7.colors.error.main,
|
|
2912
2912
|
},
|
|
2913
2913
|
};
|
|
2914
2914
|
|
|
2915
2915
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
|
2916
2916
|
__proto__: null,
|
|
2917
2917
|
default: switchToggle,
|
|
2918
|
-
vars: vars$
|
|
2918
|
+
vars: vars$g
|
|
2919
2919
|
});
|
|
2920
2920
|
|
|
2921
|
-
const componentName$
|
|
2921
|
+
const componentName$j = getComponentName('container');
|
|
2922
2922
|
|
|
2923
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
|
2923
|
+
class RawContainer extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > slot' }) {
|
|
2924
2924
|
constructor() {
|
|
2925
2925
|
super();
|
|
2926
2926
|
|
|
@@ -2994,7 +2994,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
|
|
2994
2994
|
horizontalAlignment,
|
|
2995
2995
|
shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
|
|
2996
2996
|
},
|
|
2997
|
-
componentName$
|
|
2997
|
+
componentName$j
|
|
2998
2998
|
);
|
|
2999
2999
|
|
|
3000
3000
|
const { shadowColor } = helperRefs$2;
|
|
@@ -3078,7 +3078,7 @@ const container = {
|
|
|
3078
3078
|
},
|
|
3079
3079
|
};
|
|
3080
3080
|
|
|
3081
|
-
const vars$
|
|
3081
|
+
const vars$f = {
|
|
3082
3082
|
...compVars$2,
|
|
3083
3083
|
...helperVars$2,
|
|
3084
3084
|
};
|
|
@@ -3086,7 +3086,7 @@ const vars$e = {
|
|
|
3086
3086
|
var container$1 = /*#__PURE__*/Object.freeze({
|
|
3087
3087
|
__proto__: null,
|
|
3088
3088
|
default: container,
|
|
3089
|
-
vars: vars$
|
|
3089
|
+
vars: vars$f
|
|
3090
3090
|
});
|
|
3091
3091
|
|
|
3092
3092
|
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
|
@@ -3139,49 +3139,49 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
|
|
|
3139
3139
|
return CssVarImageClass;
|
|
3140
3140
|
};
|
|
3141
3141
|
|
|
3142
|
-
const componentName$
|
|
3142
|
+
const componentName$i = getComponentName('logo');
|
|
3143
3143
|
|
|
3144
3144
|
const LogoClass = createCssVarImageClass({
|
|
3145
|
-
componentName: componentName$
|
|
3145
|
+
componentName: componentName$i,
|
|
3146
3146
|
varName: 'url',
|
|
3147
3147
|
fallbackVarName: 'fallbackUrl',
|
|
3148
3148
|
});
|
|
3149
3149
|
|
|
3150
|
-
const vars$
|
|
3150
|
+
const vars$e = LogoClass.cssVarList;
|
|
3151
3151
|
|
|
3152
3152
|
const logo$1 = {
|
|
3153
|
-
[vars$
|
|
3153
|
+
[vars$e.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
3156
|
var logo$2 = /*#__PURE__*/Object.freeze({
|
|
3157
3157
|
__proto__: null,
|
|
3158
3158
|
default: logo$1,
|
|
3159
|
-
vars: vars$
|
|
3159
|
+
vars: vars$e
|
|
3160
3160
|
});
|
|
3161
3161
|
|
|
3162
|
-
const componentName$
|
|
3162
|
+
const componentName$h = getComponentName('totp-image');
|
|
3163
3163
|
|
|
3164
3164
|
const TotpImageClass = createCssVarImageClass({
|
|
3165
|
-
componentName: componentName$
|
|
3165
|
+
componentName: componentName$h,
|
|
3166
3166
|
varName: 'url',
|
|
3167
3167
|
fallbackVarName: 'fallbackUrl',
|
|
3168
3168
|
});
|
|
3169
3169
|
|
|
3170
|
-
const vars$
|
|
3170
|
+
const vars$d = TotpImageClass.cssVarList;
|
|
3171
3171
|
|
|
3172
3172
|
const logo = {
|
|
3173
|
-
[vars$
|
|
3173
|
+
[vars$d.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
|
|
3174
3174
|
};
|
|
3175
3175
|
|
|
3176
3176
|
var totpImage = /*#__PURE__*/Object.freeze({
|
|
3177
3177
|
__proto__: null,
|
|
3178
3178
|
default: logo,
|
|
3179
|
-
vars: vars$
|
|
3179
|
+
vars: vars$d
|
|
3180
3180
|
});
|
|
3181
3181
|
|
|
3182
|
-
const componentName$
|
|
3182
|
+
const componentName$g = getComponentName('text');
|
|
3183
3183
|
|
|
3184
|
-
class RawText extends createBaseClass({ componentName: componentName$
|
|
3184
|
+
class RawText extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
|
|
3185
3185
|
constructor() {
|
|
3186
3186
|
super();
|
|
3187
3187
|
|
|
@@ -3224,97 +3224,97 @@ const TextClass = compose(
|
|
|
3224
3224
|
)(RawText);
|
|
3225
3225
|
|
|
3226
3226
|
const globalRefs$5 = getThemeRefs(globals);
|
|
3227
|
-
const vars$
|
|
3227
|
+
const vars$c = TextClass.cssVarList;
|
|
3228
3228
|
|
|
3229
3229
|
const text$2 = {
|
|
3230
|
-
[vars$
|
|
3231
|
-
[vars$
|
|
3232
|
-
[vars$
|
|
3230
|
+
[vars$c.textLineHeight]: '1em',
|
|
3231
|
+
[vars$c.textAlign]: 'left',
|
|
3232
|
+
[vars$c.textColor]: globalRefs$5.colors.surface.dark,
|
|
3233
3233
|
variant: {
|
|
3234
3234
|
h1: {
|
|
3235
|
-
[vars$
|
|
3236
|
-
[vars$
|
|
3237
|
-
[vars$
|
|
3235
|
+
[vars$c.fontSize]: globalRefs$5.typography.h1.size,
|
|
3236
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h1.weight,
|
|
3237
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h1.font,
|
|
3238
3238
|
},
|
|
3239
3239
|
h2: {
|
|
3240
|
-
[vars$
|
|
3241
|
-
[vars$
|
|
3242
|
-
[vars$
|
|
3240
|
+
[vars$c.fontSize]: globalRefs$5.typography.h2.size,
|
|
3241
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h2.weight,
|
|
3242
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h2.font,
|
|
3243
3243
|
},
|
|
3244
3244
|
h3: {
|
|
3245
|
-
[vars$
|
|
3246
|
-
[vars$
|
|
3247
|
-
[vars$
|
|
3245
|
+
[vars$c.fontSize]: globalRefs$5.typography.h3.size,
|
|
3246
|
+
[vars$c.fontWeight]: globalRefs$5.typography.h3.weight,
|
|
3247
|
+
[vars$c.fontFamily]: globalRefs$5.typography.h3.font,
|
|
3248
3248
|
},
|
|
3249
3249
|
subtitle1: {
|
|
3250
|
-
[vars$
|
|
3251
|
-
[vars$
|
|
3252
|
-
[vars$
|
|
3250
|
+
[vars$c.fontSize]: globalRefs$5.typography.subtitle1.size,
|
|
3251
|
+
[vars$c.fontWeight]: globalRefs$5.typography.subtitle1.weight,
|
|
3252
|
+
[vars$c.fontFamily]: globalRefs$5.typography.subtitle1.font,
|
|
3253
3253
|
},
|
|
3254
3254
|
subtitle2: {
|
|
3255
|
-
[vars$
|
|
3256
|
-
[vars$
|
|
3257
|
-
[vars$
|
|
3255
|
+
[vars$c.fontSize]: globalRefs$5.typography.subtitle2.size,
|
|
3256
|
+
[vars$c.fontWeight]: globalRefs$5.typography.subtitle2.weight,
|
|
3257
|
+
[vars$c.fontFamily]: globalRefs$5.typography.subtitle2.font,
|
|
3258
3258
|
},
|
|
3259
3259
|
body1: {
|
|
3260
|
-
[vars$
|
|
3261
|
-
[vars$
|
|
3262
|
-
[vars$
|
|
3260
|
+
[vars$c.fontSize]: globalRefs$5.typography.body1.size,
|
|
3261
|
+
[vars$c.fontWeight]: globalRefs$5.typography.body1.weight,
|
|
3262
|
+
[vars$c.fontFamily]: globalRefs$5.typography.body1.font,
|
|
3263
3263
|
},
|
|
3264
3264
|
body2: {
|
|
3265
|
-
[vars$
|
|
3266
|
-
[vars$
|
|
3267
|
-
[vars$
|
|
3265
|
+
[vars$c.fontSize]: globalRefs$5.typography.body2.size,
|
|
3266
|
+
[vars$c.fontWeight]: globalRefs$5.typography.body2.weight,
|
|
3267
|
+
[vars$c.fontFamily]: globalRefs$5.typography.body2.font,
|
|
3268
3268
|
},
|
|
3269
3269
|
},
|
|
3270
3270
|
|
|
3271
3271
|
mode: {
|
|
3272
3272
|
primary: {
|
|
3273
|
-
[vars$
|
|
3273
|
+
[vars$c.textColor]: globalRefs$5.colors.primary.main,
|
|
3274
3274
|
},
|
|
3275
3275
|
secondary: {
|
|
3276
|
-
[vars$
|
|
3276
|
+
[vars$c.textColor]: globalRefs$5.colors.secondary.main,
|
|
3277
3277
|
},
|
|
3278
3278
|
error: {
|
|
3279
|
-
[vars$
|
|
3279
|
+
[vars$c.textColor]: globalRefs$5.colors.error.main,
|
|
3280
3280
|
},
|
|
3281
3281
|
success: {
|
|
3282
|
-
[vars$
|
|
3282
|
+
[vars$c.textColor]: globalRefs$5.colors.success.main,
|
|
3283
3283
|
},
|
|
3284
3284
|
},
|
|
3285
3285
|
|
|
3286
3286
|
textAlign: {
|
|
3287
|
-
right: { [vars$
|
|
3288
|
-
left: { [vars$
|
|
3289
|
-
center: { [vars$
|
|
3287
|
+
right: { [vars$c.textAlign]: 'right' },
|
|
3288
|
+
left: { [vars$c.textAlign]: 'left' },
|
|
3289
|
+
center: { [vars$c.textAlign]: 'center' },
|
|
3290
3290
|
},
|
|
3291
3291
|
|
|
3292
3292
|
_fullWidth: {
|
|
3293
|
-
[vars$
|
|
3293
|
+
[vars$c.hostWidth]: '100%',
|
|
3294
3294
|
},
|
|
3295
3295
|
|
|
3296
3296
|
_italic: {
|
|
3297
|
-
[vars$
|
|
3297
|
+
[vars$c.fontStyle]: 'italic',
|
|
3298
3298
|
},
|
|
3299
3299
|
|
|
3300
3300
|
_uppercase: {
|
|
3301
|
-
[vars$
|
|
3301
|
+
[vars$c.textTransform]: 'uppercase',
|
|
3302
3302
|
},
|
|
3303
3303
|
|
|
3304
3304
|
_lowercase: {
|
|
3305
|
-
[vars$
|
|
3305
|
+
[vars$c.textTransform]: 'lowercase',
|
|
3306
3306
|
},
|
|
3307
3307
|
};
|
|
3308
3308
|
|
|
3309
3309
|
var text$3 = /*#__PURE__*/Object.freeze({
|
|
3310
3310
|
__proto__: null,
|
|
3311
3311
|
default: text$2,
|
|
3312
|
-
vars: vars$
|
|
3312
|
+
vars: vars$c
|
|
3313
3313
|
});
|
|
3314
3314
|
|
|
3315
|
-
const componentName$
|
|
3315
|
+
const componentName$f = getComponentName('link');
|
|
3316
3316
|
|
|
3317
|
-
class RawLink extends createBaseClass({ componentName: componentName$
|
|
3317
|
+
class RawLink extends createBaseClass({ componentName: componentName$f, baseSelector: ':host a' }) {
|
|
3318
3318
|
constructor() {
|
|
3319
3319
|
super();
|
|
3320
3320
|
|
|
@@ -3360,12 +3360,12 @@ const selectors$1 = {
|
|
|
3360
3360
|
text: { selector: () => TextClass.componentName },
|
|
3361
3361
|
};
|
|
3362
3362
|
|
|
3363
|
-
const { anchor, text: text$1, host: host$
|
|
3363
|
+
const { anchor, text: text$1, host: host$8, wrapper: wrapper$1 } = selectors$1;
|
|
3364
3364
|
|
|
3365
3365
|
const LinkClass = compose(
|
|
3366
3366
|
createStyleMixin({
|
|
3367
3367
|
mappings: {
|
|
3368
|
-
hostWidth: { ...host$
|
|
3368
|
+
hostWidth: { ...host$8, property: 'width' },
|
|
3369
3369
|
textAlign: wrapper$1,
|
|
3370
3370
|
textColor: [
|
|
3371
3371
|
{ ...anchor, property: 'color' },
|
|
@@ -3379,35 +3379,35 @@ const LinkClass = compose(
|
|
|
3379
3379
|
)(RawLink);
|
|
3380
3380
|
|
|
3381
3381
|
const globalRefs$4 = getThemeRefs(globals);
|
|
3382
|
-
const vars$
|
|
3382
|
+
const vars$b = LinkClass.cssVarList;
|
|
3383
3383
|
|
|
3384
3384
|
const link = {
|
|
3385
|
-
[vars$
|
|
3385
|
+
[vars$b.cursor]: 'pointer',
|
|
3386
3386
|
|
|
3387
|
-
[vars$
|
|
3387
|
+
[vars$b.textColor]: globalRefs$4.colors.primary.main,
|
|
3388
3388
|
|
|
3389
3389
|
textAlign: {
|
|
3390
|
-
right: { [vars$
|
|
3391
|
-
left: { [vars$
|
|
3392
|
-
center: { [vars$
|
|
3390
|
+
right: { [vars$b.textAlign]: 'right' },
|
|
3391
|
+
left: { [vars$b.textAlign]: 'left' },
|
|
3392
|
+
center: { [vars$b.textAlign]: 'center' },
|
|
3393
3393
|
},
|
|
3394
3394
|
|
|
3395
3395
|
_fullWidth: {
|
|
3396
|
-
[vars$
|
|
3396
|
+
[vars$b.hostWidth]: '100%',
|
|
3397
3397
|
},
|
|
3398
3398
|
|
|
3399
3399
|
mode: {
|
|
3400
3400
|
primary: {
|
|
3401
|
-
[vars$
|
|
3401
|
+
[vars$b.textColor]: globalRefs$4.colors.primary.main,
|
|
3402
3402
|
},
|
|
3403
3403
|
secondary: {
|
|
3404
|
-
[vars$
|
|
3404
|
+
[vars$b.textColor]: globalRefs$4.colors.secondary.main,
|
|
3405
3405
|
},
|
|
3406
3406
|
error: {
|
|
3407
|
-
[vars$
|
|
3407
|
+
[vars$b.textColor]: globalRefs$4.colors.error.main,
|
|
3408
3408
|
},
|
|
3409
3409
|
success: {
|
|
3410
|
-
[vars$
|
|
3410
|
+
[vars$b.textColor]: globalRefs$4.colors.success.main,
|
|
3411
3411
|
},
|
|
3412
3412
|
},
|
|
3413
3413
|
};
|
|
@@ -3415,11 +3415,11 @@ const link = {
|
|
|
3415
3415
|
var link$1 = /*#__PURE__*/Object.freeze({
|
|
3416
3416
|
__proto__: null,
|
|
3417
3417
|
default: link,
|
|
3418
|
-
vars: vars$
|
|
3418
|
+
vars: vars$b
|
|
3419
3419
|
});
|
|
3420
3420
|
|
|
3421
|
-
const componentName$
|
|
3422
|
-
class RawDivider extends createBaseClass({ componentName: componentName$
|
|
3421
|
+
const componentName$e = getComponentName('divider');
|
|
3422
|
+
class RawDivider extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
|
|
3423
3423
|
constructor() {
|
|
3424
3424
|
super();
|
|
3425
3425
|
|
|
@@ -3464,7 +3464,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$c, baseS
|
|
|
3464
3464
|
}
|
|
3465
3465
|
}
|
|
3466
3466
|
|
|
3467
|
-
const { host: host$
|
|
3467
|
+
const { host: host$7, before, after: after$1, text } = {
|
|
3468
3468
|
host: { selector: () => ':host' },
|
|
3469
3469
|
before: { selector: '::before' },
|
|
3470
3470
|
after: { selector: '::after' },
|
|
@@ -3474,8 +3474,8 @@ const { host: host$6, before, after: after$1, text } = {
|
|
|
3474
3474
|
const DividerClass = compose(
|
|
3475
3475
|
createStyleMixin({
|
|
3476
3476
|
mappings: {
|
|
3477
|
-
hostWidth: { ...host$
|
|
3478
|
-
hostPadding: { ...host$
|
|
3477
|
+
hostWidth: { ...host$7, property: 'width' },
|
|
3478
|
+
hostPadding: { ...host$7, property: 'padding' },
|
|
3479
3479
|
|
|
3480
3480
|
minHeight: {},
|
|
3481
3481
|
alignItems: {},
|
|
@@ -3523,7 +3523,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
|
3523
3523
|
thickness: '2px',
|
|
3524
3524
|
spacing: '10px',
|
|
3525
3525
|
},
|
|
3526
|
-
componentName$
|
|
3526
|
+
componentName$e
|
|
3527
3527
|
);
|
|
3528
3528
|
|
|
3529
3529
|
const divider = {
|
|
@@ -3552,7 +3552,7 @@ const divider = {
|
|
|
3552
3552
|
},
|
|
3553
3553
|
};
|
|
3554
3554
|
|
|
3555
|
-
const vars$
|
|
3555
|
+
const vars$a = {
|
|
3556
3556
|
...compVars$1,
|
|
3557
3557
|
...helperVars$1,
|
|
3558
3558
|
};
|
|
@@ -3560,20 +3560,20 @@ const vars$9 = {
|
|
|
3560
3560
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
|
3561
3561
|
__proto__: null,
|
|
3562
3562
|
default: divider,
|
|
3563
|
-
vars: vars$
|
|
3563
|
+
vars: vars$a
|
|
3564
3564
|
});
|
|
3565
3565
|
|
|
3566
3566
|
/* eslint-disable no-param-reassign */
|
|
3567
3567
|
|
|
3568
|
-
const componentName$
|
|
3568
|
+
const componentName$d = getComponentName('passcode-internal');
|
|
3569
3569
|
|
|
3570
|
-
createBaseInputClass({ componentName: componentName$
|
|
3570
|
+
createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
|
|
3571
3571
|
|
|
3572
|
-
const componentName$
|
|
3572
|
+
const componentName$c = getComponentName('passcode');
|
|
3573
3573
|
|
|
3574
3574
|
const observedAttributes$3 = ['digits'];
|
|
3575
3575
|
|
|
3576
|
-
const customMixin$
|
|
3576
|
+
const customMixin$3 = (superclass) =>
|
|
3577
3577
|
class PasscodeMixinClass extends superclass {
|
|
3578
3578
|
static get observedAttributes() {
|
|
3579
3579
|
return observedAttributes$3.concat(superclass.observedAttributes || []);
|
|
@@ -3588,17 +3588,17 @@ const customMixin$2 = (superclass) =>
|
|
|
3588
3588
|
const template = document.createElement('template');
|
|
3589
3589
|
|
|
3590
3590
|
template.innerHTML = `
|
|
3591
|
-
<${componentName$
|
|
3591
|
+
<${componentName$d}
|
|
3592
3592
|
bordered="true"
|
|
3593
3593
|
name="code"
|
|
3594
3594
|
tabindex="-1"
|
|
3595
3595
|
slot="input"
|
|
3596
|
-
></${componentName$
|
|
3596
|
+
></${componentName$d}>
|
|
3597
3597
|
`;
|
|
3598
3598
|
|
|
3599
3599
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
3600
3600
|
|
|
3601
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
3601
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$d);
|
|
3602
3602
|
|
|
3603
3603
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
|
3604
3604
|
}
|
|
@@ -3613,13 +3613,13 @@ const customMixin$2 = (superclass) =>
|
|
|
3613
3613
|
};
|
|
3614
3614
|
|
|
3615
3615
|
const {
|
|
3616
|
-
host: host$
|
|
3616
|
+
host: host$6,
|
|
3617
3617
|
digitField,
|
|
3618
|
-
label: label$
|
|
3619
|
-
requiredIndicator: requiredIndicator$
|
|
3618
|
+
label: label$4,
|
|
3619
|
+
requiredIndicator: requiredIndicator$4,
|
|
3620
3620
|
internalWrapper,
|
|
3621
3621
|
focusedDigitField,
|
|
3622
|
-
errorMessage: errorMessage$
|
|
3622
|
+
errorMessage: errorMessage$4,
|
|
3623
3623
|
} = {
|
|
3624
3624
|
host: { selector: () => ':host' },
|
|
3625
3625
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
|
@@ -3630,42 +3630,42 @@ const {
|
|
|
3630
3630
|
errorMessage: { selector: '::part(error-message)' },
|
|
3631
3631
|
};
|
|
3632
3632
|
|
|
3633
|
-
const textVars$
|
|
3633
|
+
const textVars$2 = TextFieldClass.cssVarList;
|
|
3634
3634
|
|
|
3635
3635
|
const PasscodeClass = compose(
|
|
3636
3636
|
createStyleMixin({
|
|
3637
3637
|
mappings: {
|
|
3638
|
-
fontSize: [{ ...digitField, property: textVars$
|
|
3638
|
+
fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$6],
|
|
3639
3639
|
hostWidth: { property: 'width' },
|
|
3640
|
-
fontFamily: host$
|
|
3640
|
+
fontFamily: host$6,
|
|
3641
3641
|
labelTextColor: [
|
|
3642
|
-
{ ...label$
|
|
3643
|
-
{ ...requiredIndicator$
|
|
3642
|
+
{ ...label$4, property: 'color' },
|
|
3643
|
+
{ ...requiredIndicator$4, property: 'color' },
|
|
3644
3644
|
],
|
|
3645
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
3646
|
-
errorMessageTextColor: { ...errorMessage$
|
|
3645
|
+
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
|
3646
|
+
errorMessageTextColor: { ...errorMessage$4, property: 'color' },
|
|
3647
3647
|
digitValueTextColor: {
|
|
3648
3648
|
selector: TextFieldClass.componentName,
|
|
3649
|
-
property: textVars$
|
|
3649
|
+
property: textVars$2.inputValueTextColor,
|
|
3650
3650
|
},
|
|
3651
3651
|
digitSize: [
|
|
3652
3652
|
{ ...digitField, property: 'height' },
|
|
3653
3653
|
{ ...digitField, property: 'width' },
|
|
3654
3654
|
],
|
|
3655
|
-
digitPadding: { ...digitField, property: textVars$
|
|
3656
|
-
digitTextAlign: { ...digitField, property: textVars$
|
|
3657
|
-
digitCaretTextColor: { ...digitField, property: textVars$
|
|
3655
|
+
digitPadding: { ...digitField, property: textVars$2.inputHorizontalPadding },
|
|
3656
|
+
digitTextAlign: { ...digitField, property: textVars$2.inputTextAlign },
|
|
3657
|
+
digitCaretTextColor: { ...digitField, property: textVars$2.inputCaretTextColor },
|
|
3658
3658
|
digitSpacing: { ...internalWrapper, property: 'gap' },
|
|
3659
|
-
digitOutlineColor: { ...digitField, property: textVars$
|
|
3660
|
-
digitOutlineWidth: { ...digitField, property: textVars$
|
|
3659
|
+
digitOutlineColor: { ...digitField, property: textVars$2.inputOutlineColor },
|
|
3660
|
+
digitOutlineWidth: { ...digitField, property: textVars$2.inputOutlineWidth },
|
|
3661
3661
|
|
|
3662
|
-
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$
|
|
3662
|
+
focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$2.inputOutlineColor },
|
|
3663
3663
|
},
|
|
3664
3664
|
}),
|
|
3665
3665
|
draggableMixin,
|
|
3666
3666
|
composedProxyInputMixin,
|
|
3667
3667
|
componentNameValidationMixin,
|
|
3668
|
-
customMixin$
|
|
3668
|
+
customMixin$3
|
|
3669
3669
|
)(
|
|
3670
3670
|
createProxy({
|
|
3671
3671
|
slots: [],
|
|
@@ -3701,7 +3701,7 @@ const PasscodeClass = compose(
|
|
|
3701
3701
|
|
|
3702
3702
|
descope-passcode-internal descope-text-field {
|
|
3703
3703
|
min-width: 2em;
|
|
3704
|
-
max-width: var(${textVars$
|
|
3704
|
+
max-width: var(${textVars$2.inputHeight});
|
|
3705
3705
|
}
|
|
3706
3706
|
|
|
3707
3707
|
vaadin-text-field::part(input-field) {
|
|
@@ -3736,44 +3736,44 @@ const PasscodeClass = compose(
|
|
|
3736
3736
|
${resetInputCursor('vaadin-text-field')}
|
|
3737
3737
|
`,
|
|
3738
3738
|
excludeAttrsSync: ['tabindex'],
|
|
3739
|
-
componentName: componentName$
|
|
3739
|
+
componentName: componentName$c,
|
|
3740
3740
|
})
|
|
3741
3741
|
);
|
|
3742
3742
|
|
|
3743
|
-
const vars$
|
|
3743
|
+
const vars$9 = PasscodeClass.cssVarList;
|
|
3744
3744
|
|
|
3745
3745
|
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$
|
|
3746
|
+
[vars$9.fontFamily]: refs.fontFamily,
|
|
3747
|
+
[vars$9.fontSize]: refs.fontSize,
|
|
3748
|
+
[vars$9.labelTextColor]: refs.labelTextColor,
|
|
3749
|
+
[vars$9.labelRequiredIndicator]: refs.requiredIndicator,
|
|
3750
|
+
[vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
3751
|
+
[vars$9.digitValueTextColor]: refs.valueTextColor,
|
|
3752
|
+
[vars$9.digitPadding]: '0',
|
|
3753
|
+
[vars$9.digitTextAlign]: 'center',
|
|
3754
|
+
[vars$9.digitSpacing]: '4px',
|
|
3755
|
+
[vars$9.hostWidth]: refs.width,
|
|
3756
|
+
[vars$9.digitOutlineColor]: 'transparent',
|
|
3757
|
+
[vars$9.digitOutlineWidth]: refs.outlineWidth,
|
|
3758
|
+
[vars$9.focusedDigitFieldOutlineColor]: refs.outlineColor,
|
|
3759
|
+
[vars$9.digitSize]: refs.inputHeight,
|
|
3760
3760
|
|
|
3761
3761
|
_hideCursor: {
|
|
3762
|
-
[vars$
|
|
3762
|
+
[vars$9.digitCaretTextColor]: 'transparent',
|
|
3763
3763
|
},
|
|
3764
3764
|
};
|
|
3765
3765
|
|
|
3766
3766
|
var passcode$1 = /*#__PURE__*/Object.freeze({
|
|
3767
3767
|
__proto__: null,
|
|
3768
3768
|
default: passcode,
|
|
3769
|
-
vars: vars$
|
|
3769
|
+
vars: vars$9
|
|
3770
3770
|
});
|
|
3771
3771
|
|
|
3772
|
-
const componentName$
|
|
3772
|
+
const componentName$b = getComponentName('loader-linear');
|
|
3773
3773
|
|
|
3774
|
-
class RawLoaderLinear extends createBaseClass({ componentName: componentName$
|
|
3774
|
+
class RawLoaderLinear extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
|
|
3775
3775
|
static get componentName() {
|
|
3776
|
-
return componentName$
|
|
3776
|
+
return componentName$b;
|
|
3777
3777
|
}
|
|
3778
3778
|
|
|
3779
3779
|
constructor() {
|
|
@@ -3809,18 +3809,18 @@ const selectors = {
|
|
|
3809
3809
|
host: { selector: () => ':host' },
|
|
3810
3810
|
};
|
|
3811
3811
|
|
|
3812
|
-
const { after, host: host$
|
|
3812
|
+
const { after, host: host$5 } = selectors;
|
|
3813
3813
|
|
|
3814
3814
|
const LoaderLinearClass = compose(
|
|
3815
3815
|
createStyleMixin({
|
|
3816
3816
|
mappings: {
|
|
3817
3817
|
hostDisplay: {},
|
|
3818
|
-
hostWidth: { ...host$
|
|
3818
|
+
hostWidth: { ...host$5, property: 'width' },
|
|
3819
3819
|
barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
|
|
3820
3820
|
barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
|
|
3821
3821
|
verticalPadding: [
|
|
3822
|
-
{ ...host$
|
|
3823
|
-
{ ...host$
|
|
3822
|
+
{ ...host$5, property: 'padding-top' },
|
|
3823
|
+
{ ...host$5, property: 'padding-bottom' },
|
|
3824
3824
|
],
|
|
3825
3825
|
barBackgroundColor: { property: 'background-color' },
|
|
3826
3826
|
barColor: { ...after, property: 'background-color' },
|
|
@@ -3835,53 +3835,53 @@ const LoaderLinearClass = compose(
|
|
|
3835
3835
|
)(RawLoaderLinear);
|
|
3836
3836
|
|
|
3837
3837
|
const globalRefs$2 = getThemeRefs(globals);
|
|
3838
|
-
const vars$
|
|
3838
|
+
const vars$8 = LoaderLinearClass.cssVarList;
|
|
3839
3839
|
|
|
3840
3840
|
const loaderLinear = {
|
|
3841
|
-
[vars$
|
|
3842
|
-
[vars$
|
|
3841
|
+
[vars$8.hostDisplay]: 'inline-block',
|
|
3842
|
+
[vars$8.hostWidth]: '100%',
|
|
3843
3843
|
|
|
3844
|
-
[vars$
|
|
3845
|
-
[vars$
|
|
3844
|
+
[vars$8.barColor]: globalRefs$2.colors.surface.contrast,
|
|
3845
|
+
[vars$8.barWidth]: '20%',
|
|
3846
3846
|
|
|
3847
|
-
[vars$
|
|
3848
|
-
[vars$
|
|
3847
|
+
[vars$8.barBackgroundColor]: globalRefs$2.colors.surface.main,
|
|
3848
|
+
[vars$8.barBorderRadius]: '4px',
|
|
3849
3849
|
|
|
3850
|
-
[vars$
|
|
3851
|
-
[vars$
|
|
3852
|
-
[vars$
|
|
3853
|
-
[vars$
|
|
3850
|
+
[vars$8.animationDuration]: '2s',
|
|
3851
|
+
[vars$8.animationTimingFunction]: 'linear',
|
|
3852
|
+
[vars$8.animationIterationCount]: 'infinite',
|
|
3853
|
+
[vars$8.verticalPadding]: '0.25em',
|
|
3854
3854
|
|
|
3855
3855
|
size: {
|
|
3856
|
-
xs: { [vars$
|
|
3857
|
-
sm: { [vars$
|
|
3858
|
-
md: { [vars$
|
|
3859
|
-
lg: { [vars$
|
|
3856
|
+
xs: { [vars$8.barHeight]: '2px' },
|
|
3857
|
+
sm: { [vars$8.barHeight]: '4px' },
|
|
3858
|
+
md: { [vars$8.barHeight]: '6px' },
|
|
3859
|
+
lg: { [vars$8.barHeight]: '8px' },
|
|
3860
3860
|
},
|
|
3861
3861
|
|
|
3862
3862
|
mode: {
|
|
3863
3863
|
primary: {
|
|
3864
|
-
[vars$
|
|
3864
|
+
[vars$8.barColor]: globalRefs$2.colors.primary.main,
|
|
3865
3865
|
},
|
|
3866
3866
|
secondary: {
|
|
3867
|
-
[vars$
|
|
3867
|
+
[vars$8.barColor]: globalRefs$2.colors.secondary.main,
|
|
3868
3868
|
},
|
|
3869
3869
|
},
|
|
3870
3870
|
|
|
3871
3871
|
_hidden: {
|
|
3872
|
-
[vars$
|
|
3872
|
+
[vars$8.hostDisplay]: 'none',
|
|
3873
3873
|
},
|
|
3874
3874
|
};
|
|
3875
3875
|
|
|
3876
3876
|
var loaderLinear$1 = /*#__PURE__*/Object.freeze({
|
|
3877
3877
|
__proto__: null,
|
|
3878
3878
|
default: loaderLinear,
|
|
3879
|
-
vars: vars$
|
|
3879
|
+
vars: vars$8
|
|
3880
3880
|
});
|
|
3881
3881
|
|
|
3882
|
-
const componentName$
|
|
3882
|
+
const componentName$a = getComponentName('loader-radial');
|
|
3883
3883
|
|
|
3884
|
-
class RawLoaderRadial extends createBaseClass({ componentName: componentName$
|
|
3884
|
+
class RawLoaderRadial extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > div' }) {
|
|
3885
3885
|
constructor() {
|
|
3886
3886
|
super();
|
|
3887
3887
|
|
|
@@ -3940,7 +3940,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
|
|
3940
3940
|
},
|
|
3941
3941
|
},
|
|
3942
3942
|
},
|
|
3943
|
-
componentName$
|
|
3943
|
+
componentName$a
|
|
3944
3944
|
);
|
|
3945
3945
|
|
|
3946
3946
|
const loaderRadial = {
|
|
@@ -3969,7 +3969,7 @@ const loaderRadial = {
|
|
|
3969
3969
|
[compVars.hostDisplay]: 'none',
|
|
3970
3970
|
},
|
|
3971
3971
|
};
|
|
3972
|
-
const vars$
|
|
3972
|
+
const vars$7 = {
|
|
3973
3973
|
...compVars,
|
|
3974
3974
|
...helperVars,
|
|
3975
3975
|
};
|
|
@@ -3977,10 +3977,10 @@ const vars$6 = {
|
|
|
3977
3977
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
|
3978
3978
|
__proto__: null,
|
|
3979
3979
|
default: loaderRadial,
|
|
3980
|
-
vars: vars$
|
|
3980
|
+
vars: vars$7
|
|
3981
3981
|
});
|
|
3982
3982
|
|
|
3983
|
-
const componentName$
|
|
3983
|
+
const componentName$9 = getComponentName('combo-box');
|
|
3984
3984
|
|
|
3985
3985
|
const ComboBoxMixin = (superclass) =>
|
|
3986
3986
|
class ComboBoxMixinClass extends superclass {
|
|
@@ -4032,15 +4032,15 @@ const ComboBoxMixin = (superclass) =>
|
|
|
4032
4032
|
};
|
|
4033
4033
|
|
|
4034
4034
|
const {
|
|
4035
|
-
host: host$
|
|
4036
|
-
inputField: inputField$
|
|
4035
|
+
host: host$4,
|
|
4036
|
+
inputField: inputField$2,
|
|
4037
4037
|
inputElement,
|
|
4038
4038
|
placeholder,
|
|
4039
4039
|
toggle,
|
|
4040
|
-
label: label$
|
|
4041
|
-
requiredIndicator: requiredIndicator$
|
|
4042
|
-
helperText: helperText$
|
|
4043
|
-
errorMessage: errorMessage$
|
|
4040
|
+
label: label$3,
|
|
4041
|
+
requiredIndicator: requiredIndicator$3,
|
|
4042
|
+
helperText: helperText$3,
|
|
4043
|
+
errorMessage: errorMessage$3,
|
|
4044
4044
|
} = {
|
|
4045
4045
|
host: { selector: () => ':host' },
|
|
4046
4046
|
inputField: { selector: '::part(input-field)' },
|
|
@@ -4061,23 +4061,23 @@ const {
|
|
|
4061
4061
|
const ComboBoxClass = compose(
|
|
4062
4062
|
createStyleMixin({
|
|
4063
4063
|
mappings: {
|
|
4064
|
-
hostWidth: { ...host$
|
|
4064
|
+
hostWidth: { ...host$4, property: 'width' },
|
|
4065
4065
|
// we apply font-size also on the host so we can set its width with em
|
|
4066
|
-
fontSize: [{}, host$
|
|
4067
|
-
fontFamily: [label$
|
|
4066
|
+
fontSize: [{}, host$4],
|
|
4067
|
+
fontFamily: [label$3, placeholder, inputField$2, helperText$3, errorMessage$3],
|
|
4068
4068
|
labelTextColor: [
|
|
4069
|
-
{ ...label$
|
|
4070
|
-
{ ...requiredIndicator$
|
|
4069
|
+
{ ...label$3, property: 'color' },
|
|
4070
|
+
{ ...requiredIndicator$3, property: 'color' },
|
|
4071
4071
|
],
|
|
4072
|
-
errorMessageTextColor: { ...errorMessage$
|
|
4073
|
-
inputHeight: { ...inputField$
|
|
4074
|
-
inputBackgroundColor: { ...inputField$
|
|
4075
|
-
inputBorderColor: { ...inputField$
|
|
4076
|
-
inputBorderWidth: { ...inputField$
|
|
4077
|
-
inputBorderStyle: { ...inputField$
|
|
4078
|
-
inputBorderRadius: { ...inputField$
|
|
4079
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
4080
|
-
inputValueTextColor: { ...inputField$
|
|
4072
|
+
errorMessageTextColor: { ...errorMessage$3, property: 'color' },
|
|
4073
|
+
inputHeight: { ...inputField$2, property: 'height' },
|
|
4074
|
+
inputBackgroundColor: { ...inputField$2, property: 'background-color' },
|
|
4075
|
+
inputBorderColor: { ...inputField$2, property: 'border-color' },
|
|
4076
|
+
inputBorderWidth: { ...inputField$2, property: 'border-width' },
|
|
4077
|
+
inputBorderStyle: { ...inputField$2, property: 'border-style' },
|
|
4078
|
+
inputBorderRadius: { ...inputField$2, property: 'border-radius' },
|
|
4079
|
+
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
|
4080
|
+
inputValueTextColor: { ...inputField$2, property: 'color' },
|
|
4081
4081
|
inputPlaceholderTextColor: { ...placeholder, property: 'color' },
|
|
4082
4082
|
inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
|
|
4083
4083
|
inputDropdownButtonColor: { ...toggle, property: 'color' },
|
|
@@ -4086,10 +4086,10 @@ const ComboBoxClass = compose(
|
|
|
4086
4086
|
{ ...toggle, property: 'margin-right' },
|
|
4087
4087
|
{ ...toggle, property: 'margin-left' },
|
|
4088
4088
|
],
|
|
4089
|
-
inputOutlineColor: { ...inputField$
|
|
4090
|
-
inputOutlineWidth: { ...inputField$
|
|
4091
|
-
inputOutlineStyle: { ...inputField$
|
|
4092
|
-
inputOutlineOffset: { ...inputField$
|
|
4089
|
+
inputOutlineColor: { ...inputField$2, property: 'outline-color' },
|
|
4090
|
+
inputOutlineWidth: { ...inputField$2, property: 'outline-width' },
|
|
4091
|
+
inputOutlineStyle: { ...inputField$2, property: 'outline-style' },
|
|
4092
|
+
inputOutlineOffset: { ...inputField$2, property: 'outline-offset' },
|
|
4093
4093
|
inputHorizontalPadding: [
|
|
4094
4094
|
{ ...inputElement, property: 'padding-left' },
|
|
4095
4095
|
{ ...inputElement, property: 'padding-right' },
|
|
@@ -4160,45 +4160,45 @@ const ComboBoxClass = compose(
|
|
|
4160
4160
|
// and reset items to an empty array, and opening the list box with no items
|
|
4161
4161
|
// to display.
|
|
4162
4162
|
excludeAttrsSync: ['tabindex', 'size'],
|
|
4163
|
-
componentName: componentName$
|
|
4163
|
+
componentName: componentName$9,
|
|
4164
4164
|
includeForwardProps: ['items', 'renderer', 'selectedItem'],
|
|
4165
4165
|
})
|
|
4166
4166
|
);
|
|
4167
4167
|
|
|
4168
4168
|
const globalRefs = getThemeRefs(globals);
|
|
4169
|
-
const vars$
|
|
4169
|
+
const vars$6 = ComboBoxClass.cssVarList;
|
|
4170
4170
|
|
|
4171
4171
|
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$
|
|
4172
|
+
[vars$6.hostWidth]: refs.width,
|
|
4173
|
+
[vars$6.fontSize]: refs.fontSize,
|
|
4174
|
+
[vars$6.fontFamily]: refs.fontFamily,
|
|
4175
|
+
[vars$6.labelTextColor]: refs.labelTextColor,
|
|
4176
|
+
[vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
4177
|
+
[vars$6.inputBorderColor]: refs.borderColor,
|
|
4178
|
+
[vars$6.inputBorderWidth]: refs.borderWidth,
|
|
4179
|
+
[vars$6.inputBorderStyle]: refs.borderStyle,
|
|
4180
|
+
[vars$6.inputBorderRadius]: refs.borderRadius,
|
|
4181
|
+
[vars$6.inputOutlineColor]: refs.outlineColor,
|
|
4182
|
+
[vars$6.inputOutlineOffset]: refs.outlineOffset,
|
|
4183
|
+
[vars$6.inputOutlineWidth]: refs.outlineWidth,
|
|
4184
|
+
[vars$6.inputOutlineStyle]: refs.outlineStyle,
|
|
4185
|
+
[vars$6.labelRequiredIndicator]: refs.requiredIndicator,
|
|
4186
|
+
[vars$6.inputValueTextColor]: refs.valueTextColor,
|
|
4187
|
+
[vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
4188
|
+
[vars$6.inputBackgroundColor]: refs.backgroundColor,
|
|
4189
|
+
[vars$6.inputHorizontalPadding]: refs.horizontalPadding,
|
|
4190
|
+
[vars$6.inputHeight]: refs.inputHeight,
|
|
4191
|
+
[vars$6.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
|
|
4192
|
+
[vars$6.inputDropdownButtonCursor]: 'pointer',
|
|
4193
|
+
[vars$6.inputDropdownButtonSize]: refs.toggleButtonSize,
|
|
4194
|
+
[vars$6.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
|
4195
4195
|
|
|
4196
4196
|
_readonly: {
|
|
4197
|
-
[vars$
|
|
4197
|
+
[vars$6.inputDropdownButtonCursor]: 'default',
|
|
4198
4198
|
},
|
|
4199
4199
|
|
|
4200
|
-
[vars$
|
|
4201
|
-
[vars$
|
|
4200
|
+
[vars$6.overlay.minHeight]: '400px',
|
|
4201
|
+
[vars$6.overlay.margin]: '0 auto',
|
|
4202
4202
|
|
|
4203
4203
|
// [vars.overlayCursor]: 'pointer',
|
|
4204
4204
|
// [vars.overlayBackground]: globalRefs.colors.surface.light,
|
|
@@ -4209,14 +4209,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
|
|
|
4209
4209
|
__proto__: null,
|
|
4210
4210
|
comboBox: comboBox,
|
|
4211
4211
|
default: comboBox,
|
|
4212
|
-
vars: vars$
|
|
4212
|
+
vars: vars$6
|
|
4213
4213
|
});
|
|
4214
4214
|
|
|
4215
4215
|
const observedAttributes$2 = ['src', 'alt'];
|
|
4216
4216
|
|
|
4217
|
-
const componentName$
|
|
4217
|
+
const componentName$8 = getComponentName('image');
|
|
4218
4218
|
|
|
4219
|
-
const BaseClass$1 = createBaseClass({ componentName: componentName$
|
|
4219
|
+
const BaseClass$1 = createBaseClass({ componentName: componentName$8, baseSelector: ':host > img' });
|
|
4220
4220
|
class RawImage extends BaseClass$1 {
|
|
4221
4221
|
static get observedAttributes() {
|
|
4222
4222
|
return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
|
|
@@ -4256,14 +4256,14 @@ const ImageClass = compose(
|
|
|
4256
4256
|
draggableMixin
|
|
4257
4257
|
)(RawImage);
|
|
4258
4258
|
|
|
4259
|
-
const vars$
|
|
4259
|
+
const vars$5 = ImageClass.cssVarList;
|
|
4260
4260
|
|
|
4261
4261
|
const image = {};
|
|
4262
4262
|
|
|
4263
4263
|
var image$1 = /*#__PURE__*/Object.freeze({
|
|
4264
4264
|
__proto__: null,
|
|
4265
4265
|
default: image,
|
|
4266
|
-
vars: vars$
|
|
4266
|
+
vars: vars$5
|
|
4267
4267
|
});
|
|
4268
4268
|
|
|
4269
4269
|
var CountryCodes = [
|
|
@@ -5479,16 +5479,16 @@ var CountryCodes = [
|
|
|
5479
5479
|
},
|
|
5480
5480
|
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
|
5481
5481
|
|
|
5482
|
-
const componentName$
|
|
5482
|
+
const componentName$7 = getComponentName('phone-field-internal');
|
|
5483
5483
|
|
|
5484
|
-
createBaseInputClass({ componentName: componentName$
|
|
5484
|
+
createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
|
|
5485
5485
|
|
|
5486
|
-
const textVars = TextFieldClass.cssVarList;
|
|
5486
|
+
const textVars$1 = TextFieldClass.cssVarList;
|
|
5487
5487
|
const comboVars = ComboBoxClass.cssVarList;
|
|
5488
5488
|
|
|
5489
|
-
const componentName$
|
|
5489
|
+
const componentName$6 = getComponentName('phone-field');
|
|
5490
5490
|
|
|
5491
|
-
const customMixin$
|
|
5491
|
+
const customMixin$2 = (superclass) =>
|
|
5492
5492
|
class PhoneFieldMixinClass extends superclass {
|
|
5493
5493
|
static get CountryCodes() {
|
|
5494
5494
|
return CountryCodes;
|
|
@@ -5500,15 +5500,15 @@ const customMixin$1 = (superclass) =>
|
|
|
5500
5500
|
const template = document.createElement('template');
|
|
5501
5501
|
|
|
5502
5502
|
template.innerHTML = `
|
|
5503
|
-
<${componentName$
|
|
5503
|
+
<${componentName$7}
|
|
5504
5504
|
tabindex="-1"
|
|
5505
5505
|
slot="input"
|
|
5506
|
-
></${componentName$
|
|
5506
|
+
></${componentName$7}>
|
|
5507
5507
|
`;
|
|
5508
5508
|
|
|
5509
5509
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5510
5510
|
|
|
5511
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
|
5511
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$7);
|
|
5512
5512
|
|
|
5513
5513
|
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5514
5514
|
includeAttrs: [
|
|
@@ -5521,21 +5521,22 @@ const customMixin$1 = (superclass) =>
|
|
|
5521
5521
|
'country-input-placeholder',
|
|
5522
5522
|
'phone-input-placeholder',
|
|
5523
5523
|
'disabled',
|
|
5524
|
+
'restrict-countries',
|
|
5524
5525
|
],
|
|
5525
5526
|
});
|
|
5526
5527
|
}
|
|
5527
5528
|
};
|
|
5528
5529
|
|
|
5529
5530
|
const {
|
|
5530
|
-
host: host$
|
|
5531
|
-
label: label$
|
|
5532
|
-
requiredIndicator: requiredIndicator$
|
|
5533
|
-
inputField,
|
|
5531
|
+
host: host$3,
|
|
5532
|
+
label: label$2,
|
|
5533
|
+
requiredIndicator: requiredIndicator$2,
|
|
5534
|
+
inputField: inputField$1,
|
|
5534
5535
|
countryCodeInput,
|
|
5535
|
-
phoneInput,
|
|
5536
|
+
phoneInput: phoneInput$1,
|
|
5536
5537
|
separator,
|
|
5537
|
-
errorMessage: errorMessage$
|
|
5538
|
-
helperText: helperText$
|
|
5538
|
+
errorMessage: errorMessage$2,
|
|
5539
|
+
helperText: helperText$2,
|
|
5539
5540
|
} = {
|
|
5540
5541
|
host: { selector: () => ':host' },
|
|
5541
5542
|
label: { selector: '::part(label)' },
|
|
@@ -5552,8 +5553,8 @@ const PhoneFieldClass = compose(
|
|
|
5552
5553
|
createStyleMixin({
|
|
5553
5554
|
mappings: {
|
|
5554
5555
|
fontSize: [
|
|
5555
|
-
host$
|
|
5556
|
-
inputField,
|
|
5556
|
+
host$3,
|
|
5557
|
+
inputField$1,
|
|
5557
5558
|
{
|
|
5558
5559
|
selector: TextFieldClass.componentName,
|
|
5559
5560
|
property: TextFieldClass.cssVarList.fontSize,
|
|
@@ -5564,69 +5565,69 @@ const PhoneFieldClass = compose(
|
|
|
5564
5565
|
},
|
|
5565
5566
|
],
|
|
5566
5567
|
fontFamily: [
|
|
5567
|
-
label$
|
|
5568
|
-
errorMessage$
|
|
5569
|
-
helperText$
|
|
5568
|
+
label$2,
|
|
5569
|
+
errorMessage$2,
|
|
5570
|
+
helperText$2,
|
|
5570
5571
|
{
|
|
5571
5572
|
...countryCodeInput,
|
|
5572
5573
|
property: ComboBoxClass.cssVarList.overlay.fontFamily,
|
|
5573
5574
|
},
|
|
5574
5575
|
],
|
|
5575
5576
|
hostWidth: [
|
|
5576
|
-
{ ...host$
|
|
5577
|
-
{ ...phoneInput, property: 'width' },
|
|
5577
|
+
{ ...host$3, property: 'width' },
|
|
5578
|
+
{ ...phoneInput$1, property: 'width' },
|
|
5578
5579
|
{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
|
|
5579
5580
|
],
|
|
5580
5581
|
|
|
5581
5582
|
inputBorderStyle: [
|
|
5582
|
-
{ ...inputField, property: 'border-style' },
|
|
5583
|
+
{ ...inputField$1, property: 'border-style' },
|
|
5583
5584
|
{ ...separator, property: 'border-left-style' },
|
|
5584
5585
|
],
|
|
5585
5586
|
inputBorderWidth: [
|
|
5586
|
-
{ ...inputField, property: 'border-width' },
|
|
5587
|
+
{ ...inputField$1, property: 'border-width' },
|
|
5587
5588
|
{ ...separator, property: 'border-left-width' },
|
|
5588
5589
|
],
|
|
5589
5590
|
inputBorderColor: [
|
|
5590
|
-
{ ...inputField, property: 'border-color' },
|
|
5591
|
+
{ ...inputField$1, property: 'border-color' },
|
|
5591
5592
|
{ ...separator, property: 'border-left-color' },
|
|
5592
5593
|
],
|
|
5593
|
-
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
|
5594
|
+
inputBorderRadius: { ...inputField$1, property: 'border-radius' },
|
|
5594
5595
|
|
|
5595
5596
|
countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
|
|
5596
5597
|
countryCodeDropdownWidth: {
|
|
5597
5598
|
...countryCodeInput,
|
|
5598
5599
|
property: '--vaadin-combo-box-overlay-width',
|
|
5599
5600
|
},
|
|
5600
|
-
phoneInputWidth: { ...phoneInput, property: 'width' },
|
|
5601
|
+
phoneInputWidth: { ...phoneInput$1, property: 'width' },
|
|
5601
5602
|
|
|
5602
5603
|
labelTextColor: [
|
|
5603
|
-
{ ...label$
|
|
5604
|
-
{ ...requiredIndicator$
|
|
5604
|
+
{ ...label$2, property: 'color' },
|
|
5605
|
+
{ ...requiredIndicator$2, property: 'color' },
|
|
5605
5606
|
],
|
|
5606
|
-
labelRequiredIndicator: { ...requiredIndicator$
|
|
5607
|
-
errorMessageTextColor: { ...errorMessage$
|
|
5607
|
+
labelRequiredIndicator: { ...requiredIndicator$2, property: 'content' },
|
|
5608
|
+
errorMessageTextColor: { ...errorMessage$2, property: 'color' },
|
|
5608
5609
|
|
|
5609
5610
|
inputValueTextColor: [
|
|
5610
|
-
{ ...phoneInput, property: textVars.inputValueTextColor },
|
|
5611
|
+
{ ...phoneInput$1, property: textVars$1.inputValueTextColor },
|
|
5611
5612
|
{ ...countryCodeInput, property: comboVars.inputValueTextColor },
|
|
5612
5613
|
],
|
|
5613
5614
|
|
|
5614
|
-
inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
|
|
5615
|
+
inputPlaceholderTextColor: { ...phoneInput$1, property: textVars$1.inputPlaceholderColor },
|
|
5615
5616
|
|
|
5616
5617
|
overlayItemBackgroundColor: {
|
|
5617
5618
|
selector: 'descope-combo-box',
|
|
5618
5619
|
property: comboVars.overlayItemBackgroundColor,
|
|
5619
5620
|
},
|
|
5620
5621
|
|
|
5621
|
-
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
|
5622
|
-
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
|
5623
|
-
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
|
5624
|
-
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
|
5622
|
+
inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
|
|
5623
|
+
inputOutlineColor: { ...inputField$1, property: 'outline-color' },
|
|
5624
|
+
inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
|
|
5625
|
+
inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
|
|
5625
5626
|
},
|
|
5626
5627
|
}),
|
|
5627
5628
|
draggableMixin,
|
|
5628
5629
|
composedProxyInputMixin,
|
|
5629
|
-
customMixin$
|
|
5630
|
+
customMixin$2
|
|
5630
5631
|
)(
|
|
5631
5632
|
createProxy({
|
|
5632
5633
|
slots: [],
|
|
@@ -5689,10 +5690,10 @@ const PhoneFieldClass = compose(
|
|
|
5689
5690
|
}
|
|
5690
5691
|
descope-text-field {
|
|
5691
5692
|
flex-grow: 1;
|
|
5692
|
-
${textVars.inputOutlineWidth}: 0;
|
|
5693
|
-
${textVars.inputOutlineOffset}: 0;
|
|
5694
|
-
${textVars.inputBorderWidth}: 0;
|
|
5695
|
-
${textVars.inputBorderRadius}: 0;
|
|
5693
|
+
${textVars$1.inputOutlineWidth}: 0;
|
|
5694
|
+
${textVars$1.inputOutlineOffset}: 0;
|
|
5695
|
+
${textVars$1.inputBorderWidth}: 0;
|
|
5696
|
+
${textVars$1.inputBorderRadius}: 0;
|
|
5696
5697
|
}
|
|
5697
5698
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
|
5698
5699
|
opacity: 1;
|
|
@@ -5702,14 +5703,212 @@ const PhoneFieldClass = compose(
|
|
|
5702
5703
|
}
|
|
5703
5704
|
`,
|
|
5704
5705
|
excludeAttrsSync: ['tabindex'],
|
|
5705
|
-
componentName: componentName$
|
|
5706
|
+
componentName: componentName$6,
|
|
5706
5707
|
})
|
|
5707
5708
|
);
|
|
5708
5709
|
|
|
5709
|
-
const vars$
|
|
5710
|
+
const vars$4 = PhoneFieldClass.cssVarList;
|
|
5710
5711
|
|
|
5711
5712
|
const phoneField = {
|
|
5712
|
-
[vars$
|
|
5713
|
+
[vars$4.hostWidth]: refs.width,
|
|
5714
|
+
[vars$4.fontSize]: refs.fontSize,
|
|
5715
|
+
[vars$4.fontFamily]: refs.fontFamily,
|
|
5716
|
+
[vars$4.labelTextColor]: refs.labelTextColor,
|
|
5717
|
+
[vars$4.labelRequiredIndicator]: refs.requiredIndicator,
|
|
5718
|
+
[vars$4.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
5719
|
+
[vars$4.inputValueTextColor]: refs.valueTextColor,
|
|
5720
|
+
[vars$4.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
|
5721
|
+
[vars$4.inputBorderStyle]: refs.borderStyle,
|
|
5722
|
+
[vars$4.inputBorderWidth]: refs.borderWidth,
|
|
5723
|
+
[vars$4.inputBorderColor]: refs.borderColor,
|
|
5724
|
+
[vars$4.inputBorderRadius]: refs.borderRadius,
|
|
5725
|
+
[vars$4.inputOutlineStyle]: refs.outlineStyle,
|
|
5726
|
+
[vars$4.inputOutlineWidth]: refs.outlineWidth,
|
|
5727
|
+
[vars$4.inputOutlineColor]: refs.outlineColor,
|
|
5728
|
+
[vars$4.inputOutlineOffset]: refs.outlineOffset,
|
|
5729
|
+
[vars$4.phoneInputWidth]: refs.minWidth,
|
|
5730
|
+
[vars$4.countryCodeInputWidth]: '5em',
|
|
5731
|
+
[vars$4.countryCodeDropdownWidth]: '20em',
|
|
5732
|
+
|
|
5733
|
+
// '@overlay': {
|
|
5734
|
+
// overlayItemBackgroundColor: 'red'
|
|
5735
|
+
// }
|
|
5736
|
+
};
|
|
5737
|
+
|
|
5738
|
+
var phoneField$1 = /*#__PURE__*/Object.freeze({
|
|
5739
|
+
__proto__: null,
|
|
5740
|
+
default: phoneField,
|
|
5741
|
+
vars: vars$4
|
|
5742
|
+
});
|
|
5743
|
+
|
|
5744
|
+
const componentName$5 = getComponentName('phone-field-internal-input-box');
|
|
5745
|
+
|
|
5746
|
+
createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
|
|
5747
|
+
|
|
5748
|
+
const textVars = TextFieldClass.cssVarList;
|
|
5749
|
+
|
|
5750
|
+
const componentName$4 = getComponentName('phone-input-box-field');
|
|
5751
|
+
|
|
5752
|
+
const customMixin$1 = (superclass) =>
|
|
5753
|
+
class PhoneInputBoxFieldMixinClass extends superclass {
|
|
5754
|
+
static get CountryCodes() {
|
|
5755
|
+
return CountryCodes;
|
|
5756
|
+
}
|
|
5757
|
+
|
|
5758
|
+
init() {
|
|
5759
|
+
super.init?.();
|
|
5760
|
+
|
|
5761
|
+
const template = document.createElement('template');
|
|
5762
|
+
|
|
5763
|
+
template.innerHTML = `
|
|
5764
|
+
<${componentName$5}
|
|
5765
|
+
tabindex="-1"
|
|
5766
|
+
slot="input"
|
|
5767
|
+
></${componentName$5}>
|
|
5768
|
+
`;
|
|
5769
|
+
|
|
5770
|
+
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
5771
|
+
|
|
5772
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$5);
|
|
5773
|
+
|
|
5774
|
+
forwardAttrs(this.shadowRoot.host, this.inputElement, {
|
|
5775
|
+
includeAttrs: [
|
|
5776
|
+
'size',
|
|
5777
|
+
'bordered',
|
|
5778
|
+
'invalid',
|
|
5779
|
+
'minlength',
|
|
5780
|
+
'maxlength',
|
|
5781
|
+
'default-code',
|
|
5782
|
+
'disabled',
|
|
5783
|
+
],
|
|
5784
|
+
});
|
|
5785
|
+
}
|
|
5786
|
+
};
|
|
5787
|
+
|
|
5788
|
+
const { host: host$2, label: label$1, requiredIndicator: requiredIndicator$1, inputField, phoneInput, errorMessage: errorMessage$1, helperText: helperText$1 } = {
|
|
5789
|
+
host: { selector: () => ':host' },
|
|
5790
|
+
label: { selector: '::part(label)' },
|
|
5791
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
5792
|
+
inputField: { selector: '::part(input-field)' },
|
|
5793
|
+
phoneInput: { selector: () => 'descope-text-field' },
|
|
5794
|
+
helperText: { selector: '::part(helper-text)' },
|
|
5795
|
+
errorMessage: { selector: '::part(error-message)' },
|
|
5796
|
+
};
|
|
5797
|
+
|
|
5798
|
+
const PhoneFieldInputBoxClass = compose(
|
|
5799
|
+
createStyleMixin({
|
|
5800
|
+
mappings: {
|
|
5801
|
+
fontSize: [
|
|
5802
|
+
host$2,
|
|
5803
|
+
inputField,
|
|
5804
|
+
{
|
|
5805
|
+
selector: TextFieldClass.componentName,
|
|
5806
|
+
property: TextFieldClass.cssVarList.fontSize,
|
|
5807
|
+
},
|
|
5808
|
+
],
|
|
5809
|
+
fontFamily: [label$1, errorMessage$1, helperText$1],
|
|
5810
|
+
hostWidth: { ...host$2, property: 'width' },
|
|
5811
|
+
hostMinWidth: { ...host$2, property: 'min-width' },
|
|
5812
|
+
|
|
5813
|
+
inputBorderStyle: { ...inputField, property: 'border-style' },
|
|
5814
|
+
inputBorderWidth: { ...inputField, property: 'border-width' },
|
|
5815
|
+
inputBorderColor: { ...inputField, property: 'border-color' },
|
|
5816
|
+
inputBorderRadius: { ...inputField, property: 'border-radius' },
|
|
5817
|
+
|
|
5818
|
+
labelTextColor: [
|
|
5819
|
+
{ ...label$1, property: 'color' },
|
|
5820
|
+
{ ...requiredIndicator$1, property: 'color' },
|
|
5821
|
+
],
|
|
5822
|
+
labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
|
|
5823
|
+
errorMessageTextColor: { ...errorMessage$1, property: 'color' },
|
|
5824
|
+
|
|
5825
|
+
inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
|
|
5826
|
+
|
|
5827
|
+
inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
|
|
5828
|
+
|
|
5829
|
+
inputOutlineStyle: { ...inputField, property: 'outline-style' },
|
|
5830
|
+
inputOutlineColor: { ...inputField, property: 'outline-color' },
|
|
5831
|
+
inputOutlineWidth: { ...inputField, property: 'outline-width' },
|
|
5832
|
+
inputOutlineOffset: { ...inputField, property: 'outline-offset' },
|
|
5833
|
+
},
|
|
5834
|
+
}),
|
|
5835
|
+
draggableMixin,
|
|
5836
|
+
composedProxyInputMixin,
|
|
5837
|
+
customMixin$1
|
|
5838
|
+
)(
|
|
5839
|
+
createProxy({
|
|
5840
|
+
slots: [],
|
|
5841
|
+
wrappedEleName: 'vaadin-text-field',
|
|
5842
|
+
style: () => `
|
|
5843
|
+
:host {
|
|
5844
|
+
display: inline-flex;
|
|
5845
|
+
max-width: 100%;
|
|
5846
|
+
box-sizing: border-box;
|
|
5847
|
+
}
|
|
5848
|
+
${useHostExternalPadding(PhoneFieldInputBoxClass.cssVarList)}
|
|
5849
|
+
${resetInputCursor('vaadin-text-field')}
|
|
5850
|
+
${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}
|
|
5851
|
+
${resetInputFieldDefaultWidth()}
|
|
5852
|
+
|
|
5853
|
+
vaadin-text-field {
|
|
5854
|
+
width: 100%;
|
|
5855
|
+
height: 100%;
|
|
5856
|
+
box-sizing: border-box;
|
|
5857
|
+
padding: 0;
|
|
5858
|
+
}
|
|
5859
|
+
vaadin-text-field[focus-ring]::part(input-field) {
|
|
5860
|
+
box-shadow: none;
|
|
5861
|
+
}
|
|
5862
|
+
vaadin-text-field::before {
|
|
5863
|
+
height: 0;
|
|
5864
|
+
}
|
|
5865
|
+
vaadin-text-field::part(input-field) {
|
|
5866
|
+
padding: 0;
|
|
5867
|
+
min-height: 0;
|
|
5868
|
+
background: transparent;
|
|
5869
|
+
overflow: hidden;
|
|
5870
|
+
-webkit-mask-image: none;
|
|
5871
|
+
}
|
|
5872
|
+
descope-phone-field-internal-input-box {
|
|
5873
|
+
-webkit-mask-image: none;
|
|
5874
|
+
padding: 0;
|
|
5875
|
+
min-height: 0;
|
|
5876
|
+
width: 100%;
|
|
5877
|
+
height: 100%;
|
|
5878
|
+
}
|
|
5879
|
+
descope-phone-field-internal-input-box > div {
|
|
5880
|
+
width: 100%;
|
|
5881
|
+
height: 100%;
|
|
5882
|
+
}
|
|
5883
|
+
descope-phone-field-internal-input-box .separator {
|
|
5884
|
+
flex: 0;
|
|
5885
|
+
border: none;
|
|
5886
|
+
}
|
|
5887
|
+
descope-text-field {
|
|
5888
|
+
flex-grow: 1;
|
|
5889
|
+
width: 100%;
|
|
5890
|
+
${textVars.inputOutlineWidth}: 0;
|
|
5891
|
+
${textVars.inputOutlineOffset}: 0;
|
|
5892
|
+
${textVars.inputBorderWidth}: 0;
|
|
5893
|
+
${textVars.inputBorderRadius}: 0;
|
|
5894
|
+
}
|
|
5895
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
|
5896
|
+
opacity: 1;
|
|
5897
|
+
}
|
|
5898
|
+
vaadin-text-field::part(input-field)::after {
|
|
5899
|
+
border: none;
|
|
5900
|
+
}
|
|
5901
|
+
`,
|
|
5902
|
+
excludeAttrsSync: ['tabindex'],
|
|
5903
|
+
componentName: componentName$4,
|
|
5904
|
+
})
|
|
5905
|
+
);
|
|
5906
|
+
|
|
5907
|
+
const vars$3 = PhoneFieldInputBoxClass.cssVarList;
|
|
5908
|
+
|
|
5909
|
+
const phoneInputBoxField = {
|
|
5910
|
+
[vars$3.hostWidth]: '16em',
|
|
5911
|
+
[vars$3.hostMinWidth]: refs.minWidth,
|
|
5713
5912
|
[vars$3.fontSize]: refs.fontSize,
|
|
5714
5913
|
[vars$3.fontFamily]: refs.fontFamily,
|
|
5715
5914
|
[vars$3.labelTextColor]: refs.labelTextColor,
|
|
@@ -5725,18 +5924,14 @@ const phoneField = {
|
|
|
5725
5924
|
[vars$3.inputOutlineWidth]: refs.outlineWidth,
|
|
5726
5925
|
[vars$3.inputOutlineColor]: refs.outlineColor,
|
|
5727
5926
|
[vars$3.inputOutlineOffset]: refs.outlineOffset,
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
|
|
5731
|
-
|
|
5732
|
-
// '@overlay': {
|
|
5733
|
-
// overlayItemBackgroundColor: 'red'
|
|
5734
|
-
// }
|
|
5927
|
+
_fullWidth: {
|
|
5928
|
+
[vars$3.hostWidth]: refs.width,
|
|
5929
|
+
},
|
|
5735
5930
|
};
|
|
5736
5931
|
|
|
5737
|
-
var
|
|
5932
|
+
var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
|
|
5738
5933
|
__proto__: null,
|
|
5739
|
-
default:
|
|
5934
|
+
default: phoneInputBoxField,
|
|
5740
5935
|
vars: vars$3
|
|
5741
5936
|
});
|
|
5742
5937
|
|
|
@@ -6203,6 +6398,7 @@ const components = {
|
|
|
6203
6398
|
comboBox: comboBox$1,
|
|
6204
6399
|
image: image$1,
|
|
6205
6400
|
phoneField: phoneField$1,
|
|
6401
|
+
phoneInputBoxField: phoneInputBoxField$1,
|
|
6206
6402
|
newPassword: newPassword$1,
|
|
6207
6403
|
inputWrapper,
|
|
6208
6404
|
uploadFile: uploadFile$1,
|
|
@@ -6218,7 +6414,7 @@ const vars = Object.keys(components).reduce(
|
|
|
6218
6414
|
);
|
|
6219
6415
|
|
|
6220
6416
|
const defaultTheme = { globals, components: theme };
|
|
6221
|
-
const themeVars = { globals: vars$
|
|
6417
|
+
const themeVars = { globals: vars$p, components: vars };
|
|
6222
6418
|
|
|
6223
6419
|
const componentName = getComponentName('recaptcha');
|
|
6224
6420
|
|
|
@@ -6390,6 +6586,7 @@ exports.NumberFieldClass = NumberFieldClass;
|
|
|
6390
6586
|
exports.PasscodeClass = PasscodeClass;
|
|
6391
6587
|
exports.PasswordClass = PasswordClass;
|
|
6392
6588
|
exports.PhoneFieldClass = PhoneFieldClass;
|
|
6589
|
+
exports.PhoneFieldInputBoxClass = PhoneFieldInputBoxClass;
|
|
6393
6590
|
exports.RecaptchaClass = RecaptchaClass;
|
|
6394
6591
|
exports.SwitchToggleClass = SwitchToggleClass;
|
|
6395
6592
|
exports.TextAreaClass = TextAreaClass;
|