@descope/web-components-ui 2.1.16 → 2.1.18

package/dist/cjs/index.cjs.js

@@ -351,6 +351,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;
 };
 
@@ -1442,16 +1446,25 @@ const globals = {
 };
 getThemeVars$1(globals);
 
-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(relativeSelectorOrSelectorFn)
     ? relativeSelectorOrSelectorFn(baseSelector)
-    : `${baseSelector}${
-        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-          ? ` ${relativeSelectorOrSelectorFn}`
-          : relativeSelectorOrSelectorFn
-      }`;
+    : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+      ? ` ${relativeSelectorOrSelectorFn}`
+      : relativeSelectorOrSelectorFn
+    }`;
 
 let StyleBuilder$1 = class StyleBuilder {
   constructor() {
@@ -1491,6 +1504,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;
@@ -1510,7 +1524,7 @@ const createStyle$1 = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector$1(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar$1(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar$1(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -1537,6 +1551,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])
     );
   }, {});
@@ -1638,7 +1654,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);
@@ -1647,7 +1663,7 @@ const createStyleMixin$1 =
 
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -3447,7 +3463,17 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$12
 });
 
-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$1(relativeSelectorOrSelectorFn)
@@ -3496,6 +3522,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin$1
 
 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;
@@ -3515,7 +3542,7 @@ const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction$1(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -3542,6 +3569,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])
     );
   }, {});
@@ -3633,7 +3662,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);
@@ -3641,7 +3670,7 @@ const createStyleMixin =
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -18112,125 +18141,9 @@ var dateField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$l
 });
 
-const componentName$n = getComponentName('apps-list');
-
-const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
-  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
-    <descope-list-item>
-    <descope-avatar
-      ${icon ? `img="${icon}"` : ''}
-      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
-      size=${ref.size}
-    ></descope-avatar>
-    <descope-text
-      variant="body1"
-      mode="primary"
-    >${name}</descope-text>
-    </descope-list-item>
-  </a>
-`;
+const componentName$n = getComponentName('list-item');
 
 const customMixin$3 = (superclass) =>
-  class AppsListMixinClass extends superclass {
-    get size() {
-      return this.getAttribute('size') || 'sm';
-    }
-  };
-
-const AppsListClass = compose(
-  createStyleMixin$1({
-    mappings: {
-      maxHeight: { selector: () => ':host' },
-      minHeight: { selector: () => ':host' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      itemsFontWeight: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontWeight,
-      },
-      itemsFontSize: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontSize,
-      },
-      itemsTextAlign: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.textAlign,
-      },
-    },
-  }),
-  createDynamicDataMixin$1({ itemRenderer: itemRenderer$4, rerenderAttrsList: ['size'] }),
-  draggableMixin$1,
-  componentNameValidationMixin$1,
-  customMixin$3
-)(
-  createProxy$1({
-    slots: ['empty-state'],
-    wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$n,
-    style: () => `
-      :host {
-        width: 100%;
-        display: inline-flex;
-      }
-
-      descope-text::part(text-wrapper) {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      descope-text {
-        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
-      }
-    `,
-  })
-);
-
-const vars$k = AppsListClass.cssVarList;
-const globalRefs$a = getThemeRefs$1(globals);
-
-const defaultHeight = '400px';
-
-const appsList = {
-  [vars$k.itemsFontWeight]: 'normal',
-  [vars$k.itemsTextAlign]: 'start',
-  [vars$k.hostDirection]: globalRefs$a.direction,
-  [vars$k.maxHeight]: defaultHeight,
-
-  _empty: {
-    [vars$k.minHeight]: defaultHeight,
-  },
-
-  size: {
-    xs: {
-      [vars$k.itemsFontSize]: '14px',
-    },
-    sm: {
-      [vars$k.itemsFontSize]: '14px',
-    },
-    md: {
-      [vars$k.itemsFontSize]: '16px',
-    },
-    lg: {
-      [vars$k.itemsFontSize]: '20px',
-    },
-  },
-};
-
-var appsList$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: appsList,
-  vars: vars$k
-});
-
-const componentName$m = getComponentName('list-item');
-
-const customMixin$2 = (superclass) =>
   class ListItemMixinClass extends superclass {
     constructor() {
       super();
@@ -18283,14 +18196,14 @@ const ListItemClass = compose(
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$2,
+  customMixin$3,
   activeableMixin,
-)(createBaseClass$1({ componentName: componentName$m, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$n, baseSelector: 'slot' }));
 
-const componentName$l = getComponentName('list');
+const componentName$m = getComponentName('list');
 
 class RawList extends createBaseClass$1({
-  componentName: componentName$l,
+  componentName: componentName$m,
   baseSelector: '.wrapper',
 }) {
   static get observedAttributes() {
@@ -18458,13 +18371,194 @@ const ListClass = compose(
   componentNameValidationMixin$1,
 )(RawList);
 
+const componentName$l = getComponentName('apps-list');
+
+const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
+  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+    <descope-list-item>
+    <descope-avatar
+      ${icon ? `img="${icon}"` : ''}
+      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
+      size="${ref.logoSize || ref.size}"
+    ></descope-avatar>
+    <descope-text
+      variant="${ref.itemTextVariant}"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+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(
+  createStyleMixin$1({
+    mappings: {
+      maxHeight: { selector: () => ':host' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsFontWeight: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontWeightOverride,
+      },
+      itemsFontSize: {
+        selector: TextClass.componentName,
+        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$4, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
+  draggableMixin$1,
+  componentNameValidationMixin$1,
+  customMixin$2
+)(
+  createProxy$1({
+    slots: ['empty-state'],
+    wrappedEleName: 'descope-list',
+    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
+    componentName: componentName$l,
+    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+        max-width: 100%;
+      }
+    `,
+  })
+);
+
+const vars$k = AppsListClass.cssVarList;
+const globalRefs$a = getThemeRefs$1(globals);
+
+const defaultHeight = '400px';
+
+const appsList = {
+  [vars$k.itemsFontWeight]: 'normal',
+  [vars$k.itemsTextAlign]: 'start',
+  [vars$k.hostDirection]: globalRefs$a.direction,
+  [vars$k.maxHeight]: defaultHeight,
+
+  _empty: {
+    [vars$k.minHeight]: defaultHeight,
+  },
+
+  size: {
+    xs: {
+      [vars$k.itemsFontSize]: '14px',
+    },
+    sm: {
+      [vars$k.itemsFontSize]: '14px',
+    },
+    md: {
+      [vars$k.itemsFontSize]: '16px',
+    },
+    lg: {
+      [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({
+  __proto__: null,
+  default: appsList,
+  vars: vars$k
+});
+
 const globalRefs$9 = getThemeRefs$1(globals);
 
 const compVars$3 = ListClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$l
+  componentName$m
 );
 
 const { shadowColor: shadowColor$1 } = helperRefs$1;