@descope/web-components-ui 1.0.369 → 1.0.371

package/dist/index.esm.js

@@ -1,5 +1,6 @@
 import '@vaadin/button';
 import 'element-internals-polyfill';
+import DOMPurify from 'dompurify';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
 import '@vaadin/email-field';
@@ -1412,8 +1413,11 @@ const createImgEle = (src) => {
 };
 
 const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+
   const parser = new DOMParser();
-  const ele = parser.parseFromString(text, 'image/svg+xml').querySelector('svg');
+  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
   return ele;
 };
 
@@ -1449,7 +1453,7 @@ const componentName$_ = getComponentName('icon');
 
 class RawIcon extends createBaseClass({ componentName: componentName$_, baseSelector: 'slot' }) {
   static get observedAttributes() {
-    return ['src', 'fill-color'];
+    return ['src'];
   }
 
   #icon;
@@ -1474,36 +1478,23 @@ class RawIcon extends createBaseClass({ componentName: componentName$_, baseSele
 	`;
   }
 
-  get fillColor() {
-    return this.getAttribute('fill-color') === 'true';
-  }
-
   get src() {
     return this.getAttribute('src');
   }
 
   // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
   // with the value from the `st-fill` attribute
-  updateFillColor() {
-    if (this.#icon && this.fillColor) {
-      const fillCssVar = (selector) => {
-        this.querySelectorAll(selector).forEach((ele) =>
-          ele.setAttribute(
-            'fill',
-            `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-          )
-        );
-      };
-
-      fillCssVar('*[fill]');
-      fillCssVar('path');
-    }
-  }
-
-  resetIcon() {
-    if (!this.#icon) return;
-    this.innerHTML = '';
-    this.appendChild(this.#icon.cloneNode(true));
+  // eslint-disable-next-line class-methods-use-this
+  updateFillColor(node) {
+    // set fill to root node and all its relevant selectors
+    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
+
+    elementsToReplace.forEach((ele) => {
+      ele.setAttribute(
+        'fill',
+        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
+      );
+    });
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -1513,13 +1504,13 @@ class RawIcon extends createBaseClass({ componentName: componentName$_, baseSele
 
     if (attrName === 'src') {
       createIcon(this.src).then((res) => {
-        this.#icon = res;
-        this.resetIcon();
-        this.updateFillColor();
+        this.innerHTML = '';
+        if (res) {
+          const clonedNode = res.cloneNode(true);
+          this.updateFillColor(clonedNode);
+          this.appendChild(clonedNode);
+        }
       });
-    } else if (attrName === 'fill-color') {
-      this.resetIcon();
-      this.updateFillColor();
     }
   }
 }
@@ -11954,7 +11945,7 @@ const componentName$2 = getComponentName('list');
 
 class RawList extends createBaseClass({ componentName: componentName$2, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
-    return ['variant'];
+    return ['variant', 'readonly'];
   }
 
   constructor() {
@@ -12037,6 +12028,18 @@ class RawList extends createBaseClass({ componentName: componentName$2, baseSele
     observeChildren(this, () => {
       this.#handleEmptyState();
       this.#handleItemsVariant();
+      this.#handleReadOnly();
+    });
+  }
+
+  get isReadOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  #handleReadOnly() {
+    this.items.forEach((item) => {
+      if (this.isReadOnly) item.setAttribute('inert', '');
+      else item.removeAttribute('inert');
     });
   }
 
@@ -12047,6 +12050,8 @@ class RawList extends createBaseClass({ componentName: componentName$2, baseSele
 
     if (name === 'variant') {
       this.#handleItemsVariant();
+    } else if (name === 'readonly') {
+      this.#handleReadOnly();
     }
   }
 }
@@ -12164,16 +12169,51 @@ const createDynamicDataMixin =
         super.init?.();
 
         if (rerenderAttrsList.length) {
-          observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
+          observeAttributes(
+            this,
+            (attrs) => {
+              if (attrs.includes('data')) this.#handleDataAttr();
+              if (attrs.some((attr) => attr !== 'data')) this.#renderItems();
+            },
+            { includeAttrs: [...rerenderAttrsList, 'data'] }
+          );
         } else {
           this.#renderItems();
         }
       }
+
+      #handleDataAttr() {
+        const dataAttr = this.getAttribute('data');
+
+        if (!dataAttr) return;
+
+        try {
+          this.#data = JSON.parse(dataAttr);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn('Invalid JSON data', dataAttr);
+        }
+      }
+
+      attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback?.(name, oldValue, newValue);
+
+        if (newValue === oldValue) return;
+
+        if (name === 'data') {
+          try {
+            this.data = JSON.parse(newValue);
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn('Invalid JSON data', newValue);
+          }
+        }
+      }
     };
 
 const componentName$1 = getComponentName('apps-list');
 
-const limitAbbreviation = (str, limit = 3) =>
+const limitAbbreviation = (str, limit = 2) =>
   str
     .trim()
     .split(' ')
@@ -12182,12 +12222,11 @@ const limitAbbreviation = (str, limit = 3) =>
     .join('');
 
 const itemRenderer = ({ name, icon, url }, _, ref) => `
-  <a href="${url}" target="_blank" title="${url}">
+  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
     <descope-list-item>
     <descope-avatar
-      img="${icon}"
-      display-name="${name}"
-      abbr=${limitAbbreviation(name)}
+      ${icon ? `img="${icon}"` : ''}
+      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
       size=${ref.size}
     ></descope-avatar>
     <descope-text
@@ -12233,7 +12272,7 @@ const AppsListClass = compose(
   createProxy({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'empty'],
     componentName: componentName$1,
     style: () => `
       :host {
@@ -12739,7 +12778,6 @@ const button = {
   [compVars$6.outlineColor]: 'transparent',
 
   [compVars$6.iconSize]: '1.5em',
-  [compVars$6.iconColor]: 'currentColor',
 
   size: {
     xs: { [compVars$6.fontSize]: '12px' },