@riverty/web-components 6.1.0 → 6.2.0

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

@@ -0,0 +1,540 @@
+import { Host, h } from "@stencil/core";
+import { getSvgElementByNameFromCdn, getSvgElementByName, addToIllustrationsData } from "./data";
+export class RIllustration {
+    constructor() {
+        /** Defines initial width of an illustration. */
+        this.width = '342px';
+        /** Theme mode for illustration rendering */
+        this.theme = 'auto';
+        /** Error message text to display when illustration fails to load */
+        this.errorMessage = 'Failed to load illustration';
+        /** Accessibility: title for the image representing "failed-to-load" state */
+        this.emptyImageTitle = 'Failed to load illustration';
+        /** Accessibility: title for the marker representing "failed-to-load" state */
+        this.emptyMarkerTitle = 'Failed to load illustration marker';
+        this.detectedTheme = null;
+        this.error = false;
+        // SVG attributes extracted from the element
+        this.svgAttributes = {};
+        // SVG inner content (without the <svg> wrapper)
+        this.svgInnerHTML = '';
+        // Unique ID for aria references
+        this.uniqueId = `r-illustration-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this._setElementAttrs = (el, attrs = {}) => {
+            if (!el)
+                return;
+            const keys = Object.keys(attrs);
+            keys.forEach(key => {
+                const elHasNoAttr = el.getAttribute(key) === null;
+                const attrHasValue = attrs[key] !== undefined;
+                if (elHasNoAttr && attrHasValue) {
+                    el.setAttribute(key, attrs[key]);
+                }
+            });
+        };
+        // Combine attributes for <SVG>
+        this._defineSvgAttrs = () => {
+            const attrs = {
+                xmlns: 'http://www.w3.org/2000/svg',
+                role: this.ariaRole,
+                'aria-labelledby': this.ariaLabelledBy,
+                'aria-hidden': this.ariaRole === 'presentation'
+            };
+            return attrs;
+        };
+        // Pass attributes from <r-illustration> to <SVG>
+        this._passAttributesToSvg = () => {
+            // Search for an <svg> within <r-illustration> component
+            const svgElement = this.host.querySelector('svg');
+            // If an SVG was not found inside <r-illustration> 
+            // Exit function
+            if (svgElement === null)
+                return;
+            // Set values of attributes of an <SVG>
+            this._setElementAttrs(svgElement, {
+                role: this.ariaRole,
+                'aria-labelledby': this.ariaLabelledBy,
+                'aria-hidden': this.ariaRole === 'presentation'
+            });
+        };
+        this._defineIllustrationElement = async () => {
+            let svgElement = null;
+            // Check name attribute
+            if (!this.name) {
+                return null;
+            }
+            this.error = false;
+            if (this.name) {
+                // Getting an <SVG> element by name 
+                svgElement = getSvgElementByName(this.name);
+                if (svgElement !== null) {
+                    this._setElementAttrs(svgElement, this._defineSvgAttrs());
+                    return svgElement;
+                }
+                // If element was NOT found by name, fetch from CDN
+                try {
+                    svgElement = await getSvgElementByNameFromCdn(this.name);
+                }
+                catch (error) {
+                    console.info(`Error while fetching illustration "${this.name}":`, error);
+                    this.error = true;
+                    this.rFailed.emit();
+                    return null;
+                }
+                if (!svgElement) {
+                    console.info(`
+          No SVG Element received after fetching "${this.name}".
+        `);
+                    this.error = true;
+                    this.rFailed.emit();
+                    return null;
+                }
+                // Add set of attributes to SVG
+                this._setElementAttrs(svgElement, this._defineSvgAttrs());
+                // Save illustration content to data object
+                addToIllustrationsData(this.name, `${svgElement.outerHTML}`);
+                return svgElement;
+            }
+            return null;
+        };
+    }
+    get cssVars() {
+        const styles = {};
+        if (this.minWidth) {
+            styles['--r-illustration--min-width'] = this.minWidth;
+        }
+        if (this.maxWidth) {
+            styles['--r-illustration--max-width'] = this.maxWidth;
+        }
+        if (this.width) {
+            styles['--r-illustration--width'] = this.width;
+        }
+        return Object.keys(styles).length > 0 ? styles : undefined;
+    }
+    get ariaRole() {
+        // Use 'img' role when text is provided
+        // Use 'presentation' for decorative illustrations
+        return (this.svgTitle || this.svgDescription) ? 'img' : 'presentation';
+    }
+    get ariaLabelledBy() {
+        return [
+            this.svgTitle ? `${this.uniqueId}-title` : '',
+            this.svgDescription ? `${this.uniqueId}-desc` : ''
+        ].filter(Boolean).join(' ') || undefined;
+    }
+    componentWillLoad() {
+        // If an <SVG> within <r-illustration> slot exists
+        // Collect attributes and pass them to an <SVG>
+        // According to defined priority (host -> svg -> default)
+        this._passAttributesToSvg();
+        // Set up theme detection for auto mode
+        this._setupAutoThemeDetection();
+    }
+    async componentWillRender() {
+        // Define the <SVG> element from name
+        this.svgElement = await this._defineIllustrationElement();
+        // Extract SVG attributes and inner content
+        if (this.svgElement) {
+            this._extractSvgData();
+            // Emit rComplete event after successful load
+            this.rComplete.emit();
+        }
+    }
+    _extractSvgData() {
+        if (!this.svgElement)
+            return;
+        // Extract attributes from SVG element
+        const attrs = this.svgElement.attributes;
+        this.svgAttributes = {};
+        let width = null;
+        let height = null;
+        for (let i = 0; i < attrs.length; i++) {
+            const attr = attrs[i];
+            // Capture width and height for viewBox conversion
+            if (attr.name === 'width') {
+                width = attr.value;
+            }
+            else if (attr.name === 'height') {
+                height = attr.value;
+            }
+            else {
+                // Copy all other attributes
+                this.svgAttributes[attr.name] = attr.value;
+            }
+        }
+        // Convert width/height to viewBox if not already present
+        if (width && height && !this.svgAttributes['viewBox']) {
+            // Remove 'px' or other units and get numeric values
+            const numericWidth = parseFloat(width);
+            const numericHeight = parseFloat(height);
+            if (!isNaN(numericWidth) && !isNaN(numericHeight)) {
+                this.svgAttributes['viewBox'] = `0 0 ${numericWidth} ${numericHeight}`;
+            }
+        }
+        // Extract inner HTML (everything inside <svg>...</svg>)
+        this.svgInnerHTML = this.svgElement.innerHTML;
+    }
+    _buildSvgContent() {
+        let content = '';
+        // Start with the original SVG inner content
+        let svgContent = this.svgInnerHTML;
+        // Add title element if provided
+        if (this.svgTitle) {
+            // Remove existing <title> elements
+            svgContent = svgContent.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '');
+            content += `<title id="${this.uniqueId}-title">${this.svgTitle}</title>`;
+        }
+        // Add description element if provided
+        if (this.svgDescription) {
+            // Remove existing <desc> elements
+            svgContent = svgContent.replace(/<desc[^>]*>[\s\S]*?<\/desc>/gi, '');
+            content += `<desc id="${this.uniqueId}-desc">${this.svgDescription}</desc>`;
+        }
+        // Add the cleaned SVG content
+        content += svgContent;
+        return content;
+    }
+    disconnectedCallback() {
+        // Clean up observer when component is removed
+        if (this.themeObserver) {
+            this.themeObserver.disconnect();
+        }
+    }
+    _setupAutoThemeDetection() {
+        if (this.theme !== 'auto')
+            return;
+        // Detect parent theme changes (e.g., Storybook theme switcher)
+        const detectParentTheme = () => {
+            // Find closest parent with data-theme attribute
+            let element = this.host;
+            // Traverse up the DOM tree looking for data-theme
+            while (element && element !== document.documentElement) {
+                element = element.parentElement;
+                if (element && element.hasAttribute('data-theme')) {
+                    this.detectedTheme = element.getAttribute('data-theme');
+                    break;
+                }
+            }
+            // If no parent data-theme found, check document root
+            if (!this.detectedTheme) {
+                const documentTheme = document.documentElement.getAttribute('data-theme');
+                const bodyTheme = document.body.getAttribute('data-theme');
+                this.detectedTheme = documentTheme || bodyTheme;
+            }
+            const isDark = this.detectedTheme === 'dark';
+            const isLight = this.detectedTheme === 'light';
+            // Apply detected theme as data attribute for CSS to use
+            // If no explicit theme found, remove attribute to use media query fallback
+            if (isDark || isLight) {
+                this.host.setAttribute('data-detected-theme', this.detectedTheme);
+                return;
+            }
+            this.host.removeAttribute('data-detected-theme');
+        };
+        // Initial detection
+        detectParentTheme();
+        // Observe changes to document elements and all parents
+        this.themeObserver = new MutationObserver(detectParentTheme);
+        // Observe document root
+        this.themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+        // Observe body
+        this.themeObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+        // Observe all parent elements up the tree
+        let parent = this.host.parentElement;
+        while (parent && parent !== document.documentElement) {
+            this.themeObserver.observe(parent, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+            parent = parent.parentElement;
+        }
+    }
+    render() {
+        const styleAttrs = this.cssVars ? { style: this.cssVars } : {};
+        const errorStateImageTitleId = `${this.uniqueId}-error-state-image-title`;
+        const errorStateMarkerTitleId = `${this.uniqueId}--error-state-marker-title`;
+        // If error state, render fallback content
+        if (this.error) {
+            return (h(Host, { "data-error": "true" }, h("div", Object.assign({ class: "r-illustration" }, styleAttrs), h("slot", { name: "error" }, h("div", { class: "status" }, h("div", { class: "status-icon" }, h("svg", { role: "img", "aria-labelledby": errorStateImageTitleId, viewBox: "0 0 49 35", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("title", { id: errorStateImageTitleId }, this.emptyImageTitle), h("rect", { x: "3.88477", y: "3.88477", width: "40.8361", height: "26.9672", stroke: "#686868", "stroke-width": "1.60519" }), h("rect", { x: "0.802734", y: "0.802734", width: "47", height: "33.1311", stroke: "#686868", "stroke-width": "1.60519" }), h("path", { d: "M3.88477 29.3104L17.887 20.835L26.9995 25.6117", stroke: "#686868", "stroke-width": "1.60519", "stroke-linecap": "round" }), h("path", { d: "M22.377 23.1472L40.5297 10.0488L44.7212 12.7455", stroke: "#686868", "stroke-width": "1.60519", "stroke-linecap": "round" }), h("circle", { cx: "10.434", cy: "10.434", r: "2.69672", stroke: "#686868", "stroke-width": "1.60519" })), h("div", { class: "status-marker" }, h("svg", { role: "img", "aria-labelledby": errorStateMarkerTitleId, viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("title", { id: errorStateMarkerTitleId }, this.emptyMarkerTitle), h("circle", { cx: "10.4776", cy: "10.4776", r: "7.37313", fill: "#E4E2E0", stroke: "#B00C15", "stroke-width": "1.61692" }), h("circle", { cx: "10.4774", cy: "10.4774", r: "9.31343", stroke: "#E4E2E0", "stroke-width": "2.32836" }), h("path", { d: "M7.81841 13.2929L13.3154 7.7959", stroke: "#B00C15", "stroke-width": "1.61692", "stroke-linecap": "round" }), h("path", { d: "M13.4062 13.2929L7.90918 7.7959", stroke: "#B00C15", "stroke-width": "1.61692", "stroke-linecap": "round" })))))))));
+        }
+        // If no <SVG> Element defined at this point
+        if (!this.svgElement) {
+            // Render slot content
+            return (h(Host, null, h("div", Object.assign({ class: "r-illustration" }, styleAttrs), h("slot", null))));
+        }
+        // Determine the current effective theme
+        const effectiveTheme = this.theme === 'auto'
+            ? this.detectedTheme : this.theme;
+        // Render SVG with wrapper element to ensure CSS variables cascade
+        return (h(Host, null, h("div", Object.assign({ class: "r-illustration" }, styleAttrs), h("svg", Object.assign({}, this.svgAttributes, { "data-theme": effectiveTheme, ref: (el) => el && (el.innerHTML = this._buildSvgContent()) })))));
+    }
+    static get is() { return "r-illustration"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["illustration.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["illustration.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustrationName",
+                    "resolved": "string",
+                    "references": {
+                        "IllustrationName": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/illustration/exports.ts::IllustrationName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of illustration to select from the set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines initial width of an illustration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'342px'"
+            },
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustrationTheme",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {
+                        "IllustrationTheme": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/illustration/exports.ts::IllustrationTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme mode for illustration rendering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'auto'"
+            },
+            "minWidth": {
+                "type": "string",
+                "attribute": "min-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width constraint for responsive behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width constraint for responsive behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "svgTitle": {
+                "type": "string",
+                "attribute": "svg-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional title element to be added inside the SVG for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "svgDescription": {
+                "type": "string",
+                "attribute": "svg-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description element to be added inside the SVG for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message text to display when illustration fails to load"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Failed to load illustration'"
+            },
+            "emptyImageTitle": {
+                "type": "string",
+                "attribute": "empty-image-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessibility: title for the image representing \"failed-to-load\" state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Failed to load illustration'"
+            },
+            "emptyMarkerTitle": {
+                "type": "string",
+                "attribute": "empty-marker-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessibility: title for the marker representing \"failed-to-load\" state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Failed to load illustration marker'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "detectedTheme": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rFailed",
+                "name": "rFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when illustration fails to load"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "rComplete",
+                "name": "rComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when illustration completes loading"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/illustration/illustration.scss

@@ -0,0 +1,56 @@
+:host {
+  display: inline-flex;
+  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);
+  }
+
+  .status-icon {
+    width: var(--r-illustration--status-info--width, clamp(42px, 18%, 72px));
+    position: var(--r-illustration--status-info--position, relative);
+  }
+
+  .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);
+}