@descope/web-components-ui 1.0.359 → 1.0.360

package/dist/umd/descope-enriched-text-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20409:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>d});var n=r(84569),o=r(94978),s=r(2061),i=r(54567);const l=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"];var a=r(33346);const c=(0,i.iY)("enriched-text");class h extends((0,a.s)({componentName:c,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n        word-break: break-word;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n      *, *:last-child {\n        margin: 0;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p {\n        margin-bottom: 1em;\n      }\n      a {\n        cursor: pointer;\n      }\n      blockquote {\n        padding: 0 2em;\n      }\n      u {\n        text-decoration: underline\n      }\n      s {\n        color: currentColor;\n      }\n    </style>\n    <slot part="text-wrapper" style="display:none"></slot>\n    <div class="content"></div>\n    ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#r(),(0,i.P$)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),r!==t&&("readonly"===e&&this.onReadOnlyChange("true"===r),"link-target-blank"===e&&this.#r())}customUnderlineRenderer(){this.processor.renderer.rules.em_open=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o)),this.processor.renderer.rules.em_close=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o))}#o(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,r,n,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,r,n,o)):this.processor.renderer.rules.link_open=this.#e}#s(){this.processor&&this.processor.disable(l)}#i(){this.#s()}#l(){this.#e=this.processor.renderer.rules.link_open||((e,t,r,n,o)=>o.renderToken(e,t,r)),this.#t=this.processor.renderer.rules.em_open||((e,t,r,n,o)=>o.renderToken(e,t,r))}#r(){this.processor=new n.Z("commonmark",{html:!0}),this.#l(),this.#i(),this.#o(),this.customUnderlineRenderer()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.innerHTML);try{const t=this.processor.parse(e,{references:void 0});e=this.processor.renderer.render(t,{html:!0,breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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:{}}}),(0,o.yk)({componentNameOverride:(0,i.iY)("link")}),o.e4,o.Ae)(h);customElements.define(c,d)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20409:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>d});var n=r(84569),o=r(94978),s=r(2061),i=r(54567);const l=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"];var a=r(33346);const c=(0,i.iY)("enriched-text");class h extends((0,a.s)({componentName:c,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n        word-break: break-word;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n      *, *:last-child {\n        margin: 0;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p {\n        margin-bottom: 1em;\n      }\n      a {\n        cursor: pointer;\n      }\n      blockquote {\n        padding: 0 2em;\n      }\n      u {\n        text-decoration: underline\n      }\n      s {\n        color: currentColor;\n      }\n    </style>\n    <slot part="text-wrapper" style="display:none"></slot>\n    <div class="content"></div>\n    ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#r(),(0,i.P$)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),r!==t&&("readonly"===e&&this.onReadOnlyChange("true"===r),"link-target-blank"===e&&this.#r())}customUnderlineRenderer(){this.processor.renderer.rules.em_open=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o)),this.processor.renderer.rules.em_close=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o))}#o(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,r,n,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,r,n,o)):this.processor.renderer.rules.link_open=this.#e}#s(){this.processor&&this.processor.disable(l)}#i(){this.#s()}#l(){this.#e=this.processor.renderer.rules.link_open||((e,t,r,n,o)=>o.renderToken(e,t,r)),this.#t=this.processor.renderer.rules.em_open||((e,t,r,n,o)=>o.renderToken(e,t,r))}#r(){this.processor=new n.Z("commonmark",{html:!0}),this.#l(),this.#i(),this.#o(),this.customUnderlineRenderer()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.innerHTML);try{const t=this.processor.parse(e,{references:void 0});e=this.processor.renderer.render(t,{html:!0,breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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:{}}}),(0,o.yk)({componentNameOverride:(0,i.iY)("link")}),(0,o.yk)({componentNameOverride:(0,i.iY)("text")}),o.e4,o.Ae)(h);customElements.define(c,d)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.359",
+  "version": "1.0.360",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-enriched-text/EnrichedTextClass.js

@@ -195,6 +195,7 @@ export const EnrichedTextClass = compose(
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
   draggableMixin,
   componentNameValidationMixin
 )(EnrichedText);

package/src/helpers/themeHelpers/index.js

@@ -148,7 +148,7 @@ export const themeToStyle = ({ globals, components }, themeName) => ({
   components: createComponentsTheme(components),
 });
 
-const useVar = (varName) => `var(${varName})`;
+export const useVar = (varName) => `var(${varName})`;
 
 export const createHelperVars = (theme, prefix) => {
   const res = transformTheme(theme, [], (path, value) => {

package/src/theme/components/enrichedText.js

@@ -1,93 +1,32 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
+import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
 import { EnrichedTextClass } from '../../components/descope-enriched-text/EnrichedTextClass';
-import { LinkClass } from '../../components/descope-link/LinkClass';
+import { vars as textCompVars } from './text';
+import { vars as linkCompVars } from './link';
 
 const globalRefs = getThemeRefs(globals);
 const vars = EnrichedTextClass.cssVarList;
 
-const EnrichedText = {
+const enrichedText = {
   [vars.hostDirection]: globalRefs.direction,
+  [vars.hostWidth]: useVar(textCompVars.hostWidth),
 
-  [vars.fontSize]: globalRefs.typography.body1.size,
-  [vars.fontWeight]: globalRefs.typography.body1.weight,
-  [vars.fontWeightBold]: '900',
-  [vars.fontFamily]: globalRefs.typography.body1.font,
+  [vars.textLineHeight]: useVar(textCompVars.textLineHeight),
+  [vars.textColor]: useVar(textCompVars.textColor),
+  [vars.textAlign]: useVar(textCompVars.textAlign),
 
-  [vars.textLineHeight]: '1.35em',
-  [vars.textAlign]: 'left',
-  [vars.textColor]: globalRefs.colors.surface.dark,
+  [vars.fontSize]: useVar(textCompVars.fontSize),
+  [vars.fontWeight]: useVar(textCompVars.fontWeight),
+  [vars.fontFamily]: useVar(textCompVars.fontFamily),
 
-  [vars.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
+  [vars.linkColor]: useVar(linkCompVars.textColor),
   [vars.linkTextDecoration]: 'none',
   [vars.linkHoverTextDecoration]: 'underline',
 
+  [vars.fontWeightBold]: '900',
   [vars.minWidth]: '0.25em',
   [vars.minHeight]: '1.35em',
-
-  mode: {
-    primary: {
-      [vars.textColor]: globalRefs.colors.surface.contrast,
-    },
-    secondary: {
-      [vars.textColor]: globalRefs.colors.surface.dark,
-    },
-    error: {
-      [vars.textColor]: globalRefs.colors.error.main,
-    },
-    success: {
-      [vars.textColor]: globalRefs.colors.success.main,
-    },
-  },
-
-  variant: {
-    h1: {
-      [vars.fontSize]: globalRefs.typography.h1.size,
-      [vars.fontWeight]: globalRefs.typography.h1.weight,
-      [vars.fontFamily]: globalRefs.typography.h1.font,
-    },
-    h2: {
-      [vars.fontSize]: globalRefs.typography.h2.size,
-      [vars.fontWeight]: globalRefs.typography.h2.weight,
-      [vars.fontFamily]: globalRefs.typography.h2.font,
-    },
-    h3: {
-      [vars.fontSize]: globalRefs.typography.h3.size,
-      [vars.fontWeight]: globalRefs.typography.h3.weight,
-      [vars.fontFamily]: globalRefs.typography.h3.font,
-    },
-    subtitle1: {
-      [vars.fontSize]: globalRefs.typography.subtitle1.size,
-      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
-      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars.fontSize]: globalRefs.typography.subtitle2.size,
-      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
-      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
-    },
-    body1: {
-      [vars.fontSize]: globalRefs.typography.body1.size,
-      [vars.fontWeight]: globalRefs.typography.body1.weight,
-      [vars.fontFamily]: globalRefs.typography.body1.font,
-    },
-    body2: {
-      [vars.fontSize]: globalRefs.typography.body2.size,
-      [vars.fontWeight]: globalRefs.typography.body2.weight,
-      [vars.fontFamily]: globalRefs.typography.body2.font,
-    },
-  },
-
-  textAlign: {
-    right: { [vars.textAlign]: 'right' },
-    left: { [vars.textAlign]: 'left' },
-    center: { [vars.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars.hostWidth]: '100%',
-  },
 };
 
-export default EnrichedText;
+export default enrichedText;
 export { vars };

package/src/theme/components/index.js

@@ -11,7 +11,7 @@ import * as logo from './logo';
 import * as totpImage from './totpImage';
 import * as notpImage from './notpImage';
 import * as text from './text';
-import * as EnrichedText from './enrichedText';
+import * as enrichedText from './enrichedText';
 import * as link from './link';
 import * as divider from './divider';
 import * as passcode from './passcode';
@@ -56,7 +56,7 @@ const components = {
   totpImage,
   notpImage,
   text,
-  EnrichedText,
+  enrichedText,
   link,
   divider,
   passcode,

package/src/theme/components/text.js

@@ -10,6 +10,7 @@ const text = {
   [vars.textLineHeight]: '1.35em',
   [vars.textAlign]: 'left',
   [vars.textColor]: globalRefs.colors.surface.dark,
+
   variant: {
     h1: {
       [vars.fontSize]: globalRefs.typography.h1.size,