@bwp-web/components 1.0.9 → 1.1.1

package/dist/index.d.ts

@@ -7,4 +7,5 @@ export * from './BiampBanner';
 export * from './BiampSegmentedButton';
 export * from './BiampGlobalSearch';
 export * from './UserInitialsIcon';
+export * from './DynamicSvgIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -2770,6 +2770,156 @@ var getInitials = (name) => {
   const initials = words.filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
   return initials;
 };
+
+// src/DynamicSvgIcon/DynamicSvgIcon.tsx
+import { SvgIcon, Skeleton, Box as Box13 } from "@mui/material";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var svgCache = /* @__PURE__ */ new Map();
+function clearDynamicSvgIconCache() {
+  svgCache.clear();
+}
+function applyCurrentColor(svg) {
+  return svg.replace(/fill="(?!none|currentColor)[^"]*"/g, 'fill="currentColor"').replace(/stroke="(?!none|currentColor)[^"]*"/g, 'stroke="currentColor"');
+}
+function useDynamicSvgIcon(url, options = {}) {
+  const { replaceColors = false, onLoad, onError } = options;
+  const transform = replaceColors ? applyCurrentColor : (s) => s;
+  const [svgContent, setSvgContent] = useState6(() => {
+    const cached = svgCache.get(url);
+    return cached ? transform(cached.innerContent) : null;
+  });
+  const [svgViewBox, setSvgViewBox] = useState6(() => {
+    const cached = svgCache.get(url);
+    return cached?.viewBox ?? null;
+  });
+  const [loading, setLoading] = useState6(() => !svgCache.has(url));
+  const [error, setError] = useState6(null);
+  useEffect5(() => {
+    if (!url) {
+      setLoading(false);
+      setError("No URL provided");
+      setSvgContent(null);
+      setSvgViewBox(null);
+      return;
+    }
+    let cancelled = false;
+    const cached = svgCache.get(url);
+    if (cached) {
+      setSvgContent(transform(cached.innerContent));
+      setSvgViewBox(cached.viewBox);
+      setLoading(false);
+      setError(null);
+      onLoad?.();
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setSvgContent(null);
+    setSvgViewBox(null);
+    (async () => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(
+            `Failed to fetch SVG: ${response.status} ${response.statusText}`
+          );
+        }
+        const contentType = response.headers.get("content-type") ?? "";
+        const text = await response.text();
+        if (!text.includes("<svg") && !contentType.includes("svg")) {
+          throw new Error("Response is not an SVG");
+        }
+        const viewBoxMatch = text.match(/viewBox="([^"]*)"/);
+        const viewBox = viewBoxMatch ? viewBoxMatch[1] : null;
+        const svgMatch = text.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+        const innerContent = svgMatch ? svgMatch[1] : text;
+        svgCache.set(url, { innerContent, viewBox });
+        if (!cancelled) {
+          setSvgContent(transform(innerContent));
+          setSvgViewBox(viewBox);
+          setLoading(false);
+          onLoad?.();
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : "Failed to load SVG";
+          setError(message);
+          setLoading(false);
+          onError?.(message);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return { loading, error, svgContent, svgViewBox };
+}
+var DEFAULT_SIZE2 = 24;
+function DynamicSvgIcon({
+  url,
+  fallback,
+  width = DEFAULT_SIZE2,
+  height = DEFAULT_SIZE2,
+  replaceColors,
+  skeletonVariant = "circular",
+  skeletonAnimation = "pulse",
+  onLoad,
+  onError,
+  sx,
+  ...svgIconProps
+}) {
+  const { loading, error, svgContent, svgViewBox } = useDynamicSvgIcon(url, {
+    replaceColors,
+    onLoad,
+    onError
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx25(
+      Skeleton,
+      {
+        variant: skeletonVariant,
+        animation: skeletonAnimation,
+        sx: { width, height }
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsx25(
+      Box13,
+      {
+        sx: {
+          width,
+          height,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          flexShrink: 0,
+          "& > svg, & > .MuiSvgIcon-root": {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        children: fallback
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx25(
+    SvgIcon,
+    {
+      ...svgIconProps,
+      ...svgViewBox && { viewBox: svgViewBox },
+      sx: {
+        ...typeof sx === "object" && sx !== null && !Array.isArray(sx) ? sx : void 0,
+        width,
+        height
+      },
+      children: /* @__PURE__ */ jsx25("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+    }
+  );
+}
 export {
   BIAMP_TABLE_DEBOUNCE_DELAY,
   BiampAppDialog,
@@ -2809,10 +2959,12 @@ export {
   BiampTableToolbarSearch,
   BiampTableTruncatedCell,
   BiampWrapper,
+  DynamicSvgIcon,
   SegmentedButton,
   SegmentedButtonGroup,
   UserInitialsIcon,
   buildCsvString,
+  clearDynamicSvgIconCache,
   exportToCsv,
   getColumnVisibilityDirtyCount,
   getDefaultColumnVisibility,
@@ -2825,6 +2977,7 @@ export {
   sortingToOrder,
   toVisibilityState,
   useBiampServerSideTable,
-  useDebouncedCallback
+  useDebouncedCallback,
+  useDynamicSvgIcon
 };
 //# sourceMappingURL=index.js.map