@descope/web-components-ui 1.0.368 → 1.0.370

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';
@@ -1401,7 +1402,9 @@ const getFileExtension = (path) => {
   return match ? match[1] : null;
 };
 
-const isSvg = (src) => getFileExtension(src) === 'svg' || src.indexOf('image/svg+xml') > -1;
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
 
 const createImgEle = (src) => {
   const ele = document.createElement('img');
@@ -1410,20 +1413,28 @@ 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;
 };
 
 const createIcon = async (src) => {
   try {
     let ele;
-
-    if (isSvg(src)) {
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
       const fetchedSrc = await fetch(src);
       const text = await fetchedSrc.text();
       ele = createSvgEle(text);
     } else {
+      // handle binary
       ele = createImgEle(src);
     }
 
@@ -11947,7 +11958,7 @@ const componentName$2 = getComponentName('list');
 
 class RawList extends createBaseClass({ componentName: componentName$2, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
-    return ['variant'];
+    return ['variant', 'readonly'];
   }
 
   constructor() {
@@ -12030,6 +12041,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');
     });
   }
 
@@ -12040,6 +12063,8 @@ class RawList extends createBaseClass({ componentName: componentName$2, baseSele
 
     if (name === 'variant') {
       this.#handleItemsVariant();
+    } else if (name === 'readonly') {
+      this.#handleReadOnly();
     }
   }
 }
@@ -12157,16 +12182,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(' ')
@@ -12175,12 +12235,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
@@ -12226,7 +12285,7 @@ const AppsListClass = compose(
   createProxy({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'empty'],
     componentName: componentName$1,
     style: () => `
       :host {