@descope/web-components-ui 1.0.133 → 1.0.135
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +320 -281
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +296 -256
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/{18.js → 1018.js} +2 -2
- package/dist/umd/2481.js +1 -0
- package/dist/umd/3208.js +2 -0
- package/dist/umd/3585.js +1 -0
- package/dist/umd/3878.js +1 -0
- package/dist/umd/4201.js +1 -0
- package/dist/umd/4447.js +1 -0
- package/dist/umd/{513.js → 4513.js} +1 -1
- package/dist/umd/4803.js +1 -0
- package/dist/umd/5767.js +2 -0
- package/dist/umd/{806.js → 5806.js} +2 -2
- package/dist/umd/{56.js → 7056.js} +2 -2
- package/dist/umd/{101.js → 7101.js} +2 -2
- package/dist/umd/{824.js → 7824.js} +2 -2
- package/dist/umd/7840.js +356 -0
- package/dist/umd/{725.js → 8725.js} +2 -2
- package/dist/umd/{211.js → 9211.js} +2 -2
- package/dist/umd/9241.js +1 -0
- package/dist/umd/{314.js → 9314.js} +2 -2
- package/dist/umd/{437.js → 9437.js} +2 -2
- package/dist/umd/{515.js → 9515.js} +2 -2
- package/dist/umd/{789.js → 9789.js} +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-new-password-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-password-index-js.js +1 -1
- package/dist/umd/descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/descope-totp-image-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createCssVarImageClass.js +49 -0
- package/src/components/boolean-fields/booleanFieldMixin.js +1 -0
- package/src/components/boolean-fields/commonStyles.js +1 -0
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +10 -2
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +1 -3
- package/src/components/descope-logo/LogoClass.js +2 -51
- package/src/components/descope-totp-image/TotpImageClass.js +6 -0
- package/src/components/descope-totp-image/index.js +5 -0
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/index.js +1 -0
- package/src/theme/components/checkbox.js +8 -5
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/inputWrapper.js +1 -0
- package/src/theme/components/switchToggle.js +11 -5
- package/src/theme/components/totpImage.js +10 -0
- package/dist/umd/201.js +0 -1
- package/dist/umd/208.js +0 -2
- package/dist/umd/241.js +0 -1
- package/dist/umd/447.js +0 -1
- package/dist/umd/481.js +0 -1
- package/dist/umd/767.js +0 -2
- package/dist/umd/803.js +0 -1
- package/dist/umd/840.js +0 -356
- package/dist/umd/878.js +0 -1
- /package/dist/umd/{18.js.LICENSE.txt → 1018.js.LICENSE.txt} +0 -0
- /package/dist/umd/{208.js.LICENSE.txt → 3208.js.LICENSE.txt} +0 -0
- /package/dist/umd/{767.js.LICENSE.txt → 5767.js.LICENSE.txt} +0 -0
- /package/dist/umd/{437.js.LICENSE.txt → 5806.js.LICENSE.txt} +0 -0
- /package/dist/umd/{56.js.LICENSE.txt → 7056.js.LICENSE.txt} +0 -0
- /package/dist/umd/{101.js.LICENSE.txt → 7101.js.LICENSE.txt} +0 -0
- /package/dist/umd/{824.js.LICENSE.txt → 7824.js.LICENSE.txt} +0 -0
- /package/dist/umd/{840.js.LICENSE.txt → 7840.js.LICENSE.txt} +0 -0
- /package/dist/umd/{515.js.LICENSE.txt → 8725.js.LICENSE.txt} +0 -0
- /package/dist/umd/{211.js.LICENSE.txt → 9211.js.LICENSE.txt} +0 -0
- /package/dist/umd/{314.js.LICENSE.txt → 9314.js.LICENSE.txt} +0 -0
- /package/dist/umd/{806.js.LICENSE.txt → 9437.js.LICENSE.txt} +0 -0
- /package/dist/umd/{725.js.LICENSE.txt → 9515.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -508,7 +508,7 @@ const globals = {
|
|
508
508
|
shadow,
|
509
509
|
fonts
|
510
510
|
};
|
511
|
-
const vars$
|
511
|
+
const vars$n = getThemeVars(globals);
|
512
512
|
|
513
513
|
const resetInputOverrides = (name, cssVarList) => `
|
514
514
|
${resetInputContainer(name)}
|
@@ -1555,7 +1555,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1555
1555
|
}
|
1556
1556
|
};
|
1557
1557
|
|
1558
|
-
const componentName$
|
1558
|
+
const componentName$p = getComponentName('button');
|
1559
1559
|
|
1560
1560
|
const resetStyles = `
|
1561
1561
|
:host {
|
@@ -1643,7 +1643,7 @@ const ButtonClass = compose(
|
|
1643
1643
|
${useHostExternalPadding(ButtonClass.cssVarList)}
|
1644
1644
|
`,
|
1645
1645
|
excludeAttrsSync: ['tabindex'],
|
1646
|
-
componentName: componentName$
|
1646
|
+
componentName: componentName$p
|
1647
1647
|
})
|
1648
1648
|
);
|
1649
1649
|
|
@@ -1676,18 +1676,18 @@ const loadingIndicatorStyles = `
|
|
1676
1676
|
}
|
1677
1677
|
`;
|
1678
1678
|
|
1679
|
-
const globalRefs$
|
1679
|
+
const globalRefs$b = getThemeRefs(globals);
|
1680
1680
|
const compVars$2 = ButtonClass.cssVarList;
|
1681
1681
|
|
1682
1682
|
const mode = {
|
1683
|
-
primary: globalRefs$
|
1684
|
-
secondary: globalRefs$
|
1685
|
-
success: globalRefs$
|
1686
|
-
error: globalRefs$
|
1687
|
-
surface: globalRefs$
|
1683
|
+
primary: globalRefs$b.colors.primary,
|
1684
|
+
secondary: globalRefs$b.colors.secondary,
|
1685
|
+
success: globalRefs$b.colors.success,
|
1686
|
+
error: globalRefs$b.colors.error,
|
1687
|
+
surface: globalRefs$b.colors.surface
|
1688
1688
|
};
|
1689
1689
|
|
1690
|
-
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$
|
1690
|
+
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$p);
|
1691
1691
|
|
1692
1692
|
const verticalPaddingRatio = 3;
|
1693
1693
|
const horizontalPaddingRatio = 2;
|
@@ -1695,11 +1695,11 @@ const horizontalPaddingRatio = 2;
|
|
1695
1695
|
const button = {
|
1696
1696
|
...helperTheme$3,
|
1697
1697
|
|
1698
|
-
[compVars$2.fontFamily]: globalRefs$
|
1698
|
+
[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
|
1699
1699
|
|
1700
1700
|
[compVars$2.cursor]: 'pointer',
|
1701
1701
|
|
1702
|
-
[compVars$2.borderRadius]: globalRefs$
|
1702
|
+
[compVars$2.borderRadius]: globalRefs$b.radius.sm,
|
1703
1703
|
[compVars$2.borderWidth]: '2px',
|
1704
1704
|
[compVars$2.borderStyle]: 'solid',
|
1705
1705
|
[compVars$2.borderColor]: 'transparent',
|
@@ -1769,7 +1769,7 @@ const button = {
|
|
1769
1769
|
}
|
1770
1770
|
};
|
1771
1771
|
|
1772
|
-
const vars$
|
1772
|
+
const vars$m = {
|
1773
1773
|
...compVars$2,
|
1774
1774
|
...helperVars$2
|
1775
1775
|
};
|
@@ -1777,7 +1777,7 @@ const vars$l = {
|
|
1777
1777
|
var button$1 = /*#__PURE__*/Object.freeze({
|
1778
1778
|
__proto__: null,
|
1779
1779
|
default: button,
|
1780
|
-
vars: vars$
|
1780
|
+
vars: vars$m
|
1781
1781
|
});
|
1782
1782
|
|
1783
1783
|
const {
|
@@ -1849,7 +1849,7 @@ var textFieldMappings = {
|
|
1849
1849
|
inputPlaceholderColor: { ...placeholder$2, property: 'color' }
|
1850
1850
|
};
|
1851
1851
|
|
1852
|
-
const componentName$
|
1852
|
+
const componentName$o = getComponentName('text-field');
|
1853
1853
|
|
1854
1854
|
const observedAttrs = ['type'];
|
1855
1855
|
|
@@ -1895,24 +1895,24 @@ const TextFieldClass = compose(
|
|
1895
1895
|
${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
|
1896
1896
|
`,
|
1897
1897
|
excludeAttrsSync: ['tabindex'],
|
1898
|
-
componentName: componentName$
|
1898
|
+
componentName: componentName$o
|
1899
1899
|
})
|
1900
1900
|
);
|
1901
1901
|
|
1902
|
-
const componentName$
|
1903
|
-
const globalRefs$
|
1902
|
+
const componentName$n = getComponentName('input-wrapper');
|
1903
|
+
const globalRefs$a = getThemeRefs(globals);
|
1904
1904
|
|
1905
|
-
const [theme$1, refs, vars$
|
1906
|
-
labelTextColor: globalRefs$
|
1907
|
-
valueTextColor: globalRefs$
|
1908
|
-
placeholderTextColor: globalRefs$
|
1905
|
+
const [theme$1, refs, vars$l] = createHelperVars({
|
1906
|
+
labelTextColor: globalRefs$a.colors.surface.contrast,
|
1907
|
+
valueTextColor: globalRefs$a.colors.surface.contrast,
|
1908
|
+
placeholderTextColor: globalRefs$a.colors.surface.main,
|
1909
1909
|
requiredIndicator: "'*'",
|
1910
1910
|
|
1911
|
-
borderWidth: globalRefs$
|
1912
|
-
borderRadius: globalRefs$
|
1911
|
+
borderWidth: globalRefs$a.border.xs,
|
1912
|
+
borderRadius: globalRefs$a.radius.xs,
|
1913
1913
|
borderColor: 'transparent',
|
1914
1914
|
|
1915
|
-
outlineWidth: globalRefs$
|
1915
|
+
outlineWidth: globalRefs$a.border.sm,
|
1916
1916
|
outlineStyle: 'solid',
|
1917
1917
|
outlineColor: 'transparent',
|
1918
1918
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -1923,9 +1923,9 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1923
1923
|
horizontalPadding: '0.5em',
|
1924
1924
|
verticalPadding: '0.5em',
|
1925
1925
|
|
1926
|
-
backgroundColor: globalRefs$
|
1926
|
+
backgroundColor: globalRefs$a.colors.surface.light,
|
1927
1927
|
|
1928
|
-
fontFamily: globalRefs$
|
1928
|
+
fontFamily: globalRefs$a.fonts.font1.family,
|
1929
1929
|
|
1930
1930
|
size: {
|
1931
1931
|
xs: { fontSize: '12px' },
|
@@ -1939,65 +1939,66 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1939
1939
|
},
|
1940
1940
|
|
1941
1941
|
_focused: {
|
1942
|
-
outlineColor: globalRefs$
|
1942
|
+
outlineColor: globalRefs$a.colors.surface.main,
|
1943
1943
|
_invalid: {
|
1944
|
-
outlineColor: globalRefs$
|
1944
|
+
outlineColor: globalRefs$a.colors.error.main,
|
1945
1945
|
}
|
1946
1946
|
},
|
1947
1947
|
|
1948
1948
|
_bordered: {
|
1949
|
-
outlineWidth: globalRefs$
|
1950
|
-
borderColor: globalRefs$
|
1949
|
+
outlineWidth: globalRefs$a.border.xs,
|
1950
|
+
borderColor: globalRefs$a.colors.surface.main,
|
1951
1951
|
borderStyle: 'solid',
|
1952
1952
|
_invalid: {
|
1953
|
-
borderColor: globalRefs$
|
1953
|
+
borderColor: globalRefs$a.colors.error.main,
|
1954
1954
|
}
|
1955
1955
|
},
|
1956
1956
|
|
1957
1957
|
_disabled: {
|
1958
|
-
labelTextColor: globalRefs$
|
1959
|
-
|
1960
|
-
|
1961
|
-
|
1958
|
+
labelTextColor: globalRefs$a.colors.surface.main,
|
1959
|
+
borderColor: globalRefs$a.colors.surface.main,
|
1960
|
+
valueTextColor: globalRefs$a.colors.surface.dark,
|
1961
|
+
placeholderTextColor: globalRefs$a.colors.surface.dark,
|
1962
|
+
backgroundColor: globalRefs$a.colors.surface.main
|
1962
1963
|
}
|
1963
|
-
}, componentName$
|
1964
|
+
}, componentName$n);
|
1964
1965
|
|
1965
1966
|
var inputWrapper = /*#__PURE__*/Object.freeze({
|
1966
1967
|
__proto__: null,
|
1967
1968
|
default: theme$1,
|
1968
1969
|
refs: refs,
|
1969
|
-
vars: vars$
|
1970
|
+
vars: vars$l
|
1970
1971
|
});
|
1971
1972
|
|
1972
|
-
const vars$
|
1973
|
+
const vars$k = TextFieldClass.cssVarList;
|
1973
1974
|
|
1974
1975
|
const textField = ({
|
1975
|
-
[vars$
|
1976
|
-
[vars$
|
1977
|
-
[vars$
|
1978
|
-
[vars$
|
1979
|
-
[vars$
|
1980
|
-
[vars$
|
1981
|
-
[vars$
|
1982
|
-
[vars$
|
1983
|
-
[vars$
|
1984
|
-
[vars$
|
1985
|
-
[vars$
|
1986
|
-
[vars$
|
1987
|
-
[vars$
|
1988
|
-
[vars$
|
1989
|
-
[vars$
|
1990
|
-
[vars$
|
1991
|
-
[vars$
|
1992
|
-
[vars$
|
1993
|
-
[vars$
|
1976
|
+
[vars$k.hostWidth]: refs.width,
|
1977
|
+
[vars$k.hostMinWidth]: refs.minWidth,
|
1978
|
+
[vars$k.fontSize]: refs.fontSize,
|
1979
|
+
[vars$k.fontFamily]: refs.fontFamily,
|
1980
|
+
[vars$k.labelTextColor]: refs.labelTextColor,
|
1981
|
+
[vars$k.labelRequiredIndicator]: refs.requiredIndicator,
|
1982
|
+
[vars$k.inputValueTextColor]: refs.valueTextColor,
|
1983
|
+
[vars$k.inputPlaceholderColor]: refs.placeholderTextColor,
|
1984
|
+
[vars$k.inputBorderWidth]: refs.borderWidth,
|
1985
|
+
[vars$k.inputBorderStyle]: refs.borderStyle,
|
1986
|
+
[vars$k.inputBorderColor]: refs.borderColor,
|
1987
|
+
[vars$k.inputBorderRadius]: refs.borderRadius,
|
1988
|
+
[vars$k.inputOutlineWidth]: refs.outlineWidth,
|
1989
|
+
[vars$k.inputOutlineStyle]: refs.outlineStyle,
|
1990
|
+
[vars$k.inputOutlineColor]: refs.outlineColor,
|
1991
|
+
[vars$k.inputOutlineOffset]: refs.outlineOffset,
|
1992
|
+
[vars$k.inputBackgroundColor]: refs.backgroundColor,
|
1993
|
+
[vars$k.inputHeight]: refs.inputHeight,
|
1994
|
+
[vars$k.inputHorizontalPadding]: refs.horizontalPadding
|
1994
1995
|
});
|
1995
1996
|
|
1996
1997
|
var textField$1 = /*#__PURE__*/Object.freeze({
|
1997
1998
|
__proto__: null,
|
1998
1999
|
default: textField,
|
1999
2000
|
textField: textField,
|
2000
|
-
vars: vars$
|
2001
|
+
vars: vars$k
|
2001
2002
|
});
|
2002
2003
|
|
2003
2004
|
const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
|
@@ -2033,7 +2034,7 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
|
|
2033
2034
|
}
|
2034
2035
|
};
|
2035
2036
|
|
2036
|
-
const componentName$
|
2037
|
+
const componentName$m = getComponentName('password');
|
2037
2038
|
|
2038
2039
|
const {
|
2039
2040
|
host: host$a,
|
@@ -2169,43 +2170,43 @@ const PasswordClass = compose(
|
|
2169
2170
|
}
|
2170
2171
|
`,
|
2171
2172
|
excludeAttrsSync: ['tabindex'],
|
2172
|
-
componentName: componentName$
|
2173
|
+
componentName: componentName$m
|
2173
2174
|
})
|
2174
2175
|
);
|
2175
2176
|
|
2176
|
-
const globalRefs$
|
2177
|
-
const vars$
|
2177
|
+
const globalRefs$9 = getThemeRefs(globals);
|
2178
|
+
const vars$j = PasswordClass.cssVarList;
|
2178
2179
|
|
2179
2180
|
const password = {
|
2180
|
-
[vars$
|
2181
|
-
[vars$
|
2182
|
-
[vars$
|
2183
|
-
[vars$
|
2184
|
-
[vars$
|
2185
|
-
[vars$
|
2186
|
-
[vars$
|
2187
|
-
[vars$
|
2188
|
-
[vars$
|
2189
|
-
[vars$
|
2190
|
-
[vars$
|
2191
|
-
[vars$
|
2192
|
-
[vars$
|
2193
|
-
[vars$
|
2194
|
-
[vars$
|
2195
|
-
[vars$
|
2196
|
-
[vars$
|
2197
|
-
[vars$
|
2198
|
-
[vars$
|
2199
|
-
[vars$
|
2181
|
+
[vars$j.hostWidth]: refs.width,
|
2182
|
+
[vars$j.fontSize]: refs.fontSize,
|
2183
|
+
[vars$j.fontFamily]: refs.fontFamily,
|
2184
|
+
[vars$j.labelTextColor]: refs.labelTextColor,
|
2185
|
+
[vars$j.inputHorizontalPadding]: refs.horizontalPadding,
|
2186
|
+
[vars$j.inputHeight]: refs.inputHeight,
|
2187
|
+
[vars$j.inputBackgroundColor]: refs.backgroundColor,
|
2188
|
+
[vars$j.labelRequiredIndicator]: refs.requiredIndicator,
|
2189
|
+
[vars$j.inputValueTextColor]: refs.valueTextColor,
|
2190
|
+
[vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
2191
|
+
[vars$j.inputBorderWidth]: refs.borderWidth,
|
2192
|
+
[vars$j.inputBorderStyle]: refs.borderStyle,
|
2193
|
+
[vars$j.inputBorderColor]: refs.borderColor,
|
2194
|
+
[vars$j.inputBorderRadius]: refs.borderRadius,
|
2195
|
+
[vars$j.inputOutlineWidth]: refs.outlineWidth,
|
2196
|
+
[vars$j.inputOutlineStyle]: refs.outlineStyle,
|
2197
|
+
[vars$j.inputOutlineColor]: refs.outlineColor,
|
2198
|
+
[vars$j.inputOutlineOffset]: refs.outlineOffset,
|
2199
|
+
[vars$j.revealButtonOffset]: globalRefs$9.spacing.md,
|
2200
|
+
[vars$j.revealButtonSize]: refs.toggleButtonSize
|
2200
2201
|
};
|
2201
2202
|
|
2202
2203
|
var password$1 = /*#__PURE__*/Object.freeze({
|
2203
2204
|
__proto__: null,
|
2204
2205
|
default: password,
|
2205
|
-
vars: vars$
|
2206
|
+
vars: vars$j
|
2206
2207
|
});
|
2207
2208
|
|
2208
|
-
const componentName$
|
2209
|
+
const componentName$l = getComponentName('number-field');
|
2209
2210
|
|
2210
2211
|
const NumberFieldClass = compose(
|
2211
2212
|
createStyleMixin({
|
@@ -2228,41 +2229,41 @@ const NumberFieldClass = compose(
|
|
2228
2229
|
${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
|
2229
2230
|
`,
|
2230
2231
|
excludeAttrsSync: ['tabindex'],
|
2231
|
-
componentName: componentName$
|
2232
|
+
componentName: componentName$l
|
2232
2233
|
})
|
2233
2234
|
);
|
2234
2235
|
|
2235
|
-
const vars$
|
2236
|
+
const vars$i = NumberFieldClass.cssVarList;
|
2236
2237
|
|
2237
2238
|
const numberField = {
|
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$
|
2255
|
-
[vars$
|
2256
|
-
[vars$
|
2239
|
+
[vars$i.hostWidth]: refs.width,
|
2240
|
+
[vars$i.hostMinWidth]: refs.minWidth,
|
2241
|
+
[vars$i.fontSize]: refs.fontSize,
|
2242
|
+
[vars$i.fontFamily]: refs.fontFamily,
|
2243
|
+
[vars$i.labelTextColor]: refs.labelTextColor,
|
2244
|
+
[vars$i.inputValueTextColor]: refs.valueTextColor,
|
2245
|
+
[vars$i.inputPlaceholderColor]: refs.placeholderTextColor,
|
2246
|
+
[vars$i.inputBorderWidth]: refs.borderWidth,
|
2247
|
+
[vars$i.inputBorderStyle]: refs.borderStyle,
|
2248
|
+
[vars$i.inputBorderColor]: refs.borderColor,
|
2249
|
+
[vars$i.inputBorderRadius]: refs.borderRadius,
|
2250
|
+
[vars$i.inputOutlineWidth]: refs.outlineWidth,
|
2251
|
+
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
2252
|
+
[vars$i.inputOutlineColor]: refs.outlineColor,
|
2253
|
+
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
2254
|
+
[vars$i.inputBackgroundColor]: refs.backgroundColor,
|
2255
|
+
[vars$i.labelRequiredIndicator]: refs.requiredIndicator,
|
2256
|
+
[vars$i.inputHorizontalPadding]: refs.horizontalPadding,
|
2257
|
+
[vars$i.inputHeight]: refs.inputHeight
|
2257
2258
|
};
|
2258
2259
|
|
2259
2260
|
var numberField$1 = /*#__PURE__*/Object.freeze({
|
2260
2261
|
__proto__: null,
|
2261
2262
|
default: numberField,
|
2262
|
-
vars: vars$
|
2263
|
+
vars: vars$i
|
2263
2264
|
});
|
2264
2265
|
|
2265
|
-
const componentName$
|
2266
|
+
const componentName$k = getComponentName('email-field');
|
2266
2267
|
|
2267
2268
|
const EmailFieldClass = compose(
|
2268
2269
|
createStyleMixin({
|
@@ -2285,41 +2286,41 @@ const EmailFieldClass = compose(
|
|
2285
2286
|
${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
|
2286
2287
|
`,
|
2287
2288
|
excludeAttrsSync: ['tabindex'],
|
2288
|
-
componentName: componentName$
|
2289
|
+
componentName: componentName$k
|
2289
2290
|
})
|
2290
2291
|
);
|
2291
2292
|
|
2292
|
-
const vars$
|
2293
|
+
const vars$h = EmailFieldClass.cssVarList;
|
2293
2294
|
|
2294
2295
|
const emailField = {
|
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$
|
2296
|
+
[vars$h.hostWidth]: refs.width,
|
2297
|
+
[vars$h.hostMinWidth]: refs.minWidth,
|
2298
|
+
[vars$h.fontSize]: refs.fontSize,
|
2299
|
+
[vars$h.fontFamily]: refs.fontFamily,
|
2300
|
+
[vars$h.labelTextColor]: refs.labelTextColor,
|
2301
|
+
[vars$h.inputValueTextColor]: refs.valueTextColor,
|
2302
|
+
[vars$h.labelRequiredIndicator]: refs.requiredIndicator,
|
2303
|
+
[vars$h.inputPlaceholderColor]: refs.placeholderTextColor,
|
2304
|
+
[vars$h.inputBorderWidth]: refs.borderWidth,
|
2305
|
+
[vars$h.inputBorderStyle]: refs.borderStyle,
|
2306
|
+
[vars$h.inputBorderColor]: refs.borderColor,
|
2307
|
+
[vars$h.inputBorderRadius]: refs.borderRadius,
|
2308
|
+
[vars$h.inputOutlineWidth]: refs.outlineWidth,
|
2309
|
+
[vars$h.inputOutlineStyle]: refs.outlineStyle,
|
2310
|
+
[vars$h.inputOutlineColor]: refs.outlineColor,
|
2311
|
+
[vars$h.inputOutlineOffset]: refs.outlineOffset,
|
2312
|
+
[vars$h.inputBackgroundColor]: refs.backgroundColor,
|
2313
|
+
[vars$h.inputHorizontalPadding]: refs.horizontalPadding,
|
2314
|
+
[vars$h.inputHeight]: refs.inputHeight
|
2314
2315
|
};
|
2315
2316
|
|
2316
2317
|
var emailField$1 = /*#__PURE__*/Object.freeze({
|
2317
2318
|
__proto__: null,
|
2318
2319
|
default: emailField,
|
2319
|
-
vars: vars$
|
2320
|
+
vars: vars$h
|
2320
2321
|
});
|
2321
2322
|
|
2322
|
-
const componentName$
|
2323
|
+
const componentName$j = getComponentName('text-area');
|
2323
2324
|
|
2324
2325
|
const {
|
2325
2326
|
host: host$9,
|
@@ -2394,46 +2395,46 @@ const TextAreaClass = compose(
|
|
2394
2395
|
${resetInputCursor('vaadin-text-area')}
|
2395
2396
|
`,
|
2396
2397
|
excludeAttrsSync: ['tabindex'],
|
2397
|
-
componentName: componentName$
|
2398
|
+
componentName: componentName$j
|
2398
2399
|
})
|
2399
2400
|
);
|
2400
2401
|
|
2401
|
-
const globalRefs$
|
2402
|
-
const vars$
|
2402
|
+
const globalRefs$8 = getThemeRefs(globals);
|
2403
|
+
const vars$g = TextAreaClass.cssVarList;
|
2403
2404
|
|
2404
2405
|
const textArea = {
|
2405
|
-
[vars$
|
2406
|
-
[vars$
|
2407
|
-
[vars$
|
2408
|
-
[vars$
|
2409
|
-
[vars$
|
2410
|
-
[vars$
|
2411
|
-
[vars$
|
2412
|
-
[vars$
|
2413
|
-
[vars$
|
2414
|
-
[vars$
|
2415
|
-
[vars$
|
2416
|
-
[vars$
|
2417
|
-
[vars$
|
2418
|
-
[vars$
|
2419
|
-
[vars$
|
2420
|
-
[vars$
|
2421
|
-
[vars$
|
2422
|
-
[vars$
|
2406
|
+
[vars$g.hostWidth]: refs.width,
|
2407
|
+
[vars$g.hostMinWidth]: refs.minWidth,
|
2408
|
+
[vars$g.fontSize]: '14px',
|
2409
|
+
[vars$g.fontFamily]: refs.fontFamily,
|
2410
|
+
[vars$g.labelTextColor]: refs.labelTextColor,
|
2411
|
+
[vars$g.labelRequiredIndicator]: refs.requiredIndicator,
|
2412
|
+
[vars$g.inputBackgroundColor]: refs.backgroundColor,
|
2413
|
+
[vars$g.inputValueTextColor]: refs.valueTextColor,
|
2414
|
+
[vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
2415
|
+
[vars$g.inputBorderRadius]: refs.borderRadius,
|
2416
|
+
[vars$g.inputBorderWidth]: refs.borderWidth,
|
2417
|
+
[vars$g.inputBorderStyle]: refs.borderStyle,
|
2418
|
+
[vars$g.inputBorderColor]: refs.borderColor,
|
2419
|
+
[vars$g.inputOutlineWidth]: refs.outlineWidth,
|
2420
|
+
[vars$g.inputOutlineStyle]: refs.outlineStyle,
|
2421
|
+
[vars$g.inputOutlineColor]: refs.outlineColor,
|
2422
|
+
[vars$g.inputOutlineOffset]: refs.outlineOffset,
|
2423
|
+
[vars$g.inputResizeType]: 'vertical',
|
2423
2424
|
|
2424
2425
|
_disabled: {
|
2425
|
-
[vars$
|
2426
|
+
[vars$g.inputBackgroundColor]: globalRefs$8.colors.surface.light,
|
2426
2427
|
},
|
2427
2428
|
|
2428
2429
|
_readonly: {
|
2429
|
-
[vars$
|
2430
|
+
[vars$g.inputResizeType]: 'none',
|
2430
2431
|
}
|
2431
2432
|
};
|
2432
2433
|
|
2433
2434
|
var textArea$1 = /*#__PURE__*/Object.freeze({
|
2434
2435
|
__proto__: null,
|
2435
2436
|
default: textArea,
|
2436
|
-
vars: vars$
|
2437
|
+
vars: vars$g
|
2437
2438
|
});
|
2438
2439
|
|
2439
2440
|
const createBaseInputClass = (...args) => compose(
|
@@ -2443,9 +2444,9 @@ const createBaseInputClass = (...args) => compose(
|
|
2443
2444
|
inputEventsDispatchingMixin
|
2444
2445
|
)(createBaseClass(...args));
|
2445
2446
|
|
2446
|
-
const componentName$
|
2447
|
+
const componentName$i = getComponentName('boolean-field-internal');
|
2447
2448
|
|
2448
|
-
createBaseInputClass({ componentName: componentName$
|
2449
|
+
createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
|
2449
2450
|
|
2450
2451
|
const booleanFieldMixin = (superclass) =>
|
2451
2452
|
class BooleanFieldMixinClass extends superclass {
|
@@ -2458,14 +2459,14 @@ const booleanFieldMixin = (superclass) =>
|
|
2458
2459
|
|
2459
2460
|
const template = document.createElement('template');
|
2460
2461
|
template.innerHTML = `
|
2461
|
-
<${componentName$
|
2462
|
+
<${componentName$i}
|
2462
2463
|
tabindex="-1"
|
2463
2464
|
slot="input"
|
2464
|
-
></${componentName$
|
2465
|
+
></${componentName$i}>
|
2465
2466
|
`;
|
2466
2467
|
|
2467
2468
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2468
|
-
this.inputElement = this.shadowRoot.querySelector(componentName$
|
2469
|
+
this.inputElement = this.shadowRoot.querySelector(componentName$i);
|
2469
2470
|
this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
|
2470
2471
|
|
2471
2472
|
forwardAttrs(this, this.inputElement, {
|
@@ -2475,6 +2476,7 @@ const booleanFieldMixin = (superclass) =>
|
|
2475
2476
|
'size',
|
2476
2477
|
'label',
|
2477
2478
|
'invalid',
|
2479
|
+
'disabled'
|
2478
2480
|
]
|
2479
2481
|
});
|
2480
2482
|
|
@@ -2492,6 +2494,7 @@ ${resetInputFieldDefaultWidth()}
|
|
2492
2494
|
|
2493
2495
|
.wrapper {
|
2494
2496
|
display: flex;
|
2497
|
+
box-sizing: border-box;
|
2495
2498
|
}
|
2496
2499
|
|
2497
2500
|
vaadin-text-field {
|
@@ -2549,7 +2552,7 @@ vaadin-checkbox::part(checkbox) {
|
|
2549
2552
|
}
|
2550
2553
|
`;
|
2551
2554
|
|
2552
|
-
const componentName$
|
2555
|
+
const componentName$h = getComponentName('checkbox');
|
2553
2556
|
|
2554
2557
|
const {
|
2555
2558
|
host: host$8,
|
@@ -2594,6 +2597,7 @@ const CheckboxClass = compose(
|
|
2594
2597
|
labelTextColor: [
|
2595
2598
|
{ ...label$5, property: 'color' },
|
2596
2599
|
{ ...requiredIndicator$4, property: 'color' },
|
2600
|
+
{ ...label$5, property: '-webkit-text-fill-color' }
|
2597
2601
|
],
|
2598
2602
|
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
2599
2603
|
|
@@ -2607,19 +2611,26 @@ const CheckboxClass = compose(
|
|
2607
2611
|
],
|
2608
2612
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
2609
2613
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
2614
|
+
|
2610
2615
|
inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
|
2616
|
+
inputBorderWidth: { ...checkboxElement, property: 'border-width' },
|
2617
|
+
inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
|
2618
|
+
inputBorderColor: { ...checkboxElement, property: 'border-color' },
|
2619
|
+
inputBorderStyle: { ...checkboxElement, property: 'border-style' },
|
2620
|
+
|
2611
2621
|
inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
2612
2622
|
inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
2613
2623
|
inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
2614
2624
|
inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
2625
|
+
|
2615
2626
|
inputSize: [
|
2616
2627
|
{ ...checkboxElement, property: 'width' },
|
2617
|
-
{ ...label$5, property: 'margin-left' },
|
2618
2628
|
{ ...checkboxElement, property: 'height' },
|
2619
2629
|
{ ...checkboxSurface, property: 'font-size' },
|
2620
2630
|
{ ...component$1, property: 'font-size' },
|
2631
|
+
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
2632
|
+
{ ...label$5, property: 'margin-left' },
|
2621
2633
|
{ ...label$5, property: 'line-height' },
|
2622
|
-
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
2623
2634
|
],
|
2624
2635
|
},
|
2625
2636
|
}),
|
@@ -2636,46 +2647,49 @@ const CheckboxClass = compose(
|
|
2636
2647
|
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
2637
2648
|
`,
|
2638
2649
|
excludeAttrsSync: ['tabindex'],
|
2639
|
-
componentName: componentName$
|
2650
|
+
componentName: componentName$h
|
2640
2651
|
})
|
2641
2652
|
);
|
2642
2653
|
|
2643
|
-
|
2644
|
-
const vars$
|
2654
|
+
getThemeRefs(globals);
|
2655
|
+
const vars$f = CheckboxClass.cssVarList;
|
2645
2656
|
|
2646
2657
|
const checkbox = {
|
2647
|
-
[vars$
|
2648
|
-
[vars$
|
2649
|
-
[vars$
|
2650
|
-
[vars$
|
2651
|
-
[vars$
|
2652
|
-
[vars$
|
2653
|
-
[vars$
|
2654
|
-
[vars$
|
2655
|
-
[vars$
|
2656
|
-
[vars$
|
2657
|
-
[vars$
|
2658
|
-
[vars$
|
2659
|
-
[vars$
|
2660
|
-
[vars$
|
2658
|
+
[vars$f.hostWidth]: refs.width,
|
2659
|
+
[vars$f.fontSize]: refs.fontSize,
|
2660
|
+
[vars$f.fontFamily]: refs.fontFamily,
|
2661
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
2662
|
+
[vars$f.labelRequiredIndicator]: refs.requiredIndicator,
|
2663
|
+
[vars$f.labelFontWeight]: '400',
|
2664
|
+
[vars$f.labelSpacing]: '0.75em',
|
2665
|
+
[vars$f.inputOutlineWidth]: refs.outlineWidth,
|
2666
|
+
[vars$f.inputOutlineOffset]: refs.outlineOffset,
|
2667
|
+
[vars$f.inputOutlineColor]: refs.outlineColor,
|
2668
|
+
[vars$f.inputOutlineStyle]: refs.outlineStyle,
|
2669
|
+
[vars$f.inputBorderRadius]: refs.borderRadius,
|
2670
|
+
[vars$f.inputBorderColor]: refs.borderColor,
|
2671
|
+
[vars$f.inputBorderWidth]: refs.borderWidth,
|
2672
|
+
[vars$f.inputBorderStyle]: refs.borderStyle,
|
2673
|
+
[vars$f.inputBackgroundColor]: refs.inputBackgroundColor,
|
2674
|
+
[vars$f.inputSize]: '2em',
|
2661
2675
|
|
2662
2676
|
_checked: {
|
2663
|
-
[vars$
|
2664
|
-
[vars$
|
2677
|
+
[vars$f.inputBackgroundColor]: refs.backgroundColor,
|
2678
|
+
[vars$f.inputValueTextColor]: refs.valueTextColor,
|
2665
2679
|
},
|
2666
2680
|
|
2667
2681
|
_disabled: {
|
2668
|
-
[vars$
|
2682
|
+
[vars$f.labelTextColor]: refs.labelTextColor,
|
2669
2683
|
},
|
2670
2684
|
};
|
2671
2685
|
|
2672
2686
|
var checkbox$1 = /*#__PURE__*/Object.freeze({
|
2673
2687
|
__proto__: null,
|
2674
2688
|
default: checkbox,
|
2675
|
-
vars: vars$
|
2689
|
+
vars: vars$f
|
2676
2690
|
});
|
2677
2691
|
|
2678
|
-
const componentName$
|
2692
|
+
const componentName$g = getComponentName('switch-toggle');
|
2679
2693
|
|
2680
2694
|
const {
|
2681
2695
|
host: host$7,
|
@@ -2752,6 +2766,7 @@ const SwitchToggleClass = compose(
|
|
2752
2766
|
labelTextColor: [
|
2753
2767
|
{ ...label$4, property: 'color' },
|
2754
2768
|
{ ...requiredIndicator$3, property: 'color' },
|
2769
|
+
{ ...label$4, property: '-webkit-text-fill-color' }
|
2755
2770
|
],
|
2756
2771
|
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
2757
2772
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
@@ -2777,9 +2792,6 @@ const SwitchToggleClass = compose(
|
|
2777
2792
|
vaadin-checkbox[active]::part(checkbox) {
|
2778
2793
|
transform: none;
|
2779
2794
|
}
|
2780
|
-
vaadin-checkbox[checked]::part(checkbox) {
|
2781
|
-
background: none;
|
2782
|
-
}
|
2783
2795
|
vaadin-checkbox::part(checkbox)::after {
|
2784
2796
|
position: absolute;
|
2785
2797
|
opacity: 1;
|
@@ -2787,7 +2799,7 @@ const SwitchToggleClass = compose(
|
|
2787
2799
|
}
|
2788
2800
|
`,
|
2789
2801
|
excludeAttrsSync: ['tabindex'],
|
2790
|
-
componentName: componentName$
|
2802
|
+
componentName: componentName$g
|
2791
2803
|
})
|
2792
2804
|
);
|
2793
2805
|
|
@@ -2795,68 +2807,74 @@ const knobMargin = '2px';
|
|
2795
2807
|
const checkboxHeight = '1.25em';
|
2796
2808
|
|
2797
2809
|
const globalRefs$7 = getThemeRefs(globals);
|
2798
|
-
const vars$
|
2810
|
+
const vars$e = SwitchToggleClass.cssVarList;
|
2799
2811
|
|
2800
2812
|
const switchToggle = {
|
2801
|
-
[vars$
|
2802
|
-
[vars$
|
2803
|
-
|
2804
|
-
[vars$
|
2805
|
-
[vars$
|
2806
|
-
[vars$
|
2807
|
-
[vars$
|
2808
|
-
|
2809
|
-
[vars$
|
2810
|
-
[vars$
|
2811
|
-
[vars$
|
2812
|
-
[vars$
|
2813
|
-
[vars$
|
2814
|
-
[vars$
|
2815
|
-
[vars$
|
2816
|
-
|
2817
|
-
[vars$
|
2818
|
-
[vars$
|
2819
|
-
[vars$
|
2820
|
-
[vars$
|
2821
|
-
[vars$
|
2822
|
-
[vars$
|
2823
|
-
|
2824
|
-
[vars$
|
2825
|
-
[vars$
|
2826
|
-
[vars$
|
2827
|
-
[vars$
|
2828
|
-
[vars$
|
2829
|
-
|
2830
|
-
[vars$
|
2813
|
+
[vars$e.fontSize]: refs.fontSize,
|
2814
|
+
[vars$e.fontFamily]: refs.fontFamily,
|
2815
|
+
|
2816
|
+
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
2817
|
+
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
2818
|
+
[vars$e.inputOutlineColor]: refs.outlineColor,
|
2819
|
+
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
2820
|
+
|
2821
|
+
[vars$e.trackBorderStyle]: refs.borderStyle,
|
2822
|
+
[vars$e.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
2823
|
+
[vars$e.trackBorderColor]: refs.borderColor,
|
2824
|
+
[vars$e.trackBackgroundColor]: 'none',
|
2825
|
+
[vars$e.trackBorderRadius]: globalRefs$7.radius.md,
|
2826
|
+
[vars$e.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
2827
|
+
[vars$e.trackHeight]: checkboxHeight,
|
2828
|
+
|
2829
|
+
[vars$e.knobSize]: `calc(1em - ${knobMargin})`,
|
2830
|
+
[vars$e.knobRadius]: '50%',
|
2831
|
+
[vars$e.knobTopOffset]: '1px',
|
2832
|
+
[vars$e.knobLeftOffset]: knobMargin,
|
2833
|
+
[vars$e.knobColor]: refs.valueTextColor,
|
2834
|
+
[vars$e.knobTransitionDuration]: '0.3s',
|
2835
|
+
|
2836
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
2837
|
+
[vars$e.labelFontWeight]: '400',
|
2838
|
+
[vars$e.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
2839
|
+
[vars$e.labelSpacing]: '0.25em',
|
2840
|
+
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
2841
|
+
|
2842
|
+
[vars$e.hostWidth]: refs.width,
|
2831
2843
|
|
2832
2844
|
_checked: {
|
2833
|
-
[vars$
|
2834
|
-
[vars$
|
2835
|
-
[vars$
|
2836
|
-
[vars$
|
2845
|
+
[vars$e.trackBorderColor]: refs.borderColor,
|
2846
|
+
[vars$e.trackBackgroundColor]: refs.backgroundColor,
|
2847
|
+
[vars$e.knobLeftOffset]: `calc(100% - var(${vars$e.knobSize}) - ${knobMargin})`,
|
2848
|
+
[vars$e.knobColor]: refs.valueTextColor,
|
2849
|
+
[vars$e.knobTextColor]: refs.valueTextColor,
|
2837
2850
|
},
|
2838
2851
|
|
2839
2852
|
_disabled: {
|
2840
|
-
[vars$
|
2841
|
-
[vars$
|
2842
|
-
[vars$
|
2853
|
+
[vars$e.knobColor]: globalRefs$7.colors.surface.light,
|
2854
|
+
[vars$e.trackBorderColor]: globalRefs$7.colors.surface.main,
|
2855
|
+
[vars$e.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
2856
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
2857
|
+
_checked: {
|
2858
|
+
[vars$e.knobColor]: globalRefs$7.colors.surface.light,
|
2859
|
+
[vars$e.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
2860
|
+
}
|
2843
2861
|
},
|
2844
2862
|
|
2845
2863
|
_invalid: {
|
2846
|
-
[vars$
|
2847
|
-
[vars$
|
2864
|
+
[vars$e.trackBorderColor]: globalRefs$7.colors.error.main,
|
2865
|
+
[vars$e.knobColor]: globalRefs$7.colors.error.main,
|
2848
2866
|
},
|
2849
2867
|
};
|
2850
2868
|
|
2851
2869
|
var switchToggle$1 = /*#__PURE__*/Object.freeze({
|
2852
2870
|
__proto__: null,
|
2853
2871
|
default: switchToggle,
|
2854
|
-
vars: vars$
|
2872
|
+
vars: vars$e
|
2855
2873
|
});
|
2856
2874
|
|
2857
|
-
const componentName$
|
2875
|
+
const componentName$f = getComponentName('container');
|
2858
2876
|
|
2859
|
-
class RawContainer extends createBaseClass({ componentName: componentName$
|
2877
|
+
class RawContainer extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > slot' }) {
|
2860
2878
|
constructor() {
|
2861
2879
|
super();
|
2862
2880
|
|
@@ -2935,7 +2953,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] =
|
|
2935
2953
|
verticalAlignment,
|
2936
2954
|
horizontalAlignment,
|
2937
2955
|
shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
|
2938
|
-
}, componentName$
|
2956
|
+
}, componentName$f);
|
2939
2957
|
|
2940
2958
|
const { shadowColor } = helperRefs$2;
|
2941
2959
|
|
@@ -3010,7 +3028,7 @@ const container = {
|
|
3010
3028
|
}
|
3011
3029
|
};
|
3012
3030
|
|
3013
|
-
const vars$
|
3031
|
+
const vars$d = {
|
3014
3032
|
...compVars$1,
|
3015
3033
|
...helperVars$1
|
3016
3034
|
};
|
@@ -3018,63 +3036,82 @@ const vars$c = {
|
|
3018
3036
|
var container$1 = /*#__PURE__*/Object.freeze({
|
3019
3037
|
__proto__: null,
|
3020
3038
|
default: container,
|
3021
|
-
vars: vars$
|
3039
|
+
vars: vars$d
|
3022
3040
|
});
|
3023
3041
|
|
3024
|
-
const componentName$d = getComponentName('logo');
|
3025
|
-
|
3026
3042
|
let style;
|
3027
|
-
const
|
3043
|
+
const getContent = () => style;
|
3044
|
+
const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
|
3045
|
+
class RawCssVarImageClass extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
|
3046
|
+
constructor() {
|
3047
|
+
super();
|
3048
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
3049
|
+
<style>
|
3050
|
+
:host {
|
3051
|
+
display: inline-flex;
|
3052
|
+
}
|
3053
|
+
:host([draggable="true"]) > div {
|
3054
|
+
pointer-events: none
|
3055
|
+
}
|
3056
|
+
:host > div {
|
3057
|
+
display: inline-block;
|
3058
|
+
max-width: 100%;
|
3059
|
+
max-height: 100%;
|
3060
|
+
object-fit: contain;
|
3061
|
+
margin: auto;
|
3062
|
+
${getContent()}
|
3063
|
+
}
|
3064
|
+
</style>
|
3065
|
+
<div></div>
|
3066
|
+
`;
|
3067
|
+
}
|
3068
|
+
}
|
3028
3069
|
|
3029
|
-
|
3030
|
-
|
3031
|
-
|
3070
|
+
const CssVarImageClass = compose(
|
3071
|
+
createStyleMixin({
|
3072
|
+
mappings: {
|
3073
|
+
height: { selector: () => ':host' },
|
3074
|
+
width: { selector: () => ':host' },
|
3075
|
+
[varName]: { property: 'content' },
|
3076
|
+
[fallbackVarName]: { property: 'content' },
|
3077
|
+
}
|
3078
|
+
}),
|
3079
|
+
draggableMixin,
|
3080
|
+
componentNameValidationMixin
|
3081
|
+
)(RawCssVarImageClass);
|
3032
3082
|
|
3033
|
-
|
3034
|
-
<style>
|
3035
|
-
${getStyle()}
|
3036
|
-
</style>
|
3037
|
-
<div></div>`;
|
3038
|
-
}
|
3039
|
-
}
|
3083
|
+
style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
|
3040
3084
|
|
3041
|
-
|
3042
|
-
|
3043
|
-
mappings: {
|
3044
|
-
height: { selector: () => ':host' },
|
3045
|
-
width: { selector: () => ':host' },
|
3046
|
-
fallbackUrl: { property: 'content' },
|
3047
|
-
url: { property: 'content' },
|
3048
|
-
}
|
3049
|
-
}),
|
3050
|
-
draggableMixin,
|
3051
|
-
componentNameValidationMixin
|
3052
|
-
)(RawLogo);
|
3085
|
+
return CssVarImageClass;
|
3086
|
+
};
|
3053
3087
|
|
3054
|
-
|
3055
|
-
|
3056
|
-
|
3057
|
-
|
3058
|
-
|
3059
|
-
|
3060
|
-
|
3061
|
-
|
3062
|
-
|
3063
|
-
|
3064
|
-
|
3065
|
-
|
3066
|
-
:
|
3067
|
-
|
3068
|
-
}
|
3069
|
-
|
3088
|
+
const componentName$e = getComponentName('logo');
|
3089
|
+
|
3090
|
+
const LogoClass = createCssVarImageClass({ componentName: componentName$e, varName: 'url', fallbackVarName: 'fallbackUrl' });
|
3091
|
+
|
3092
|
+
const vars$c = LogoClass.cssVarList;
|
3093
|
+
|
3094
|
+
const logo$1 = {
|
3095
|
+
[vars$c.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
|
3096
|
+
};
|
3097
|
+
|
3098
|
+
var logo$2 = /*#__PURE__*/Object.freeze({
|
3099
|
+
__proto__: null,
|
3100
|
+
default: logo$1,
|
3101
|
+
vars: vars$c
|
3102
|
+
});
|
3103
|
+
|
3104
|
+
const componentName$d = getComponentName('totp-image');
|
3105
|
+
|
3106
|
+
const TotpImageClass = createCssVarImageClass({ componentName: componentName$d, varName: 'url', fallbackVarName: 'fallbackUrl' });
|
3070
3107
|
|
3071
|
-
const vars$b =
|
3108
|
+
const vars$b = TotpImageClass.cssVarList;
|
3072
3109
|
|
3073
3110
|
const logo = {
|
3074
|
-
[vars$b.fallbackUrl]: 'url(https://
|
3111
|
+
[vars$b.fallbackUrl]: 'url(https://app.descope.com/images/99ae31fd143ba38e072d.svg)'
|
3075
3112
|
};
|
3076
3113
|
|
3077
|
-
var
|
3114
|
+
var totpImage = /*#__PURE__*/Object.freeze({
|
3078
3115
|
__proto__: null,
|
3079
3116
|
default: logo,
|
3080
3117
|
vars: vars$b
|
@@ -5831,7 +5868,8 @@ const components = {
|
|
5831
5868
|
checkbox: checkbox$1,
|
5832
5869
|
switchToggle: switchToggle$1,
|
5833
5870
|
container: container$1,
|
5834
|
-
logo: logo$
|
5871
|
+
logo: logo$2,
|
5872
|
+
totpImage,
|
5835
5873
|
text: text$3,
|
5836
5874
|
link: link$1,
|
5837
5875
|
divider: divider$1,
|
@@ -5849,7 +5887,7 @@ const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: c
|
|
5849
5887
|
const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
|
5850
5888
|
|
5851
5889
|
const defaultTheme = { globals, components: theme };
|
5852
|
-
const themeVars = { globals: vars$
|
5890
|
+
const themeVars = { globals: vars$n, components: vars };
|
5853
5891
|
|
5854
5892
|
exports.ButtonClass = ButtonClass;
|
5855
5893
|
exports.CheckboxClass = CheckboxClass;
|
@@ -5870,6 +5908,7 @@ exports.SwitchToggleClass = SwitchToggleClass;
|
|
5870
5908
|
exports.TextAreaClass = TextAreaClass;
|
5871
5909
|
exports.TextClass = TextClass;
|
5872
5910
|
exports.TextFieldClass = TextFieldClass;
|
5911
|
+
exports.TotpImageClass = TotpImageClass;
|
5873
5912
|
exports.componentsThemeManager = componentsThemeManager;
|
5874
5913
|
exports.createComponentsTheme = createComponentsTheme;
|
5875
5914
|
exports.createHelperVars = createHelperVars;
|