@riverty/web-components 6.2.1 → 6.3.0

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

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

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

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

@@ -1,379 +0,0 @@
-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"; }
-}