@descope/web-components-ui 1.0.297 → 1.0.299

package/dist/cjs/index.cjs.js

@@ -4619,14 +4619,14 @@ const onClipboardCopy = (e) => {
   e.preventDefault();
 };
 
-const componentName$z = getComponentName('markdown-content');
+const componentName$z = getComponentName('enriched-text');
 
-const BaseMarkdownContentClass = createBaseTextClass(componentName$z);
+const BaseEnrichedTextClass = createBaseTextClass(componentName$z);
 
-const markdownContentMixin = (superclass) =>
-  class MarkdownContentMixinClass extends superclass {
+const EnrichedTextMixin = (superclass) =>
+  class EnrichedTextMixinClass extends superclass {
     static get observedAttributes() {
-      return ['disabled-rules', 'line-break'];
+      return ['disabled-rules', 'line-break', 'readonly'];
     }
 
     get lineBreak() {
@@ -4639,7 +4639,7 @@ const markdownContentMixin = (superclass) =>
 
     init() {
       super.init();
-      this.#initMarkdown();
+      this.#initProcessor();
       this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
     }
 
@@ -4648,28 +4648,32 @@ const markdownContentMixin = (superclass) =>
 
       if (attrName === 'disabled-rules') {
         if (newValue !== oldValue) {
-          this.#initMarkdown(newValue);
+          this.#initProcessor(newValue);
           this.#parseChildren();
         }
       }
+
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue !== null);
+      }
     }
 
-    #initMarkdown() {
-      this.markdown = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
+    #initProcessor() {
+      this.processor = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
     }
 
     #parseChildren() {
       const node = this.textSlot.assignedNodes({ flatten: true })?.[0];
 
       if (node && node.nodeType === Node.TEXT_NODE) {
-        const tokens = this.markdown.parse(node.textContent, { references: undefined });
-        const result = this.markdown.renderer.render(enrichTokens(tokens), {
+        const tokens = this.processor.parse(node.textContent, { references: undefined });
+        const result = this.processor.renderer.render(enrichTokens(tokens), {
           breaks: this.lineBreak,
         });
 
         if (result !== node.textContent) {
           const span = document.createElement('div');
-          span.classList.add('markdown-wrapper');
+          span.classList.add('enriched-text');
           // eslint-disable-next-line no-use-before-define
           span.innerHTML = `${getStyleReset()}${result}`;
           span.addEventListener('copy', onClipboardCopy);
@@ -4677,9 +4681,13 @@ const markdownContentMixin = (superclass) =>
         }
       }
     }
+
+    onReadOnlyChange(val) {
+      this.setAttribute('inert', val);
+    }
   };
 
-const MarkdownContentClass = compose(
+const EnrichedTextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
@@ -4695,25 +4703,25 @@ const MarkdownContentClass = compose(
   }),
   draggableMixin,
   componentNameValidationMixin,
-  markdownContentMixin,
+  EnrichedTextMixin,
   hideWhenEmptyMixin
-)(BaseMarkdownContentClass);
+)(BaseEnrichedTextClass);
 
 function getStyleReset() {
   return `
   <style>
-    .markdown-wrapper > * { margin:0 }
-    .markdown-wrapper > *:not(:only-child):not(:last-child) {
-      margin-bottom: var(${MarkdownContentClass.cssVarList.textLineHeight})
+    .enriched-text > * { margin:0 }
+    .enriched-text > *:not(:only-child):not(:last-child) {
+      margin-bottom: var(${EnrichedTextClass.cssVarList.textLineHeight})
     }
   </style>
   `;
 }
 
 const globalRefs$i = getThemeRefs(globals);
-const vars$q = MarkdownContentClass.cssVarList;
+const vars$q = EnrichedTextClass.cssVarList;
 
-const markdownContent = {
+const EnrichedText = {
   [vars$q.hostDirection]: globalRefs$i.direction,
 
   [vars$q.fontSize]: globalRefs$i.typography.body1.size,
@@ -4788,9 +4796,9 @@ const markdownContent = {
   },
 };
 
-var markdownContent$1 = /*#__PURE__*/Object.freeze({
+var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: markdownContent,
+  default: EnrichedText,
   vars: vars$q
 });
 
@@ -11448,7 +11456,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$3,
-  markdownContent: markdownContent$1,
+  EnrichedText: EnrichedText$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,
@@ -11799,6 +11807,7 @@ exports.CheckboxClass = CheckboxClass;
 exports.ContainerClass = ContainerClass;
 exports.DividerClass = DividerClass;
 exports.EmailFieldClass = EmailFieldClass;
+exports.EnrichedTextClass = EnrichedTextClass;
 exports.GridClass = GridClass;
 exports.ImageClass = ImageClass;
 exports.LinkClass = LinkClass;
@@ -11806,7 +11815,6 @@ exports.LoaderLinearClass = LoaderLinearClass;
 exports.LoaderRadialClass = LoaderRadialClass;
 exports.LogoClass = LogoClass;
 exports.MappingsFieldClass = MappingsFieldClass;
-exports.MarkdownContentClass = MarkdownContentClass;
 exports.ModalClass = ModalClass;
 exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
 exports.NewPasswordClass = NewPasswordClass;