@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/illustration/data.js

@@ -0,0 +1,112 @@
+import IllustrationsData from "./illustrations-ui-kit";
+export const PATH_ILLUSTRATIONS = 'https://cdn.riverty.design/illustrations/';
+export const DEFAULT_KIT_NAME = 'UI';
+let parser;
+const data = IllustrationsData;
+const minifySvgContent = (content) => {
+    // Remove spaces at the beginning and at the end
+    let string = content.trim();
+    // Remove line breaks
+    string = string.replace(/\n|\r/g, "");
+    // Remove spaces between tags
+    string = string.replace(/>\s+</g, '><');
+    // Strip attributes from <svg> tag
+    string = string.replace(/<svg[^>]*?>/gi, '<svg>');
+    return string;
+};
+const checkEventListeners = element => {
+    // Get all inner nodes
+    const nodesArray = Array.from(element.querySelectorAll('*'));
+    // Take each node
+    const nodesFilter = nodesArray.filter((el) => {
+        // Get an array of attributes 
+        const attributes = Array.from(el.attributes);
+        // Check if there is an attribute, that starts with "on" 
+        if (attributes.filter(attr => attr.name.startsWith("on")).length > 0) {
+            return el;
+        }
+    });
+    // If nodes found -> hasEventListeners = true
+    return nodesFilter.length > 0;
+};
+const isSvgContentValid = (element) => {
+    const hasEventListeners = checkEventListeners(element);
+    const hasScriptTags = element.querySelectorAll('script').length > 0;
+    const hasLinksJSTriggers = element.querySelectorAll('[href^="javascript:"]').length > 0;
+    return !hasEventListeners && !hasScriptTags && !hasLinksJSTriggers;
+};
+// Get SVG Element based on SVG text content
+export const parseElementFromSvgContent = (content) => {
+    if (!parser) {
+        parser = new DOMParser();
+    }
+    const htmlContent = parser.parseFromString(content, 'text/html');
+    const element = htmlContent.querySelector('svg');
+    if (!element)
+        return null;
+    if (isSvgContentValid(element)) {
+        return element;
+    }
+    return null;
+};
+export const getSvgContentByName = (name) => {
+    return data[name] || null;
+};
+/**
+ * Returns the current in-memory cache object containing all loaded illustrations.
+ * Cache is stored as { [illustrationName]: svgContent }
+ */
+export const getIllustrationsData = () => data;
+/**
+ * Adds a newly fetched illustration to the in-memory cache.
+ * Stores the SVG content by illustration name to prevent redundant CDN fetches.
+ * @param name - The illustration name/identifier
+ * @param content - The SVG content as string
+ */
+export const addToIllustrationsData = (name, content) => {
+    const minifiedContent = minifySvgContent(content);
+    if (data[name] === undefined) {
+        data[name] = minifiedContent;
+    }
+};
+/**
+ * Retrieves a cached SVG illustration from memory by name.
+ * Returns null if not found in cache.
+ * Used to avoid re-fetching already loaded illustrations.
+ * @param name - The illustration name to retrieve from cache
+ * @returns SVG DOM element if found, null otherwise
+ */
+export const getSvgElementByName = (name) => {
+    const content = getSvgContentByName(name);
+    if (!content)
+        return null;
+    return parseElementFromSvgContent(content);
+};
+/**
+ * Fetches an SVG illustration from the CDN using the illustration name.
+ * Constructs URL as https://cdn.riverty.design/illustrations/{name}.svg
+ * Throws error if fetch fails or response is not OK.
+ * @param name - The illustration name to fetch from CDN
+ * @returns Promise resolving to SVG DOM element
+ * @throws Error if fetch fails or response status is not OK
+ */
+export const getSvgElementByNameFromCdn = async (name) => {
+    const source = `${PATH_ILLUSTRATIONS}${name}.svg`;
+    try {
+        const response = await fetch(source);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch illustration: ${response.status}`);
+        }
+        const content = await response.text();
+        const svgElement = parseElementFromSvgContent(content);
+        if (!svgElement) {
+            throw new Error(`No valid SVG element found in ${source}`);
+        }
+        addToIllustrationsData(name, content);
+        return svgElement;
+    }
+    catch (error) {
+        console.info(`Error fetching illustration "${name}" from CDN:`, error);
+        throw error;
+    }
+};

package/dist/collection/components/illustration/exports.js

@@ -0,0 +1,3 @@
+import { getIllustrationsData } from "./data";
+export const illustrationsData = getIllustrationsData();
+export const illustrationThemeArray = ['light', 'dark', 'auto'];

package/dist/collection/components/illustration/illustration.css

@@ -0,0 +1,52 @@
+:host {
+  display: inline-flex;
+}
+:host svg {
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+:host([theme=auto]) {
+  color-scheme: light dark;
+}
+
+:host([theme=light]) {
+  color-scheme: light;
+}
+
+:host([theme=dark]) {
+  color-scheme: dark;
+}
+
+:host([data-error=true]) .status {
+  background: var(--r-illustration--status--background, var(--r-haze-500));
+  height: var(--r-illustration--status--height, 100%);
+  display: var(--r-illustration--status--display, flex);
+  justify-content: var(--r-illustration--status--justify-content, center);
+  align-items: var(--r-illustration--status--align-items, center);
+  aspect-ratio: var(--r-illustration--status--aspect-ratio, 342/176);
+}
+:host([data-error=true]) .status-icon {
+  width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));
+  position: var(--r-illustration--status-info--position, relative);
+}
+:host([data-error=true]) .status-marker {
+  width: var(--r-illustration--status-marker--width, clamp(16px, 40%, 22px));
+  position: var(--r-illustration--status-marker--position, absolute);
+  top: var(--r-illustration--status-marker--top, 100%);
+  left: var(--r-illustration--status-marker--left, 100%);
+  transform: var(--r-illustration--status-marker--transform, translate(-65%, -65%));
+}
+
+.r-illustration {
+  display: var(--r-illustration--display, flex);
+  justify-content: var(--r-illustration--justify-content, center);
+  align-items: var(--r-illustration--align-items, center);
+  background: var(--r-illustration--background, transparent);
+  aspect-ratio: var(--r-illustration--aspect-ratio, 342/176);
+  width: var(--r-illustration--width, 100%);
+  min-width: var(--r-illustration--min-width, auto);
+  max-width: var(--r-illustration--max-width, 100%);
+  height: var(--r-illustration--height, auto);
+}