@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/cjs/index.cjs.js
CHANGED
@@ -1133,7 +1133,7 @@ const createProxy = ({
|
|
1133
1133
|
|
1134
1134
|
constructor() {
|
1135
1135
|
super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
|
1136
|
-
<style id="create-proxy">${isFunction(style) ? style() : style}</style>
|
1136
|
+
<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
|
1137
1137
|
<${wrappedEleName}>
|
1138
1138
|
${slots
|
1139
1139
|
.map(
|
@@ -4984,6 +4984,12 @@ const disableRules = [
|
|
4984
4984
|
'html_block',
|
4985
4985
|
];
|
4986
4986
|
|
4987
|
+
const decodeHTML = (html) => {
|
4988
|
+
const textArea = document.createElement('textarea');
|
4989
|
+
textArea.innerHTML = html;
|
4990
|
+
return textArea.value;
|
4991
|
+
};
|
4992
|
+
|
4987
4993
|
/* eslint-disable no-param-reassign */
|
4988
4994
|
|
4989
4995
|
const componentName$C = getComponentName('enriched-text');
|
@@ -5020,12 +5026,8 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
5020
5026
|
margin-bottom: 1em;
|
5021
5027
|
}
|
5022
5028
|
a {
|
5023
|
-
text-decoration: none;
|
5024
5029
|
cursor: pointer;
|
5025
5030
|
}
|
5026
|
-
a:hover {
|
5027
|
-
text-decoration: underline;
|
5028
|
-
}
|
5029
5031
|
blockquote {
|
5030
5032
|
padding: 0 2em;
|
5031
5033
|
}
|
@@ -5112,7 +5114,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
5112
5114
|
}
|
5113
5115
|
|
5114
5116
|
#initProcessor() {
|
5115
|
-
this.processor = new MarkdownIt();
|
5117
|
+
this.processor = new MarkdownIt('commonmark', { html: true });
|
5116
5118
|
this.#storeOrigRenderers();
|
5117
5119
|
this.#updateProcessorRules();
|
5118
5120
|
this.#customizeLinkRenderer();
|
@@ -5132,11 +5134,11 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
|
|
5132
5134
|
return;
|
5133
5135
|
}
|
5134
5136
|
|
5135
|
-
let html = this.
|
5137
|
+
let html = decodeHTML(this.innerHTML);
|
5136
5138
|
|
5137
5139
|
try {
|
5138
5140
|
const tokens = this.processor.parse(html, { references: undefined });
|
5139
|
-
html = this.processor.renderer.render(tokens, { breaks: true });
|
5141
|
+
html = this.processor.renderer.render(tokens, { html: true, breaks: true });
|
5140
5142
|
} catch (e) {
|
5141
5143
|
// eslint-disable-next-line no-console
|
5142
5144
|
console.warn('Not parsing invalid markdown token');
|
@@ -5162,11 +5164,16 @@ const EnrichedTextClass = compose(
|
|
5162
5164
|
fontSize: {},
|
5163
5165
|
fontFamily: {},
|
5164
5166
|
fontWeight: {},
|
5165
|
-
fontWeightBold:
|
5167
|
+
fontWeightBold: [
|
5168
|
+
{ selector: () => ':host strong', property: 'font-weight' },
|
5169
|
+
{ selector: () => ':host b', property: 'font-weight' },
|
5170
|
+
],
|
5166
5171
|
textColor: { property: 'color' },
|
5167
5172
|
textLineHeight: { property: 'line-height' },
|
5168
5173
|
textAlign: {},
|
5169
5174
|
linkColor: { selector: 'a', property: 'color' },
|
5175
|
+
linkTextDecoration: { selector: 'a', property: 'text-decoration' },
|
5176
|
+
linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
|
5170
5177
|
minHeight: {},
|
5171
5178
|
minWidth: {},
|
5172
5179
|
},
|
@@ -5190,10 +5197,6 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
|
|
5190
5197
|
}
|
5191
5198
|
:host a {
|
5192
5199
|
display: inline;
|
5193
|
-
text-decoration: none;
|
5194
|
-
}
|
5195
|
-
:host a:hover {
|
5196
|
-
text-decoration: underline;
|
5197
5200
|
}
|
5198
5201
|
</style>
|
5199
5202
|
<div>
|
@@ -5220,12 +5223,13 @@ class RawLink extends createBaseClass({ componentName: componentName$B, baseSele
|
|
5220
5223
|
|
5221
5224
|
const selectors$2 = {
|
5222
5225
|
host: { selector: () => ':host' },
|
5226
|
+
link: { selector: () => ':host a' },
|
5223
5227
|
anchor: {},
|
5224
5228
|
wrapper: { selector: () => ':host > div' },
|
5225
5229
|
text: { selector: () => TextClass.componentName },
|
5226
5230
|
};
|
5227
5231
|
|
5228
|
-
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
|
5232
|
+
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1, link: link$3 } = selectors$2;
|
5229
5233
|
|
5230
5234
|
const LinkClass = compose(
|
5231
5235
|
createStyleMixin({
|
@@ -5233,6 +5237,7 @@ const LinkClass = compose(
|
|
5233
5237
|
hostWidth: { ...host$h, property: 'width' },
|
5234
5238
|
hostDirection: { ...text$1, property: 'direction' },
|
5235
5239
|
textAlign: wrapper$1,
|
5240
|
+
textDecoration: { ...link$3, property: 'text-decoration', fallback: 'none' },
|
5236
5241
|
textColor: [
|
5237
5242
|
{ ...anchor, property: 'color' },
|
5238
5243
|
{ ...text$1, property: TextClass.cssVarList.textColor },
|
@@ -5260,6 +5265,8 @@ const EnrichedText = {
|
|
5260
5265
|
[vars$u.textColor]: globalRefs$l.colors.surface.dark,
|
5261
5266
|
|
5262
5267
|
[vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
|
5268
|
+
[vars$u.linkTextDecoration]: 'none',
|
5269
|
+
[vars$u.linkHoverTextDecoration]: 'underline',
|
5263
5270
|
|
5264
5271
|
[vars$u.minWidth]: '0.25em',
|
5265
5272
|
[vars$u.minHeight]: '1.35em',
|
@@ -5353,6 +5360,10 @@ const link$1 = {
|
|
5353
5360
|
[vars$t.hostWidth]: '100%',
|
5354
5361
|
},
|
5355
5362
|
|
5363
|
+
_hover: {
|
5364
|
+
[vars$t.textDecoration]: 'underline',
|
5365
|
+
},
|
5366
|
+
|
5356
5367
|
mode: {
|
5357
5368
|
secondary: {
|
5358
5369
|
[vars$t.textColor]: globalRefs$k.colors.secondary.main,
|
@@ -12576,6 +12587,9 @@ const RadioButtonClass = compose(
|
|
12576
12587
|
radioMargin: { selector: '::part(radio)', property: 'margin' },
|
12577
12588
|
radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
|
12578
12589
|
radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
|
12590
|
+
radioBorderColor: { selector: '::part(radio)', property: 'border-color', fallback: 'none' },
|
12591
|
+
radioBorderWidth: { selector: '::part(radio)', property: 'border-width', fallback: 0 },
|
12592
|
+
radioBorderStyle: { selector: '::part(radio)', property: 'border-style', fallback: 'solid' },
|
12579
12593
|
},
|
12580
12594
|
}),
|
12581
12595
|
composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
|
@@ -12813,6 +12827,8 @@ const radioButton = {
|
|
12813
12827
|
[vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
|
12814
12828
|
[vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
|
12815
12829
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
|
12830
|
+
[vars$1.radioBorderColor]: 'none',
|
12831
|
+
[vars$1.radioBorderWidth]: 0,
|
12816
12832
|
|
12817
12833
|
_checked: {
|
12818
12834
|
[vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
|