@descope/web-components-ui 1.0.161 → 1.0.163
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +123 -120
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +131 -121
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1000.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +8 -1
- package/src/mixins/proxyInputMixin.js +3 -4
- package/src/theme/components/loader/loaderRadial.js +22 -19
package/dist/cjs/index.cjs.js
CHANGED
@@ -1241,7 +1241,7 @@ const proxyInputMixin = (superclass) =>
|
|
1241
1241
|
}
|
1242
1242
|
|
1243
1243
|
get inputElement() {
|
1244
|
-
if (this.#inputElement) return this.#inputElement
|
1244
|
+
if (this.#inputElement) return this.#inputElement;
|
1245
1245
|
|
1246
1246
|
this.warnIfInputElementIsMissing();
|
1247
1247
|
|
@@ -1278,7 +1278,7 @@ const proxyInputMixin = (superclass) =>
|
|
1278
1278
|
// on some cases the base element is not ready so the inputElement is empty
|
1279
1279
|
// we are deferring this section to make sure the base element is ready
|
1280
1280
|
setTimeout(() => {
|
1281
|
-
this.inputElement
|
1281
|
+
this.inputElement?.addEventListener('input', (e) => {
|
1282
1282
|
if (!this.inputElement.checkValidity()) {
|
1283
1283
|
this.inputElement.setCustomValidity('');
|
1284
1284
|
// after updating the input validity we want to trigger set validity on the wrapping element
|
@@ -1322,7 +1322,6 @@ const proxyInputMixin = (superclass) =>
|
|
1322
1322
|
forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
|
1323
1323
|
});
|
1324
1324
|
}
|
1325
|
-
|
1326
1325
|
};
|
1327
1326
|
|
1328
1327
|
const composedProxyInputMixin = compose(
|
@@ -1640,7 +1639,7 @@ loadingIndicatorStyles = `
|
|
1640
1639
|
`;
|
1641
1640
|
|
1642
1641
|
const globalRefs$b = getThemeRefs(globals);
|
1643
|
-
const compVars$
|
1642
|
+
const compVars$3 = ButtonClass.cssVarList;
|
1644
1643
|
|
1645
1644
|
const mode = {
|
1646
1645
|
primary: globalRefs$b.colors.primary,
|
@@ -1650,7 +1649,7 @@ const mode = {
|
|
1650
1649
|
surface: globalRefs$b.colors.surface,
|
1651
1650
|
};
|
1652
1651
|
|
1653
|
-
const [helperTheme$3, helperRefs$3, helperVars$
|
1652
|
+
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$r);
|
1654
1653
|
|
1655
1654
|
const verticalPaddingRatio = 3;
|
1656
1655
|
const horizontalPaddingRatio = 2;
|
@@ -1658,88 +1657,88 @@ const horizontalPaddingRatio = 2;
|
|
1658
1657
|
const button = {
|
1659
1658
|
...helperTheme$3,
|
1660
1659
|
|
1661
|
-
[compVars$
|
1660
|
+
[compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
|
1662
1661
|
|
1663
|
-
[compVars$
|
1664
|
-
[compVars$
|
1662
|
+
[compVars$3.cursor]: 'pointer',
|
1663
|
+
[compVars$3.hostHeight]: '3em',
|
1665
1664
|
|
1666
|
-
[compVars$
|
1667
|
-
[compVars$
|
1668
|
-
[compVars$
|
1669
|
-
[compVars$
|
1665
|
+
[compVars$3.borderRadius]: globalRefs$b.radius.sm,
|
1666
|
+
[compVars$3.borderWidth]: globalRefs$b.border.xs,
|
1667
|
+
[compVars$3.borderStyle]: 'solid',
|
1668
|
+
[compVars$3.borderColor]: 'transparent',
|
1670
1669
|
|
1671
|
-
[compVars$
|
1670
|
+
[compVars$3.labelSpacing]: '0.25em',
|
1672
1671
|
|
1673
|
-
[compVars$
|
1674
|
-
[compVars$
|
1672
|
+
[compVars$3.verticalPadding]: `calc(var(${compVars$3.fontSize}) / ${verticalPaddingRatio})`,
|
1673
|
+
[compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
|
1675
1674
|
|
1676
|
-
[compVars$
|
1677
|
-
[compVars$
|
1678
|
-
[compVars$
|
1679
|
-
[compVars$
|
1675
|
+
[compVars$3.outlineWidth]: globals.border.sm,
|
1676
|
+
[compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
|
1677
|
+
[compVars$3.outlineStyle]: 'solid',
|
1678
|
+
[compVars$3.outlineColor]: 'transparent',
|
1680
1679
|
|
1681
1680
|
size: {
|
1682
|
-
xs: { [compVars$
|
1683
|
-
sm: { [compVars$
|
1684
|
-
md: { [compVars$
|
1685
|
-
lg: { [compVars$
|
1681
|
+
xs: { [compVars$3.fontSize]: '12px' },
|
1682
|
+
sm: { [compVars$3.fontSize]: '14px' },
|
1683
|
+
md: { [compVars$3.fontSize]: '16px' },
|
1684
|
+
lg: { [compVars$3.fontSize]: '18px' },
|
1686
1685
|
},
|
1687
1686
|
|
1688
1687
|
_fullWidth: {
|
1689
|
-
[compVars$
|
1688
|
+
[compVars$3.hostWidth]: '100%',
|
1690
1689
|
},
|
1691
1690
|
|
1692
1691
|
_loading: {
|
1693
|
-
[compVars$
|
1694
|
-
[compVars$
|
1692
|
+
[compVars$3.cursor]: 'wait',
|
1693
|
+
[compVars$3.labelTextColor]: helperRefs$3.main,
|
1695
1694
|
},
|
1696
1695
|
|
1697
1696
|
variant: {
|
1698
1697
|
contained: {
|
1699
|
-
[compVars$
|
1700
|
-
[compVars$
|
1698
|
+
[compVars$3.labelTextColor]: helperRefs$3.contrast,
|
1699
|
+
[compVars$3.backgroundColor]: helperRefs$3.main,
|
1701
1700
|
_hover: {
|
1702
|
-
[compVars$
|
1701
|
+
[compVars$3.backgroundColor]: helperRefs$3.dark,
|
1703
1702
|
_loading: {
|
1704
|
-
[compVars$
|
1703
|
+
[compVars$3.backgroundColor]: helperRefs$3.main,
|
1705
1704
|
},
|
1706
1705
|
},
|
1707
1706
|
_active: {
|
1708
|
-
[compVars$
|
1707
|
+
[compVars$3.backgroundColor]: helperRefs$3.main,
|
1709
1708
|
},
|
1710
1709
|
},
|
1711
1710
|
|
1712
1711
|
outline: {
|
1713
|
-
[compVars$
|
1714
|
-
[compVars$
|
1712
|
+
[compVars$3.labelTextColor]: helperRefs$3.main,
|
1713
|
+
[compVars$3.borderColor]: 'currentColor',
|
1715
1714
|
_hover: {
|
1716
|
-
[compVars$
|
1715
|
+
[compVars$3.labelTextColor]: helperRefs$3.dark,
|
1717
1716
|
},
|
1718
1717
|
_active: {
|
1719
|
-
[compVars$
|
1718
|
+
[compVars$3.labelTextColor]: helperRefs$3.main,
|
1720
1719
|
},
|
1721
1720
|
},
|
1722
1721
|
|
1723
1722
|
link: {
|
1724
|
-
[compVars$
|
1723
|
+
[compVars$3.labelTextColor]: helperRefs$3.main,
|
1725
1724
|
_hover: {
|
1726
|
-
[compVars$
|
1727
|
-
[compVars$
|
1725
|
+
[compVars$3.labelTextColor]: helperRefs$3.dark,
|
1726
|
+
[compVars$3.labelTextDecoration]: 'underline',
|
1728
1727
|
},
|
1729
1728
|
_active: {
|
1730
|
-
[compVars$
|
1729
|
+
[compVars$3.labelTextColor]: helperRefs$3.dark,
|
1731
1730
|
},
|
1732
1731
|
},
|
1733
1732
|
},
|
1734
1733
|
|
1735
1734
|
_focused: {
|
1736
|
-
[compVars$
|
1735
|
+
[compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
|
1737
1736
|
},
|
1738
1737
|
};
|
1739
1738
|
|
1740
1739
|
const vars$n = {
|
1741
|
-
...compVars$
|
1742
|
-
...helperVars$
|
1740
|
+
...compVars$3,
|
1741
|
+
...helperVars$3,
|
1743
1742
|
};
|
1744
1743
|
|
1745
1744
|
var button$1 = /*#__PURE__*/Object.freeze({
|
@@ -2967,7 +2966,7 @@ const ContainerClass = compose(
|
|
2967
2966
|
|
2968
2967
|
const globalRefs$6 = getThemeRefs(globals);
|
2969
2968
|
|
2970
|
-
const compVars$
|
2969
|
+
const compVars$2 = ContainerClass.cssVarList;
|
2971
2970
|
|
2972
2971
|
const verticalAlignment = {
|
2973
2972
|
start: { verticalAlignment: 'start' },
|
@@ -2981,7 +2980,7 @@ const horizontalAlignment = {
|
|
2981
2980
|
end: { horizontalAlignment: 'end' },
|
2982
2981
|
};
|
2983
2982
|
|
2984
|
-
const [helperTheme$2, helperRefs$2, helperVars$
|
2983
|
+
const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
|
2985
2984
|
{
|
2986
2985
|
verticalAlignment,
|
2987
2986
|
horizontalAlignment,
|
@@ -2995,85 +2994,85 @@ const { shadowColor } = helperRefs$2;
|
|
2995
2994
|
const container = {
|
2996
2995
|
...helperTheme$2,
|
2997
2996
|
|
2998
|
-
[compVars$
|
2999
|
-
[compVars$
|
3000
|
-
[compVars$
|
3001
|
-
[compVars$
|
2997
|
+
[compVars$2.hostWidth]: '100%',
|
2998
|
+
[compVars$2.boxShadow]: 'none',
|
2999
|
+
[compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
|
3000
|
+
[compVars$2.color]: globalRefs$6.colors.surface.contrast,
|
3002
3001
|
|
3003
3002
|
verticalPadding: {
|
3004
|
-
sm: { [compVars$
|
3005
|
-
md: { [compVars$
|
3006
|
-
lg: { [compVars$
|
3003
|
+
sm: { [compVars$2.verticalPadding]: '5px' },
|
3004
|
+
md: { [compVars$2.verticalPadding]: '10px' },
|
3005
|
+
lg: { [compVars$2.verticalPadding]: '20px' },
|
3007
3006
|
},
|
3008
3007
|
|
3009
3008
|
horizontalPadding: {
|
3010
|
-
sm: { [compVars$
|
3011
|
-
md: { [compVars$
|
3012
|
-
lg: { [compVars$
|
3009
|
+
sm: { [compVars$2.horizontalPadding]: '5px' },
|
3010
|
+
md: { [compVars$2.horizontalPadding]: '10px' },
|
3011
|
+
lg: { [compVars$2.horizontalPadding]: '20px' },
|
3013
3012
|
},
|
3014
3013
|
|
3015
3014
|
direction: {
|
3016
3015
|
row: {
|
3017
|
-
[compVars$
|
3018
|
-
[compVars$
|
3019
|
-
[compVars$
|
3020
|
-
[compVars$
|
3016
|
+
[compVars$2.flexDirection]: 'row',
|
3017
|
+
[compVars$2.alignItems]: helperRefs$2.verticalAlignment,
|
3018
|
+
[compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
|
3019
|
+
[compVars$2.flexWrap]: 'wrap',
|
3021
3020
|
horizontalAlignment: {
|
3022
3021
|
spaceBetween: {
|
3023
|
-
[helperVars$
|
3022
|
+
[helperVars$2.horizontalAlignment]: 'space-between',
|
3024
3023
|
},
|
3025
3024
|
},
|
3026
3025
|
},
|
3027
3026
|
column: {
|
3028
|
-
[compVars$
|
3029
|
-
[compVars$
|
3030
|
-
[compVars$
|
3027
|
+
[compVars$2.flexDirection]: 'column',
|
3028
|
+
[compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
|
3029
|
+
[compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
|
3031
3030
|
verticalAlignment: {
|
3032
3031
|
spaceBetween: {
|
3033
|
-
[helperVars$
|
3032
|
+
[helperVars$2.verticalAlignment]: 'space-between',
|
3034
3033
|
},
|
3035
3034
|
},
|
3036
3035
|
},
|
3037
3036
|
},
|
3038
3037
|
|
3039
3038
|
spaceBetween: {
|
3040
|
-
sm: { [compVars$
|
3041
|
-
md: { [compVars$
|
3042
|
-
lg: { [compVars$
|
3039
|
+
sm: { [compVars$2.gap]: '10px' },
|
3040
|
+
md: { [compVars$2.gap]: '20px' },
|
3041
|
+
lg: { [compVars$2.gap]: '30px' },
|
3043
3042
|
},
|
3044
3043
|
|
3045
3044
|
shadow: {
|
3046
3045
|
sm: {
|
3047
|
-
[compVars$
|
3046
|
+
[compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
|
3048
3047
|
},
|
3049
3048
|
md: {
|
3050
|
-
[compVars$
|
3049
|
+
[compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
|
3051
3050
|
},
|
3052
3051
|
lg: {
|
3053
|
-
[compVars$
|
3052
|
+
[compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
|
3054
3053
|
},
|
3055
3054
|
xl: {
|
3056
|
-
[compVars$
|
3055
|
+
[compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
|
3057
3056
|
},
|
3058
3057
|
'2xl': {
|
3059
|
-
[helperVars$
|
3060
|
-
[compVars$
|
3058
|
+
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
3059
|
+
[compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
|
3061
3060
|
},
|
3062
3061
|
},
|
3063
3062
|
|
3064
3063
|
borderRadius: {
|
3065
|
-
sm: { [compVars$
|
3066
|
-
md: { [compVars$
|
3067
|
-
lg: { [compVars$
|
3068
|
-
xl: { [compVars$
|
3069
|
-
'2xl': { [compVars$
|
3070
|
-
'3xl': { [compVars$
|
3064
|
+
sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
|
3065
|
+
md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
|
3066
|
+
lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
|
3067
|
+
xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
|
3068
|
+
'2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
|
3069
|
+
'3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
|
3071
3070
|
},
|
3072
3071
|
};
|
3073
3072
|
|
3074
3073
|
const vars$e = {
|
3075
|
-
...compVars$
|
3076
|
-
...helperVars$
|
3074
|
+
...compVars$2,
|
3075
|
+
...helperVars$2,
|
3077
3076
|
};
|
3078
3077
|
|
3079
3078
|
var container$1 = /*#__PURE__*/Object.freeze({
|
@@ -3509,9 +3508,9 @@ const DividerClass = compose(
|
|
3509
3508
|
)(RawDivider);
|
3510
3509
|
|
3511
3510
|
const globalRefs$3 = getThemeRefs(globals);
|
3512
|
-
const compVars = DividerClass.cssVarList;
|
3511
|
+
const compVars$1 = DividerClass.cssVarList;
|
3513
3512
|
|
3514
|
-
const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
|
3513
|
+
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
3515
3514
|
{
|
3516
3515
|
thickness: '2px',
|
3517
3516
|
spacing: '10px',
|
@@ -3522,32 +3521,32 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
|
|
3522
3521
|
const divider = {
|
3523
3522
|
...helperTheme$1,
|
3524
3523
|
|
3525
|
-
[compVars.alignItems]: 'center',
|
3526
|
-
[compVars.flexDirection]: 'row',
|
3527
|
-
[compVars.alignSelf]: 'stretch',
|
3528
|
-
[compVars.hostWidth]: '100%',
|
3529
|
-
[compVars.stripeColor]: globalRefs$3.colors.surface.main,
|
3530
|
-
[compVars.stripeColorOpacity]: '0.5',
|
3531
|
-
[compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
|
3532
|
-
[compVars.labelTextWidth]: 'fit-content',
|
3533
|
-
[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
|
3534
|
-
[compVars.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
3524
|
+
[compVars$1.alignItems]: 'center',
|
3525
|
+
[compVars$1.flexDirection]: 'row',
|
3526
|
+
[compVars$1.alignSelf]: 'stretch',
|
3527
|
+
[compVars$1.hostWidth]: '100%',
|
3528
|
+
[compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
|
3529
|
+
[compVars$1.stripeColorOpacity]: '0.5',
|
3530
|
+
[compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
|
3531
|
+
[compVars$1.labelTextWidth]: 'fit-content',
|
3532
|
+
[compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
|
3533
|
+
[compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
|
3535
3534
|
|
3536
3535
|
_vertical: {
|
3537
|
-
[compVars.minHeight]: '200px',
|
3538
|
-
[compVars.flexDirection]: 'column',
|
3539
|
-
[compVars.hostWidth]: 'fit-content',
|
3540
|
-
[compVars.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
3541
|
-
[compVars.stripeVerticalThickness]: helperRefs$1.thickness,
|
3542
|
-
[compVars.labelTextWidth]: 'fit-content',
|
3543
|
-
[compVars.labelTextMaxWidth]: '100%',
|
3544
|
-
[compVars.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
3536
|
+
[compVars$1.minHeight]: '200px',
|
3537
|
+
[compVars$1.flexDirection]: 'column',
|
3538
|
+
[compVars$1.hostWidth]: 'fit-content',
|
3539
|
+
[compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
|
3540
|
+
[compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
|
3541
|
+
[compVars$1.labelTextWidth]: 'fit-content',
|
3542
|
+
[compVars$1.labelTextMaxWidth]: '100%',
|
3543
|
+
[compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
|
3545
3544
|
},
|
3546
3545
|
};
|
3547
3546
|
|
3548
3547
|
const vars$9 = {
|
3549
|
-
...compVars,
|
3550
|
-
...helperVars,
|
3548
|
+
...compVars$1,
|
3549
|
+
...helperVars$1,
|
3551
3550
|
};
|
3552
3551
|
|
3553
3552
|
var divider$1 = /*#__PURE__*/Object.freeze({
|
@@ -3919,9 +3918,9 @@ const LoaderRadialClass = compose(
|
|
3919
3918
|
)(RawLoaderRadial);
|
3920
3919
|
|
3921
3920
|
const globalRefs$1 = getThemeRefs(globals);
|
3922
|
-
const
|
3921
|
+
const compVars = LoaderRadialClass.cssVarList;
|
3923
3922
|
|
3924
|
-
const [helperTheme, helperRefs] = createHelperVars(
|
3923
|
+
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
3925
3924
|
{
|
3926
3925
|
spinnerColor: globalRefs$1.colors.surface.contrast,
|
3927
3926
|
mode: {
|
@@ -3939,29 +3938,33 @@ const [helperTheme, helperRefs] = createHelperVars(
|
|
3939
3938
|
const loaderRadial = {
|
3940
3939
|
...helperTheme,
|
3941
3940
|
|
3942
|
-
[
|
3943
|
-
[
|
3944
|
-
[
|
3945
|
-
[
|
3946
|
-
[
|
3947
|
-
[
|
3948
|
-
[
|
3949
|
-
[
|
3950
|
-
[
|
3951
|
-
[
|
3941
|
+
[compVars.animationDuration]: '2s',
|
3942
|
+
[compVars.animationTimingFunction]: 'linear',
|
3943
|
+
[compVars.animationIterationCount]: 'infinite',
|
3944
|
+
[compVars.spinnerBorderStyle]: 'solid',
|
3945
|
+
[compVars.spinnerBorderWidth]: '0.2em',
|
3946
|
+
[compVars.spinnerBorderRadius]: '50%',
|
3947
|
+
[compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
3948
|
+
[compVars.spinnerQuadrant2Color]: 'transparent',
|
3949
|
+
[compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
3950
|
+
[compVars.spinnerQuadrant4Color]: 'transparent',
|
3952
3951
|
|
3953
3952
|
size: {
|
3954
|
-
xs: { [
|
3955
|
-
sm: { [
|
3956
|
-
md: { [
|
3957
|
-
lg: { [
|
3958
|
-
xl: { [
|
3953
|
+
xs: { [compVars.spinnerSize]: '20px' },
|
3954
|
+
sm: { [compVars.spinnerSize]: '30px' },
|
3955
|
+
md: { [compVars.spinnerSize]: '40px' },
|
3956
|
+
lg: { [compVars.spinnerSize]: '60px' },
|
3957
|
+
xl: { [compVars.spinnerSize]: '80px' },
|
3959
3958
|
},
|
3960
3959
|
|
3961
3960
|
_hidden: {
|
3962
|
-
[
|
3961
|
+
[compVars.hostDisplay]: 'none',
|
3963
3962
|
},
|
3964
3963
|
};
|
3964
|
+
const vars$6 = {
|
3965
|
+
...compVars,
|
3966
|
+
...helperVars,
|
3967
|
+
};
|
3965
3968
|
|
3966
3969
|
var loaderRadial$1 = /*#__PURE__*/Object.freeze({
|
3967
3970
|
__proto__: null,
|