@descope/web-components-ui 1.0.346 → 1.0.348
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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,
|