@descope/web-components-ui 1.0.211 → 1.0.212

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2528],{2138:(t,e,o)=>{o.d(e,{f:()=>l,k:()=>p});var n=o(1e3),s=o(3874),r=o(2061);const l=(0,o(4567).iY)("text");class i extends((0,s.s)({componentName:l,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></slot>\n\t\t"}}const p=(0,r.qC)((0,n.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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)(i)},1876:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.k});var n=o(2138);customElements.define(n.f,n.k)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2528],{2138:(t,e,s)=>{s.d(e,{f:()=>h,k:()=>p});var n=s(1e3),o=s(3874),i=s(2061),r=s(4567);const h=(0,r.iY)("text");class l extends((0,o.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></slot>\n\t\t"}}const p=(0,i.qC)((0,n.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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,s)=>{s.r(e),s.d(e,{TextClass:()=>n.k});var n=s(2138);customElements.define(n.f,n.k)}}]);

package/package.json

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

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

@@ -1,7 +1,8 @@
+// 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 } from '../../helpers/componentHelpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('text');
 
@@ -24,6 +25,22 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
   }
 }
 
+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: {
@@ -44,5 +61,6 @@ export const TextClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
+  customTextMixin
 )(RawText);