@descope/web-components-ui 1.0.297 → 1.0.299

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { NumberFieldClass } from './components/descope-number-field';
 export { PasscodeClass } from './components/descope-passcode';
 export { PasswordClass } from './components/descope-password';
 export { TextClass } from './components/text-components/descope-text';
-export { MarkdownContentClass } from './components/text-components/descope-markdown-content';
+export { EnrichedTextClass } from './components/text-components/descope-enriched-text';
 export { TextAreaClass } from './components/descope-text-area';
 export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';

package/dist/index.esm.js

@@ -3385,14 +3385,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() {
@@ -3405,7 +3405,7 @@ const markdownContentMixin = (superclass) =>
 
     init() {
       super.init();
-      this.#initMarkdown();
+      this.#initProcessor();
       this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
     }
 
@@ -3414,28 +3414,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);
@@ -3443,9 +3447,13 @@ const markdownContentMixin = (superclass) =>
         }
       }
     }
+
+    onReadOnlyChange(val) {
+      this.setAttribute('inert', val);
+    }
   };
 
-const MarkdownContentClass = compose(
+const EnrichedTextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
@@ -3461,22 +3469,22 @@ 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>
   `;
 }
 
-customElements.define(componentName$z, MarkdownContentClass);
+customElements.define(componentName$z, EnrichedTextClass);
 
 const componentName$y = getComponentName('text-area');
 
@@ -11537,9 +11545,9 @@ var text$1 = /*#__PURE__*/Object.freeze({
 });
 
 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,
@@ -11614,9 +11622,9 @@ const markdownContent = {
   },
 };
 
-var markdownContent$1 = /*#__PURE__*/Object.freeze({
+var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: markdownContent,
+  default: EnrichedText,
   vars: vars$q
 });
 
@@ -12567,7 +12575,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$1,
-  markdownContent: markdownContent$1,
+  EnrichedText: EnrichedText$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,
@@ -12652,5 +12660,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, MarkdownContentClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map