@descope/web-components-ui 1.0.340 → 1.0.342
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +70 -29
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +70 -29
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-enriched-text-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-password-index-js.js +1 -1
- package/package.json +2 -3
- package/src/components/descope-enriched-text/EnrichedTextClass.js +35 -7
- package/src/components/descope-enriched-text/consts.js +14 -13
- package/src/components/descope-password/PasswordClass.js +18 -10
- package/src/theme/components/enrichedText.js +4 -0
package/dist/index.esm.js
CHANGED
@@ -3453,18 +3453,26 @@ const componentName$D = getComponentName('password');
|
|
3453
3453
|
|
3454
3454
|
const customMixin$7 = (superclass) =>
|
3455
3455
|
class PasswordFieldMixinClass extends superclass {
|
3456
|
-
|
3457
|
-
|
3458
|
-
|
3459
|
-
|
3460
|
-
this.setAttribute('password-visible', 'false');
|
3456
|
+
init() {
|
3457
|
+
super.init?.();
|
3458
|
+
|
3459
|
+
this.handleCaretOnVisibilityChange();
|
3461
3460
|
}
|
3462
3461
|
|
3463
|
-
|
3464
|
-
|
3465
|
-
|
3466
|
-
|
3467
|
-
|
3462
|
+
get caretPosition() {
|
3463
|
+
return this.value?.length || 0;
|
3464
|
+
}
|
3465
|
+
|
3466
|
+
handleCaretOnVisibilityChange() {
|
3467
|
+
const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(
|
3468
|
+
this.baseElement
|
3469
|
+
);
|
3470
|
+
this.baseElement._togglePasswordVisibility = () => {
|
3471
|
+
setTimeout(() => {
|
3472
|
+
origTogglePasswordVisibility();
|
3473
|
+
this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
|
3474
|
+
});
|
3475
|
+
};
|
3468
3476
|
}
|
3469
3477
|
|
3470
3478
|
getAutocompleteType() {
|
@@ -3636,25 +3644,30 @@ const PasswordClass = compose(
|
|
3636
3644
|
|
3637
3645
|
customElements.define(componentName$D, PasswordClass);
|
3638
3646
|
|
3639
|
-
const
|
3640
|
-
|
3641
|
-
|
3642
|
-
|
3643
|
-
|
3644
|
-
|
3645
|
-
|
3646
|
-
|
3647
|
-
|
3648
|
-
|
3649
|
-
|
3650
|
-
|
3651
|
-
|
3647
|
+
const disableRules = [
|
3648
|
+
'blockquote',
|
3649
|
+
'list',
|
3650
|
+
'image',
|
3651
|
+
'table',
|
3652
|
+
'code',
|
3653
|
+
'hr',
|
3654
|
+
'backticks',
|
3655
|
+
'fence',
|
3656
|
+
'reference',
|
3657
|
+
'heading',
|
3658
|
+
'lheading',
|
3659
|
+
'html_block',
|
3660
|
+
];
|
3661
|
+
|
3662
|
+
/* eslint-disable no-param-reassign */
|
3652
3663
|
|
3653
3664
|
const componentName$C = getComponentName('enriched-text');
|
3654
3665
|
|
3655
3666
|
let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
|
3656
3667
|
#origLinkRenderer;
|
3657
3668
|
|
3669
|
+
#origEmRenderer;
|
3670
|
+
|
3658
3671
|
constructor() {
|
3659
3672
|
super();
|
3660
3673
|
|
@@ -3663,6 +3676,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3663
3676
|
:host {
|
3664
3677
|
display: inline-block;
|
3665
3678
|
line-height: 1em;
|
3679
|
+
word-break: break-all;
|
3666
3680
|
}
|
3667
3681
|
:host > slot {
|
3668
3682
|
width: 100%;
|
@@ -3690,6 +3704,12 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3690
3704
|
blockquote {
|
3691
3705
|
padding: 0 2em;
|
3692
3706
|
}
|
3707
|
+
u {
|
3708
|
+
text-decoration: underline
|
3709
|
+
}
|
3710
|
+
s {
|
3711
|
+
color: currentColor;
|
3712
|
+
}
|
3693
3713
|
</style>
|
3694
3714
|
<slot part="text-wrapper" style="display:none"></slot>
|
3695
3715
|
<div class="content"></div>
|
@@ -3720,6 +3740,18 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3720
3740
|
}
|
3721
3741
|
}
|
3722
3742
|
|
3743
|
+
// We're overriding the rule for em with single underscore to perform as underline. (_underline_)
|
3744
|
+
customUnderlineRenderer() {
|
3745
|
+
this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
|
3746
|
+
if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
|
3747
|
+
return this.#origEmRenderer(tokens, idx, options, env, self);
|
3748
|
+
};
|
3749
|
+
this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
|
3750
|
+
if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
|
3751
|
+
return this.#origEmRenderer(tokens, idx, options, env, self);
|
3752
|
+
};
|
3753
|
+
}
|
3754
|
+
|
3723
3755
|
#customizeLinkRenderer() {
|
3724
3756
|
if (this.linkTargetBlank) {
|
3725
3757
|
this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
@@ -3733,23 +3765,25 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3733
3765
|
}
|
3734
3766
|
}
|
3735
3767
|
|
3736
|
-
#
|
3768
|
+
#disableCustomRules() {
|
3737
3769
|
if (!this.processor) {
|
3738
3770
|
return;
|
3739
3771
|
}
|
3740
|
-
|
3741
|
-
const customRuleSet = textRuleSet;
|
3742
|
-
this.processor.configure(customRuleSet || {});
|
3772
|
+
this.processor.disable(disableRules);
|
3743
3773
|
}
|
3744
3774
|
|
3745
3775
|
#updateProcessorRules() {
|
3746
|
-
this.#
|
3776
|
+
this.#disableCustomRules();
|
3747
3777
|
}
|
3748
3778
|
|
3749
3779
|
#storeOrigRenderers() {
|
3750
3780
|
const defaultLinkRenderer = (tokens, idx, options, _, self) =>
|
3751
3781
|
self.renderToken(tokens, idx, options);
|
3752
3782
|
this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
|
3783
|
+
|
3784
|
+
const defaultStrongRenderer = (tokens, idx, options, _, self) =>
|
3785
|
+
self.renderToken(tokens, idx, options);
|
3786
|
+
this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
|
3753
3787
|
}
|
3754
3788
|
|
3755
3789
|
#initProcessor() {
|
@@ -3757,6 +3791,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3757
3791
|
this.#storeOrigRenderers();
|
3758
3792
|
this.#updateProcessorRules();
|
3759
3793
|
this.#customizeLinkRenderer();
|
3794
|
+
this.customUnderlineRenderer();
|
3760
3795
|
}
|
3761
3796
|
|
3762
3797
|
get linkTargetBlank() {
|
@@ -3775,7 +3810,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3775
3810
|
let html = this.textContent;
|
3776
3811
|
|
3777
3812
|
try {
|
3778
|
-
const tokens = this.processor.parse(
|
3813
|
+
const tokens = this.processor.parse(html, { references: undefined });
|
3779
3814
|
html = this.processor.renderer.render(tokens, { breaks: true });
|
3780
3815
|
} catch (e) {
|
3781
3816
|
// eslint-disable-next-line no-console
|
@@ -3802,10 +3837,12 @@ const EnrichedTextClass = compose(
|
|
3802
3837
|
fontSize: {},
|
3803
3838
|
fontFamily: {},
|
3804
3839
|
fontWeight: {},
|
3840
|
+
fontWeightBold: { selector: () => ':host strong', property: 'font-weight' },
|
3805
3841
|
textColor: { property: 'color' },
|
3806
3842
|
textLineHeight: { property: 'line-height' },
|
3807
3843
|
textAlign: {},
|
3808
3844
|
linkColor: { selector: 'a', property: 'color' },
|
3845
|
+
minHeight: {},
|
3809
3846
|
},
|
3810
3847
|
}),
|
3811
3848
|
createStyleMixin({ componentNameOverride: getComponentName('link') }),
|
@@ -12705,6 +12742,7 @@ const EnrichedText = {
|
|
12705
12742
|
|
12706
12743
|
[vars$u.fontSize]: globalRefs$l.typography.body1.size,
|
12707
12744
|
[vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
|
12745
|
+
[vars$u.fontWeightBold]: '900',
|
12708
12746
|
[vars$u.fontFamily]: globalRefs$l.typography.body1.font,
|
12709
12747
|
|
12710
12748
|
[vars$u.textLineHeight]: '1.35em',
|
@@ -12713,6 +12751,9 @@ const EnrichedText = {
|
|
12713
12751
|
|
12714
12752
|
[vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
|
12715
12753
|
|
12754
|
+
[vars$u.minWidth]: '0.25em',
|
12755
|
+
[vars$u.minHeight]: '1.35em',
|
12756
|
+
|
12716
12757
|
mode: {
|
12717
12758
|
primary: {
|
12718
12759
|
[vars$u.textColor]: globalRefs$l.colors.surface.contrast,
|