@descope/web-components-ui 2.1.16 → 2.1.18

package/dist/index.esm.js

@@ -407,6 +407,10 @@ const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
+  if(cssString && !style.cssRules[0]?.style){
+    console.warn(`No style rules were created, make sure the CSS is valid:\n "${cssString}"`);
+  }
+
   return style;
 };
 
@@ -1130,7 +1134,17 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-const createCssVar$1 = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName$1 = (origVarName) => `${origVarName}__override`;
+
+const createCssVar$1 = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName$1(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector$1 = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction$1(relativeSelectorOrSelectorFn)
@@ -1179,6 +1193,7 @@ const getFallbackVarName$1 = (origVarName, suffix = 'fallback') => kebabCaseJoin
 
 const createStyle$1 = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder$1();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -1198,7 +1213,7 @@ const createStyle$1 = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector$1(baseSelector, relativeSelectorOrSelectorFn),
           isFunction$1(property) ? property() : property,
-          createCssVar$1(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar$1(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -1225,6 +1240,8 @@ const createCssVarsList$1 = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName$1(varName) },
       getFallbackVarsNames$1(attr, varName, mappings[attr])
     );
   }, {});
@@ -1316,7 +1333,7 @@ const createStyleMixin$1 =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -1324,7 +1341,7 @@ const createStyleMixin$1 =
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -3215,16 +3232,25 @@ const ContainerClass = compose$1(
 
 customElements.define(componentName$1f, ContainerClass);
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+const createCssVar = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
     ? relativeSelectorOrSelectorFn(baseSelector)
-    : `${baseSelector}${
-        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-          ? ` ${relativeSelectorOrSelectorFn}`
-          : relativeSelectorOrSelectorFn
-      }`;
+    : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+      ? ` ${relativeSelectorOrSelectorFn}`
+      : relativeSelectorOrSelectorFn
+    }`;
 
 class StyleBuilder {
   constructor() {
@@ -3264,6 +3290,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(o
 
 const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -3283,7 +3310,7 @@ const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -3310,6 +3337,8 @@ const createCssVarsList = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName(varName) },
       getFallbackVarsNames(attr, varName, mappings[attr])
     );
   }, {});
@@ -3411,7 +3440,7 @@ const createStyleMixin =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -3420,7 +3449,7 @@ const createStyleMixin =
 
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -22300,10 +22329,10 @@ const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
     <descope-avatar
       ${icon ? `img="${icon}"` : ''}
       ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
-      size=${ref.size}
+      size="${ref.logoSize || ref.size}"
     ></descope-avatar>
     <descope-text
-      variant="body1"
+      variant="${ref.itemTextVariant}"
       mode="primary"
     >${name}</descope-text>
     </descope-list-item>
@@ -22312,9 +22341,18 @@ const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
 
 const customMixin$2 = (superclass) =>
   class AppsListMixinClass extends superclass {
+    // size controls both item logo size and font size
     get size() {
       return this.getAttribute('size') || 'sm';
     }
+
+    get itemTextVariant() {
+      return this.getAttribute('item-text-variant') || 'body1';
+    }
+
+    get logoSize() {
+      return this.getAttribute('logo-size');
+    }
   };
 
 const AppsListClass = compose(
@@ -22325,19 +22363,51 @@ const AppsListClass = compose(
       hostDirection: { selector: () => ':host', property: 'direction' },
       itemsFontWeight: {
         selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontWeight,
+        property: TextClass.cssVarList.fontWeightOverride,
       },
       itemsFontSize: {
         selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontSize,
+        property: TextClass.cssVarList.fontSizeOverride,
       },
       itemsTextAlign: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.textAlign,
       },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
+      backgroundColor: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.backgroundColorOverride,
+      },
+      itemBorderStyle: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderStyleOverride,
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColorOverride,
+      },
+      itemBorderWidth: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderWidthOverride,
+      },
+      itemVerticalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.verticalPaddingOverride,
+      },
+      itemHorizontalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.horizontalPaddingOverride,
+      },
+      itemAlignment: [
+        { selector: ListItemClass.componentName, property: ListItemClass.cssVarList.alignItemsOverride },
+        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
+      ]
     },
   }),
-  createDynamicDataMixin$1({ itemRenderer: itemRenderer$3, rerenderAttrsList: ['size'] }),
+  createDynamicDataMixin$1({ itemRenderer: itemRenderer$3, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
   draggableMixin,
   componentNameValidationMixin,
   customMixin$2
@@ -22366,6 +22436,7 @@ const AppsListClass = compose(
 
       descope-text {
         ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+        max-width: 100%;
       }
     `,
   })
@@ -22400,6 +22471,29 @@ const appsList = {
       [vars$k.itemsFontSize]: '20px',
     },
   },
+
+  itemPadding: {
+    xs: {
+      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.xs,
+      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.xs,
+    },
+    sm: {
+      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.sm,
+      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.sm,
+    },
+    md: {
+      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.md,
+      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.md,
+    },
+    lg: {
+      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.lg,
+      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.lg,
+    },
+    xl: {
+      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.xl,
+      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.xl,
+    },
+  },
 };
 
 var appsList$1 = /*#__PURE__*/Object.freeze({