@descope/web-components-ui 1.0.174 → 1.0.175
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|