@descope/web-components-ui 1.0.399 → 1.0.400

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8689],{43713:(t,o,e)=>{e.r(o),e.d(o,{ContainerClass:()=>l});var r=e(94619),n=e(70263),s=e(7138);const i=(0,e(14944).xE)("container");class p extends((0,n.q)({componentName:i,baseSelector:"slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}}const l=(0,s.Zz)((0,r.RF)({mappings:{hostHeight:{selector:()=>":host",property:"height"},hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},itemsGrow:{selector:()=>"::slotted(*)",property:"flex-grow",fallback:"0"},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:{},flexWrap:{},backgroundColor:{},color:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),r.VO,r.tQ)(p);customElements.define(i,l)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8689],{43713:(t,o,e)=>{e.r(o),e.d(o,{ContainerClass:()=>a});var n=e(94619),r=e(70263),s=e(7138);const i=(0,e(14944).xE)("container");class d extends((0,r.q)({componentName:i,baseSelector:"slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}}const a=(0,s.Zz)((0,n.RF)({mappings:{hostHeight:{selector:()=>":host",property:"height"},hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},itemsGrow:{selector:()=>"::slotted(*)",property:"flex-grow",fallback:"0"},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:{},flexWrap:{},backgroundColor:{},backgroundImage:{},backgroundPositionX:{},backgroundPositionY:{},backgroundSize:{},backgroundRepeat:{},color:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.VO,n.tQ)(d);customElements.define(i,a)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.399",
+  "version": "1.0.400",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -53,7 +53,7 @@
     "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
     "@babel/preset-env": "^7.22.2",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "1.38.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-controls": "^6.4.9",

package/src/components/descope-container/ContainerClass.js

@@ -44,6 +44,12 @@ export const ContainerClass = compose(
       flexWrap: {},
 
       backgroundColor: {},
+      backgroundImage: {},
+      backgroundPositionX: {},
+      backgroundPositionY: {},
+      backgroundSize: {},
+      backgroundRepeat: {},
+
       color: {},
       borderRadius: {},
 

package/src/helpers/themeHelpers/index.js

@@ -148,7 +148,14 @@ export const themeToStyle = ({ globals, components }, themeName) => ({
   components: createComponentsTheme(components),
 });
 
-export const useVar = (varName) => `var(${varName})`;
+// allows to generate css variables with nested fallbacks
+export const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
 
 export const createHelperVars = (theme, prefix) => {
   const res = transformTheme(theme, [], (path, value) => {

package/src/theme/components/container.js

@@ -1,6 +1,6 @@
-import globals from '../globals';
-import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import { ContainerClass, componentName } from '../../components/descope-container/ContainerClass';
+import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
 
 const globalRefs = getThemeRefs(globals);
 
@@ -35,7 +35,15 @@ const container = {
   [compVars.itemsGrow]: '0',
   [compVars.hostWidth]: '100%',
   [compVars.boxShadow]: 'none',
+
   [compVars.backgroundColor]: globalRefs.colors.surface.main,
+
+  [compVars.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
+  [compVars.backgroundPositionX]: 'center',
+  [compVars.backgroundPositionY]: 'center',
+  [compVars.backgroundSize]: 'cover',
+  [compVars.backgroundRepeat]: 'no-repeat',
+
   [compVars.color]: globalRefs.colors.surface.contrast,
   [compVars.borderRadius]: '0px',
   [compVars.hostDirection]: globalRefs.direction,