@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,90 @@
+import IconsData from "./riverty-kit";
+export const PATH_ICONS = 'https://cdn.riverty.design/icons/';
+export const DEFAULT_KIT_NAME = 'riverty';
+let parser;
+const data = IconsData;
+const minifySvgContent = (content) => {
+    // Remove spaces at the beginning and at the end
+    let string = content.trim();
+    // Strip fill attributes
+    string = string.replace(/\sfill="([\S]*)"/gi, '');
+    // Strip stroke attributes
+    string = string.replace(/\sstroke="([\S]*)"/gi, '');
+    // 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 stroke="currentColor">');
+    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 getSvgElementBySrc = async (src) => {
+    try {
+        // Fetch content of the SVG from source provided
+        const responce = await fetch(src);
+        if (!responce.ok) {
+            console.warn(`Error while fetching from ${src}: ${responce.status}.`);
+            return;
+        }
+        const textContent = await responce.text();
+        const svgElement = parseElementFromSvgContent(textContent);
+        return Promise.resolve(svgElement);
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+};
+export const getSvgContentByName = (name) => {
+    return data[name] || null;
+};
+// Define <SVG> element by name
+export const getSvgElementByName = name => {
+    // Get content from json
+    const svgContent = getSvgContentByName(name);
+    // Get element if content exists
+    return svgContent ? parseElementFromSvgContent(svgContent) : null;
+};
+export const getIconsData = () => {
+    return data;
+};
+export const addToIconsData = (name, value) => {
+    const content = minifySvgContent(value);
+    if (data[name] === undefined) {
+        data[name] = content;
+    }
+};

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

@@ -0,0 +1,7 @@
+import { getIconsData } from "./data";
+export const iconsData = getIconsData();
+export const iconSizeArray = ['s', 'm', 'l'];
+export const iconSizeValue = { 's': '16', 'm': '24', 'l': '32' };
+export const iconPositionArray = ['start', 'end'];
+export const iconKitArray = ['riverty', 'test'];
+export const iconVariantArray = ['button'];

package/dist/collection/components/icon/icon.css

@@ -0,0 +1,105 @@
+:host {
+  display: inline-block;
+  vertical-align: top;
+}
+
+:host([size=s]) {
+  --r-icon--width: 16px;
+  --r-icon--height: 16px;
+  line-height: 16px;
+}
+
+:host([size=m]) {
+  --r-icon--width: 24px;
+  --r-icon--height: 24px;
+  line-height: 24px;
+}
+
+:host([size=l]) {
+  --r-icon--width: 32px;
+  --r-icon--height: 32px;
+  line-height: 32px;
+}
+
+:host([size]) {
+  --r-icon--slotted--width: var(--r-icon--width, 24px);
+  --r-icon--slotted--height: var(--r-icon--height, 24px);
+}
+
+:host([variant=button]) {
+  --r-icon--target-area--display: block;
+  --r-icon--button-area--display: block;
+}
+
+:host([variant=button]:hover) {
+  --r-icon--button-area--border-color: var(--r-border-softer);
+  --r-icon--button-area--background-color: var(--r-background-interactive-hovered);
+}
+
+:host([variant=button][size=m]) {
+  --r-icon--button-area--width: 2.25rem;
+  --r-icon--button-area--height: 2.25rem;
+  --r-icon--button-area--top: calc(50% - 1.125rem)
+  --r-icon--button-area--left: calc(50% - 1.125rem) ;
+}
+
+:host([variant=button][size=l]) {
+  --r-icon--button-area--width: 2.75rem;
+  --r-icon--button-area--height: 2.75rem;
+  --r-icon--button-area--top: calc(50% - 1.375rem)
+  --r-icon--button-area--left: calc(50% - 1.375rem) ;
+}
+
+.r-icon {
+  display: var(--r-icon--display, block);
+  width: var(--r-icon--width, 24px);
+  height: var(--r-icon--height, 24px);
+  margin-left: var(--r-icon--margin-left, 0);
+  margin-right: var(--r-icon--margin-right, 0);
+  overflow: var(--r-icon--overflow, hidden);
+  color: var(--r-icon--color, inherit);
+}
+.r-icon--container {
+  display: var(--r-icon--container--display, flex);
+  align-items: var(--r-icon--container--align-items, center);
+  justify-content: var(--r-icon--container--justify-content, center);
+  fill: var(--r-icon--container--fill, rgba(0, 0, 0, 0));
+  stroke: var(--r-icon--container--stroke, inherit);
+  stroke-width: var(--r-icon--container--stroke-width, 1.5);
+  width: var(--r-icon--container--width, inherit);
+  height: var(--r-icon--container--height, inherit);
+}
+.r-icon ::slotted(svg) {
+  width: var(--r-icon--slotted--width, 100%);
+  height: var(--r-icon--slotted--height, auto);
+  vertical-align: var(--r-icon--slotted--vertical-align, top);
+  color: var(--r-icon--slotted--color, inherit);
+  stroke-width: var(--r-icon--slotted--stroke-width, 1.5);
+  fill: var(--r-icon--slotted--fill, transparent);
+}
+.r-icon--button-area {
+  position: var(--r-icon--button-area--position, absolute);
+  left: var(--r-icon--button-area--left, calc(50% - 0.75rem));
+  top: var(--r-icon--button-area--top, calc(50% - 0.75rem));
+  display: var(--r-icon--button-area--display, none);
+  width: var(--r-icon--button-area--width, 1.5rem);
+  height: var(--r-icon--button-area--height, 1.5rem);
+  background-color: var(--r-icon--button-area--background-color, transparent);
+  border-width: var(--r-icon--button-area--border-width, 1px);
+  border-style: var(--r-icon--button-area--border-style, solid);
+  border-color: var(--r-icon--button-area--border-color, transparent);
+  border-radius: var(--r-icon--button-area--border-radius, 50%);
+  box-sizing: var(--r-icon--button-area--box-sizing, border-box);
+  outline: var(--r-icon--button-area--outline, none);
+  outline-offset: var(--r-icon--button-area--outline-offset, 0);
+  box-shadow: var(--r-icon--button-area--box-shadow, 0);
+}
+.r-icon--target-area {
+  position: var(--r-icon--target-area--position, absolute);
+  left: var(--r-icon--target-area--left, calc(50% - 1.375rem));
+  top: var(--r-icon--target-area--top, calc(50% - 1.375rem));
+  display: var(--r-icon--target-area--display, none);
+  width: var(--r-icon--target-area--width, 2.75rem);
+  height: var(--r-icon--target-area--height, 2.75rem);
+  background-color: var(--r-icon--target-area--background-color, transparent);
+}

package/dist/collection/components/icon/icon.js

@@ -0,0 +1,379 @@
+import { Host, h, Fragment } from "@stencil/core";
+import { PATH_ICONS, DEFAULT_KIT_NAME, getSvgElementBySrc, getSvgElementByName, getIconsData, addToIconsData } from "./data";
+import { iconSizeValue } from "./exports";
+let iconsData = getIconsData();
+export class RIcon {
+    constructor() {
+        /** Select kit */
+        this.kit = DEFAULT_KIT_NAME;
+        /** Select one of pre-set sizes (width and height automatically selected) */
+        this.size = "m";
+        /** Customize `viewBox` of rendered icon SVG element */
+        this.viewBox = '0 0 24 24';
+        /**
+         * Quick way to set display color to one of the
+        * Riverty color tokens
+         */
+        this.color = null;
+        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 { viewBox, name } = this;
+            const sizeValue = this.size ? iconSizeValue[this.size] : null;
+            const attrs = {
+                viewBox,
+                key: name,
+                xmlns: 'http://www.w3.org/2000/svg',
+                'aria-label': this.iconAriaLabel,
+                'aria-hidden': !this.iconAriaLabel
+            };
+            if (sizeValue !== null) {
+                attrs['width'] = sizeValue;
+                attrs['height'] = sizeValue;
+            }
+            return attrs;
+        };
+        // Pass attributes from <r-icon> to <SVG>
+        this._passAttributesToSvg = () => {
+            // Search for an <svg> within <r-icon> component
+            const svgElement = this.host.querySelector('svg');
+            // If an SVG was not found inside <r-icon> 
+            // Exit function
+            if (svgElement === null)
+                return;
+            // Pass name of an attribute, get the value
+            const _getAttrValue = attrName => {
+                return (
+                // First check if an attribute is provided by <r-icon>,
+                this.host.getAttribute(attrName) ||
+                    // If not, then check if <SVG> in slot provides one
+                    svgElement.getAttribute(attrName) ||
+                    // If not, then take deafult <r-icon> value
+                    this[attrName]);
+            };
+            // Collect attribute values available 
+            // Priority of overriding: host -> svg -> default
+            // Set values of attributes of an <SVG>
+            this._setElementAttrs(svgElement, {
+                viewBox: _getAttrValue('viewBox')
+            });
+        };
+        this._defineSvgElement = async () => {
+            let svgElement = null;
+            let attrs = {};
+            // Define <SVG> element by source
+            if (this.src) {
+                // Fetch <SVG> content from the source            
+                try {
+                    svgElement = await getSvgElementBySrc(this.src);
+                }
+                catch (error) {
+                    console.info('Error while fetching:', error);
+                    return null;
+                }
+                // If <SVG> element fetched successfully
+                if (svgElement) {
+                    // Set <SVG> element attributes
+                    this._setElementAttrs(svgElement, this._defineSvgAttrs());
+                    // Extract name from src
+                    const name = this.src.split("/").pop().replace('.svg', '');
+                    if (iconsData[name] !== undefined) {
+                        return svgElement;
+                    }
+                    // Save icon content to data object
+                    addToIconsData(name, `${svgElement.outerHTML}`);
+                    // Update data object
+                    iconsData = getIconsData();
+                    return svgElement;
+                }
+                console.warn(`The icon was NOT found by src "${this.src}".`);
+            }
+            // Check name attribute
+            if (this.name) {
+                // Getting an <SVG> element by name 
+                svgElement = getSvgElementByName(this.name);
+                if (svgElement !== null) {
+                    attrs = this._defineSvgAttrs();
+                    this._setElementAttrs(svgElement, attrs);
+                    return svgElement;
+                }
+                const isDefaultKit = this.kit === DEFAULT_KIT_NAME;
+                // If element was NOT found by name 
+                // Pass source based on CDN path and name prop 
+                const source = !isDefaultKit ? `${PATH_ICONS}${this.kit}/${this.name}.svg` : `${PATH_ICONS}${this.name}.svg`;
+                try {
+                    svgElement = await getSvgElementBySrc(source);
+                }
+                catch (error) {
+                    console.info(`Error while fetching "${source}":`, error);
+                    return;
+                }
+                if (!svgElement) {
+                    console.info(`
+          No SVG Element recieved after fetching "${source}".
+        `);
+                    return;
+                }
+                // Add set of attributes to SVG
+                this._setElementAttrs(svgElement, this._defineSvgAttrs());
+                // Save icon content to data object
+                addToIconsData(this.name, `${svgElement.outerHTML}`);
+                // Update data object
+                iconsData = getIconsData();
+                return svgElement;
+            }
+        };
+    }
+    get cssColor() {
+        if (!this.color)
+            return null;
+        const varRegex = new RegExp(/^var\(/);
+        const nameRegex = new RegExp(/^--r-/);
+        const rgbRegex = new RegExp(/^rgb?.\(/);
+        const hexRegex = new RegExp(/^#(?:[0-9a-fA-F]{3}){1,2}$/);
+        const isHex = hexRegex.test(this.color);
+        const isRgb = rgbRegex.test(this.color);
+        const isVar = varRegex.test(this.color);
+        const isName = nameRegex.test(this.color);
+        return (isHex || isRgb || isVar) ? this.color : isName ? `var(${this.color})` : null;
+    }
+    componentWillLoad() {
+        // If an <SVG> within <r-icon> slot exists
+        // Collect attributes and pass them to an <SVG>
+        // According to defined priority (host -> svg -> default)
+        this._passAttributesToSvg();
+    }
+    async componentWillRender() {
+        // Define the source on an <SVG> element 
+        // Priority: src -> name -> from cdn by src based on name
+        this.svgElement = await this._defineSvgElement();
+    }
+    render() {
+        const attrs = {};
+        // Add style to the wrapper
+        attrs['style'] = {
+            color: this.cssColor
+        };
+        // If no <SVG> Element defined at this point
+        if (!this.svgElement) {
+            // Render slot content
+            return (h(Host, null, h("div", Object.assign({ class: "r-icon" }, attrs), h("slot", null))));
+        }
+        // Else paste <SVG> element into innerHTML attribute
+        // And render into <Host>
+        const containerAttrs = {
+            innerHTML: this.svgElement.outerHTML
+        };
+        return (h(Host, null, h("div", Object.assign({ class: "r-icon" }, attrs), h("i", Object.assign({ class: "r-icon--container" }, containerAttrs)), this.variant === 'button' &&
+            h(Fragment, null, h("i", { class: "r-icon--button-area" }), h("i", { class: "r-icon--target-area" })))));
+    }
+    static get is() { return "r-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get assetsDirs() { return ["bundled-icons"]; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of icon to select from the set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "src": {
+                "type": "string",
+                "attribute": "src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Source of an icon to fetch from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "kit": {
+                "type": "string",
+                "attribute": "kit",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconKit",
+                    "resolved": "\"riverty\" | \"test\"",
+                    "references": {
+                        "IconKit": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/icon/exports.ts::IconKit"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Select kit"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "DEFAULT_KIT_NAME"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSize",
+                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "references": {
+                        "IconSize": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/icon/exports.ts::IconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Select one of pre-set sizes (width and height automatically selected)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"m\""
+            },
+            "viewBox": {
+                "type": "string",
+                "attribute": "view-box",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize `viewBox` of rendered icon SVG element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'0 0 24 24'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quick way to set display color to one of the\nRiverty color tokens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"button\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/icon/exports.ts::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines UI deviations for the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "iconAriaLabel": {
+                "type": "string",
+                "attribute": "icon-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an accessible name for the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}