@descope/web-components-ui 1.0.127 → 1.0.128
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +32 -26
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +32 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/481.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-password/PasswordClass.js +4 -0
- package/src/theme/components/password.js +4 -0
package/dist/index.esm.js
CHANGED
@@ -2767,6 +2767,7 @@ const {
|
|
2767
2767
|
inputField: inputField$3,
|
2768
2768
|
inputElement,
|
2769
2769
|
inputElementPlaceholder,
|
2770
|
+
revealButtonContainer,
|
2770
2771
|
revealButtonIcon,
|
2771
2772
|
label: label$4,
|
2772
2773
|
requiredIndicator: requiredIndicator$3,
|
@@ -2777,6 +2778,7 @@ const {
|
|
2777
2778
|
inputField: { selector: '::part(input-field)' },
|
2778
2779
|
inputElement: { selector: '> input' },
|
2779
2780
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2781
|
+
revealButtonContainer: { selector: () => '::part(reveal-button)' },
|
2780
2782
|
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
2781
2783
|
label: { selector: '::part(label)' },
|
2782
2784
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -2822,6 +2824,8 @@ const PasswordClass = compose(
|
|
2822
2824
|
{ ...revealButtonIcon, property: 'color' }
|
2823
2825
|
],
|
2824
2826
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2827
|
+
|
2828
|
+
revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
|
2825
2829
|
}
|
2826
2830
|
}),
|
2827
2831
|
draggableMixin,
|
@@ -5527,15 +5531,15 @@ const globals = {
|
|
5527
5531
|
};
|
5528
5532
|
const vars$m = getThemeVars(globals);
|
5529
5533
|
|
5530
|
-
const globalRefs$
|
5534
|
+
const globalRefs$c = getThemeRefs(globals);
|
5531
5535
|
const compVars$2 = ButtonClass.cssVarList;
|
5532
5536
|
|
5533
5537
|
const mode = {
|
5534
|
-
primary: globalRefs$
|
5535
|
-
secondary: globalRefs$
|
5536
|
-
success: globalRefs$
|
5537
|
-
error: globalRefs$
|
5538
|
-
surface: globalRefs$
|
5538
|
+
primary: globalRefs$c.colors.primary,
|
5539
|
+
secondary: globalRefs$c.colors.secondary,
|
5540
|
+
success: globalRefs$c.colors.success,
|
5541
|
+
error: globalRefs$c.colors.error,
|
5542
|
+
surface: globalRefs$c.colors.surface
|
5539
5543
|
};
|
5540
5544
|
|
5541
5545
|
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
|
@@ -5546,11 +5550,11 @@ const horizontalPaddingRatio = 2;
|
|
5546
5550
|
const button = {
|
5547
5551
|
...helperTheme$3,
|
5548
5552
|
|
5549
|
-
[compVars$2.fontFamily]: globalRefs$
|
5553
|
+
[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
|
5550
5554
|
|
5551
5555
|
[compVars$2.cursor]: 'pointer',
|
5552
5556
|
|
5553
|
-
[compVars$2.borderRadius]: globalRefs$
|
5557
|
+
[compVars$2.borderRadius]: globalRefs$c.radius.sm,
|
5554
5558
|
[compVars$2.borderWidth]: '2px',
|
5555
5559
|
[compVars$2.borderStyle]: 'solid',
|
5556
5560
|
[compVars$2.borderColor]: 'transparent',
|
@@ -5633,28 +5637,28 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
5633
5637
|
});
|
5634
5638
|
|
5635
5639
|
const componentName = getComponentName('input-wrapper');
|
5636
|
-
const globalRefs$
|
5640
|
+
const globalRefs$b = getThemeRefs(globals);
|
5637
5641
|
|
5638
5642
|
const [theme$1, refs, vars$k] = createHelperVars({
|
5639
|
-
labelTextColor: globalRefs$
|
5640
|
-
valueTextColor: globalRefs$
|
5641
|
-
placeholderTextColor: globalRefs$
|
5643
|
+
labelTextColor: globalRefs$b.colors.surface.contrast,
|
5644
|
+
valueTextColor: globalRefs$b.colors.surface.contrast,
|
5645
|
+
placeholderTextColor: globalRefs$b.colors.surface.main,
|
5642
5646
|
requiredIndicator: "'*'",
|
5643
5647
|
|
5644
|
-
borderWidth: globalRefs$
|
5645
|
-
borderRadius: globalRefs$
|
5648
|
+
borderWidth: globalRefs$b.border.xs,
|
5649
|
+
borderRadius: globalRefs$b.radius.xs,
|
5646
5650
|
borderColor: 'transparent',
|
5647
5651
|
|
5648
|
-
outlineWidth: globalRefs$
|
5652
|
+
outlineWidth: globalRefs$b.border.sm,
|
5649
5653
|
outlineStyle: 'solid',
|
5650
5654
|
outlineColor: 'transparent',
|
5651
5655
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
5652
5656
|
|
5653
5657
|
inputHeight: '2em',
|
5654
5658
|
|
5655
|
-
backgroundColor: globalRefs$
|
5659
|
+
backgroundColor: globalRefs$b.colors.surface.light,
|
5656
5660
|
|
5657
|
-
fontFamily: globalRefs$
|
5661
|
+
fontFamily: globalRefs$b.fonts.font1.family,
|
5658
5662
|
|
5659
5663
|
size: {
|
5660
5664
|
xs: { fontSize: '8px' },
|
@@ -5669,26 +5673,26 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
5669
5673
|
},
|
5670
5674
|
|
5671
5675
|
_focused: {
|
5672
|
-
outlineColor: globalRefs$
|
5676
|
+
outlineColor: globalRefs$b.colors.surface.main,
|
5673
5677
|
_invalid: {
|
5674
|
-
outlineColor: globalRefs$
|
5678
|
+
outlineColor: globalRefs$b.colors.error.main,
|
5675
5679
|
}
|
5676
5680
|
},
|
5677
5681
|
|
5678
5682
|
_bordered: {
|
5679
|
-
outlineWidth: globalRefs$
|
5680
|
-
borderColor: globalRefs$
|
5683
|
+
outlineWidth: globalRefs$b.border.xs,
|
5684
|
+
borderColor: globalRefs$b.colors.surface.main,
|
5681
5685
|
borderStyle: 'solid',
|
5682
5686
|
_invalid: {
|
5683
|
-
borderColor: globalRefs$
|
5687
|
+
borderColor: globalRefs$b.colors.error.main,
|
5684
5688
|
}
|
5685
5689
|
},
|
5686
5690
|
|
5687
5691
|
_disabled: {
|
5688
|
-
labelTextColor: globalRefs$
|
5689
|
-
valueTextColor: globalRefs$
|
5690
|
-
placeholderTextColor: globalRefs$
|
5691
|
-
backgroundColor: globalRefs$
|
5692
|
+
labelTextColor: globalRefs$b.colors.surface.main,
|
5693
|
+
valueTextColor: globalRefs$b.colors.surface.dark,
|
5694
|
+
placeholderTextColor: globalRefs$b.colors.surface.dark,
|
5695
|
+
backgroundColor: globalRefs$b.colors.surface.main
|
5692
5696
|
}
|
5693
5697
|
}, componentName);
|
5694
5698
|
|
@@ -5728,6 +5732,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
5728
5732
|
vars: vars$j
|
5729
5733
|
});
|
5730
5734
|
|
5735
|
+
const globalRefs$a = getThemeRefs(globals);
|
5731
5736
|
const vars$i = PasswordClass.cssVarList;
|
5732
5737
|
|
5733
5738
|
const password = {
|
@@ -5748,6 +5753,7 @@ const password = {
|
|
5748
5753
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
5749
5754
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
5750
5755
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
5756
|
+
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md
|
5751
5757
|
};
|
5752
5758
|
|
5753
5759
|
var password$1 = /*#__PURE__*/Object.freeze({
|