@descope/web-components-ui 1.0.346 → 1.0.348
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +30 -14
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +30 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-enriched-text-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-radio-group-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-enriched-text/EnrichedTextClass.js +10 -8
- package/src/components/descope-enriched-text/helpers.js +5 -0
- package/src/components/descope-link/LinkClass.js +3 -5
- package/src/components/descope-radio-group/RadioButtonClass.js +3 -0
- package/src/mixins/createProxy.js +1 -1
- package/src/theme/components/enrichedText.js +2 -0
- package/src/theme/components/link.js +4 -0
- package/src/theme/components/radioGroup/radioButton.js +2 -0
package/dist/index.esm.js
CHANGED
@@ -719,7 +719,7 @@ const createProxy = ({
|
|
719
719
|
|
720
720
|
constructor() {
|
721
721
|
super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
|
722
|
-
<style id="create-proxy">${isFunction(style) ? style() : style}</style>
|
722
|
+
<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
|
723
723
|
<${wrappedEleName}>
|
724
724
|
${slots
|
725
725
|
.map(
|
@@ -2675,10 +2675,6 @@ class RawLink extends createBaseClass({ componentName: componentName$L, baseSele
|
|
2675
2675
|
}
|
2676
2676
|
:host a {
|
2677
2677
|
display: inline;
|
2678
|
-
text-decoration: none;
|
2679
|
-
}
|
2680
|
-
:host a:hover {
|
2681
|
-
text-decoration: underline;
|
2682
2678
|
}
|
2683
2679
|
</style>
|
2684
2680
|
<div>
|
@@ -2705,12 +2701,13 @@ class RawLink extends createBaseClass({ componentName: componentName$L, baseSele
|
|
2705
2701
|
|
2706
2702
|
const selectors$1 = {
|
2707
2703
|
host: { selector: () => ':host' },
|
2704
|
+
link: { selector: () => ':host a' },
|
2708
2705
|
anchor: {},
|
2709
2706
|
wrapper: { selector: () => ':host > div' },
|
2710
2707
|
text: { selector: () => TextClass.componentName },
|
2711
2708
|
};
|
2712
2709
|
|
2713
|
-
const { anchor, text: text$2, host: host$h, wrapper: wrapper$1 } = selectors$1;
|
2710
|
+
const { anchor, text: text$2, host: host$h, wrapper: wrapper$1, link: link$3 } = selectors$1;
|
2714
2711
|
|
2715
2712
|
const LinkClass = compose(
|
2716
2713
|
createStyleMixin({
|
@@ -2718,6 +2715,7 @@ const LinkClass = compose(
|
|
2718
2715
|
hostWidth: { ...host$h, property: 'width' },
|
2719
2716
|
hostDirection: { ...text$2, property: 'direction' },
|
2720
2717
|
textAlign: wrapper$1,
|
2718
|
+
textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
|
2721
2719
|
textColor: [
|
2722
2720
|
{ ...anchor, property: 'color' },
|
2723
2721
|
{ ...text$2, property: TextClass.cssVarList.textColor },
|
@@ -3660,6 +3658,12 @@ const disableRules = [
|
|
3660
3658
|
'html_block',
|
3661
3659
|
];
|
3662
3660
|
|
3661
|
+
const decodeHTML = (html) => {
|
3662
|
+
const textArea = document.createElement('textarea');
|
3663
|
+
textArea.innerHTML = html;
|
3664
|
+
return textArea.value;
|
3665
|
+
};
|
3666
|
+
|
3663
3667
|
/* eslint-disable no-param-reassign */
|
3664
3668
|
|
3665
3669
|
const componentName$C = getComponentName('enriched-text');
|
@@ -3696,12 +3700,8 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3696
3700
|
margin-bottom: 1em;
|
3697
3701
|
}
|
3698
3702
|
a {
|
3699
|
-
text-decoration: none;
|
3700
3703
|
cursor: pointer;
|
3701
3704
|
}
|
3702
|
-
a:hover {
|
3703
|
-
text-decoration: underline;
|
3704
|
-
}
|
3705
3705
|
blockquote {
|
3706
3706
|
padding: 0 2em;
|
3707
3707
|
}
|
@@ -3788,7 +3788,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3788
3788
|
}
|
3789
3789
|
|
3790
3790
|
#initProcessor() {
|
3791
|
-
this.processor = new MarkdownIt();
|
3791
|
+
this.processor = new MarkdownIt('commonmark', { html: true });
|
3792
3792
|
this.#storeOrigRenderers();
|
3793
3793
|
this.#updateProcessorRules();
|
3794
3794
|
this.#customizeLinkRenderer();
|
@@ -3808,11 +3808,11 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
3808
3808
|
return;
|
3809
3809
|
}
|
3810
3810
|
|
3811
|
-
let html = this.
|
3811
|
+
let html = decodeHTML(this.innerHTML);
|
3812
3812
|
|
3813
3813
|
try {
|
3814
3814
|
const tokens = this.processor.parse(html, { references: undefined });
|
3815
|
-
html = this.processor.renderer.render(tokens, { breaks: true });
|
3815
|
+
html = this.processor.renderer.render(tokens, { html: true, breaks: true });
|
3816
3816
|
} catch (e) {
|
3817
3817
|
// eslint-disable-next-line no-console
|
3818
3818
|
console.warn('Not parsing invalid markdown token');
|
@@ -3838,11 +3838,16 @@ const EnrichedTextClass = compose(
|
|
3838
3838
|
fontSize: {},
|
3839
3839
|
fontFamily: {},
|
3840
3840
|
fontWeight: {},
|
3841
|
-
fontWeightBold:
|
3841
|
+
fontWeightBold: [
|
3842
|
+
{ selector: () => ':host strong', property: 'font-weight' },
|
3843
|
+
{ selector: () => ':host b', property: 'font-weight' },
|
3844
|
+
],
|
3842
3845
|
textColor: { property: 'color' },
|
3843
3846
|
textLineHeight: { property: 'line-height' },
|
3844
3847
|
textAlign: {},
|
3845
3848
|
linkColor: { selector: 'a', property: 'color' },
|
3849
|
+
linkTextDecoration: { selector: 'a', property: 'text-decoration' },
|
3850
|
+
linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
|
3846
3851
|
minHeight: {},
|
3847
3852
|
minWidth: {},
|
3848
3853
|
},
|
@@ -11281,6 +11286,9 @@ const RadioButtonClass = compose(
|
|
11281
11286
|
radioMargin: { selector: '::part(radio)', property: 'margin' },
|
11282
11287
|
radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
|
11283
11288
|
radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
|
11289
|
+
radioBorderColor: { selector: '::part(radio)', property: 'border-color', fallback: 'none' },
|
11290
|
+
radioBorderWidth: { selector: '::part(radio)', property: 'border-width', fallback: 0 },
|
11291
|
+
radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
|
11284
11292
|
},
|
11285
11293
|
}),
|
11286
11294
|
composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
@@ -12759,6 +12767,8 @@ const EnrichedText = {
|
|
12759
12767
|
[vars$u.textColor]: globalRefs$l.colors.surface.dark,
|
12760
12768
|
|
12761
12769
|
[vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
|
12770
|
+
[vars$u.linkTextDecoration]: 'none',
|
12771
|
+
[vars$u.linkHoverTextDecoration]: 'underline',
|
12762
12772
|
|
12763
12773
|
[vars$u.minWidth]: '0.25em',
|
12764
12774
|
[vars$u.minHeight]: '1.35em',
|
@@ -12852,6 +12862,10 @@ const link = {
|
|
12852
12862
|
[vars$t.hostWidth]: '100%',
|
12853
12863
|
},
|
12854
12864
|
|
12865
|
+
_hover: {
|
12866
|
+
[vars$t.textDecoration]: 'underline',
|
12867
|
+
},
|
12868
|
+
|
12855
12869
|
mode: {
|
12856
12870
|
secondary: {
|
12857
12871
|
[vars$t.textColor]: globalRefs$k.colors.secondary.main,
|
@@ -14018,6 +14032,8 @@ const radioButton = {
|
|
14018
14032
|
[vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
|
14019
14033
|
[vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
|
14020
14034
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
|
14035
|
+
[vars$1.radioBorderColor]: 'none',
|
14036
|
+
[vars$1.radioBorderWidth]: 0,
|
14021
14037
|
|
14022
14038
|
_checked: {
|
14023
14039
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
|