@descope/flow-components 2.1.18 → 2.2.0

package/dist/index.cjs.js

@@ -85660,6 +85660,230 @@ function requireIndex_cjs () {
 	  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,
@@ -85668,9 +85892,9 @@ function requireIndex_cjs () {
 	    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 {
@@ -85679,14 +85903,14 @@ function requireIndex_cjs () {
 
 	      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, {
@@ -85706,7 +85930,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	var commonStyles = `
+	var commonStyles = (cssVarList) => `
 :host {
 	display: inline-flex;
 }
@@ -85753,9 +85977,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,
@@ -85768,7 +86001,9 @@ descope-boolean-field-internal {
 	  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' },
@@ -85814,6 +86049,16 @@ descope-boolean-field-internal {
 	      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' },
@@ -85831,7 +86076,7 @@ descope-boolean-field-internal {
 	    slots: [],
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => `
-			${commonStyles}
+			${commonStyles(CheckboxClass.cssVarList)}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
 
       :host {
@@ -85873,7 +86118,7 @@ descope-boolean-field-internal {
       }
     `,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$15,
+	    componentName: componentName$14,
 	  })
 	);
 
@@ -85918,7 +86163,7 @@ descope-boolean-field-internal {
 	  vars: vars$X
 	});
 
-	const componentName$14 = getComponentName$1('switch-toggle');
+	const componentName$13 = getComponentName$1('switch-toggle');
 
 	const {
 	  host: host$r,
@@ -85931,7 +86176,9 @@ descope-boolean-field-internal {
 	  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' },
@@ -86004,7 +86251,7 @@ descope-boolean-field-internal {
 	    slots: [],
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => `
-			${commonStyles}
+			${commonStyles(SwitchToggleClass.cssVarList)}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 
       :host {
@@ -86060,7 +86307,7 @@ descope-boolean-field-internal {
 			}
 		`,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$14,
+	    componentName: componentName$13,
 	  })
 	);
 
@@ -86141,9 +86388,9 @@ descope-boolean-field-internal {
 	  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();
 
@@ -86228,7 +86475,7 @@ descope-boolean-field-internal {
 	    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;
@@ -86393,10 +86640,10 @@ descope-boolean-field-internal {
 	  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',
 	});
@@ -86413,10 +86660,10 @@ descope-boolean-field-internal {
 	  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',
 	});
@@ -86433,10 +86680,10 @@ descope-boolean-field-internal {
 	  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',
 	});
@@ -86453,10 +86700,10 @@ descope-boolean-field-internal {
 	  vars: vars$S
 	});
 
-	const componentName$$ = getComponentName('text');
+	const componentName$_ = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$_,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -86528,7 +86775,7 @@ descope-boolean-field-internal {
 	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: {
@@ -86625,229 +86872,6 @@ descope-boolean-field-internal {
 	  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' }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "2.1.18",
+  "version": "2.2.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -96,7 +96,7 @@
     "webpack-dev-server": "5.2.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "2.1.18"
+    "@descope/web-components-ui": "2.2.0"
   },
   "peerDependencies": {
     "react": ">= 18"