@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,540 +0,0 @@
-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.css"]
-        };
-    }
-    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"; }
-}