@descope/web-components-ui 1.0.340 → 1.0.342

package/dist/cjs/index.cjs.js

@@ -3541,18 +3541,26 @@ const componentName$O = getComponentName('password');
 
 const customMixin$9 = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
-    hidePasswordVisibility(input) {
-      // handle input element's type
-      input.setAttribute('type', 'password');
-      // handle vaadin's `password-visible` attribute
-      this.setAttribute('password-visible', 'false');
+    init() {
+      super.init?.();
+
+      this.handleCaretOnVisibilityChange();
     }
 
-    showPasswordVisibility(input) {
-      // handle input element's type
-      input.setAttribute('type', 'text');
-      // handle vaadin's `password-visible` attribute
-      this.setAttribute('password-visible', 'true');
+    get caretPosition() {
+      return this.value?.length || 0;
+    }
+
+    handleCaretOnVisibilityChange() {
+      const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(
+        this.baseElement
+      );
+      this.baseElement._togglePasswordVisibility = () => {
+        setTimeout(() => {
+          origTogglePasswordVisibility();
+          this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
+        });
+      };
     }
 
     getAutocompleteType() {
@@ -4959,25 +4967,30 @@ var text$3 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const textRuleSet = {
-  components: {
-    core: {
-      rules: ['block', 'inline'],
-    },
-    block: {
-      rules: ['blockquote', 'code', 'heading', 'list', 'paragraph', 'list'],
-    },
-    inline: {
-      rules: ['backticks', 'strikethrough', 'link', 'emphasis', 'strikethrough', 'newline', 'text'],
-    },
-  },
-};
+const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];
+
+/* eslint-disable no-param-reassign */
 
 const componentName$C = getComponentName('enriched-text');
 
 let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
+  #origEmRenderer;
+
   constructor() {
     super();
 
@@ -4986,6 +4999,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       :host {
         display: inline-block;
         line-height: 1em;
+        word-break: break-all;
       }
       :host > slot {
         width: 100%;
@@ -5013,6 +5027,12 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       blockquote {
         padding: 0 2em;
       }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
     </style>
     <slot part="text-wrapper" style="display:none"></slot>
     <div class="content"></div>
@@ -5043,6 +5063,18 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     }
   }
 
+  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
+  customUnderlineRenderer() {
+    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+  }
+
   #customizeLinkRenderer() {
     if (this.linkTargetBlank) {
       this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
@@ -5056,23 +5088,25 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     }
   }
 
-  #enableCustomRules() {
+  #disableCustomRules() {
     if (!this.processor) {
       return;
     }
-
-    const customRuleSet = textRuleSet;
-    this.processor.configure(customRuleSet || {});
+    this.processor.disable(disableRules);
   }
 
   #updateProcessorRules() {
-    this.#enableCustomRules();
+    this.#disableCustomRules();
   }
 
   #storeOrigRenderers() {
     const defaultLinkRenderer = (tokens, idx, options, _, self) =>
       self.renderToken(tokens, idx, options);
     this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+
+    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
   }
 
   #initProcessor() {
@@ -5080,6 +5114,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     this.#storeOrigRenderers();
     this.#updateProcessorRules();
     this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
   }
 
   get linkTargetBlank() {
@@ -5098,7 +5133,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     let html = this.textContent;
 
     try {
-      const tokens = this.processor.parse(this.textContent, { references: undefined });
+      const tokens = this.processor.parse(html, { references: undefined });
       html = this.processor.renderer.render(tokens, { breaks: true });
     } catch (e) {
       // eslint-disable-next-line no-console
@@ -5125,10 +5160,12 @@ const EnrichedTextClass = compose(
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
+      fontWeightBold: { selector: () => ':host strong', property: 'font-weight' },
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },
       textAlign: {},
       linkColor: { selector: 'a', property: 'color' },
+      minHeight: {},
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
@@ -5212,6 +5249,7 @@ const EnrichedText = {
 
   [vars$u.fontSize]: globalRefs$l.typography.body1.size,
   [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
+  [vars$u.fontWeightBold]: '900',
   [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
 
   [vars$u.textLineHeight]: '1.35em',
@@ -5220,6 +5258,9 @@ const EnrichedText = {
 
   [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
 
+  [vars$u.minWidth]: '0.25em',
+  [vars$u.minHeight]: '1.35em',
+
   mode: {
     primary: {
       [vars$u.textColor]: globalRefs$l.colors.surface.contrast,