@descope/web-components-ui 1.0.363 → 1.0.365

package/dist/cjs/index.cjs.js

@@ -2614,11 +2614,57 @@ const inputEventsDispatchingMixin = (superclass) =>
     }
   };
 
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const isSvg = (src) => getFileExtension(src) === 'svg' || src.indexOf('image/svg+xml') > -1;
+
+const createImgEle = (src) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  const parser = new DOMParser();
+  const ele = parser.parseFromString(text, 'image/svg+xml').querySelector('svg');
+  return ele;
+};
+
+const createIcon = async (src) => {
+  try {
+    let ele;
+
+    if (isSvg(src)) {
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      ele = createImgEle(src);
+    }
+
+    ele.style.setProperty('width', '100%');
+    ele.style.setProperty('height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};
+
 /* eslint-disable no-use-before-define */
 
 const componentName$S = getComponentName('icon');
 
 class RawIcon extends createBaseClass({ componentName: componentName$S, baseSelector: 'slot' }) {
+  static get observedAttributes() {
+    return ['src', 'fill-color'];
+  }
+
+  #icon;
+
   constructor() {
     super();
 
@@ -2629,7 +2675,7 @@ class RawIcon extends createBaseClass({ componentName: componentName$S, baseSele
 				width: 100%;
 				height: 100%;
 				display: flex;
-				overflow: auto;
+				overflow: hidden;
 			}
 			:host {
 				display: inline-block;
@@ -2639,30 +2685,53 @@ class RawIcon extends createBaseClass({ componentName: componentName$S, baseSele
 	`;
   }
 
-  get items() {
-    return this.shadowRoot.querySelector('slot').assignedNodes();
+  get fillColor() {
+    return this.getAttribute('fill-color') === 'true';
   }
 
-  #onChildrenChange() {
-    // force hide icon if empty.
-    if (this.items?.length > 0) {
-      this.shadowRoot.host.style.setProperty('display', 'inline-block');
-    } else {
-      this.shadowRoot.host.style.setProperty('display', 'none');
+  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');
     }
+  }
 
-    // set fill for all inner svgs to fill var and a fallback
-    const elems = this.querySelectorAll('*[fill]');
-    elems.forEach((ele) =>
-      ele.setAttribute(
-        'fill',
-        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-      )
-    );
+  resetIcon() {
+    if (!this.#icon) return;
+    this.innerHTML = '';
+    this.appendChild(this.#icon.cloneNode(true));
   }
 
-  init() {
-    observeChildren(this, this.#onChildrenChange.bind(this));
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue === newValue) return;
+
+    if (attrName === 'src') {
+      createIcon(this.src).then((res) => {
+        this.#icon = res;
+        this.resetIcon();
+        this.updateFillColor();
+      });
+    } else if (attrName === 'fill-color') {
+      this.resetIcon();
+      this.updateFillColor();
+    }
   }
 }
 
@@ -2725,9 +2794,10 @@ const iconStyles = `
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const { host: host$n, label: label$a } = {
+const { host: host$n, label: label$a, slottedIcon } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
+  slottedIcon: { selector: () => '::slotted(descope-icon)' },
 };
 
 let loadingIndicatorStyles;
@@ -2768,6 +2838,11 @@ const ButtonClass = compose(
       labelTextDecoration: { ...label$a, property: 'text-decoration' },
       labelSpacing: { ...label$a, property: 'gap' },
       textAlign: { ...label$a, property: 'justify-content', fallback: 'center' },
+
+      iconSize: [
+        { ...slottedIcon, property: 'width' },
+        { ...slottedIcon, property: 'height' },
+      ],
     },
   }),
   clickableMixin,
@@ -2879,6 +2954,9 @@ const button = {
   [compVars$5.outlineStyle]: 'solid',
   [compVars$5.outlineColor]: 'transparent',
 
+  [compVars$5.iconSize]: '1.5em',
+  [compVars$5.iconColor]: 'currentColor',
+
   size: {
     xs: { [compVars$5.fontSize]: '12px' },
     sm: { [compVars$5.fontSize]: '14px' },