@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/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.textContent;
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: { selector: () => ':host strong', property: 'font-weight' },
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,