@descope/web-components-ui 1.0.296 → 1.0.297

package/src/theme/components/markdownContent.js

@@ -0,0 +1,84 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { MarkdownContentClass } from '../../components/text-components/descope-markdown-content/MarkdownContentClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = MarkdownContentClass.cssVarList;
+
+const markdownContent = {
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.fontSize]: globalRefs.typography.body1.size,
+  [vars.fontWeight]: globalRefs.typography.body1.weight,
+  [vars.fontFamily]: globalRefs.typography.body1.font,
+
+  [vars.textLineHeight]: '1.35em',
+  [vars.textAlign]: 'left',
+  [vars.textColor]: globalRefs.colors.surface.dark,
+
+  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 markdownContent;
+export { vars };

package/src/theme/components/text.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import { TextClass } from '../../components/descope-text/TextClass';
+import { TextClass } from '../../components/text-components/descope-text/TextClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextClass.cssVarList;

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

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2528],{2138:(t,e,o)=>{o.d(e,{f:()=>h,k:()=>p});var n=o(4978),s=o(3346),i=o(2061),r=o(4567);const h=(0,r.iY)("text");class l extends((0,s.s)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t:host > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot part="text-wrapper"></slot>\n\t\t'}}const p=(0,i.qC)((0,n.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.e4,n.Ae,(t=>class extends t{get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}))(l)},1876:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.k});var n=o(2138);customElements.define(n.f,n.k)}}]);

package/src/components/descope-text/TextClass.js

@@ -1,67 +0,0 @@
-// eslint-disable-next-line max-classes-per-file
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { compose } from '../../helpers';
-import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
-
-export const componentName = getComponentName('text');
-
-class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > slot {
-				width: 100%;
-				display: inline-block;
-			}
-		</style>
-		<slot part="text-wrapper"></slot>
-		`;
-  }
-}
-
-const customTextMixin = (superclass) =>
-  class CustomTextMixin extends superclass {
-    get hideWhenEmpty() {
-      return this.getAttribute('hide-when-empty') === 'true';
-    }
-
-    init() {
-      super.init();
-
-      observeChildren(this, () => {
-        const hasChildren = !!this.childNodes.length;
-        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
-      });
-    }
-  };
-
-export const TextClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      fontSize: {},
-      textColor: { property: 'color' },
-      textLineHeight: { property: 'line-height' },
-      textLetterSpacing: { property: 'letter-spacing' },
-      textShadow: {},
-      textAlign: {},
-      textTransform: {},
-      fontFamily: {},
-      fontStyle: {},
-      fontWeight: {},
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customTextMixin
-)(RawText);