@descope/web-components-ui 2.1.18 → 2.2.0

package/dist/cjs/index.cjs.js

@@ -6142,6 +6142,230 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Y
 });
 
+const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];
+
+const decodeHTML = (html) => {
+  const textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+};
+
+/* eslint-disable no-param-reassign */
+
+
+const componentName$16 = getComponentName('enriched-text');
+
+class EnrichedText extends createBaseClass$1({ componentName: componentName$16, baseSelector: ':host > div' }) {
+  #origLinkRenderer;
+
+  #origEmRenderer;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        line-height: 1em;
+        word-break: break-word;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        cursor: pointer;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
+        `,
+      this
+    );
+
+    this.#initProcessor();
+
+    observeChildren(this, this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly', 'link-target-blank'];
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
+    }
+  }
+
+  // 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) => {
+        // Add a new `target` attribute, or replace the value of the existing one.
+        tokens[idx].attrSet('target', '_blank');
+        // Pass the token to the default renderer.
+        return this.#origLinkRenderer(tokens, idx, options, env, self);
+      };
+    } else {
+      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
+    }
+  }
+
+  #disableCustomRules() {
+    if (!this.processor) {
+      return;
+    }
+    this.processor.disable(disableRules);
+  }
+
+  #updateProcessorRules() {
+    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() {
+    this.processor = new MarkdownIt('commonmark', { html: true });
+    this.#storeOrigRenderers();
+    this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
+
+  #parseChildren() {
+    if (!this.processor) {
+      return;
+    }
+
+    let html = decodeHTML(this.innerHTML);
+
+    if (!html?.trim() && this.isConnected) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+
+    try {
+      const tokens = this.processor.parse(html, { references: undefined });
+      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Not parsing invalid markdown token');
+    }
+
+    this.contentNode.innerHTML = html;
+    this.contentNode.firstChild?.setAttribute('part', 'content');
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.contentNode.setAttribute('inert', isReadOnly);
+    } else {
+      this.contentNode.removeAttribute('inert');
+    }
+  }
+}
+
+const EnrichedTextClass = compose(
+  createStyleMixin$1({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      fontWeightBold: [
+        { selector: () => ':host strong', property: 'font-weight' },
+        { selector: () => ':host b', property: 'font-weight' },
+      ],
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
+      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+      minHeight: {},
+      minWidth: {},
+    },
+  }),
+  createStyleMixin$1({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin$1({ componentNameOverride: getComponentName('text') }),
+  draggableMixin$1,
+  componentNameValidationMixin$1
+)(EnrichedText);
+
 const createBaseInputClass = (...args) =>
   compose$1(
     inputValidationMixin,
@@ -6150,9 +6374,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$16 = getComponentName$1('boolean-field-internal');
+const componentName$15 = getComponentName$1('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$15, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -6161,14 +6385,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$16}
+				<${componentName$15}
 					tabindex="-1"
 					slot="input"
-				></${componentName$16}>
+				></${componentName$15}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$16);
+      this.inputElement = this.shadowRoot.querySelector(componentName$15);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs$1(this, this.inputElement, {
@@ -6188,7 +6412,7 @@ const booleanFieldMixin = (superclass) =>
     }
   };
 
-var commonStyles = `
+var commonStyles = (cssVarList) => `
 :host {
 	display: inline-flex;
 }
@@ -6235,9 +6459,18 @@ descope-boolean-field-internal {
   -webkit-mask-image: none;
   min-height: initial;
 }
+
+descope-enriched-text[empty] {
+	${EnrichedTextClass.cssVarList.hostDisplay}: none;
+}
+
+descope-enriched-text {
+	${EnrichedTextClass.cssVarList.hostDirection}: var(${cssVarList.hostDirection});
+}
+
 `;
 
-const componentName$15 = getComponentName$1('checkbox');
+const componentName$14 = getComponentName$1('checkbox');
 
 const {
   host: host$s,
@@ -6250,7 +6483,9 @@ const {
   errorMessage: errorMessage$a,
 } = {
   host: { selector: () => ':host' },
-  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  requiredIndicator: {
+    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+  },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -6296,6 +6531,16 @@ const CheckboxClass = compose$1(
       inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
       inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
+      inputContainerPadding: { ...component$1, property: 'padding' },
+      inputContainerBorderRadius: { ...component$1, property: 'border-radius' },
+      inputContainerBorderWidth: { ...component$1, property: 'border-width' },
+      inputContainerBorderColor: { ...component$1, property: 'border-color' },
+      inputContainerBorderStyle: { ...component$1, property: 'border-style' },
+      inputContainerOutlineWidth: { ...component$1, property: 'outline-width' },
+      inputContainerOutlineOffset: { ...component$1, property: 'outline-offset' },
+      inputContainerOutlineColor: { ...component$1, property: 'outline-color' },
+      inputContainerOutlineStyle: { ...component$1, property: 'outline-style' },
+
       inputSize: [
         { ...checkboxElement, property: 'width' },
         { ...checkboxElement, property: 'height' },
@@ -6313,7 +6558,7 @@ const CheckboxClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(CheckboxClass.cssVarList)}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
 
       :host {
@@ -6355,7 +6600,7 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$15,
+    componentName: componentName$14,
   })
 );
 
@@ -6400,7 +6645,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$X
 });
 
-const componentName$14 = getComponentName$1('switch-toggle');
+const componentName$13 = getComponentName$1('switch-toggle');
 
 const {
   host: host$r,
@@ -6413,7 +6658,9 @@ const {
   errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
-  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  requiredIndicator: {
+    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+  },
   component: { selector: 'vaadin-checkbox' },
   checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
   checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -6486,7 +6733,7 @@ const SwitchToggleClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(SwitchToggleClass.cssVarList)}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 
       :host {
@@ -6542,7 +6789,7 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$13,
   })
 );
 
@@ -6623,9 +6870,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   vars: vars$W
 });
 
-const componentName$13 = getComponentName$1('container');
+const componentName$12 = getComponentName$1('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$13, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$12, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -6710,7 +6957,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$13
+  componentName$12
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -6875,10 +7122,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$12 = getComponentName$1('logo');
+const componentName$11 = getComponentName$1('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$12,
+  componentName: componentName$11,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6895,10 +7142,10 @@ var logo$3 = /*#__PURE__*/Object.freeze({
   vars: vars$U
 });
 
-const componentName$11 = getComponentName$1('totp-image');
+const componentName$10 = getComponentName$1('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$11,
+  componentName: componentName$10,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6915,10 +7162,10 @@ var totpImage = /*#__PURE__*/Object.freeze({
   vars: vars$T
 });
 
-const componentName$10 = getComponentName$1('notp-image');
+const componentName$$ = getComponentName$1('notp-image');
 
 const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$10,
+  componentName: componentName$$,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -6935,10 +7182,10 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const componentName$$ = getComponentName('text');
+const componentName$_ = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$$,
+  componentName: componentName$_,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -7010,7 +7257,7 @@ const vars$R = TextClass.cssVarList;
 const text$3 = {
   [vars$R.hostDirection]: globalRefs$A.direction,
   [vars$R.textLineHeight]: '1.35em',
-  [vars$R.textAlign]: 'left',
+  [vars$R.textAlign]: 'start',
   [vars$R.textColor]: globalRefs$A.colors.surface.dark,
 
   variant: {
@@ -7107,229 +7354,6 @@ var text$4 = /*#__PURE__*/Object.freeze({
   vars: vars$R
 });
 
-const disableRules = [
-  'blockquote',
-  'list',
-  'image',
-  'table',
-  'code',
-  'hr',
-  'backticks',
-  'fence',
-  'reference',
-  'heading',
-  'lheading',
-  'html_block',
-];
-
-const decodeHTML = (html) => {
-  const textArea = document.createElement('textarea');
-  textArea.innerHTML = html;
-  return textArea.value;
-};
-
-/* eslint-disable no-param-reassign */
-
-
-const componentName$_ = getComponentName('enriched-text');
-
-class EnrichedText extends createBaseClass$1({ componentName: componentName$_, baseSelector: ':host > div' }) {
-  #origLinkRenderer;
-
-  #origEmRenderer;
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <div class="content"></div>
-    `;
-
-    injectStyle(
-      `
-      :host {
-        line-height: 1em;
-        word-break: break-word;
-      }
-      :host > slot {
-        width: 100%;
-        display: inline-block;
-      }
-      *, *:last-child {
-        margin: 0;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        margin-bottom: 1em;
-      }
-      a {
-        cursor: pointer;
-      }
-      blockquote {
-        padding: 0 2em;
-      }
-      u {
-        text-decoration: underline
-      }
-      s {
-        color: currentColor;
-      }
-        `,
-      this
-    );
-
-    this.#initProcessor();
-
-    observeChildren(this, this.#parseChildren.bind(this));
-  }
-
-  static get observedAttributes() {
-    return ['readonly', 'link-target-blank'];
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (newValue !== oldValue) {
-      if (attrName === 'readonly') {
-        this.onReadOnlyChange(newValue === 'true');
-      }
-
-      if (attrName === 'link-target-blank') {
-        this.#initProcessor();
-      }
-    }
-  }
-
-  // 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) => {
-        // Add a new `target` attribute, or replace the value of the existing one.
-        tokens[idx].attrSet('target', '_blank');
-        // Pass the token to the default renderer.
-        return this.#origLinkRenderer(tokens, idx, options, env, self);
-      };
-    } else {
-      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
-    }
-  }
-
-  #disableCustomRules() {
-    if (!this.processor) {
-      return;
-    }
-    this.processor.disable(disableRules);
-  }
-
-  #updateProcessorRules() {
-    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() {
-    this.processor = new MarkdownIt('commonmark', { html: true });
-    this.#storeOrigRenderers();
-    this.#updateProcessorRules();
-    this.#customizeLinkRenderer();
-    this.customUnderlineRenderer();
-  }
-
-  get linkTargetBlank() {
-    return this.getAttribute('link-target-blank') === 'true';
-  }
-
-  get contentNode() {
-    return this.shadowRoot.querySelector('.content');
-  }
-
-  #parseChildren() {
-    if (!this.processor) {
-      return;
-    }
-
-    let html = decodeHTML(this.innerHTML);
-
-    if (!html?.trim() && this.isConnected) {
-      this.setAttribute('empty', 'true');
-    } else {
-      this.removeAttribute('empty');
-    }
-
-    try {
-      const tokens = this.processor.parse(html, { references: undefined });
-      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn('Not parsing invalid markdown token');
-    }
-
-    this.contentNode.innerHTML = html;
-  }
-
-  onReadOnlyChange(isReadOnly) {
-    if (isReadOnly) {
-      this.contentNode.setAttribute('inert', isReadOnly);
-    } else {
-      this.contentNode.removeAttribute('inert');
-    }
-  }
-}
-
-const EnrichedTextClass = compose(
-  createStyleMixin$1({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      fontSize: {},
-      fontFamily: {},
-      fontWeight: {},
-      fontWeightBold: [
-        { selector: () => ':host strong', property: 'font-weight' },
-        { selector: () => ':host b', property: 'font-weight' },
-      ],
-      textColor: { property: 'color' },
-      textLineHeight: { property: 'line-height' },
-      textAlign: {},
-      linkColor: { selector: 'a', property: 'color' },
-      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
-      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
-      minHeight: {},
-      minWidth: {},
-    },
-  }),
-  createStyleMixin$1({ componentNameOverride: getComponentName('link') }),
-  createStyleMixin$1({ componentNameOverride: getComponentName('text') }),
-  draggableMixin$1,
-  componentNameValidationMixin$1
-)(EnrichedText);
-
 const componentName$Z = getComponentName('link');
 
 class RawLink extends createBaseClass$1({ componentName: componentName$Z, baseSelector: ':host a' }) {