@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,112 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-: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);
-}