@descope/web-components-ui 1.0.103 → 1.0.105
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +40 -34
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/890.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/descope-checkbox/Checkbox.js +10 -8
- package/src/components/descope-new-password/NewPassword.js +2 -1
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +3 -1
- package/src/components/descope-password-field/PasswordField.js +10 -0
- package/src/components/descope-password-field/passwordDraggableMixin.js +3 -2
- package/src/theme/components/checkbox.js +9 -22
- package/src/theme/components/passwordField.js +3 -0
package/dist/index.esm.js
CHANGED
@@ -1402,11 +1402,16 @@ const Checkbox = compose(
|
|
1402
1402
|
// Checkbox
|
1403
1403
|
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1404
1404
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
1405
|
-
|
1405
|
+
|
1406
|
+
checkboxSize: [
|
1406
1407
|
{ ...checkboxElement, property: 'width' },
|
1407
|
-
{ ...label$6, property: 'margin-left' }
|
1408
|
+
{ ...label$6, property: 'margin-left' },
|
1409
|
+
{ ...checkboxElement, property: 'height' },
|
1410
|
+
{ ...checkboxSurface, property: 'font-size' },
|
1411
|
+
{ ...component$1, property: 'font-size' },
|
1412
|
+
{ ...label$6, property: 'line-height' },
|
1413
|
+
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1408
1414
|
],
|
1409
|
-
checkboxHeight: { ...checkboxElement, property: 'height' },
|
1410
1415
|
|
1411
1416
|
checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
1412
1417
|
checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
@@ -1414,18 +1419,15 @@ const Checkbox = compose(
|
|
1414
1419
|
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
1415
1420
|
|
1416
1421
|
// Checkmark
|
1417
|
-
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component$1, property: 'font-size' }],
|
1418
1422
|
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
1419
1423
|
|
1420
1424
|
// Label
|
1421
1425
|
labelFontSize: [
|
1426
|
+
{ ...host$9, property: 'font-size' },
|
1427
|
+
{ ...checkboxElement, property: 'font-size' },
|
1422
1428
|
{ ...label$6, property: 'font-size' },
|
1423
1429
|
{ ...checkboxHiddenLabel$1, property: 'font-size' }
|
1424
1430
|
],
|
1425
|
-
labelLineHeight: [
|
1426
|
-
{ ...label$6, property: 'line-height' },
|
1427
|
-
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1428
|
-
],
|
1429
1431
|
labelFontWeight: [
|
1430
1432
|
{ ...label$6, property: 'font-weight' },
|
1431
1433
|
{ ...checkboxHiddenLabel$1, property: 'font-weight' }
|
@@ -2643,11 +2645,12 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
|
|
2643
2645
|
this.addEventListener('mousedown', (e) => {
|
2644
2646
|
if (this.isDraggable & this.isReadOnly) {
|
2645
2647
|
const inputEle = this.baseElement.querySelector('input');
|
2646
|
-
|
2647
2648
|
const prevType = inputEle.getAttribute('type');
|
2649
|
+
|
2648
2650
|
inputEle.setAttribute('type', 'text');
|
2651
|
+
setTimeout(() => inputEle.focus());
|
2649
2652
|
|
2650
|
-
const onComplete = () => {
|
2653
|
+
const onComplete = (e) => {
|
2651
2654
|
inputEle.setAttribute('type', prevType);
|
2652
2655
|
|
2653
2656
|
e.target.removeEventListener('mouseup', onComplete);
|
@@ -2672,6 +2675,7 @@ const {
|
|
2672
2675
|
inputElementPlaceholder,
|
2673
2676
|
revealButton,
|
2674
2677
|
revealButtonIcon,
|
2678
|
+
revealButtonIconOutline,
|
2675
2679
|
label: label$3,
|
2676
2680
|
requiredIndicator: requiredIndicator$2
|
2677
2681
|
} = {
|
@@ -2681,6 +2685,7 @@ const {
|
|
2681
2685
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2682
2686
|
revealButton: { selector: 'vaadin-password-field-button' },
|
2683
2687
|
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
2688
|
+
revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
|
2684
2689
|
label: { selector: '::part(label)' },
|
2685
2690
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
2686
2691
|
};
|
@@ -2693,6 +2698,14 @@ const PasswordField = compose(
|
|
2693
2698
|
wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
|
2694
2699
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
2695
2700
|
wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
|
2701
|
+
|
2702
|
+
revealButtonOutlineBoxShadow: [
|
2703
|
+
{
|
2704
|
+
...revealButtonIconOutline,
|
2705
|
+
property: 'box-shadow'
|
2706
|
+
}
|
2707
|
+
],
|
2708
|
+
|
2696
2709
|
labelTextColor: [
|
2697
2710
|
{ ...label$3, property: 'color' },
|
2698
2711
|
{ ...requiredIndicator$2, property: 'color' }
|
@@ -4737,7 +4750,8 @@ const customMixin = (superclass) =>
|
|
4737
4750
|
'label',
|
4738
4751
|
'has-confirm',
|
4739
4752
|
'invalid',
|
4740
|
-
'readonly'
|
4753
|
+
'readonly',
|
4754
|
+
'draggable'
|
4741
4755
|
]
|
4742
4756
|
});
|
4743
4757
|
}
|
@@ -4834,7 +4848,9 @@ const commonAttrs = [
|
|
4834
4848
|
'full-width',
|
4835
4849
|
'maxlength',
|
4836
4850
|
'invalid',
|
4837
|
-
'readonly'
|
4851
|
+
'readonly',
|
4852
|
+
'draggable'
|
4853
|
+
|
4838
4854
|
];
|
4839
4855
|
|
4840
4856
|
const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
|
@@ -5506,6 +5522,9 @@ const passwordField = {
|
|
5506
5522
|
[vars$e.outlineStyle]: 'solid',
|
5507
5523
|
[vars$e.outlineColor]: 'transparent',
|
5508
5524
|
|
5525
|
+
[vars$e.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
|
5526
|
+
|
5527
|
+
|
5509
5528
|
[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
|
5510
5529
|
[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
|
5511
5530
|
[vars$e.placeholderTextColor]: globalRefs$c.colors.surface.main,
|
@@ -5617,43 +5636,30 @@ const vars$c = Checkbox.cssVarList;
|
|
5617
5636
|
|
5618
5637
|
const checkbox = {
|
5619
5638
|
[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
|
5620
|
-
|
5621
|
-
[vars$c.labelFontSize]: '12px',
|
5622
|
-
[vars$c.labelFontWeight]: '400',
|
5623
|
-
[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
5624
5639
|
[vars$c.cursor]: 'pointer',
|
5625
5640
|
|
5626
|
-
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5627
|
-
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5628
|
-
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5629
|
-
|
5630
5641
|
[vars$c.checkboxRadius]: globalRefs$a.radius.xs,
|
5642
|
+
[vars$c.checkboxSize]: '2em',
|
5643
|
+
|
5644
|
+
[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
5645
|
+
[vars$c.labelMargin]: '0.5em',
|
5646
|
+
[vars$c.labelFontWeight]: '400',
|
5631
5647
|
|
5632
5648
|
size: {
|
5633
5649
|
xs: {
|
5634
|
-
[vars$c.labelFontSize]: '
|
5635
|
-
[vars$c.labelLineHeight]: '1.1em',
|
5636
|
-
[vars$c.checkmarkSize]: '18px',
|
5650
|
+
[vars$c.labelFontSize]: '8px',
|
5637
5651
|
},
|
5638
5652
|
sm: {
|
5639
|
-
[vars$c.labelFontSize]: '
|
5640
|
-
[vars$c.labelLineHeight]: '1.2em',
|
5641
|
-
[vars$c.checkmarkSize]: '22px',
|
5653
|
+
[vars$c.labelFontSize]: '10px',
|
5642
5654
|
},
|
5643
5655
|
md: {
|
5644
|
-
[vars$c.labelFontSize]: '
|
5645
|
-
[vars$c.labelLineHeight]: '1.35em',
|
5646
|
-
[vars$c.checkmarkSize]: '26px',
|
5656
|
+
[vars$c.labelFontSize]: '14px',
|
5647
5657
|
},
|
5648
5658
|
lg: {
|
5649
5659
|
[vars$c.labelFontSize]: '20px',
|
5650
|
-
[vars$c.labelLineHeight]: '1.5em',
|
5651
|
-
[vars$c.checkmarkSize]: '34px',
|
5652
5660
|
},
|
5653
5661
|
xl: {
|
5654
|
-
[vars$c.labelFontSize]: '
|
5655
|
-
[vars$c.labelLineHeight]: '1.75em',
|
5656
|
-
[vars$c.checkmarkSize]: '38px',
|
5662
|
+
[vars$c.labelFontSize]: '25px',
|
5657
5663
|
}
|
5658
5664
|
},
|
5659
5665
|
|